Microsemi AN1256 Web Dasturchilar uchun ariza

Kirish

JSON (JavaScript Object Notation) ochiq standartdir file ma'lumotlar almashinuvi uchun inson o'qiy oladigan matndan foydalanadigan format. Bu asinxron brauzer/server aloqasi uchun ishlatiladigan umumiy ma'lumotlar formatidir.
Yangilar uchun web sahifa dizayni, JSON formati asl AJAX uslubini almashtirishi mumkin. JSON yordamida AJAX bilan solishtiring Web amalga oshirish osonroq va sodda. Ishlab chiquvchi faqat diqqatini qaratishi kerak web sahifa dizayni va Web ishlov beruvchini amalga oshirishni o'tkazib yuborish mumkin, chunki har birida JSON kirish usuli allaqachon qo'llab-quvvatlanadi WebStaX dasturiy modullari.
Ushbu hujjatni ishlab chiqish kerak bo'lgan dasturiy ta'minot muhandisi uchun dasturchilar qo'llanmasi bayon etilgan Web JSON orqali sahifa. Tafsilotli protseduralar va examples ham quyidagi bo'limlarga kiritilgan.

JSON ma'lumotlariga kirish oqimi

tugadiview
Bu erda HTTP ulanishi mijozdan (brauzerdan) boshlangan JSON ma'lumotlariga kirish oqimi. HTML jadvali server (DUT) tomonidan qabul qilingan JOSN ma'lumotlariga muvofiq dinamik ravishda yaratilgan.

1-rasm. Mijoz va server o'rtasidagi kirish oqimi

JSON ma'lumotlarini so'rash/javob berish
JSON so'rov paketi HTTP so'rovini yuborish usuliga asoslanadi va kontent MSCC JSON formatiga mos kelishi kerak.

• JSON sintaksisini so'rash:{"usul":" ""params":[ ], “id:”jsonrpc”}
• Javob JSON sintaksisi: {“xato”: ,"natija": , “id:”jsonrpc”}

Quyidagi suratlar brauzer va DUT o'rtasidagi JSON tarkibini ko'rsatadi.

2-rasm. Mijozdan HTTP so'rovining surati

3-rasm. Serverdan HTTP javobining surati

MSCC JSON spetsifikatsiyasi
Toʻliq JSON maʼlumotlarini, jumladan usul, parametr, tavsif va hokazolarni olish uchun “http://” kiriting. /json_spec” ni brauzeringizning manzil satriga kiriting. JSON usuli nomi "jsonRpc.status.introspection.specific.inventory.get" orqali boshqa kirish usuli mavjud, u ma'lum bir usul uchun ishlatiladi.

4-rasm. JSON spetsifikatsiyasining surati web sahifa

Web ramka

The Web ramka ichida WebStaX dasturi ochiq kodli MooTools-ga asoslangan. Bu MIT litsenziyasiga ega JavaScript yordam dasturlari to'plami. (http://mootools.net/license.txt) Menyu paneli va ko'pchiligi web sahifalar ramkaga asoslangan. AJAX va JSON algoritmlari allaqachon uning yordamchi dasturlariga birlashtirilgan.
Bundan tashqari, WebStaX dasturi JSON uchun foydali bo'lgan boshqa yordamchi dasturlarni taqdim etadi web sahifa dizayni.

• json.js - JSON sintaksisi bilan dinamik ma'lumotlarni uzatish/qabul qilish uchun for dan foydalaning.
• dynforms.js - HTML jadvalini dinamik ravishda yaratish uchun foydalaning.
• validate.js - HTML formasini tekshirish uchun foydalaning.

To'liq JavaScript kutubxonalari manba daraxti katalogi ostida joylashgan: webstax2\ vtss_appl\web\html\lib.

JSON uchun ko'rsatma Web sahifa dizayni

Ushbu bo'lim a web MSCC JavaScript kutubxonalariga asoslangan sahifa. Biz Mirror global konfiguratsiyasidan foydalanamiz web sahifa sobiq sifatidaampshu yerda. Asinxron aloqa HTTP JSON kirish usuliga asoslangan va barcha global konfiguratsiya qilingan parametrlar bitta dinamik HTML jadvalida keltirilgan.
The web sahifa tartibi quyida keltirilgan va to'liq manba kodi manba daraxti katalogida joylashgan: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. Ko'proq odatiy bo'lish uchun web sahifalar ma'lumotnomasi, ilova bo'limiga qarang.

Mirror & RMirror konfiguratsiya jadvali

5-rasm. Exampglobal tuzilgan jadvalning le

Tahrirlash Web sahifa

HTML sarlavhasi
HTMLga kerakli JS kutubxonalarini qo'shing tag.

Dinamik jadval manbasini ishga tushiring

• HTML hujjati tayyor bo'lgach, dinamik jadval manbasini ishga tushirish uchun DynamicTable() ga qo'ng'iroq qiling.
• DynamicTable() JSON ma'lumotlarini olgandan so'ng dinamik jadval yaratish uchun ishlatiladi.
• Keyin JSON buyruqlar oqimini boshlash uchun requestUpdate ni chaqiradi.

1. window.addEvent('domready', function() {
2. // JSON ma'lumotlarini qabul qilish/uzatish uchun jadval tanasi bilan shakl yarating
3. myDynamicTable = yangi DynamicTable (“myTableContent”, “config”,”plusRowCtrlBar”);
   4
4. requestUpdate();
5. });

JSON ma'lumotlarini so'rash/javob berish

• HTML hujjati tayyor bo'lgach, sozlangan seanslar haqida ma'lumot olish uchun "mirror.config.session.get" JSON so'rovini yuborish uchun requestJsonDoc() dan foydalaning.
• “mirror.capabilities.get” uchun JSON ma’lumotlari olingandan so‘ng, requestUpdate() qayta qo‘ng‘iroq qilish funksiyasi qayta ishlanadi. So‘ngra requestUpdate funksiyasi joriy konfiguratsiyani olish uchun “mirror.config.session.get” ni chaqiradi. Joriy konfiguratsiya qabul qilinganda, ko'rsatiladigan jadvalni yaratish uchun processUpdate funksiyasi chaqiriladi.

1. funktsiya requestUpdate()
2. {
3. // Jadval tarkibini tiklash
4. myDynamicTable.restore();
   5
5. // Ushbu jadval ikkita JSON ma'lumotlari.
6. requestJsonDoc(“mirror.config.session.get”, null, processUpdate, “config”);
7. }

Qabul qilingan JSON ma'lumotlarini qayta ishlash

• ProcessUpdate() funksiyasi JSON ma'lumotlarini olgandan so'ng dinamik jadvalni joylashtirish uchun ishlatiladi.
• addRows() jadval qatorlarini qo'shish uchun ishlatiladi. myDynamicTable.update() tartibi
  HTML jadvali jadval qatorlaridagi ma'lumotlarga muvofiq.

1. processUpdate funksiyasi (recv_json, nomi)
2. {
3. // Hech qanday ma'lumot olinmasa, jarayonga e'tibor bermang
4. agar (!recv_json) {
5. ogohlantirish ("Dinamik ma'lumotlarni olish muvaffaqiyatsiz tugadi.");
6. qaytish;
7. }
8. // Qabul qilingan JSON ma'lumotlarini saqlang
9. myDynamicTable.saveRecvJson (“config”, recv_json);
10. // Jadval qatorlarini qo'shish
11. var table_rows = addRows(recv_json);
12. myDynamicTable.addRows(jadval_satrlari);
14. // Ushbu dinamik jadvalni yangilang
15. myDynamicTable.update();
17. // Taymerni yangilash
18. var autorefresh = document.getElementById(“autorrefresh”);
19. agar (autorrefresh && autorefresh.checked) {
20. agar (taymer identifikatori) {
21. clearTimeout (taymer ID);
22. }
23. timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
24. }
25. }

Jadval qatorlarini qo'shing

• addRows() funksiyasida biz jadval qatoridagi har bir global konfiguratsiya qilingan parametrni to'ldirish uchun JSON formatidan foydalanamiz.
• Barcha HTML maydonlari JSON massivida (“jadval_satrlari”) keltirilgan va jadval maydoni sintaksisi quyida keltirilgan.

Sintaksis:
jadval_satrlari:[ , , … ] : { , , … }
: {“turi”: , "params":[ , , …, ]}

• Bunday holda, har bir qatorda beshta maydon mavjud: "Session ID", "Rejim", "Tur", "VLAN ID" va "Reflektor porti" Masalan.ample,

Seans identifikatori (Nom maydoni: int32_t)	1 (Oyna seansining identifikatori)
Rejim (Ism maydoni: vtss_bool_t)	rost (Ko'zgu sessiyasi yoqilgan degani)
Turi (Nom maydoni: ro'yxatga olish {oyna, rMirrorSource, rMirrorDestination}	RMirror manbasi (bu masofaviy oyna seansining manbai
VLAN ID (Nom maydoni: uint16_t)	200 (vlan aks ettirish uchun ishlatiladi)
Reflektor porti (Ism maydoni: vtss_ifindex_t)	Gi 1/1 (Oynali trafik yuboriladigan port

• myDynamicTable.addRows() JSON ma'lumotlarini HTML formatiga o'zgartiradi va HTML jadvalini chiqaradi.

1. addRow funktsiyasi (kalit, val)
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = "Yo'q", none_interface_text = "YO'Q";
4. var tunnel_mode_suffix = val.TunnelMode == "useglobal" ? ” (” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;
5. var row = {maydonlar:[
6. {type:”link”, parametrlar:[“cr”, “mirror.htm?session_id=” + kalit, kalit]},
7. {turi:”matn”, parametrlar:[oTMode[oVMode.indexOf(val.Mode)], “c”]},
8. {turi:”matn”, parametrlar:[oTType[oVType.indexOf(val.Type)], “c”]},
9. {turi:”matn”, parametrlar:[val.Type == “oyna” ? "-":
   val.RMirrorVlan, “c”]},
10. {turi:”matn”, parametrlar:[val.Type == “rMirrorSource” ?
    val.ReflectorPort: “-” , “c”]}
11. ]};
12. qaytish qatori;
13. }
14. addRows funktsiyasi (recv_json)
15. {
16. var row, empty_colspan = 7;
17. var table_rows = new Array();
18. // Jadval sarlavhasini qo'shish
19. addHeader (jadval_satrlari);
20. // Bitta qator qo'shish
21. Object.each (recv_json, funktsiya (yozuv) {
22. table_rows.push(addRow(record.key, record.val));
23. });
24. jadval_satrlarini qaytarish;
25. }

Web yordam sahifasi
uchun web Yordam sahifasi dizaynida yordam tavsifi JSON spetsifikatsiyasiga murojaat qilishi mumkin, bu tavsif matni JSON chiqishiga mos kelishi va ortiqcha tavsiflarni kamaytirishga yordam beradi. Masalanample bu erda dhcp6 o'rni konfiguratsiyasidan olingan.

Manbadagi giperhavola file
Yordamni tayinlang file uning manbasida joylashishi file HTML tag. Ruxsat etilgan o'zgaruvchi nomi "help_page" uchun ishlatiladi web yordam sahifasini tayinlash.

2. // Yordam sahifasi sehri
3. var help_page = “/help/help_xxx.htm”;

JSON spetsifikatsiyasidan HTML maydoni tavsifini yangilang

• Foydalanish yoki HTML tag HTML jadval tavsifini e'lon qilish va unga noyob identifikatorni berish tag.
• HTML hujjati tayyor bo'lgach, butun JSON spetsifikatsiyasini olish uchun loadXMLDoc() ga qo'ng'iroq qiling yoki "jsonRpc.status.introspection.specific.inventory.get" JSON usuli nomi bo'yicha maxsus usul tavsifini oling.
• processTableDesc() jadval tavsifini yangilash uchun ishlatiladi va processUpdate() jadval parametr tavsifini yangilash uchun ishlatiladi.
• Muayyan element nomlariga mos keladigan JSON elementlarini yangilash uchun processUpdate() da updateTableParamsDesc() ni chaqiring.
• ni yangilang yoki tag element tavsifiga ko'ra ichki HTML.

2. /* HTML tavsif maydonlarini yangilash */
3. processTableDesc(talab) funksiyasi {
4. agar (!req.responseText) {
5. qaytish;
6. }
7. var json_spec = JSON.decode(req.responseText);
8. // Jadval tavsifini yangilash
9. $(“TableDesc”).innerHTML = getJsonSpecElement(json_spec, “guruhlar”, “dhcp6_relay.config.vlan”). tavsifi;
10. }
11. /* HTML jadvali parametr tavsifini yangilash */
12. function processUpdate(recv_json) {
13. // Jadval parametr tavsifini yangilash
14. var param_names = [
15. {
16. "taxallus": "Interfeys",
17. “turi”: “vtss_ifindex_t”,
18. "nom": "vlanInterface",
19. "qo'shimchasi": "."
20. },
21. {
22. "taxallus": "Rele interfeysi",
23. “turi”: “vtss_ifindex_t”,
24. “nom”: “relayVlanInterface”,
25. "qo'shimchasi": ". O'tkazish uchun ishlatiladigan interfeys identifikatori."
26. },
27. {
28. “taxallus”: “Relay manzili”,
29. “turi”: “mesa_ipv6_t”,
30. “nom”: “relay_destination”,
31. "qo'shimchasi": ". So'rovlar yuboriladigan DHCPv6 serverining IPv6 manzili. Standart qiymat “ff05::1:3” “har qanday DHCP serveri”ni bildiradi.”
32. }
33. ];
34. updateTableParamsDesc(“TableParamsDesc”, recv_json, “dhcp6_relay.config.vlan.get”, param_names);
35. }
36. /* JSON spetsifikatsiyasini oling */
37. window.addEvent('domready', funktsiya () {
38. loadXMLDoc(“/json_spec”, processTableDesc);
39. requestJsonDoc(“jsonRpc.status.introspection.specific.inventory.get”, “dhcp6_relay.config.vlan”, processUpdate);
40. });

Menyu satrida giperhavola

• Menyu satrining HTML manba kodi dan yaratilgan file webstax2\vtss_appl\web\ menu_default.cxx.
• Undagi elementlarni tahrirlang file uchun Web sahifa giperhavolasi.

1. #agar aniqlangan bo'lsa(VTSS_SW_OPTION_DHCP6_RELEY)
2. ITEM("Relay,dhcp6_relay.htm");
3. #endif //VTSS_SW_OPTION_DHCP6_RELEY

ESLATMA
E'tibor bering, menyu satrida guruh darajasini aniqlash uchun ishlatiladigan ITEM("")dagi bo'sh joy belgisi soni. Bunday holda, hamma web sahifalar “DHCPv6” guruhi ostida.

6 -rasm. Masalanampglobal tuzilgan jadvalning le

Ilova

Oddiy web sahifalar

Bir nechta tipik bor web sahifalar mos yozuvlar dizayni uchun ishlatilishi mumkin. Yana bitta sobiqampvtss_appl\mirror\html\mirror.htm da topilgan yagona oyna seansining konfiguratsiyasi bu erda ko'rsatiladi.
The web sahifa bitta ko'zgu sessiyasi uchun batafsil konfiguratsiyani taqdim etadi. Barcha sozlangan parametrlar ro'yxatda keltirilgan.

• Joriy konfiguratsiyani qo'llash uchun "Saqlash" tugmasini bosing.
• Joriy konfiguratsiyani tiklash uchun "Qayta tiklash" tugmasini bosing.
• Orqaga qaytish uchun "Bekor qilish" tugmasini bosingview oyna seanslari

Mirror&RMirror konfiguratsiyasi

Global sozlamalar

Manba VLAN(lar) konfiguratsiyasi

Port konfiguratsiyasi

7-rasm. Exampoyna seansining batafsil konfiguratsiyasi
"Saqlash", "Qayta o'rnatish" va "Bekor qilish" tugmalari HTML kodi bilan qo'shiladi:

JSON buyruqlar oqimi
Bu sahifa ikki bosqichli buyruqlar oqimini talab qiladi:

• Avvaliga "mirror.capabilities.get" usuli bilan qurilmaning imkoniyatlarini olish kerak. Imkoniyatlar o'zgarmaydi va faqat bir marta o'qilishi kerak.
• Keyin u "mirror.config.session.get", "port.status.get" va stacking holatida "topo.config.stacking.get" usullaridan foydalangan holda qurilmaning joriy konfiguratsiyasini olishi kerak.

“mirror.capabilities.get” qo‘ng‘irog‘i “domready” hodisasi bilan boshlanadi va natija requestUpdate funksiyasi tomonidan boshqarilishi uchun tuzilgan.
requestUpdate "mirror.config.session.get" chaqiruvini boshlaydi,
"port.status.get" va stacking holatida "topo.config.stacking.get" va bu qo'ng'iroqlar natijalari PreparatUpdate funksiyasi tomonidan boshqarilishi uchun tuzilgan.
PreparatUpdate funksiyasi barcha natijalarni to'playdi va faqat hammasi qabul qilingandan keyingina u jarayonni yangilash funktsiyasini chaqiradi, bu esa jadvalda ko'rsatiladigan jadvallarni tuzadi. web.

Ma'lumotnomalar

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

Hujjatlar / manbalar

Microsemi AN1256 Web Dasturchilar uchun ariza [pdf] Foydalanuvchi uchun qoʻllanma AN1256, AN1256 Web Dasturchilar uchun ariza, Web Dasturchilar ilovasi, ilova

Ma'lumotnomalar

• Foydalanuvchi uchun qo'llanma