Microsemi AN1256 Web Прыкладанне для праграмістаў

Уводзіны

JSON (JavaScript Object Notation) - гэта адкрыты стандарт file фармат, які выкарыстоўвае зручны для чытання тэкст для абмену дадзенымі. Гэта звычайны фармат дадзеных, які выкарыстоўваецца для асінхроннай сувязі браўзера/сервера.
Для новага web дызайн старонкі, фармат JSON можа быць заменай арыгінальнага стылю AJAX. У параўнанні з AJAX, выкарыстанне JSON робіць Web рэалізацыя прасцей і прасцей. Распрацоўшчыку трэба толькі засяродзіцца web дызайн старонкі і Web рэалізацыю апрацоўшчыка можна апусціць, паколькі метад доступу JSON ужо падтрымліваецца ў кожным WebПраграмныя модулі StaX.
У гэтым дакуменце змяшчаецца кіраўніцтва праграміста для інжынера-праграміста, якому неабходна распрацаваць Web старонкі праз JSON. Падрабязныя працэдуры і прamples таксама ўключаны ў наступныя раздзелы.

Паток доступу да даных JSON

Скончанаview
Вось паток доступу да даных JSON, які HTTP-злучэнне ініцыюецца з кліента (браўзера). Табліца HTML ствараецца дынамічна ў адпаведнасці з дадзенымі JOSN, атрыманымі з боку сервера (DUT).

Малюнак 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 рамках

The Web каркас ст WebПраграмнае забеспячэнне StaX заснавана на MooTools з адкрытым зыходным кодам. Гэта набор утыліт JavaScript з ліцэнзіяй MIT. (http://mootools.net/license.txt) Радок меню і большая частка web старонкі заснаваныя на фрэймворку. Алгарытм AJAX і JSON ужо інтэграваны ў яго ўтыліты.
Акрамя таго, WebПраграмнае забеспячэнне StaX забяспечвае іншыя ўтыліты, карысныя для JSON web дызайн старонкі.

• json.js - Выкарыстоўвайце для перадачы/атрымання дынамічных даных з сінтаксісам JSON.
• dynforms.js – Выкарыстоўвайце для дынамічнага стварэння табліцы HTML.
• validate.js - Выкарыстоўвайце для праверкі формы HTML.

Поўныя бібліятэкі JavaScript знаходзяцца ў каталогу зыходнага дрэва: webstax2\ vtss_appl\web\html\lib.

Кіраўніцтва па JSON Web дызайн старонкі

У гэтым раздзеле апісана, як распрацаваць a web старонка на аснове бібліятэк MSCC JavaScript. Мы выкарыстоўваем наладжанае глабальнае люстэрка web старонку як былampле тут. Асінхронная сувязь заснавана на метадзе доступу HTTP JSON, і ўсе глабальныя настроеныя параметры пералічаны ў адной дынамічнай табліцы HTML.
The web макет старонкі пазначаны ніжэй, а поўны зыходны код знаходзіцца ў каталогу зыходнага дрэва: webstax2\vtss_appl\mirror\html\mirror_ctrl.htm. Каб атрымаць больш тыповы web спасылкі на старонкі, гл. раздзел дадатку.

Люстэрка і табліца канфігурацыі RMirror

Малюнак 5. Exampфайл глабальнай канфігураванай табліцы

Рэдагаваць Web старонка

Загаловак HTML
Уключыце неабходныя бібліятэкі JS у HTML tag.

Ініцыялізаваць рэсурс дынамічнай табліцы

• Калі дакумент HTML будзе гатовы, выклічце DynamicTable(), каб ініцыялізаваць рэсурс дынамічнай табліцы.
• DynamicTable() выкарыстоўваецца для стварэння дынамічнай табліцы пасля атрымання даных JSON.
• Затым ён выкліча requestUpdate, каб ініцыяваць паток каманд JSON.

1. window.addEvent('domready', функцыя() {
2. // Стварэнне формы з целам табліцы для атрымання/перадачы дадзеных JSON
3. myDynamicTable = новая DynamicTable(“myTableContent”, “config”,”plusRowCtrlBar”);
   4
4. запытАбнаўленне();
5. });

Даныя JSON запыту/адказу

• Калі дакумент HTML будзе гатовы, выкарыстоўвайце requestJsonDoc(), каб адправіць запыт JSON «mirror.config.session.get», каб атрымаць інфармацыю аб наладжаных сеансах.
• Пасля атрымання даных JSON для «mirror.capabilities.get» будзе апрацавана функцыя зваротнага выкліку requestUpdate(). Затым функцыя requestUpdate выкліча «mirror.config.session.get», каб атрымаць бягучую канфігурацыю. Пры атрыманні бягучай канфігурацыі выклікаецца функцыя processUpdate для стварэння табліцы, якая будзе паказвацца.

1. функцыя requestUpdate()
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. функцыя processUpdate(recv_json, імя)
2. {
3. // Ігнараваць працэс, калі дадзеныя не атрыманы
4. калі (!recv_json) {
5. alert(“Збой атрымання дынамічных дадзеных.”);
6. вяртанне;
7. }
8. // Захаваць атрыманыя дадзеныя JSON
9. myDynamicTable.saveRecvJson(“канфігурацыя”, recv_json);
10. // Дадаць радкі табліцы
11. var table_rows = addRows(recv_json);
12. myDynamicTable.addRows(таблічныя_радкі);
14. // Абнаўленне гэтай дынамічнай табліцы
15. myDynamicTable.update();
17. // Таймер абнаўлення
18. var autorefresh = document.getElementById(“аўтаабнаўленне”);
19. if (autorefresh && autorefresh.checked) {
20. калі (ID таймера) {
21. clearTimeout (ID таймера);
22. }
23. timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
24. }
25. }

Дадайце радкі табліцы

• У функцыі addRows() мы выкарыстоўваем фармат JSON для запаўнення кожнага глабальнага параметра ў радку табліцы.
• Усе палі HTML пералічаны ў масіве JSON (“table_rows”), а сінтаксіс поля табліцы прыведзены ніжэй.

Сінтаксіс:
радкі_табліц: [ , , … ] : { , , … }
: {“тып”: , «параметры»: [ , , …, ]}

• У гэтым выпадку кожны радок мае пяць палёў: “Session ID”, “Mode”, “Type”, “VLAN ID” і “Reflector Port” Напр.ampле,

Ідэнтыфікатар сеансу (Поле імя: int32_t)	1 (Ідэнтыфікатар люстраной сесіі)
Рэжым (Поле імя: vtss_bool_t)	праўда (Гэта азначае, што люстраны сеанс уключаны)
Тып (Поле імя: пералік {люстэрка, rMirrorSource, rMirrorDestination}	Крыніца RMirror (гэта крыніца аддаленага люстранога сеансу
Ідэнтыфікатар VLAN (Поле імя: uint16_t)	200 (Vlan, які выкарыстоўваецца для адлюстравання)
Порт адбівальніка (Поле імя: vtss_ifindex_t)	Гі 1/1 (Порт, на які адпраўляецца адлюстраваны трафік

• myDynamicTable.addRows() пераўтворыць даныя JSON у фармат HTML і вывядзе табліцу HTML.

1. функцыя addRow(ключ, значэнне)
2. {
3. var none_map_val = 0xFFFFFFFF, none_map_text = “Няма”, none_interface_text = “НЯМА”;
4. var tunnel_mode_suffix = val.TunnelMode == “useglobal” ? ” (” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;
5. зменная радок = {поля: [
6. {type:”link”, params:[“cr”, “mirror.htm?session_id=” + key, key]},
7. {type:”text”, params:[oTMode[oVMode.indexOf(val.Mode)], “c”]},
8. {type:”text”, params:[oTType[oVType.indexOf(val.Type)], “c”]},
9. {type:”text”, params:[val.Type == “mirror” ? «-»:
   val.RMirrorVlan, “c”]},
10. {type:”text”, params:[val.Type == “rMirrorSource” ?
    val.ReflectorPort : “-” , “c”]}
11. ]};
12. зваротны шэраг;
13. }
14. функцыя addRows(recv_json)
15. {
16. зменны радок, empty_colspan = 7;
17. var table_rows = новы масіў();
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 і атрымаць унікальны ідэнтыфікатар для tag.
• Калі HTML-дакумент будзе гатовы, выклічце loadXMLDoc(), каб атрымаць поўную спецыфікацыю JSON або атрымаць апісанне канкрэтнага метаду па імені метаду JSON «jsonRpc.status.introspection.specific.inventory.get».
• ProcessTableDesc() выкарыстоўваецца для абнаўлення апісання табліцы, а processUpdate() выкарыстоўваецца для абнаўлення апісання параметраў табліцы.
• У processUpdate() выклічце updateTableParamsDesc(), каб абнавіць элементы JSON, якія адпавядаюць назвам пэўных элементаў.
• Абнавіць або tag унутраны HTML у адпаведнасці з апісаннем элемента.

2. /* Абнавіць палі апісання HTML */
3. функцыя processTableDesc(req) {
4. калі (!req.responseText) {
5. вяртанне;
6. }
7. var json_spec = JSON.decode(req.responseText);
8. // Абнавіць апісанне табліцы
9. $(“TableDesc”).innerHTML = getJsonSpecElement(json_spec, “groups”, “dhcp6_relay.config.vlan”).description;
10. }
11. /* Абнавіць апісанне параметраў табліцы HTML */
12. функцыя processUpdate(recv_json) {
13. // Абнавіць апісанне параметраў табліцы
14. var param_names = [
15. {
16. «alias»: «Інтэрфейс»,
17. «тып»: «vtss_ifindex_t»,
18. «імя»: «інтэрфейс vlan»,
19. «суфікс»: «.»
20. },
21. {
22. «псеўданім»: «Інтэрфейс рэтрансляцыі»,
23. «тып»: «vtss_ifindex_t»,
24. «імя»: «relayVlanInterface»,
25. «суфікс»: «. Ідэнтыфікатар інтэрфейсу, які выкарыстоўваецца для рэтрансляцыі».
26. },
27. {
28. «alias»: «Пункт прызначэння рэтрансляцыі»,
29. «тып»: «mesa_ipv6_t»,
30. «імя»: «прызначэнне_рэле»,
31. «суфікс»: «. IPv6-адрас сервера DHCPv6, на які будуць перададзены запыты. Значэнне па змаўчанні «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файл глабальнай канфігураванай табліцы

дадатак

Тыповы web старонкі

Ёсць некалькі тыповых web старонкі могуць быць выкарыстаны для эталоннага дызайну. Яшчэ адзін эксampТут будзе паказана канфігурацыя аднаго люстранога сеансу, знойдзеная ў vtss_appl\mirror\html\mirror.htm.
The web старонка змяшчае падрабязную канфігурацыю для адной люстраной сесіі. Пералічаны ўсе настроеныя параметры.

• Націсніце кнопку «Захаваць», каб прымяніць бягучую канфігурацыю.
• Націсніце кнопку «Скінуць», каб скінуць бягучую канфігурацыю.
• Націсніце «Адмена», каб вярнуцца да пачаткуview люстраных сесій

Канфігурацыя Mirror&RMirror

Глабальныя налады

Канфігурацыя зыходнай VLAN(s).

Канфігурацыя порта

Малюнак 7. Exampфайл падрабязнай канфігурацыі люстраной сесіі
Кнопкі «Захаваць», «Скінуць» і «Адмена» дададзены html-кодам:

Паток каманд JSON
Для гэтай старонкі патрабуецца двухэтапная каманда:

• Спачатку трэба атрымаць магчымасці прылады метадам «mirror.capabilities.get». Магчымасці не змяняюцца і іх трэба прачытаць толькі адзін раз.
• Затым неабходна атрымаць бягучую канфігурацыю прылады з дапамогай метадаў «mirror.config.session.get», «port.status.get» і ў выпадку стэкавання «topo.config.stacking.get».

Выклік «mirror.capabilities.get» ініцыюецца падзеяй «domready», а вынік канфігуруецца для апрацоўкі функцыяй requestUpdate.
QuestUpdate ініцыюе выклік «mirror.config.session.get»,
«port.status.get» і ў выпадку стэкавання «topo.config.stacking.get», і вынікі гэтых выклікаў наладжваюцца на апрацоўку функцыяй pripraviUpdate.
Функцыя pripraveUpdate збярэ ўсе вынікі, і толькі калі ўсе будуць атрыманы, яна выкліча функцыю processUpdate, якая створыць табліцы для паказу на 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 Прыкладанне для праграмістаў, дадатак

Спасылкі

• Кіраўніцтва карыстальніка