Microsemi AN1256 Web ක්රමලේඛක යෙදුම
හැඳින්වීම
JSON (JavaScript Object Notation) යනු විවෘත සම්මතයකි file දත්ත හුවමාරු කිරීම සඳහා මිනිසුන්ට කියවිය හැකි පෙළ භාවිතා කරන ආකෘතිය. එය අසමමුහුර්ත බ්රවුසරය/සේවාදායක සන්නිවේදනය සඳහා භාවිතා කරන පොදු දත්ත ආකෘතියකි.
නව සඳහා web පිටු නිර්මාණය, JSON ආකෘතිය මුල් AJAX ශෛලිය සඳහා ආදේශකයක් විය හැකිය. AJAX හා සසඳන්න, JSON භාවිතා කරමින් Web ක්රියාත්මක කිරීම පහසු සහ සරලයි. සංවර්ධකයා පමණක් අවධානය යොමු කළ යුතුය web පිටු නිර්මාණය සහ Web JSON ප්රවේශ ක්රමයට දැනටමත් සහය දක්වන බැවින් හසුරුවන්න ක්රියාත්මක කිරීම මඟ හැරිය හැක WebStaX මෘදුකාංග මොඩියුල.
මෙම ලේඛනය සංවර්ධනය කිරීමට අවශ්ය මෘදුකාංග ඉංජිනේරුවරයා සඳහා ක්රමලේඛක මාර්ගෝපදේශය දක්වයි Web JSON හරහා පිටුව. විස්තර ක්රියා පටිපාටි සහ උදාamples ද පහත කොටස් වලට ඇතුලත් කර ඇත.
JSON දත්ත ප්රවේශ ප්රවාහය
ඉවරයිview
සේවාලාභියා (බ්රවුසරය) වෙතින් HTTP සම්බන්ධතාවයක් ආරම්භ කරන ලද JSON දත්ත ප්රවේශ ප්රවාහය මෙන්න. සේවාදායකය(DUT) පැත්තෙන් ලැබුණු JOSN දත්ත අනුව HTML වගුව ගතිකව නිර්මාණය වේ.
රූපය 1. සේවාදායකයා සහ සේවාදායකය අතර ප්රවේශ ප්රවාහය
JSON දත්ත ඉල්ලීම/ප්රතිචාරය
JSON ඉල්ලීම් පැකට්ටුව HTTP ඉල්ලීම් පළ කිරීමේ ක්රමය මත පදනම් වන අතර අන්තර්ගතය MSCC JSON ආකෘතිය අනුගමනය කළ යුතුය.
- JSON වාක්ය ඛණ්ඩය ඉල්ලන්න:{"ක්රමය":" ””පරම”:[ ], "id:"jsonrpc"}
- ප්රතිචාර JSON සින්ටැක්ස්: {"දෝෂය": "ප්රතිඵල": , “id:”jsonrpc”}
පහත ස්නැප්ෂොට් බ්රවුසරය සහ DUT අතර JSON අන්තර්ගතය පෙන්වයි.
රූපය 2. සේවාලාභියාගෙන් HTTP ඉල්ලීමේ සැණරුව
රූපය 3. සේවාදායකයෙන් HTTP ප්රතිචාරයේ සැණරුව
MSCC JSON පිරිවිතර
ක්රමය, පරාමිතිය, විස්තරය සහ යනාදිය ඇතුළුව සම්පූර්ණ JSON තොරතුරු ලබා ගැනීමට “http:// ටයිප් කරන්න. /json_spec" ඔබගේ බ්රවුසරයේ ලිපින තීරුවේ. JSON ක්රමයේ නම “jsonRpc.status.introspection.specific.inventory.get” හරහා තවත් ප්රවේශ ක්රමයක් ඇත, එය විශේෂිත ක්රමයක් සඳහා භාවිතා වේ.
රූපය 4. JSON පිරිවිතරයේ සැණරුව web පිටුව
Web රාමුව
ද Web රාමුව තුළ WebStaX මෘදුකාංගය විවෘත මූලාශ්ර MooTools මත පදනම් වේ. එය MIT බලපත්රය සහිත JavaScript උපයෝගිතා එකතුවකි. (http://mootools.net/license.txt) මෙනු තීරුව සහ බොහෝ web පිටු රාමුව මත පදනම් වේ. AJAX සහ JSON ඇල්ගොරිතම දෙකම දැනටමත් එහි උපයෝගිතා තුළ ඒකාබද්ධ කර ඇත.
ඊට අමතරව, WebStaX මෘදුකාංගය JSON සඳහා ප්රයෝජනවත් වන අනෙකුත් උපයෝගිතා සපයයි web පිටු නිර්මාණය.
- json.js - JSON වාක්ය ඛණ්ඩය සමඟ ගතික දත්ත සම්ප්රේෂණය/ලැබීම සඳහා භාවිතා කරන්න.
- dynforms.js - HTML වගුව ගතිකව නිර්මාණය කිරීම සඳහා භාවිතා කරන්න.
- Validate.js - HTML පෝරමය වලංගු කිරීම සඳහා භාවිතා කරන්න.
සම්පූර්ණ JavaScript පුස්තකාල මූලාශ්ර ගස් නාමාවලිය යටතේ පිහිටා ඇත: webstax2\ vtss_appl\web\html\lib.
JSON සඳහා මාර්ගෝපදේශය Web පිටු නිර්මාණය
මෙම කොටස සැලසුම් කරන්නේ කෙසේද යන්න මඟ පෙන්වයි web MSCC JavaScript පුස්තකාල මත පදනම් වූ පිටුව. අපි Mirror ගෝලීය වින්යාසය භාවිතා කරමු web පිටුව හිටපු ලෙසampමෙතන. අසමමුහුර්ත සන්නිවේදනය HTTP JSON ප්රවේශ ක්රමය මත පදනම් වන අතර සියලුම ගෝලීය වින්යාස කළ පරාමිති එක් ගතික HTML වගුවක ලැයිස්තුගත කර ඇත.
ද web පිටු පිරිසැලසුම පහත ලැයිස්තුගත කර ඇති අතර සම්පූර්ණ මූල කේතය මූලාශ්ර ගස් නාමාවලිය යටතේ පිහිටා ඇත: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. වඩාත් සාමාන්ය වීමට web පිටු යොමුව, උපග්රන්ථ කොටස බලන්න.
දර්පණ සහ RMirror සැකසුම් වගුව
රූපය 5. Exampගෝලීය වින්යාසගත වගුවේ le
සංස්කරණය කරන්න Web පිටුව
HTML ශීර්ෂකය
HTML හි අවශ්ය JS පුස්තකාල ඇතුළත් කරන්න tag.
ගතික වගු සම්පත ආරම්භ කරන්න
- HTML ලේඛනය සූදානම් වූ විට, ගතික වගු සම්පත ආරම්භ කිරීමට DynamicTable() අමතන්න.
- JSON දත්ත ලැබීමෙන් පසු ගතික වගුව සෑදීමට DynamicTable() භාවිතා කරයි.
- පසුව එය JSON විධාන ප්රවාහය ආරම්භ කිරීමට requestUpdate අමතනු ඇත.
- window.addEvent('domready', function() {
- // JSON දත්ත ලබාගැනීමට/සම්ප්රේෂණය කිරීමට වගු සිරුර සහිත පෝරමයක් සාදන්න
- myDynamicTable = නව DynamicTable ("myTableContent", "config",plusRowCtrlBar");
4 - requestUpdate();
- });
JSON දත්ත ඉල්ලීම/ප්රතිචාරය
- HTML ලේඛනය සූදානම් වූ විට, වින්යාස කළ සැසි පිළිබඳ තොරතුරු ලබා ගැනීමට JSON ඉල්ලීම “mirror.config.session.get” යැවීමට requestJsonDoc() භාවිතා කරන්න.
- “mirror.capabilities.get” සඳහා JSON දත්ත ලැබුණු පසු, නැවත ඇමතුම් ශ්රිතය requestUpdate() සකසනු ලැබේ. ශ්රිතය requestUpdate වත්මන් වින්යාසය ලබා ගැනීමට “mirror.config.session.get” අමතනු ඇත. වත්මන් වින්යාසය ලැබුණු විට, පෙන්විය යුතු වගුව තැනීමට ශ්රිත processUpdate කැඳවනු ලැබේ.
- කාර්යය ඉල්ලීම යාවත්කාලීන ()
- {
- // වගු අන්තර්ගතය ප්රතිසාධනය කරන්න
- myDynamicTable.restore();
5 - // මෙම වගුව JSON දත්ත දෙකක්.
- requestJsonDoc("mirror.config.session.get", null, processUpdate, "config");
- }
ලැබුණු JSON දත්ත සකසන්න
- JSON දත්ත ලැබීමෙන් පසු ගතික වගුව සැකසීමට processUpdate() ශ්රිතය භාවිතා කරයි.
- වගු පේළි එකතු කිරීමට addRows() භාවිතා කරයි. myDynamicTable.update() පිරිසැලසුම
වගු පේළි වල දත්ත අනුව HTML වගුව.
- කාර්යය ක්රියාවලිය යාවත්කාලීන (recv_json, නම)
- {
- // දත්ත නොලැබුනේ නම් ක්රියාවලිය නොසලකා හරින්න
- නම් (!recv_json) {
- අනතුරු ඇඟවීම ("ගතික දත්ත ලබා ගැනීම අසාර්ථක විය.");
- ආපසු;
- }
- // ලැබුණු JSON දත්ත සුරකින්න
- myDynamicTable.saveRecvJson ("config", recv_json);
- // මේස පේළි එකතු කරන්න
- var table_rows = addRows(recv_json);
- myDynamicTable.addRows(table_rows);
- // මෙම ගතික වගුව යාවත්කාලීන කරන්න
- myDynamicTable.update();
- // ටයිමරය නැවුම් කරන්න
- var autorefresh = document.getElementById ("autorrefresh");
- (ස්වයංක්රීය නැවුම් && autorefresh.පරික්ෂා කර ඇත්නම්) {
- නම් (timeID) {
- clearTimeout (timerID);
- }
- timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
- }
- }
මේස පේළි එකතු කරන්න
- addRows() ශ්රිතයේ, වගු පේළියේ එක් එක් ගෝලීය වින්යාස කළ පරාමිතිය පිරවීමට අපි JSON ආකෘතිය භාවිතා කරමු.
- සියලුම HTML ක්ෂේත්ර JSON අරාවේ (“වගු_පේළි”) ලැයිස්තුගත කර ඇති අතර වගු ක්ෂේත්රයේ වාක්ය ඛණ්ඩය පහත දැක්වේ.
වාක්ය ඛණ්ඩ:
වගු_පේළි:[ , ,… ] : { , ,… }
: {“වර්ගය”: , "පරම":[ , ,…, ]}
- මෙම අවස්ථාවෙහිදී, සෑම පේළියකටම ක්ෂේත්ර පහක් ඇත: “සැසි හැඳුනුම්පත”, “ප්රකාරය”, “වර්ගය”, “VLAN ID” සහ “Reflector Port” සඳහාample,
| සැසි හැඳුනුම්පත (නම ක්ෂේත්රය: int32_t) | 1 (කැඩපත් සැසියේ හැඳුනුම්පත) |
| මාදිලිය (නම ක්ෂේත්රය: vtss_bool_t) | ඇත්ත (කැඩපත් සැසිය සක්රීය කර ඇති බව අදහස් වේ) |
| ටයිප් කරන්න (නම ක්ෂේත්රය: ගණන් කිරීම
{mirror, rMirrorSource, rMirrorDestination} |
RMirror මූලාශ්රය (මෙය දුරස්ථ දර්පණ සැසියක මූලාශ්රය වේ |
| VLAN හැඳුනුම්පත (නම ක්ෂේත්රය: uint16_t) | 200 (දර්පණය සඳහා භාවිතා කරන vlan) |
| පරාවර්තක වරාය (නම ක්ෂේත්රය: vtss_ifindex_t) | Gi 1/1 (දර්පණ සහිත ගමනාගමනය යවන වරාය |
- myDynamicTable.addRows() JSON දත්ත HTML ආකෘතියට පරිවර්තනය කර HTML වගුව ප්රතිදානය කරයි.
- කාර්යය addRow(යතුර, val)
- {
- var none_map_val = 0xFFFFFFFF, none_map_text = "කිසිවක් නැත", none_interface_text = "NONE";
- var tunnel_mode_suffix = val.TunnelMode == “useglobal” ? ” (” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;
- var පේළිය = {ක්ෂේත්ර:[
- {type:”link”, params:[“cr”, “mirror.htm?session_id=” + යතුර, යතුර]},
- {type:”text”, params:[oTMode[oVMode.indexOf(val.Mode)], “c”]},
- {type:"text", params:[oTType[oVType.indexOf(val.Type)], "c"]},
- {type:"text", params:[val.Type == "mirror" ? "-":
val.RMirrorVlan, “c”]}, - {type:”text”, params:[val.Type == “rMirrorSource” ?
val.ReflectorPort : "-" , "c"]} - ]};
- ආපසු පේළිය;
- }
- කාර්යය addRows(recv_json)
- {
- var පේළිය, හිස්_කොල්ස්පන් = 7;
- var table_rows = නව අරාව();
- // වගු ශීර්ෂය එක් කරන්න
- addHeader(වගු_පේළි);
- // තනි පේළියක් එකතු කරන්න
- Object.each(recv_json, ශ්රිතය(වාර්තාව) {
- table_rows.push(addRow(record.key, record.val));
- });
- ආපසු වගු_පේළි;
- }
Web උදව් පිටුව
සඳහා web උදව් පිටු සැලසුම් කිරීම, උපකාරක විස්තරය JSON පිරිවිතර වෙත යොමු විය හැක, විස්තර පෙළ JSON ප්රතිදානයට අනුකූල විය හැකි අතර අතිරික්ත විස්තර අඩු කිරීමට උපකාරී වේ. උදාample මෙහි dhcp6 රිලේ වින්යාසයෙන් ලබාගෙන ඇත.
මූලාශ්රයේ අධි-සබැඳිය file
උපකාරය පවරන්න file එහි මූලාශ්රයේ පිහිටීම file HTML tag. සඳහා "help_page" යන ස්ථාවර විචල්ය නාමය භාවිතා වේ web උපකාර පිටු පැවරුම.
- // උදව් පිටු මැජික්
- var help_page = "/help/help_xxx.htm";
JSON පිරිවිතරයෙන් HTML ක්ෂේත්ර විස්තරය යාවත්කාලීන කරන්න
- භාවිතා කරන්න හෝ HTML tag HTML වගු විස්තරය ප්රකාශ කිරීමට සහ සඳහා අනන්ය ID එකක් ලබා දී ඇත tag.
- HTML ලේඛනය සුදානම් වූ විට, සම්පූර්ණ JSON පිරිවිතර ලබා ගැනීමට loadXMLDoc() අමතන්න හෝ JSON ක්රම නාමයෙන් නිශ්චිත ක්රම විස්තරය ලබා ගන්න “jsonRpc.status.introspection.specific.inventory.get”.
- වගු විස්තරය යාවත්කාලීන කිරීමට processTableDesc() භාවිතා කරන අතර වගු පරාමිති විස්තරය යාවත්කාලීන කිරීමට processUpdate() භාවිතා කරයි.
- processUpdate(), නිශ්චිත මූලද්රව්ය නම්වලට ගැළපෙන JSON මූලද්රව්ය යාවත්කාලීන කිරීමට updateTableParamsDesc() අමතන්න.
- යාවත්කාලීන කරන්න හෝ tag මූලද්රව්ය විස්තරය අනුව අභ්යන්තර HTML.
- /* HTML විස්තර ක්ෂේත්ර යාවත්කාලීන කරන්න */
- කාර්යය processTableDesc(req) {
- නම් (!req.responseText) {
- ආපසු;
- }
- var json_spec = JSON.decode(req.responseText);
- // වගු විස්තරය යාවත්කාලීන කරන්න
- $("TableDesc").innerHTML = getJsonSpecElement(json_spec, "groups", "dhcp6_relay.config.vlan").විස්තරය;
- }
- /* HTML වගු පරාමිති විස්තරය යාවත්කාලීන කරන්න */
- ශ්රිත ක්රියාවලිය යාවත්කාලීන (recv_json) {
- // වගු පරාමිති විස්තරය යාවත්කාලීන කරන්න
- var param_names = [
- {
- "අන්වර්ථය": "අතුරු මුහුණත",
- "වර්ගය": "vtss_ifindex_t",
- "නම": "vlanInterface",
- "උච්චය": "."
- },
- {
- "අන්වර්ථය": "රිලේ අතුරුමුහුණත",
- "වර්ගය": "vtss_ifindex_t",
- "නම": "relayVlanInterface",
- "උච්චය": ". රිලේ කිරීම සඳහා භාවිතා කරන අතුරු මුහුණතේ id.”
- },
- {
- "අන්වර්ථය": "රිලේ ගමනාන්තය",
- "වර්ගය": "mesa_ipv6_t",
- "නම": "relay_destination",
- "උච්චය": ". ඉල්ලීම් කරන DHCPv6 සේවාදායකයේ IPv6 ලිපිනය වෙත යොමු කළ යුතුය. පෙරනිමි අගය 'ff05::1:3' mans 'ඕනෑම DHCP සේවාදායකයක්'.”
- }
- ];
- updateTableParamsDesc("TableParamsDesc", recv_json, "dhcp6_relay.config.vlan.get", param_names);
- }
- /* JSON පිරිවිතර ලබා ගන්න */
- window.addEvent('domready', ශ්රිතය () {
- loadXMLDoc ("/json_spec", processTableDesc);
- requestJsonDoc("jsonRpc.status.introspection.specific.inventory.get", "dhcp6_relay.config.vlan", processUpdate);
- });
මෙනු තීරුවේ අධි-සබැඳිය
- මෙනු තීරුවේ HTML මූල කේතය ජනනය කර ඇත file webstax2\vtss_appl\web\ menu_default.cxx.
- මේකේ තියෙන දේවල් Edit කරන්න file සඳහා Web පිටුව අධි-සබැඳිය.
- #නිර්වචනය කර ඇත්නම් (VTSS_SW_OPTION_DHCP6_RELAY)
- ITEM(" Relay,dhcp6_relay.htm");
- #endif //VTSS_SW_OPTION_DHCP6_RELAY
සටහන
මෙනු තීරුවේ කණ්ඩායම් මට්ටම තීරණය කිරීමට භාවිතා කරන ITEM(“”) හි ඇති අවකාශ අක්ෂර ගණන බව සලකන්න. මෙම අවස්ථාවේ දී, සියලු web පිටු "DHCPv6" කණ්ඩායම යටතේ ඇත.
රූපය 6. උදාampගෝලීය වින්යාසගත වගුවේ le
උපග්රන්ථය
දර්ශීය web පිටු
සාමාන්ය කිහිපයක් තිබේ web යොමු නිර්මාණය සඳහා පිටු භාවිතා කළ හැක. එක් අතිරේක හිටපුample මෙහි පෙන්වන්නේ vtss_appl\mirror\html\mirror.htm හි ඇති තනි දර්පණ සැසියක වින්යාසයයි.
ද web පිටුව තනි දර්පණ සැසියක් සඳහා සවිස්තරාත්මක වින්යාසය සපයයි. සියලුම වින්යාසගත පරාමිතීන් ලැයිස්තුගත කර ඇත.
- වත්මන් වින්යාසය යෙදීම සඳහා "සුරකින්න" බොත්තම ක්ලික් කරන්න.
- වත්මන් වින්යාසය නැවත සැකසීමට "නැවත පිහිටුවන්න" බොත්තම ක්ලික් කරන්න.
- නැවත පැමිණීමට "අවලංගු කරන්න" ක්ලික් කරන්නview දර්පණ සැසි
Mirror&RMirror වින්යාසය
ගෝලීය සැකසුම්
මූලාශ්ර VLAN(s) වින්යාසය
වරාය වින්යාසය
රූපය 7. Exampදර්පණ සැසියේ සවිස්තරාත්මක වින්යාසය
"සුරකින්න", "නැවත පිහිටුවන්න" සහ "අවලංගු කරන්න" බොත්තම් html කේතය මගින් එකතු කරනු ලැබේ:
JSON විධාන ප්රවාහය
මෙම පිටුවට පියවර දෙකක විධාන ප්රවාහයක් අවශ්ය වේ:
- මුලින්ම එය "mirror.capabilities.get" ක්රමය සමඟ උපාංගයේ හැකියාවන් ලබා ගැනීමට අවශ්ය වේ. හැකියාවන් වෙනස් නොවන අතර එක් වරක් පමණක් කියවිය යුතුය.
- එවිට එය "mirror.config.session.get", "port.status.get" සහ "topo.config.stacking.get" ගොඩගැසීමේදී ක්රම භාවිතා කරමින් උපාංගයේ වත්මන් වින්යාසය ලබා ගත යුතුය.
“mirror.capabilities.get” හි ඇමතුම “domready” ඉසව්වෙන් ආරම්භ කරන අතර ප්රතිඵලය requestUpdate ශ්රිතය මඟින් හැසිරවීමට වින්යාස කර ඇත.
ඉල්ලීම යාවත්කාලීන කිරීම "mirror.config.session.get" හි ඇමතුම ආරම්භ කරනු ඇත,
“port.status.get” සහ “topo.config.stacking.get” ගොඩගැසීමේදී සහ මෙම ඇමතුම්වල ප්රතිඵල සකස්කරනු ලබන්මේ ශ්රිතය මඟින් හැසිරවීමට වින්යාස කර ඇත.
ශ්රිතය සූදානම් කිරීමේ යාවත්කාලීනය සියලු ප්රතිඵල රැස් කරනු ඇති අතර, සියල්ල ලැබුණු විට පමණක් එය ශ්රිත ක්රියාවලිය යාවත්කාලීන කිරීම ලෙස හඳුන්වනු ලබන අතර එය පෙන්විය යුතු වගු සාදනු ඇත. web.
යොමු කිරීම්
- විකිපීඩියා JavaScript https://en.wikipedia.org/wiki/JavaScript
- JSON https://www.json.org/
- MoonTools https://mootools.net/
ලේඛන / සම්පත්
 |
Microsemi AN1256 Web ක්රමලේඛක යෙදුම [pdf] පරිශීලක මාර්ගෝපදේශය AN1256, AN1256 Web ක්රමලේඛක අයදුම්පත, Web ක්රමලේඛක යෙදුම, යෙදුම |
