Microsemi AN1256 Web Ծրագրավորողների հավելված

Ներածություն

JSON (JavaScript Object Notation) բաց ստանդարտ է file ձևաչափ, որն օգտագործում է մարդու կողմից ընթեռնելի տեքստ տվյալների փոխանակման համար: Դա սովորական տվյալների ձևաչափ է, որն օգտագործվում է բրաուզերի/սերվերի ասինխրոն հաղորդակցության համար:
Նորի համար web էջի ձևավորում, JSON ձևաչափը կարող է փոխարինել բնօրինակ AJAX ոճին: Համեմատեք AJAX-ի հետ, JSON-ի օգտագործումը դարձնում է Web իրականացումն ավելի հեշտ և պարզ: Մշակողը պետք է միայն կենտրոնանա web էջի ձևավորում և Web կարգավորիչի ներդրումը կարող է բաց թողնել, քանի որ JSON մուտքի մեթոդն արդեն աջակցվում է յուրաքանչյուրում WebStaX ծրագրային մոդուլներ.
Այս փաստաթուղթը ներկայացնում է ծրագրավորողների ուղեցույցը ծրագրային ապահովման ինժեների համար, ով պետք է մշակի այն Web էջը JSON-ի միջոցով: Մանրամասն ընթացակարգերը և օրինակamples ներառված են նաև հետևյալ բաժիններում:

JSON տվյալների հասանելիության հոսք

Ավարտվել էview
Ահա JSON տվյալների հասանելիության հոսքը, որով HTTP կապը սկսվում է հաճախորդից (զննարկիչից): HTML աղյուսակը ստեղծվում է դինամիկ կերպով՝ համաձայն սերվերի (DUT) կողմից ստացված JOSN տվյալների:

Նկար 1. Մուտքի հոսք հաճախորդի և սերվերի միջև

Պահանջել/Պատասխանել JSON տվյալներին
JSON հարցումների փաթեթը հիմնված է HTTP հարցման գրառման մեթոդի վրա, և բովանդակությունը պետք է համապատասխանի MSCC JSON ձևաչափին:

• Պահանջել JSON շարահյուսություն.{«մեթոդ»:» », «պարամս»:[ ], “id:”jsonrpc”}
• Պատասխան JSON շարահյուսություն. {“սխալ”: «արդյունք»: , “id:”jsonrpc”}

Հետևյալ նկարները ցույց են տալիս JSON բովանդակությունը բրաուզերի և DUT-ի միջև:

Նկար 2. Հաճախորդից HTTP հարցման պատկերը

Նկար 3. HTTP պատասխանի պատկերը սերվերից

MSCC JSON ճշգրտում
JSON-ի ամբողջական տեղեկատվությունը, ներառյալ մեթոդը, պարամետրը, նկարագրությունը և այլն ստանալու համար: Մուտքագրեք «http:// /json_spec» ձեր բրաուզերի հասցեի տողում: Կա մեկ այլ մուտքի մեթոդ JSON մեթոդի անունով «jsonRpc.status.introspection.specific.inventory.get», այն օգտագործվում է կոնկրետ մեթոդի համար:

Նկար 4. JSON հստակեցման լուսանկար web էջ

Web շրջանակը

Այն Web շրջանակում WebStaX ծրագիրը հիմնված է բաց կոդով MooTools-ի վրա: Սա JavaScript կոմունալ ծառայությունների հավաքածու է MIT լիցենզիայով: (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 էջերի հղում, տես հավելվածի բաժինը:

Mirror& RMMirror Confiquration Աղյուսակ

Նկար 5. Exampգլոբալ կազմաձևված աղյուսակի le

Խմբագրել Web էջ

HTML վերնագիր
Ներառեք JS գրադարանները, որոնք անհրաժեշտ են HTML-ում tag.

Նախաձեռնեք դինամիկ աղյուսակի ռեսուրսը

• Երբ HTML փաստաթուղթը պատրաստ է, զանգահարեք DynamicTable() դինամիկ աղյուսակի ռեսուրսը սկզբնավորելու համար:
• DynamicTable()-ն օգտագործվում է դինամիկ աղյուսակ ստեղծելու համար՝ JSON տվյալները ստանալուց հետո:
• Այնուհետև այն կկանչի requestUpdate՝ JSON հրամանի հոսքը սկսելու համար:

1. window.addEvent('domready', function() {
2. // Ստեղծեք ձև աղյուսակի մարմնով JSON տվյալների ստացման/փոխանցման համար
3. myDynamicTable = նոր DynamicTable («myTableContent», «config», «plusRowCtrlBar»);
   4
4. requestUpdate();
5. });

Պահանջել/Պատասխանել JSON տվյալներին

• Երբ HTML փաստաթուղթը պատրաստ է, օգտագործեք requestJsonDoc()՝ JSON հարցումն ուղարկելու «mirror.config.session.get»՝ կազմաձևված նիստերի մասին տեղեկություններ ստանալու համար:
• «mirror.capabilities.get»-ի JSON տվյալները ստանալուց հետո կմշակվի հետադարձ զանգի requestUpdate() գործառույթը: Այնուհետև requestUpdate ֆունկցիան կկանչի «mirror.config.session.get»՝ ընթացիկ կոնֆիգուրացիան ստանալու համար: Երբ ստացվում է ընթացիկ կոնֆիգուրացիան, գործընթացի թարմացում ֆունկցիան կանչվում է ցուցադրվող աղյուսակը կառուցելու համար:

1. ֆունկցիայի request Update()
2. {
3. // Վերականգնել աղյուսակի բովանդակությունը
4. myDynamicTable.restore();
   5
5. // Այս աղյուսակը երկու JSON տվյալներ.
6. requestJsonDoc («mirror.config.session.get», null, processUpdate, «config»);
7. }

Մշակել ստացված JSON տվյալները

• ProcessUpdate() ֆունկցիան օգտագործվում է դինամիկ աղյուսակը դասավորելու համար JSON տվյալները ստանալուց հետո:
• AddRows()-ն օգտագործվում է աղյուսակի տողեր ավելացնելու համար: myDynamicTable.update() դասավորությունը
  HTML աղյուսակ՝ ըստ աղյուսակի տողերի տվյալների:

1. ֆունկցիայի գործընթացի թարմացում (recv_json, անուն)
2. {
3. // Անտեսել գործընթացը, եթե տվյալներ չեն ստացվել
4. եթե (!recv_json) {
5. զգուշացում («Դինամիկ տվյալների ստացումը ձախողվեց»);
6. վերադարձ;
7. }
8. // Պահպանեք ստացված JSON տվյալները
9. myDynamicTable.saveRecvJson («config», recv_json);
10. // Ավելացնել աղյուսակի տողեր
11. var table_rows = addRows (recv_json);
12. myDynamicTable.addRows (աղյուսակ_տողեր);
14. // Թարմացրեք այս դինամիկ աղյուսակը
15. myDynamicTable.update();
17. // Թարմացման ժամանակաչափ
18. var autorfresh = document.getElementById («autorefresh»);
19. if (autorefresh && autorfresh.checked) {
20. եթե (ժմչփի ID) {
21. clearTimeout (ժմչփի ID);
22. }
23. timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
24. }
25. }

Ավելացնել աղյուսակի տողեր

• addRows() ֆունկցիայի մեջ մենք օգտագործում ենք JSON ձևաչափը՝ աղյուսակի տողում յուրաքանչյուր գլոբալ կազմաձևված պարամետրը լրացնելու համար։
• Բոլոր HTML դաշտերը թվարկված են JSON զանգվածում («table_rows»), իսկ աղյուսակի դաշտի շարահյուսությունը՝ ստորև:

Շարահյուսություն:
աղյուսակ_տողեր:[ , ,… ] :{ , ,… }
: {“տեսակ”: , “params”:[ , ,…, ]}

• Այս դեպքում յուրաքանչյուր տող ունի հինգ դաշտ՝ «Session ID», «Mode», «Type», «VLAN ID» և «Reflector Port» Նախ.ampլե,

Նստաշրջանի ID (Անվան դաշտը՝ int32_t)	1 (Հայելային նստաշրջանի ID)
Ռեժիմ (Անվան դաշտը՝ vtss_bool_t)	ճշմարիտ (Նշանակում է, որ հայելային նիստը միացված է)
Տեսակ (Անվան դաշտը. թվարկում {mirror, rMirrorSource, rMirrorDestination}	RMMirror Աղբյուր (սա հեռավոր հայելային նստաշրջանի աղբյուրն է
VLAN ID (Անվան դաշտը՝ uint16_t)	200 (վլան, որն օգտագործվում է հայելու համար)
Ռեֆլեկտոր Պորտ (Անվան դաշտը՝ vtss_ifindex_t)	Գի 1/1 (Այն նավահանգիստը, որին ուղարկվում է հայելային տրաֆիկը

• myDynamicTable.addRows()-ը JSON տվյալները կվերափոխի HTML ձևաչափի և դուրս կբերի HTML աղյուսակը:

1. ֆունկցիա addRow (բանալին, val)
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = «Ոչ մի», none_interface_text = «NONE»;
4. var tunnel_mode_suffix = val.TunnelMode == «օգտագործել համաշխարհային» ? ” (” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;
5. var տող = {դաշտեր:[
6. {type:”link”, պարամետրեր՝[“cr”, “mirror.htm?session_id=” + բանալի, բանալի]},
7. {type:”text”, պարամետրեր՝[oTMode[oVMode.indexOf(val.Mode)], “c”]},
8. {type:”text”, պարամետրեր՝[oTType[oVType.indexOf(val.Type)], “c”]},
9. {type:”text”, params:[val.Type == “mirror” ? «-»:
   val.RMirrorVlan, «c»]},
10. {type:”text”, պարամետրեր:[val.Type == “rMirrorSource”?
    val.ReflectorPort՝ «-», «c»]}
11. ]};
12. վերադարձի շարք;
13. }
14. ֆունկցիա addRows (recv_json)
15. {
16. var տող, դատարկ_colspan = 7;
17. var table_rows = new Array();
18. // Ավելացնել աղյուսակի վերնագիր
19. addHeader (աղյուսակ_տողեր);
20. // Ավելացնել մեկ տող
21. Object.each(recv_json, ֆունկցիա(գրառում) {
22. table_rows.push (addRow (record.key, record.val));
23. });
24. վերադարձ սեղան_տողեր;
25. }

Web օգնության էջ
Համար web օգնության էջի ձևավորում, օգնության նկարագրությունը կարող է վերաբերել JSON բնութագրին, որ նկարագրության տեքստը կարող է համապատասխանել JSON ելքին և օգնում է նվազեցնել ավելորդ նկարագրությունները: Օրինակ՝ample այստեղ վերցված է dhcp6 ռելեի կոնֆիգուրացիայից:

Հիպեր-հղումը սկզբնաղբյուրում file
Նշանակե՛ք օգնությունը file գտնվելու վայրը իր սկզբնաղբյուրում file HTML tag. Ֆիքսված փոփոխականի անունը «help_page» օգտագործվում է web օգնության էջի հանձնարարություն.

2. // Օգնության էջի մոգություն
3. var help_page = «/help/help_xxx.htm»;

Թարմացրեք HTML դաշտի նկարագրությունը JSON ճշգրտումից

• Օգտագործեք կամ HTML tag հայտարարելու HTML աղյուսակի նկարագրությունը և տրվում է եզակի ID համար tag.
• Երբ HTML փաստաթուղթը պատրաստ է, զանգահարեք loadXMLDoc()՝ ստանալու ամբողջ JSON ճշգրտումը կամ ստացեք մեթոդի կոնկրետ նկարագրությունը JSON մեթոդի անունով «jsonRpc.status.introspection.specific.inventory.get»:
• ProcessTableDesc()-ն օգտագործվում է աղյուսակի նկարագրությունը թարմացնելու համար, իսկ processUpdate()-ը՝ աղյուսակի պարամետրի նկարագրությունը թարմացնելու համար:
• ProcessUpdate()-ում զանգահարեք updateTableParamsDesc()՝ թարմացնելու JSON տարրերը, որոնք համապատասխանում են հատուկ տարրերի անուններին:
• Թարմացնել կամ tag ներքին HTML՝ ըստ տարրի նկարագրության:

2. /* Թարմացրեք HTML նկարագրության դաշտերը */
3. ֆունկցիա processTableDesc(պահանջ) {
4. if (!req.responseText) {
5. վերադարձ;
6. }
7. var json_spec = JSON.decode (req.responseText);
8. // Թարմացնել աղյուսակի նկարագրությունը
9. $(«TableDesc»).innerHTML = getJsonSpecElement (json_spec, «groups», «dhcp6_relay.config.vlan»). նկարագրություն;
10. }
11. /* Թարմացնել HTML աղյուսակի պարամետրի նկարագրությունը */
12. Գործառույթ գործընթացի թարմացում (recv_json) {
13. // Թարմացնել աղյուսակի պարամետրի նկարագրությունը
14. var param_names = [
15. {
16. «alias»: «Ինտերֆեյս»,
17. «տեսակ»՝ «vtss_ifindex_t»,
18. «անունը»: «vlanInterface»,
19. «ծածանց»՝ «»:
20. },
21. {
22. «փոխանուն»՝ «Ռելեի ինտերֆեյս»,
23. «տեսակ»՝ «vtss_ifindex_t»,
24. «անունը»: «relayVlanInterface»,
25. «ծածանց»՝ «. Փոխանցման համար օգտագործվող ինտերֆեյսի ID-ն։
26. },
27. {
28. «փոխանուն»՝ «Ռելեի նպատակակետ»,
29. «տեսակ»՝ «mesa_ipv6_t»,
30. «անուն»՝ «ռելե_նպատակակետ»,
31. «ծածանց»՝ «. DHCPv6 սերվերի IPv6 հասցեն, որի հարցումները պետք է փոխանցվեն: «ff05::1:3» կանխադրված արժեքը ցույց է տալիս «ցանկացած DHCP սերվեր»:
32. }
33. ];
34. updateTableParamsDesc («TableParamsDesc», recv_json, «dhcp6_relay.config.vlan.get», param_names);
35. }
36. /* Ստացեք JSON ճշգրտում */
37. window.addEvent('domready', ֆունկցիա () {
38. loadXMLDoc (“/json_spec”, processTableDesc);
39. requestJsonDoc («jsonRpc.status.introspection.specific.inventory.get», «dhcp6_relay.config.vlan», processUpdate);
40. });

Հիպեր-հղում մենյուի բարում

• Մենյու տողի HTML աղբյուրի կոդը ստեղծվում է file webstax2\vtss_appl\web\ menu_default.cxx.
• Խմբագրել այս տարրերը file համար Web էջի հիպեր-հղում.

1. #եթե սահմանված է (VTSS_SW_OPTION_DHCP6_RELAY)
2. ITEM ("Ռելե, dhcp6_relay.htm");
3. #endif //VTSS_SW_OPTION_DHCP6_RELAY

ԾԱՆՈԹԱԳՐՈՒԹՅՈՒՆ
Ուշադրություն դարձրեք, որ ITEM(“”) նիշերի թիվը, որն օգտագործվում է մենյուի տողում խմբի մակարդակը որոշելու համար: Այս դեպքում բոլորը web էջերը գտնվում են «DHCPv6» խմբի տակ:

Նկար 6. Նախampգլոբալ կազմաձևված աղյուսակի le

Հավելված

Տիպիկ web էջեր

Կան մի քանի բնորոշ web էջերը կարող են օգտագործվել հղման ձևավորման համար: Մեկ լրացուցիչ նախկինampԱյստեղ պետք է ցուցադրվի մեկ հայելային նստաշրջանի կոնֆիգուրացիան, որը գտնվում է vtss_appl\mirror\html\mirror.htm-ում:
Այն web էջը տրամադրում է մանրամասն կոնֆիգուրացիա մեկ հայելային նստաշրջանի համար: Բոլոր կազմաձևված պարամետրերը նշված են:

• Սեղմեք «Պահպանել» կոճակը՝ ընթացիկ կոնֆիգուրացիան կիրառելու համար:
• Սեղմեք «Վերականգնել» կոճակը՝ ընթացիկ կոնֆիգուրացիան վերականգնելու համար:
• Կտտացրեք «Չեղարկել»՝ վերջնակետին վերադառնալու համարview հայելային նիստերի

Mirror&RMirror կոնֆիգուրացիա

Համաշխարհային կարգավորումներ

Աղբյուրի VLAN(ներ)ի կոնֆիգուրացիա

Port Configuration

Նկար 7. Exampհայելային նստաշրջանի մանրամասն կոնֆիգուրացիա
«Պահպանել», «Վերականգնել» և «Չեղարկել» կոճակները ավելացվում են html կոդով.

JSON հրամանի հոսք
Այս էջը պահանջում է երկու քայլ հրամանի հոսք.

• Նախ պետք է ձեռք բերել սարքի հնարավորությունները «mirror.capabilities.get» մեթոդով: Հնարավորությունները չեն փոխվում և պետք է միայն մեկ անգամ կարդալ:
• Այնուհետև այն պետք է ստանա սարքի ընթացիկ կոնֆիգուրացիան՝ օգտագործելով «mirror.config.session.get», «port.status.get» և «topo.config.stacking.get» շարելու դեպքում:

«mirror.capabilities.get» զանգը սկսվում է «domready» իրադարձության միջոցով, և արդյունքը կազմաձևվում է այնպես, որ կարգավորվի requestUpdate ֆունկցիայի կողմից:
«RequestUpdate»-ը կսկսի «mirror.config.session.get» զանգը:
«port.status.get» և «topo.config.stacking.get»-ի կուտակման դեպքում, և այս զանգերի արդյունքները կազմաձևվում են այնպես, որ մշակվեն նախապատրաստման թարմացում ֆունկցիայի կողմից:
PreparateUpdate ֆունկցիան կհավաքի բոլոր արդյունքները, և միայն այն ժամանակ, երբ բոլորը ստացվեն, այն կկանչի գործընթացի թարմացում ֆունկցիան, որը կկառուցի աղյուսակները, որոնք կցուցադրվեն աղյուսակում: web.

Հղումներ

1. Վիքիպեդիա JavaScript https://en.wikipedia.org/wiki/JavaScript
2. JSON https://www.json.org/
3. MoonTools https://mootools.net/

Փաստաթղթեր / ռեսուրսներ

Microsemi AN1256 Web Ծրագրավորողների հավելված [pdf] Օգտագործողի ուղեցույց AN1256, AN1256 Web Ծրագրավորողների հավելված, Web Ծրագրավորողների հավելված, հավելված

Հղումներ

• Օգտագործողի ձեռնարկ