Microsemi AN1256 Web Applikazzjoni tal-Programmaturi

Introduzzjoni

JSON (JavaScript Object Notation) huwa standard miftuħ file format li juża test li jinqara mill-bniedem għall-iskambju tad-dejta. Huwa format tad-dejta komuni użat għall-komunikazzjoni asinkronika tal-browser/server.
Għall-ġdid web disinn tal-paġna, format JSON jista 'jkun sostitut għall-istil AJAX oriġinali. Qabbel ma 'AJAX, bl-użu ta' JSON jagħmel il- Web implimentazzjoni aktar faċli u sempliċi. L-iżviluppatur biss jeħtieġ li jiffoka fuq web disinn tal-paġna u l Web L-implimentazzjoni tal-handler tista 'titħalla barra peress li l-metodu ta' aċċess JSON huwa diġà appoġġjat f'kull wieħed WebModuli tas-softwer StaX.
Dan id-dokument jiddikjara l-gwida tal-programmaturi għall-inġinier tas-softwer li jeħtieġ li tiżviluppa l- Web paġna permezz JSON. Il-proċeduri tad-dettall u examples inklużi wkoll fit-taqsimiet li ġejjin.

Fluss ta' aċċess għad-dejta JSON

Fuqview
Hawn il-fluss ta' aċċess għad-dejta JSON li tinbeda konnessjoni HTTP mill-klijent (browser). It-tabella HTML tinħoloq b'mod dinamiku skont id-dejta JOSN riċevuta min-naħa tas-server(DUT).

Figura 1. Il-fluss ta 'aċċess bejn il-klijent u s-server

Talba/Tweġiba tad-dejta JSON
Il-pakkett tat-talba JSON huwa bbażat fuq il-metodu tal-post tat-talba HTTP u l-kontenut irid isegwi l-format MSCC JSON.

• Itlob sintassi JSON:{“metodu”:” ","params":[ ], "id:"jsonrpc"}
• Sintassi tar-rispons JSON: {“żball”: ,"riżultat": , “id:”jsonrpc”}

Is-snapshots li ġejjin juru l-kontenut JSON bejn il-browser u DUT.

Figura 2. Snapshot tat-talba HTTP mill-klijent

Figura 3. Snapshot tar-rispons HTTP mis-server

Speċifikazzjoni MSCC JSON
Biex tikseb l-informazzjoni JSON sħiħa inkluż il-metodu, il-parametru, id-deskrizzjoni u eċċ. Ittajpja "http:// /json_spec” fuq il-bar tal-indirizz tal-browser tiegħek. Hemm metodu ta 'aċċess ieħor permezz tal-isem tal-metodu JSON "jsonRpc.status.introspection.specific.inventory.get", huwa użat għal metodu speċifiku.

Figura 4. Snapshot tal-ispeċifikazzjoni JSON web paġna

Web qafas

Il- Web qafas fi WebIs-softwer StaX huwa bbażat fuq MooTools ta’ sors miftuħ. Hija ġabra ta 'utilitajiet JavaScript b'liċenzja MIT. (http://mootools.net/license.txt) Il-menu bar u ħafna minn web paġni huma bbażati fuq il-qafas. Kemm l-algoritmu AJAX kif ukoll JSON huma diġà integrati fl-utilitajiet tiegħu.
Barra minn hekk, WebIs-softwer StaX jipprovdi l-utilitajiet l-oħra li huma utli għall-JSON web disinn tal-paġna.

• json.js – Uża għal biex tittrasmetti/jirċievi d-dejta dinamika bis-sintassi JSON.
• dynforms.js – Uża biex toħloq it-tabella HTML b'mod dinamiku.
• validate.js – Uża għall-validazzjoni tal-formola HTML.

Il-libreriji JavaScript sħaħ jinsabu taħt id-direttorju tas-siġra tas-sors: webstax2\ vtss_appl\web\html\lib.

Linja gwida għal JSON Web disinn tal-paġna

Din it-taqsima tiggwida kif tiddisinja a web paġna bbażata fuq libreriji MSCC JavaScript. Aħna nużaw il-Mirror globali konfigurat web paġna bħala l-example hawn. Il-komunikazzjoni asinkronika hija bbażata fuq il-metodu ta 'aċċess HTTP JSON u l-parametri konfigurati globali kollha huma elenkati f'tabella HTML dinamika waħda.
Il- web it-tqassim tal-paġna huwa elenkat hawn taħt u l-kodiċi tas-sors sħiħ jinsab taħt id-direttorju tas-siġra tas-sors: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. Biex tikseb aktar tipiku web referenza tal-paġni, ara t-taqsima tal-appendiċi.

Mirror & RMirror Confiquration Tabella

Figura 5. Example tat-tabella konfigurata globali

Editja Web paġna

Header HTML
Inkludi l-libreriji JS li meħtieġa fl-HTML tag.

Inizjalizza r-riżors tat-tabella dinamika

• Meta d-dokument HTML ikun lest, ċempel DynamicTable() biex inizjalizza r-riżors tat-tabella dinamika.
• Id-DynamicTable() tintuża biex tinħoloq it-tabella dinamika wara li tkun irċeviet id-dejta JSON.
• Imbagħad se jsejjaħ requestUpdate biex jibda l-fluss tal-kmand JSON.

1. window.addEvent('domready', funzjoni () {
2. // Oħloq formola b'korp ta 'tabella biex tirċievi/titrażmetti data JSON
3. myDynamicTable = DynamicTable ġdida ("myTableContent", "config","plusRowCtrlBar");
   4
4. talbaAġġorna();
5. });

Talba/Tweġiba tad-dejta JSON

• Meta d-dokument HTML ikun lest, uża requestJsonDoc() biex tibgħat it-talba JSON "mirror.config.session.get" biex tikseb informazzjoni dwar is-sessjonijiet konfigurati.
• Wara li tiġi riċevuta d-dejta JSON għal "mirror.capabilities.get", il-funzjoni ta' callback requestUpdate() tiġi pproċessata. Il-funzjoni requestUpdate imbagħad issejjaħ "mirror.config.session.get" biex tikseb il-konfigurazzjoni attwali. Meta tiġi riċevuta l-konfigurazzjoni attwali, il-funzjoni processUpdate tissejjaħ biex tinbena t-tabella li trid tintwera.

1. funzjoni talbaAġġorna ()
2. {
3. // Irrestawra l-kontenut tat-tabella
4. myDynamicTable.restore();
   5
5. // Din it-tabella żewġ data JSON.
6. requestJsonDoc ("mirror.config.session.get", null, processUpdate, "config");
7. }

Ipproċessa d-dejta JSON riċevuta

• Il-funzjoni processUpdate() tintuża biex titqassam it-tabella dinamika wara li tkun irċeviet id-dejta JSON.
• Il-addRows() jintuża biex iżżid ringieli tat-tabella. myDynamicTable.update() layout-
  Tabella HTML skond id-dejta f'ringieli tat-tabella.

1. funzjoni processUpdate (recv_json, isem)
2. {
3. // Injora l-proċess jekk ma tiġi riċevuta l-ebda data
4. jekk (!recv_json) {
5. alert("Ikseb data dinamika falliet.");
6. ritorn;
7. }
8. // Issejvja d-dejta JSON riċevuta
9. myDynamicTable.saveRecvJson ("konfigurazzjoni", recv_json);
10. // Żid ringieli tat-tabella
11. var table_rows = addRows (recv_json);
12. myDynamicTable.addRows(table_rows);
14. // Aġġorna din it-tabella dinamika
15. myDynamicTable.update();
17. // Aġġorna l-arloġġ
18. var autorefresh = document.getElementById ("autorefresh");
19. jekk (autorefresh && autorefresh.checked) {
20. jekk (timerID) {
21. clearTimeout(timerID);
22. }
23. timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
24. }
25. }

Żid ringieli tal-mejda

• Fil-funzjoni addRows(), nużaw il-format JSON biex nimlew kull parametru kkonfigurat globali fir-ringiela tat-tabella.
• L-oqsma HTML kollha huma elenkati fl-array JSON ("table_rows") u s-sintassi tal-field tabella hija hawn taħt.

Sintassi:
table_rows:[ , , … ] : { , , … }
: {“tip”: , "params":[ , , …, ]}

• F'dan il-każ, kull ringiela għandha ħames oqsma: "Session ID", "Mode", "Type", "VLAN ID" u "Reflector Port" Per eżempjuample,

ID tas-sessjoni (Isem il-qasam: int32_t)	1 (Id tas-sessjoni tal-mera)
Modalità (Isem il-qasam: vtss_bool_t)	veru (Li jfisser li s-sessjoni tal-mera hija attivata)
Tip (Isem il-qasam: enumerazzjoni {mera, rMirrorSource, rMirrorDestination}	Sors RMirror (dan huwa s-sors ta 'sessjoni mera remota
ID tal-VLAN (Isem il-qasam: uint16_t)	200 (il-vlan użat għall-mirror)
Port tar-riflettur (Isem il-qasam: vtss_ifindex_t)	Gi 1/1 (Il-port li fih jintbagħat it-traffiku rifless

• Il-myDynamicTable.addRows() se jikkonverti d-dejta JSON għal format HTML u joħroġ it-tabella HTML.

1. funzjoni addRow(key, val)
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = "Xejn", none_interface_text = "XEJN";
4. var tunnel_mode_suffix = val.TunnelMode == “useglobal” ? ” (“+ oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;
5. ringiela var = {fields:[
6. {tip:”link”, params:[“cr”, “mirror.htm?session_id=" + ċavetta, ċavetta]},
7. {tip:”test”, params:[oTMode[oVMode.indexOf(val.Mode)], “c”]},
8. {tip:”test”, params:[oTType[oVType.indexOf(val.Type)], “c”]},
9. {tip:”test”, params:[val.Type == “mera” ? “-“:
   val.RMirrorVlan, “c”]},
10. {tip:”test”, params:[val.Type == “rMirrorSource” ?
    val.ReflectorPort: “-”, “c”]}
11. ]};
12. ringiela tar-ritorn;
13. }
14. funzjoni addRows(recv_json)
15. {
16. var row, empty_colspan = 7;
17. var table_rows = Array ġdid ();
18. // Żid l-intestatura tat-tabella
19. addHeader(table_rows);
20. // Żid ringiela waħda
21. Object.each (recv_json, funzjoni (rekord) {
22. table_rows.push(addRow(record.key, record.val));
23. });
24. ritorn tabella_ringieli;
25. }

Web paġna ta' għajnuna
Għall- web disinn tal-paġna ta 'għajnuna, id-deskrizzjoni tal-għajnuna tista' tirreferi għall-ispeċifikazzjoni JSON, li t-test tad-deskrizzjoni jista 'jkun konsistenti mal-output JSON u jgħin biex jitnaqqsu d-deskrizzjonijiet żejda. Eżample hawn hija meħuda mill-konfigurazzjoni relay dhcp6.

Hyper-link fis-sors file
Assenja l-għajnuna file post fis-sors tagħha file HTML tag. L-isem varjabbli fiss "help_page" jintuża għall- web assenjazzjoni tal-paġna ta' għajnuna.

2. // Għajnuna maġija tal-paġna
3. var help_page = "/help/help_xxx.htm";

Aġġorna d-deskrizzjoni tal-qasam HTML mill-ispeċifikazzjoni JSON

• Użu jew HTML tag biex tiddikjara d-deskrizzjoni tat-tabella HTML u tingħata ID unika għall- tag.
• Meta d-dokument HTML ikun lest, ċempel loadXMLDoc() biex tikseb l-ispeċifikazzjoni JSON kollha jew tikseb id-deskrizzjoni tal-metodu speċifiku bl-isem tal-metodu JSON "jsonRpc.status.introspection.specific.inventory.get".
• Il-processTableDesc() tintuża biex taġġorna d-deskrizzjoni tat-tabella u processUpdate() tintuża biex taġġorna d-deskrizzjoni tal-parametru tat-tabella.
• Fi processUpdate(), sejħa updateTableParamsDesc() biex taġġorna l-elementi JSON li huma mqabbla mal-ismijiet tal-elementi speċifiċi.
• Aġġorna l- jew tag HTML intern skont id-deskrizzjoni tal-element.

2. /* Aġġorna l-oqsma tad-deskrizzjoni HTML */
3. funzjoni processTableDesc(req) {
4. jekk (!req.responseText) {
5. ritorn;
6. }
7. var json_spec = JSON.decode (req.responseText);
8. // Aġġorna d-deskrizzjoni tat-tabella
9. $(“TableDesc”).innerHTML = getJsonSpecElement(json_spec, “gruppi”, “dhcp6_relay.config.vlan”).description;
10. }
11. /* Aġġorna d-deskrizzjoni tal-parametru tat-tabella HTML */
12. funzjoni processUpdate (recv_json) {
13. // Aġġorna d-deskrizzjoni tal-parametru tat-tabella
14. var param_names = [
15. {
16. “alias”: “Interface”,
17. “tip”: “vtss_ifindex_t”,
18. “isem”: “vlanInterface”,
19. “suffiss”: “.”
20. },
21. {
22. “alias”: “Interface tar-Relay”,
23. “tip”: “vtss_ifindex_t”,
24. “isem”: “relayVlanInterface”,
25. “suffiss”: “. L-id tal-interface użata għar-relay.”
26. },
27. {
28. “alias”: “Destinazzjoni tar-Relay”,
29. “tip”: “mesa_ipv6_t”,
30. “name”: “relay_destination”,
31. “suffiss”: “. L-indirizz IPv6 tas-server DHCPv6 li għalih għandhom jintbagħtu t-talbiet. Il-valur default 'ff05::1:3' huwa 'kwalunkwe server DHCP'."
32. }
33. ];
34. updateTableParamsDesc(“TableParamsDesc”, recv_json, “dhcp6_relay.config.vlan.get”, param_names);
35. }
36. /* Ikseb l-ispeċifikazzjoni JSON */
37. window.addEvent('domready', funzjoni () {
38. loadXMLDoc ("/json_spec", processTableDesc);
39. requestJsonDoc ("jsonRpc.status.introspection.specific.inventory.get", "dhcp6_relay.config.vlan", processUpdate);
40. });

Hyper-link fil-bar tal-menu

• Il-kodiċi tas-sors HTML tal-menu bar huwa ġġenerat minn file webstax2\vtss_appl\web\ menu_default.cxx.
• Editja l-oġġetti f'dan file għall- Web hyper-link tal-paġna.

1. #jekk definit (VTSS_SW_OPTION_DHCP6_RELAY)
2. ITEM ("Relay,dhcp6_relay.htm");
3. #endif //VTSS_SW_OPTION_DHCP6_RELAY

NOTA
Innota li n-numru ta 'karattru ta' spazju fl-ITEM (""), li jintuża biex jiddeċiedi l-livell tal-grupp fil-bar tal-menu. F'dan il-każ, kollha web paġni huma taħt il-grupp “DHCPv6”.

Figura 6. Eżample tat-tabella konfigurata globali

Appendiċi

Tipiku web paġni

Hemm diversi tipiċi web paġni jistgħu jintużaw għad-disinn ta 'referenza. Ex wieħed addizzjonaliample li trid tintwera hawnhekk hija l-konfigurazzjoni ta' sessjoni waħda ta' mera misjuba f'vtss_appl\mirror\html\mirror.htm.
Il- web paġna tipprovdi l-konfigurazzjoni dettaljata għal sessjoni waħda mera. Il-parametri kollha kkonfigurati huma elenkati.

• Ikklikkja "Save" biex tapplika l-konfigurazzjoni attwali.
• Ikklikkja l-buttuna "Irrisettja" biex tirrisettja l-konfigurazzjoni attwali.
• Ikklikkja "Ikkanċella" biex terġa 'lura għall-overview tas-sessjonijiet tal-mera

Konfigurazzjoni Mirror&RMirror

Settings Globali

Sors VLAN(s) Konfigurazzjoni

Konfigurazzjoni tal-Port

Figura 7. Example tal-konfigurazzjoni dettaljata tas-sessjoni tal-mera
Il-buttuni "Save", "Reset" u "Ikkanċella" huma miżjuda bil-kodiċi html:

Fluss tal-Kmand JSON
Din il-paġna teħtieġ fluss ta' kmand f'żewġ passi:

• L-ewwel jeħtieġ li tikseb il-kapaċitajiet tal-apparat bil-metodu "mirror.capabilities.get". Il-kapaċitajiet ma jinbidlux u jridu jinqraw darba biss.
• Imbagħad jeħtieġ li tikseb il-konfigurazzjoni attwali tal-apparat billi tuża l-metodi "mirror.config.session.get", "port.status.get" u fil-każ ta 'stacking "topo.config.stacking.get".

Is-sejħa ta '"mirror.capabilities.get" tinbeda mill-avveniment "domready" u r-riżultat huwa kkonfigurat biex jiġi mmaniġġjat mill-funzjoni requestUpdate.
It-talba Aġġornament tibda s-sejħa ta’ “mirror.config.session.get”,
"port.status.get" u fil-każ ta 'stacking "topo.config.stacking.get" u r-riżultati ta' dawn is-sejħiet huma kkonfigurati biex jiġu ttrattati mill-funzjoni prepareUpdate.
Il-funzjoni prepareUpdate se tiġbor ir-riżultati kollha, u biss meta jkunu waslu kollha se ssejjaħ il-funzjoni processUpdate li se tibni t-tabelli li jintwerew fuq il- web.

Referenzi

1. Wikipedia JavaScript https://en.wikipedia.org/wiki/JavaScript
2. JSON https://www.json.org/
3. MoonTools https://mootools.net/

Dokumenti / Riżorsi

Microsemi AN1256 Web Applikazzjoni tal-Programmaturi [pdfGwida għall-Utent AN1256, AN1256 Web Applikazzjoni għall-Programmaturi, Web Applikazzjoni tal-Programmaturi, Applikazzjoni

Referenzi

• Manwal għall-Utent