內容 隱藏
1 美高森美 AN1256 Web 程式設計師申請
2 介紹
3 JSON資料存取流程
4 Web 框架
5 JSON 指南 Web 頁面設計
5.1 編輯 Web 頁
6 附錄
6.1 鏡像&R鏡像配置
7 參考
8 文件/資源
8.1 參考
9 相關貼文

Microsemi-LGOO

美高森美 AN1256 Web 程式設計師申請

Microsemi-AN1256-Web-程式設計師-應用程式-PRO

介紹

JSON（JavaScript 物件表示法）是一個開放標準 file 使用人類可讀文字進行資料交換的格式。它是用於非同步瀏覽器/伺服器通訊的常見資料格式。
對於新 web 頁面設計，JSON格式可以取代原來的AJAX風格。與 AJAX 相比，使用 JSON 使得 Web 實施更容易、更簡單。開發者只需關注 web 頁面設計和 Web 可以省略處理程序實現，因為每個中都已經支援 JSON 存取方法 WebStaX 軟體模組。
本文檔為需要開發的軟體工程師提供了程式設計師指南 Web 透過 JSON 的頁面。詳細流程及實施例amples 也包含在以下部分中。

JSON資料存取流程

超過view
這是從客戶端（瀏覽器）發起HTTP連線的JSON資料存取流程。 HTML表格是根據從伺服器(DUT)端接收到的JOSN資料動態建立的。Microsemi-AN1256-Web-程式設計師-應用程式-圖 1

圖 1. 客戶端和伺服器之間的存取流程

請求/回應 JSON 數據
JSON請求封包基於HTTP請求post方法，內容必須遵循MSCC JSON格式。

  • 請求 JSON 語法：{“方法”：” ”,“參數”:[ ], “id:”jsonrpc”}
  • 回應 JSON 語法： {“錯誤”： ，「結果」： , “id:”jsonrpc”}

以下快照顯示了瀏覽器和 DUT 之間的 JSON 內容。Microsemi-AN1256-Web-程式設計師-應用程式-圖 2

圖 2. 來自客戶端的 HTTP 請求的快照Microsemi-AN1256-Web-程式設計師-應用程式-圖 3

圖 3. 來自伺服器的 HTTP 回應的快照

MSCC JSON 規範
要獲取完整的 JSON 信息，包括方法、參數、描述等，請輸入“http:// /json_spec”在瀏覽器網址列上。還有另一種透過 JSON 方法名稱「jsonRpc.status.introspection.specific.inventory.get」存取的方法，它用於特定方法。Microsemi-AN1256-Web-程式設計師-應用程式-圖 4

圖 4. JSON 規範快照 web 頁

Web 框架

這 Web 框架在 WebStaX 軟體是基於開源 MooTools。它是具有 MIT 許可證的 JavaScript 實用程式的集合。 （http://mootools.net/license.txt）選單列和大部分 web 頁面基於框架。 AJAX 和 JSON 演算法都已整合在其實用程式中。
除了， WebStaX 軟體提供了對 JSON 有用的其他實用程序 web 頁面設計。

  • json.js – 用於使用 JSON 語法傳輸/接收動態資料。
  • dynforms.js – 用於動態建立 HTML 表。
  • 驗證.js – 用於 HTML 表單的驗證。

完整的 JavaScript 函式庫位於原始碼樹目錄下： webstax2\ vtss_appl\web\html\lib。

JSON 指南 Web 頁面設計

本節指導如何設計 web 基於 MSCC JavaScript 函式庫的頁面。我們使用全域配置的Mirror web 頁面作為前任amp就在這裡。非同步通訊基於 HTTP JSON 存取方法，所有全域設定參數都列在一個動態 HTML 表中。
這 web 下面列出了頁面佈局，完整的源代碼位於源樹目錄下： webstax2\vtss_appl\mirror\html\mirror_ctrl.htm。為了獲得更典型的 web 頁面參考，請參閱附錄部分。

Mirror&RMirror設定表Microsemi-AN1256-Web-程式設計師-應用程式-圖 5

圖 5. Examp全域設定表文件

編輯 Web 頁

HTML 標頭
在HTML中包含所需的JS函式庫 tag.

初始化動態表資源

  • 當 HTML 文件準備好後，呼叫 DynamicTable() 來初始化動態表資源。
  • DynamicTable()用於在收到JSON資料後建立動態表。
  • 然後它將呼叫 requestUpdate 來啟動 JSON 命令流。
  1. window.addEvent('domready', function() {
  2. // 建立一個帶有表體的表單，用於接收/傳輸 JSON 數據
  3. myDynamicTable = new DynamicTable(“myTableContent”, “config”, “plusRowCtrlBar”);
    4
  4. 請求更新（）；
  5. });

請求/回應 JSON 數據

  • HTML 文件準備好後，使用 requestJsonDoc() 傳送 JSON 請求「mirror.config.session.get」以取得已配置會話的資訊。
  • 收到「mirror.capability.get」的JSON資料後，將處理回調函數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(“config”, recv_json);
  10. // 新增表格行
  11. var table_rows = addRows(recv_json);
  12. myDynamicTable.addRows(table_rows);
  14. // 更新這個動態表
  15. myDynamicTable.update();
  17. // 刷新定時器
  18. var autorefresh = document.getElementById(“自動刷新”);
  19. if (自動刷新 && 自動刷新.checked) {
  20. if (定時器ID) {
  21. 清除超時(timerID);
  22. }
  23. timerID = setTimeout('requestUpdate()', settingsRefreshInterval());
  24. }
  25. }

新增表格行

  • 在addRows()函數中，我們使用JSON格式填入表格行中的每個全域設定參數。
  • 所有 HTML 欄位都列在 JSON 陣列（“table_rows”）中，表格欄位的語法如下。

句法：
表行：[ , , … ] ：{ , , … }
： {“類型”： ，「參數」：[ , , …, ]}

  • 在這種情況下，每行有五個欄位：“會話 ID”、“模式”、“類型”、“VLAN ID”和“反射器連接埠”amp樂，
會話ID （名稱欄位：int32_t） 1 （鏡像會話的 ID）
模式 （名稱欄位：vtss_bool_t） 真的 （表示鏡像會話已啟用）
類型 （名稱欄位：枚舉

{鏡像，rMirrorSource，rMirrorDestination}

 R鏡像來源 （這是遠端鏡像會話的來源
VLAN ID （名稱欄位：uint16_t） 200 （鏡像使用的vlan）
反射器端口 （名稱欄位：vtss_ifindex_t） GI 1/1 （鏡像流量發送到的端口
  • myDynamicTable.addRows() 會將 JSON 資料轉換為 HTML 格式並輸出 HTML 表。
  1. 函數 addRow(key, val)
  2. {
  3. var none_map_val = 0xFFFFFFFF，none_map_text =“無”，none_interface_text =“無”；
  4. vartunnel_mode_suffix = val.TunnelMode==「useglobal」？ ” (” + oTTunnelMode[oVTunnelMode.indexOf(global_conf.tunnelMode)] + “)” : “”;
  5. var row = {字段:[
  6. {type:”link”, params:[“cr”, “mirror.htm?session_id=” + key, key]},
  7. {類型：“文字”，參數：[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. {類型：“文字”，參數：[val.Type ==“rMirrorSource”？
    val.ReflectorPort : “-”, “c”]}
  11. ]}；
  12. 返回行；
  13. }
  14. 函數 addRows(recv_json)
  15. {
  16. var 行，empty_colspan = 7;
  17. var table_rows = new Array();
  18. // 新增表頭
  19. 新增表頭（表行）；
  20. // 新增單行
  21. Object.each(recv_json, 函數(記錄) {
  22. table_rows.push(addRow(record.key, record.val));
  23. });
  24. 傳回表行數；
  25. }

Web 幫助頁面
對於 web 幫助頁面設計，幫助描述可以參考JSON規範，描述文字與JSON輸出一致，有助於減少冗餘描述。前任amp這裡的 le 取自 dhcp6 中繼設定。

來源中的超連結 file
分配幫助 file 在其來源中的位置 file 超文本標記語言 tag。固定變數名稱“help_page”用於 web 幫助頁面分配。

  2. // 幫助頁面魔法
  3. var help_page = “/help/help_xxx.htm”;

根據 JSON 規範更新 HTML 字段描述

  • 使用或者超文本標記語言 tag 聲明 HTML 表描述並為其指定唯一 ID tag.
  • 當 HTML 文件準備好後，呼叫 loadXMLDoc() 取得整個 JSON 規格或透過 JSON 方法名稱「jsonRpc.status.introspection.spec.inventory.get」取得具體方法描述。
  • processTableDesc()用於更新表描述，processUpdate()用於更新表參數描述。
  • 在processUpdate()中，呼叫updateTableParamsDesc()來更新與特定元素名稱相符的JSON元素。
  • 更新或者 tag 根據元素所描述的內部 HTML。
  2. /* 更新 HTML 描述欄位 */
  3. 函數 processTableDesc(req) {
  4. if (!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 參數名稱 = [
  15. {
  16. “別名”：“接口”，
  17. “類型”：“vtss_ifindex_t”，
  18. “名稱”：“vlan介面”，
  19. “後綴”： ”。”
  20. },
  21. {
  22. “alias”: “中繼介面”,
  23. “類型”：“vtss_ifindex_t”，
  24. “名稱”：“relayVlan介面”，
  25. 「後綴」： 」。用於中繼的介面id。
  26. },
  27. {
  28. “alias”：“中繼目的地”，
  29. “類型”：“mesa_ipv6_t”，
  30. “名稱”：“中繼目的地”，
  31. 「後綴」： 」。請求的 DHCPv6 伺服器的 IPv6 位址將被中繼到。預設值“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', function () {
  38. loadXMLDoc(“/json_spec”, processTableDesc);
  39. requestJsonDoc(“jsonRpc.status.introspection.special.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」群組下。Microsemi-AN1256-Web-程式設計師-應用程式-圖 6

圖 6. 前amp全域設定表文件

附錄

典型的 web 頁面

有幾種典型的 web 頁面可用於參考設計。另外一名前任amp這裡要顯示的檔案是在 vtss_appl\mirror\html\mirror.htm 中找到的單一鏡像會話的設定。
這 web 頁面提供單一鏡像會話的詳細配置。列出所有配置的參數。

  • 按一下「儲存」按鈕以套用目前配置。
  • 按一下「重設」按鈕可重設目前配置。
  • 點擊“取消”返回結束view 鏡像會話數
鏡像&R鏡像配置

全域設定Microsemi-AN1256-Web-程式設計師-應用程式-圖 7

來源 VLAN 配置Microsemi-AN1256-Web-程式設計師-應用程式-圖 8

連接埠配置Microsemi-AN1256-Web-程式設計師-應用程式-圖 9

圖 7. Examp鏡像會話詳細配置文件
html程式碼新增了「儲存」、「重設」和「取消」按鈕：

JSON 命令流程
此頁面需要兩步驟命令流程：

  • 首先，它需要使用“mirror.capability.get”方法來取得設備的功能。這些功能不會改變，只需讀取一次。
  • 然後，它需要使用「mirror.config.session.get」、「port.status.get」方法以及堆疊「topo.config.stacking.get」方法來取得裝置的目前設定。

「mirror.capability.get」的呼叫由「domready」事件發起，結果配置為由函數 requestUpdate 處理。
requestUpdate會發起「mirror.config.session.get」的調用，
“port.status.get”和堆疊“topo.config.stacking.get”以及這些呼叫的結果配置為由函數prepareUpdate 處理。
函數prepareUpdate將收集所有結果，只有當所有結果都收到時，它才會呼叫函數processUpdate，該函數將建構要在上顯示的表 web.

參考

  1. 維基百科 JavaScript https://en.wikipedia.org/wiki/JavaScript
  2. JSON https://www.json.org/
  3. 月亮工具 https://mootools.net/

文件/資源

美高森美 AN1256 Web 程式設計師申請 [pdf] 使用者指南
AN1256, AN1256 Web 程式設計師應用程式， Web 程式設計師申請、申請

參考

相關貼文

發表評論

您的電子郵件地址不會被公開。 必填欄位已標記 *