Microsemi AN1256 Web Cais Rhaglenwyr

Rhagymadrodd

Mae JSON (JavaScript Object Notation) yn safon agored file fformat sy'n defnyddio testun y gall pobl ei ddarllen ar gyfer cyfnewid data. Mae'n fformat data cyffredin a ddefnyddir ar gyfer cyfathrebu porwr/gweinydd asyncronig.
Am y newydd web dylunio tudalen, gall fformat JSON ddisodli'r arddull AJAX wreiddiol. Cymharwch ag AJAX, mae defnyddio JSON yn gwneud y Web gweithredu yn haws ac yn symlach. Nid oes ond angen i'r datblygwr ganolbwyntio ar web dylunio tudalen a'r Web gellir hepgor gweithrediad triniwr gan fod dull mynediad JSON eisoes wedi'i gefnogi ym mhob un WebModiwlau meddalwedd StaX.
Mae'r ddogfen hon yn nodi'r canllaw rhaglenwyr ar gyfer y peiriannydd meddalwedd sydd angen datblygu'r Web tudalen trwy JSON. Mae'r gweithdrefnau manwl a exampllai hefyd wedi'i gynnwys yn yr adrannau canlynol.

Llif mynediad data JSON

Drosoddview
Dyma'r llif mynediad data JSON y mae cysylltiad HTTP yn cael ei gychwyn gan y cleient (porwr). Mae'r tabl HTML yn cael ei greu yn ddeinamig yn ôl y data JOSN a dderbyniwyd o ochr y gweinydd (DUT).

Ffigur 1. Y llif mynediad rhwng cleient a gweinydd

Data Cais/Ymateb JSON
Mae pecyn cais JSON yn seiliedig ar ddull postio cais HTTP ac mae'n rhaid i'r cynnwys ddilyn fformat MSCC JSON.

• Cais am gystrawen JSON:{"dull":" ”,”params”:[ ], "id:" jsonrpc"}
• Ymateb Cystrawen JSON: {"gwall": “canlyniad”: , "id:" jsonrpc"}

Mae'r cipluniau canlynol yn dangos y cynnwys JSON rhwng y porwr a DUT.

Ffigur 2. Ciplun o gais HTTP gan y cleient

Ffigur 3. Ciplun o ymateb HTTP gan y gweinydd

Manyleb JSON MSCC
I gael y wybodaeth JSON lawn gan gynnwys y dull, paramedr, disgrifiad ac ati. Teipiwch “http: // / json_spec” ar far cyfeiriad eich porwr. Mae yna ddull mynediad arall trwy enw dull JSON "jsonRpc.status.introspection.specific.inventory.get", fe'i defnyddir ar gyfer dull penodol.

Ffigur 4. Ciplun o fanyleb JSON web tudalen

Web fframwaith

Mae'r Web fframwaith yn WebMae meddalwedd StaX yn seiliedig ar ffynhonnell agored MooTools. Mae'n gasgliad o gyfleustodau JavaScript gyda thrwydded MIT. (http://mootools.net/license.txt) Y bar dewislen a'r rhan fwyaf o web tudalennau yn seiliedig ar y fframwaith. Mae algorithm AJAX a JSON eisoes wedi'u hintegreiddio yn ei gyfleustodau.
Heblaw, WebMae meddalwedd StaX yn darparu'r cyfleustodau eraill sy'n ddefnyddiol ar gyfer y JSON web dylunio tudalen.

• json.js - Defnyddiwch ar gyfer trosglwyddo/derbyn y data deinamig gyda chystrawen JSON.
• dynforms.js - Defnyddiwch ar gyfer creu tabl HTML yn ddeinamig.
• dilysu.js - Defnyddiwch ar gyfer dilysu ffurflen HTML.

Mae'r llyfrgelloedd JavaScript llawn wedi'u lleoli o dan y cyfeiriadur coed ffynhonnell: webstax2\vtss_appl\web\html\lib.

Canllaw i JSON Web dylunio tudalen

Mae'r adran hon yn arwain sut i ddylunio a web tudalen yn seiliedig ar lyfrgelloedd JavaScript MSCC. Rydym yn defnyddio'r Mirror global configured web tudalen fel yr example yma. Mae'r cyfathrebu asyncronig yn seiliedig ar ddull mynediad HTTP JSON ac mae'r holl baramedrau cyfluniedig byd-eang wedi'u rhestru mewn un tabl HTML deinamig.
Mae'r web Mae cynllun y dudalen wedi'i restru isod ac mae'r cod ffynhonnell llawn wedi'i leoli o dan y cyfeiriadur coeden ffynhonnell: webstax2\vtss_appl\drych\html\mirror_ctrl.htm. I ddod yn fwy nodweddiadol web cyfeirnod tudalennau, gweler yr adran atodiad.

Tabl Ffurfweddu drych a drych

Ffigur 5. Example of global configured table

Golygu Web tudalen

Pennawd HTML
Cynhwyswch y llyfrgelloedd JS yr oedd eu hangen yn yr HTML tag.

Cychwyn yr adnodd tabl deinamig

• Pan fydd y ddogfen HTML yn barod, ffoniwch DynamicTable() i gychwyn yr adnodd tabl deinamig.
• Defnyddir y DynamicTable() i greu'r tabl deinamig ar ôl derbyn y data JSON.
• Yna bydd yn galw requestUpdate i gychwyn y llif gorchymyn JSON.

1. window.addEvent('domready', ffwythiant() {
2. // Creu ffurflen gyda chorff bwrdd ar gyfer derbyn/trosglwyddo data JSON
3. myDynamicTable = DynamicTable newydd(“myTableContent”, “config”,”plusRowCtrlBar”);
   4
4. caisDiweddariad();
5. });

Data Cais/Ymateb JSON

• Pan fydd y ddogfen HTML yn barod, defnyddiwch requestJsonDoc() i anfon y cais JSON “mirror.config.session.get” i gael gwybodaeth am y sesiynau ffurfweddu.
• Ar ôl derbyn data JSON ar gyfer “mirror.capabilities.get”, bydd y swyddogaeth galw yn ôl requestUpdate() yn cael ei brosesu. Yna bydd y swyddogaeth requestUpdate yn galw “mirror.config.session.get” i gael y ffurfweddiad cyfredol. Pan dderbynnir y ffurfweddiad presennol, gelwir y processUpdate swyddogaeth i adeiladu'r tabl i'w ddangos.

1. cais swyddogaeth Diweddariad()
2. {
3. // Adfer cynnwys tabl
4. myDynamicTable.restore();
   5
5. // Mae'r tabl hwn dau JSON data.
6. requestJsonDoc (“drych.config.session.get”, null, processUpdate, “config”);
7. }

Prosesu'r data JSON a dderbyniwyd

• Defnyddir y swyddogaeth processUpdate() i osod y tabl deinamig ar ôl derbyn y data JSON.
• Defnyddir yr addRows() i ychwanegu rhesi tabl. myDynamicTable.update() gosodiad y
  Tabl HTML yn ôl y data mewn rhesi tabl.

1. Diweddariad proses swyddogaeth(recv_json, enw)
2. {
3. // Anwybyddwch y broses os na dderbynnir data
4. os (!recv_json) {
5. rhybudd ("Cael data deinamig wedi methu.");
6. dychwelyd;
7. }
8. // Arbedwch y data JSON a dderbyniwyd
9. myDynamicTable.saveRecvJson("config", recv_json);
10. // Ychwanegu rhesi tabl
11. var table_rows = addRows(recv_json);
12. myDynamicTable.addRows(table_rows);
14. // Diweddaru'r tabl deinamig hwn
15. myDynamicTable.diweddariad();
17. // Amserydd adnewyddu
18. var autorefresh = document.getElementById(“autorefresh”);
19. os (autorefresh && autorefresh.checked) {
20. os (timerID) {
21. clearTimeout(timerID);
22. }
23. timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
24. }
25. }

Ychwanegu rhesi tabl

• Yn y swyddogaeth addRows(), rydym yn defnyddio'r fformat JSON i lenwi pob paramedr cyfluniedig byd-eang yn rhes y tabl.
• Mae pob maes HTML wedi'i restru yn yr arae JSON (“table_rows”) ac mae cystrawen y maes tabl isod.

Cystrawen:
tabl_rhesi:[ , , … ] : { , , … }
: { "math": , “paramau”:[ , , …, ]}

• Yn yr achos hwn, mae gan bob rhes bum maes: “ID Sesiwn”, “Modd”, “Math”, “ID VLAN” a “Porth Adlewyrchol” Ar gyfer cynample,

ID y sesiwn (Maes enw: int32_t)	1 (Id y sesiwn drych)
Modd (Maes enw: vtss_bool_t)	gwir (Yn golygu bod y sesiwn drych wedi'i galluogi)
Math (Maes enw: rhifo {drych, rMirrorSource, rMirrorCyrchfan}	Ffynhonnell drych (dyma ffynhonnell sesiwn drych o bell
ID VLAN (Maes enw: uint16_t)	200 (yr vlan a ddefnyddir ar gyfer adlewyrchu)
Porthladd Adlewyrchydd (Maes enw: vtss_ifindex_t)	Gi 1/1 (Y porthladd yr anfonir y traffig wedi'i adlewyrchu iddo

• Bydd y myDynamicTable.addRows() yn trosi'r data JSON i fformat HTML ac yn allbynnu'r tabl HTML.

1. swyddogaeth addRow(allwedd, val)
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = “Dim”, none_interface_text = “DIM”;
4. var tunnel_mode_suffix = val.TunnelMode == “useglobal” ? ” (” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;
5. var rhes = {meysydd:[
6. {math:”dolen”, paramau:[“cr”, “drych.htm?session_id=” + allwedd, allwedd]},
7. {math:”testun”, paramau:[oTMode[oVMode.indexOf(val.Mode)], “c”]},
8. {math:”testun”, paramau:[oTType[oVType.indexOf(val.Type)], “c”]},
9. {math: ”testun”, paramau:[val.Type == “drych” ? “-“:
   val.RMirrorVlan, “c”]},
10. {math:"testun", paramau:[val.Type == "rMirrorSource" ?
    val.ReflectorPort : “-”, “c”]}
11. ]};
12. rhes dychwelyd;
13. }
14. swyddogaeth addRows(recv_json)
15. {
16. rhes var, empty_colspan = 7;
17. var table_rows = Array newydd();
18. // Ychwanegu pennawd tabl
19. addHeader(table_rows);
20. // Ychwanegu rhes sengl
21. Object.each(recv_json, ffwythiant (cofnod) {
22. table_rows.push(addRow(record.key, record.val));
23. });
24. dychwelyd table_rows;
25. }

Web tudalen gymorth
Ar gyfer y web dylunio tudalen gymorth, gall y disgrifiad cymorth gyfeirio at fanyleb JSON, y gall testun y disgrifiad fod yn gyson ag allbwn JSON ac mae'n helpu i leihau'r disgrifiadau diangen. Example yma yn cael ei gymryd o ffurfwedd ras gyfnewid dhcp6.

Hyper-gyswllt yn y ffynhonnell file
Neilltuo'r help file lleoliad yn ei ffynhonnell file HTML tag. Defnyddir yr enw newidyn sefydlog “help_page” ar gyfer y web aseiniad tudalen gymorth.

2. // Help tudalen hud
3. var help_page = “/help/help_xxx.htm”;

Diweddaru disgrifiad maes HTML o fanyleb JSON

• Defnydd neu HTML tag i ddatgan y disgrifiad tabl HTML a rhoi ID unigryw ar gyfer y tag.
• Pan fydd y ddogfen HTML yn barod, ffoniwch loadXMLDoc() i gael y fanyleb JSON gyfan neu i gael y disgrifiad dull penodol yn ôl enw dull JSON “jsonRpc.status.introspection.specific.inventory.get”.
• Defnyddir y processTableDesc() i ddiweddaru disgrifiad y tabl a defnyddir processUpdate() i ddiweddaru disgrifiad paramedr y tabl.
• Yn processUpdate(), ffoniwch updateTableParamsDesc() i ddiweddaru'r elfennau JSON sy'n cyfateb i enwau'r elfennau penodol.
• Diweddaru'r neu tag HTML mewnol yn ôl y disgrifiad elfen.

2. /* Diweddaru meysydd disgrifiad HTML */
3. swyddogaeth processTableDesc(req) {
4. os (!req.responseText) {
5. dychwelyd;
6. }
7. var json_spec = JSON.decode(req.responseText);
8. // Diweddaru disgrifiad y tabl
9. $(“TableDesc”).innerHTML = getJsonSpecElement(json_spec, “groups”, “dhcp6_relay.config.vlan”).disgrifiad;
10. }
11. /* Diweddaru disgrifiad paramedr tabl HTML */
12. Diweddariad proses swyddogaeth(recv_json) {
13. // Diweddaru disgrifiad paramedr tabl
14. var param_names = [
15. {
16. “alias”: “Rhyngwyneb”,
17. “math”: “vtss_ifindex_t”,
18. “enw”: “vlanInterface”,
19. “ôl-ddodiad”: “.”
20. },
21. {
22. “alias”: “Rhyngwyneb Cyfnewid”,
23. “math”: “vtss_ifindex_t”,
24. “enw”: “rhyngwyneb cyfnewidVlan”,
25. “ôl-ddodiad”: “. ID y rhyngwyneb a ddefnyddir ar gyfer trosglwyddo.”
26. },
27. {
28. “alias”: “Cyrchfan Ras Gyfnewid”,
29. “math”: “mesa_ipv6_t”,
30. “enw”: “cyrchfan_cyfnewid”,
31. “ôl-ddodiad”: “. Bydd cyfeiriad IPv6 y gweinydd DHCPv6 y mae ceisiadau yn cael ei drosglwyddo iddo. Mae'r gwerth rhagosodedig 'ff05::1:3' yn golygu 'unrhyw weinydd DHCP'."
32. }
33. ];
34. updateTableParamsDesc("TableParamsDesc", recv_json, "dhcp6_relay.config.vlan.get", param_names);
35. }
36. /* Cael manyleb JSON */
37. window.addEvent('domready', ffwythiant () {
38. loadXMLDoc ("/ json_spec", processTableDesc);
39. requestJsonDoc(“jsonRpc.status.introspection.specific.inventory.get”, “dhcp6_relay.config.vlan”, processUpdate);
40. });

Hyper-ddolen yn y bar dewislen

• Cynhyrchir cod ffynhonnell HTML bar dewislen o file webstax2\vtss_appl\web\ menu_default.cxx.
• Golygu'r eitemau yn hwn file ar gyfer y Web hyperddolen tudalen.

1. # os yw wedi'i ddiffinio(VTSS_SW_OPTION_DHCP6_RELAY)
2. ITEM(” Relay,dhcp6_relay.htm”);
3. #endif //VTSS_SW_OPTION_DHCP6_RELAY

NODYN
Sylwch fod nifer y nodau gofod yn EITEM(“”), a ddefnyddir i benderfynu ar lefel y grŵp yn y bar dewislen. Yn yr achos hwn, i gyd web mae tudalennau o dan y grŵp “DHCPv6”.

Ffigur 6. Example of global configured table

Atodiad

Nodweddiadol web tudalennau

Mae yna nifer o nodweddiadol web gellir defnyddio tudalennau ar gyfer y dyluniad cyfeirio. Un cyn ychwanegolample i'w ddangos yma yw ffurfweddiad un sesiwn drych a geir yn vtss_appl\mirror\html\mirror.htm.
Mae'r web tudalen yn darparu'r ffurfweddiad manwl ar gyfer un sesiwn drych. Rhestrir yr holl baramedrau ffurfweddu.

• Cliciwch y botwm “Cadw” i gymhwyso'r cyfluniad cyfredol.
• Cliciwch y botwm "Ailosod" i ailosod y ffurfweddiad cyfredol.
• Cliciwch "Canslo" i ddychwelyd i'r dudalen drosoddview o sesiynau drych

Ffurfweddiad drych&RM

Gosodiadau Byd-eang

Ffynhonnell VLAN(s) Ffurfweddiad

Ffurfweddiad Porthladd

Ffigur 7. Example o gyfluniad manwl o sesiwn drych
Ychwanegir y botymau “Save”, “Ailosod” a “Canslo” gan y cod html:

Llif Gorchymyn JSON
Mae angen llif gorchymyn dau gam ar y dudalen hon:

• Yn gyntaf mae angen iddo gael galluoedd y ddyfais gyda'r dull "mirror.capabilities.get". Nid yw'r galluoedd yn newid a dim ond unwaith y mae'n rhaid eu darllen.
• Yna mae angen iddo gael y ffurfweddiad presennol y ddyfais gan ddefnyddio'r dulliau "mirror.config.session.get", "port.status.get" ac yn achos pentyrru "topo.config.stacking.get".

Mae'r alwad o “mirror.capabilities.get” yn cael ei gychwyn gan y digwyddiad “domready” ac mae'r canlyniad wedi'i ffurfweddu i gael ei drin gan y swyddogaeth requestUpdate.
Bydd y requestUpdate yn cychwyn yr alwad o “mirror.config.session.get”,
“port.status.get” ac mewn achos o bentyrru “topo.config.stacking.get” ac mae canlyniadau'r galwadau hyn wedi'u ffurfweddu i gael eu trin gan y swyddogaeth prepareUpdate.
Bydd y swyddogaeth Paratoi Diweddariad yn casglu'r holl ganlyniadau, a dim ond pan fydd y cyfan wedi'u derbyn y bydd yn galw'r ffwythiant processUpdate a fydd yn adeiladu'r tablau i'w dangos ar y web.

Cyfeiriadau

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

Dogfennau / Adnoddau

Microsemi AN1256 Web Cais Rhaglenwyr [pdfCanllaw Defnyddiwr AN1256, AN1256 Web Cais Rhaglenwyr, Web Cais Rhaglenwyr, Cais

Cyfeiriadau

• Llawlyfr Defnyddiwr