Microsemi AN1256 Web Programuotojų programa

Įvadas

JSON („JavaScript Object Notation“) yra atviras standartas file formatu, kuris naudoja žmonėms skaitomą tekstą keistis duomenimis. Tai įprastas duomenų formatas, naudojamas asinchroniniam naršyklės/serverio ryšiui palaikyti.
Dėl naujų web puslapio dizainas, JSON formatas gali pakeisti originalų AJAX stilių. Palyginkite su AJAX, naudojant JSON Web įgyvendinimas paprastesnis ir paprastesnis. Kūrėjas turi sutelkti dėmesį tik į web puslapio dizainas ir Web tvarkyklės diegimą galima praleisti, nes JSON prieigos metodas jau palaikomas kiekviename WebStaX programinės įrangos moduliai.
Šiame dokumente pateikiamas programuotojo vadovas programinės įrangos inžinieriui, kuriam reikia sukurti Web puslapis per JSON. Išsamios procedūros ir pvzamptaip pat įtrauktos į tolesnius skyrius.

JSON duomenų prieigos srautas

Baigėsiview
Štai JSON duomenų prieigos srautas, kuriuo HTTP ryšys inicijuojamas iš kliento (naršyklės). HTML lentelė kuriama dinamiškai pagal gautus JOSN duomenis iš serverio (DUT) pusės.

1 pav. Prieigos srautas tarp kliento ir serverio

Prašyti / atsakyti JSON duomenų
JSON užklausos paketas yra pagrįstas HTTP užklausos paskelbimo metodu, o turinys turi atitikti MSCC JSON formatą.

• Prašyti JSON sintaksės:{"metodas":" ","params":[ ], „id:”jsonrpc”}
• Atsakymo JSON sintaksė: {"klaida": ,"rezultatas": , "id:"jsonrpc"}

Šiose momentinėse nuotraukose rodomas JSON turinys tarp naršyklės ir DUT.

2 pav. Kliento HTTP užklausos momentinė nuotrauka

3 pav. HTTP atsakymo iš serverio momentinė nuotrauka

MSCC JSON specifikacija
Norėdami gauti visą JSON informaciją, įskaitant metodą, parametrą, aprašymą ir kt. Įveskite „http:// /json_spec“ naršyklės adreso juostoje. Yra dar vienas prieigos metodas naudojant JSON metodo pavadinimą „jsonRpc.status.introspection.specific.inventory.get“, jis naudojamas konkrečiam metodui.

4 pav. JSON specifikacijos momentinė nuotrauka web puslapį

Web pagrindą

The Web rėmas viduje WebStaX programinė įranga yra pagrįsta atviro kodo MooTools. Tai „JavaScript“ paslaugų rinkinys su MIT licencija. (http://mootools.net/license.txt) Meniu juosta ir dauguma web puslapiai yra pagrįsti sistema. AJAX ir JSON algoritmai jau integruoti į jo komunalines paslaugas.
Be to, WebStaX programinė įranga teikia kitas JSON naudingas paslaugas web puslapio dizainas.

• json.js – Naudokite norėdami perduoti / gauti dinaminius duomenis su JSON sintaksė.
• dynforms.js – Naudokite norėdami dinamiškai kurti HTML lentelę.
• validate.js – Naudokite HTML formos patvirtinimui.

Visos „JavaScript“ bibliotekos yra šaltinio medžio kataloge: webstax2\ vtss_appl\web\html\lib.

JSON gairės Web puslapio dizainas

Šiame skyriuje aprašoma, kaip sukurti a web puslapis, pagrįstas MSCC JavaScript bibliotekomis. Naudojame sukonfigūruotą veidrodinį veidrodį web puslapis kaip buvęsample čia. Asinchroninis ryšys pagrįstas HTTP JSON prieigos metodu, o visi visuotiniai sukonfigūruoti parametrai yra išvardyti vienoje dinaminėje HTML lentelėje.
The web puslapio išdėstymas pateikiamas žemiau, o visas šaltinio kodas yra šaltinio medžio kataloge: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. Kad būtų tipiškesnis web puslapių nuoroda, žr. priedo skyrių.

Veidrodis ir RMirror konfigūracijos lentelė

5 pav. Examppasaulinės sukonfigūruotos lentelės le

Redaguoti Web puslapį

HTML antraštė
Į HTML įtraukite reikalingas JS bibliotekas tag.

Inicijuoti dinaminės lentelės išteklius

• Kai HTML dokumentas bus paruoštas, iškvieskite DynamicTable(), kad inicijuotų dinaminės lentelės išteklius.
• DynamicTable() naudojama dinaminei lentelei sukurti po to, kai gaunami JSON duomenys.
• Tada jis iškvies „requestUpdate“, kad inicijuotų JSON komandų srautą.

1. window.addEvent('domready', function() {
2. // Sukurkite formą su lentelės turiniu JSON duomenims gauti / perduoti
3. myDynamicTable = new DynamicTable ("mano lentelės turinys", "konfigūracija","plusRowCtrlBar");
   4
4. requestUpdate();
5. });

Prašyti / atsakyti JSON duomenų

• Kai HTML dokumentas bus paruoštas, naudokite requestJsonDoc(), kad nusiųstumėte JSON užklausą „mirror.config.session.get“, kad gautumėte informacijos apie sukonfigūruotas sesijas.
• Gavus „mirror.capabilities.get“ JSON duomenis, bus apdorojama atgalinio skambinimo funkcija requestUpdate(). Funkcija requestUpdate tada iškvies "mirror.config.session.get", kad gautų dabartinę konfigūraciją. Kai gaunama dabartinė konfigūracija, iškviečiama funkcija processUpdate, kad būtų sukurta rodoma lentelė.

1. funkcijos prašymasUpdate()
2. {
3. // Atkurti lentelės turinį
4. myDynamicTable.restore();
   5
5. // Šioje lentelėje du JSON duomenys.
6. requestJsonDoc ("mirror.config.session.get", null, processUpdate, "config");
7. }

Apdorokite gautus JSON duomenis

• Funkcija processUpdate() naudojama dinaminei lentelei išdėstyti gavus JSON duomenis.
• AddRows() naudojamas lentelės eilėms pridėti. myDynamicTable.update() išdėstymas
  HTML lentelė pagal duomenis lentelės eilutėse.

1. funkcija processUpdate(recv_json, pavadinimas)
2. {
3. // Ignoruoti procesą, jei negaunama duomenų
4. if (!recv_json) {
5. perspėjimas („Nepavyko gauti dinaminių duomenų“);
6. grąžinti;
7. }
8. // Išsaugokite gautus JSON duomenis
9. myDynamicTable.saveRecvJson("config", recv_json);
10. // Pridėti lentelės eilutes
11. var table_rows = addEilus(recv_json);
12. myDynamicTable.addRows(lentelės_eilės);
14. // Atnaujinkite šią dinaminę lentelę
15. myDynamicTable.update();
17. // Atnaujinimo laikmatis
18. var autorefresh = document.getElementById("automatinis atnaujinimas");
19. if (autorefresh && autorefresh.checked) {
20. if (laikmačio ID) {
21. clearTimeout(laikmačio ID);
22. }
23. timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
24. }
25. }

Pridėkite lentelės eilutes

• Funkcijoje addRows() naudojame JSON formatą, kad užpildytume kiekvieną visuotinį sukonfigūruotą parametrą lentelės eilutėje.
• Visi HTML laukai yra išvardyti JSON masyve („table_rows“), o lentelės lauko sintaksė pateikiama žemiau.

Sintaksė:
table_rows:[ , ,… ] : { , ,… }
: {"tipas": , „paramai“:[ , ,…, ]}

• Tokiu atveju kiekvienoje eilutėje yra penki laukai: „Seanso ID“, „Režimas“, „Tipas“, „VLAN ID“ ir „Reflector Port“, pvz.ample,

Sesijos ID (Pavadinimo laukas: int32_t)	1 (veidrodžio seanso ID)
Režimas (Pavadinimo laukas: vtss_bool_t)	tiesa (Tai reiškia, kad veidrodinė sesija įjungta)
Tipas (Pavadinimo laukas: sąrašas {veidrodis, rMirrorSource, rMirrorDestination}	RMirror šaltinis (tai yra nuotolinio veidrodinio seanso šaltinis
VLAN ID (Pavadinimo laukas: uint16_t)	200 (vlan, naudojamas veidrodžiui)
Atšvaito prievadas (Pavadinimo laukas: vtss_ifindex_t)	Gi 1/1 (Prievadas, į kurį siunčiamas veidrodinis srautas

• MyDynamicTable.addRows() konvertuos JSON duomenis į HTML formatą ir išves HTML lentelę.

1. funkcija addRow(raktas, val)
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = "Nėra", none_interface_text = "NĖRA";
4. var tunnel_mode_suffix = val.TunnelMode == "useglobal" ? ” (" + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + ")" : "";
5. var row = {laukai:[
6. {type:"link", params:["cr", "mirror.htm?session_id=" + raktas, raktas]},
7. {type:"text", params:[oTMode[oVMode.indexOf(val.Mode)], "c"]},
8. {tipas:"tekstas", params:[oTType[oVType.indexOf(val.Type)], "c"]},
9. {type:”text”, params:[val.Type == "veidrodis" ? "-":
   val.RMirrorVlan, "c"]},
10. {type:”text”, params:[val.Type == "rMirrorSource" ?
    val.ReflectorPort : "-", "c"]}
11. ]};
12. grąžinimo eilutė;
13. }
14. funkcija addRows(recv_json)
15. {
16. var eilutė, tuščias_colspan = 7;
17. var table_rows = naujas Masyvas();
18. // Pridėti lentelės antraštę
19. addHeader(table_rows);
20. // Pridėti vieną eilutę
21. Object.each(recv_json, function(record) {
22. table_rows.push(addRow(įrašas.raktas, įrašas.val));
23. });
24. grąžinti lentelės_eilutes;
25. }

Web pagalbos puslapis
Dėl web Pagalbos puslapio dizainas, pagalbos aprašymas gali būti susijęs su JSON specifikacija, kad aprašo tekstas atitiktų JSON išvestį ir padėtų sumažinti perteklinius aprašus. Pvzample čia paimtas iš dhcp6 relės konfigūracijos.

Hipersaitas šaltinyje file
Priskirkite pagalbą file vieta jos šaltinyje file HTML tag. Fiksuotas kintamojo pavadinimas „help_page“ naudojamas web pagalbos puslapio užduotis.

2. // Pagalbos puslapio magija
3. var help_page = "/help/help_xxx.htm";

Atnaujinkite HTML lauko aprašą iš JSON specifikacijos

• Naudokite arba HTML tag deklaruoti HTML lentelės aprašą ir suteikti unikalų ID tag.
• Kai HTML dokumentas bus paruoštas, iškvieskite loadXMLDoc(), kad gautumėte visą JSON specifikaciją arba gautumėte konkretaus metodo aprašą JSON metodo pavadinimu „jsonRpc.status.introspection.specific.inventory.get“.
• ProcesasTableDesc() naudojamas lentelės aprašymui atnaujinti, o processUpdate() naudojamas lentelės parametro aprašymui atnaujinti.
• ProcesoUpdate() iškvieskite updateTableParamsDesc(), kad atnaujintumėte JSON elementus, kurie atitinka konkrečius elementų pavadinimus.
• Atnaujinkite arba tag vidinis HTML pagal elemento aprašymą.

2. /* Atnaujinti HTML aprašo laukus */
3. function processTableDesc(req) {
4. if (!req.responseText) {
5. grąžinti;
6. }
7. var json_spec = JSON.decode(req.responseText);
8. // Atnaujinti lentelės aprašymą
9. $("TableDesc").innerHTML = getJsonSpecElement(json_spec, "groups", "dhcp6_relay.config.vlan").description;
10. }
11. /* Atnaujinti HTML lentelės parametro aprašą */
12. function processUpdate(recv_json) {
13. // Atnaujinti lentelės parametrų aprašą
14. var param_names = [
15. {
16. „alias“: „Sąsaja“,
17. „tipas“: „vtss_ifindex_t“,
18. „vardas“: „vlanInterface“,
19. "priesaga": "."
20. },
21. {
22. „alias“: „Relės sąsaja“,
23. „tipas“: „vtss_ifindex_t“,
24. „pavadinimas“: „relayVlanInterface“,
25. "priesaga": ". Perdavimui naudojamos sąsajos ID.
26. },
27. {
28. „alias“: „Perdavimo paskirties vieta“,
29. „tipas“: „mesa_ipv6_t“,
30. "vardas": "relay_destination",
31. "priesaga": ". DHCPv6 serverio, kuriam teikiamos užklausos, IPv6 adresas turi būti perduotas. Numatytoji reikšmė „ff05::1:3“ reiškia „bet kurį DHCP serverį“.
32. }
33. ];
34. updateTableParamsDesc ("TableParamsDesc", recv_json, "dhcp6_relay.config.vlan.get", param_names);
35. }
36. /* Gaukite JSON specifikaciją */
37. window.addEvent('domready', function () {
38. loadXMLDoc ("/json_spec", processTableDesc);
39. requestJsonDoc ("jsonRpc.status.introspection.specific.inventory.get", "dhcp6_relay.config.vlan", processUpdate);
40. });

Hipersaitas meniu juostoje

• Meniu juostos HTML šaltinio kodas generuojamas iš file webstax2\vtss_appl\web\ meniu_default.cxx.
• Redaguokite elementus šiame file už Web puslapio hipersaitas.

1. #jei apibrėžta (VTSS_SW_OPTION_DHCP6_RELAY)
2. ITEM ("Relay,dhcp6_relay.htm");
3. #endif //VTSS_SW_OPTION_DHCP6_RELAY

PASTABA
Atkreipkite dėmesį, kad tarpo simbolio skaičius ITEM (““), kuris naudojamas grupės lygiui meniu juostoje nuspręsti. Šiuo atveju visi web puslapiai yra „DHCPv6“ grupėje.

6 pav. Pvzamppasaulinės sukonfigūruotos lentelės le

Priedas

Tipiškas web puslapių

Yra keletas tipiškų web puslapiai gali būti naudojami etaloniniam dizainui. Vienas papildomas buvęsampČia turi būti rodoma vieno veidrodinio seanso konfigūracija, randama vtss_appl\mirror\html\mirror.htm.
The web puslapyje pateikiama išsami vieno veidrodžio seanso konfigūracija. Pateikiami visi sukonfigūruoti parametrai.

• Spustelėkite mygtuką „Išsaugoti“, kad pritaikytumėte dabartinę konfigūraciją.
• Spustelėkite mygtuką „Atstatyti“, kad iš naujo nustatytumėte dabartinę konfigūraciją.
• Spustelėkite „Atšaukti“, kad grįžtumėte į pabaigąview veidrodžio seansų

Veidrodis ir RMirror konfigūracija

Visuotiniai nustatymai

Šaltinio VLAN (-ų) konfigūracija

Prievado konfigūracija

7 pav. Exampdetali veidrodžio seanso konfigūracija
Mygtukai „Išsaugoti“, „Atstatyti“ ir „Atšaukti“ pridedami prie html kodo:

JSON komandų srautas
Šiame puslapyje reikalingas dviejų žingsnių komandų srautas:

• Pirmiausia reikia gauti įrenginio galimybes naudojant „mirror.capabilities.get“ metodą. Galimybės nesikeičia ir jas reikia perskaityti tik vieną kartą.
• Tada jis turi gauti dabartinę įrenginio konfigūraciją naudojant „mirror.config.session.get“, „port.status.get“ ir „topo.config.stacking.get“ sukrovimo atveju.

„Mirror.capabilities.get“ iškvietimą inicijuoja „domready“ įvykis, o rezultatas sukonfigūruotas taip, kad jį apdorotų funkcija requestUpdate.
UžklausaUpdate inicijuos „mirror.config.session.get“ iškvietimą,
„port.status.get“ ir sukrovimo atveju „topo.config.stacking.get“ ir šių iškvietimų rezultatai yra sukonfigūruoti taip, kad juos apdorotų funkcija readyUpdate.
Funkcija readyUpdate surinks visus rezultatus ir tik tada, kai visi bus gauti, iškvies funkciją processUpdate, kuri sudarys lenteles, kurios bus rodomos web.

Nuorodos

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

Dokumentai / Ištekliai

Microsemi AN1256 Web Programuotojų programa [pdfVartotojo vadovas AN1256, AN1256 Web Programuotojų programa, Web Programuotojų taikymas, taikymas

Nuorodos

• Vartotojo vadovas