基于ExtJS的網管系統設計與實現

馬青青，于洪濤，雷娟娟

（國家數字交換系統工程技術研究中心 河南 鄭州 450000）

基于ExtJS的網管系統設計與實現

馬青青，于洪濤，雷娟娟

（國家數字交換系統工程技術研究中心 河南 鄭州 450000）

為了實現對嵌入式設備的網絡管理需求，提出一種基于ExtJS 4.2.1的嵌入式網絡管理系統設計方案，并完成系統的設計。該系統程序結構采用MVC模式，界面部分主要利用ExtJS提供的視圖、面板、表格、表單等組件進行搭建，服務器端采用嵌入式服務器BOA并由CGI程序對其進行功能擴展。將該網管系統下載到嵌入式設備的系統中運行后，可在客戶端瀏覽器中成功進行訪問及進行相關操作。實際應用表明，該系統性能穩定，界面友好且具有較強的操作性。

ExtJS；MVC；網管系統；嵌入式

隨著“富客戶端”技術［1］的逐漸成熟，以及ExtJS框架的不斷完善，ExtJS被應用到越來越多的網管系統中。嵌入式網管系統采用B/S架構［2］，將網管服務器嵌入到被管理的設備中，使得管理維護人員可以通過訪問瀏覽器上的客戶端界面直接對設備進行遠距離管理和維護。傳統的嵌入式網管系統界面風格比較單調，用戶在客戶端的體驗較差。基于ExtJS框架的嵌入式網管系統UI（User Interface，用戶界面），研發成本低，開發速度快，界面友好美觀，客戶端與服務端具有很強的交互性，使得用戶擁有更好的使用體驗。

1　ExtJS4　的MVC模式

ExtJS主要用于創建前端用戶界面，支持跨瀏覽器運行且與后臺技術無關，可以與ASP.NET、Java、PHP，C等各種語言結合［3］。它使用JavaScript編寫，是一個用來開發富客戶端的AJAX框架。與之前各版本相比，ExtJS的一個重大變化是重新構建了適應MVC模式的程序結構。MVC即模型（Model）、視圖（View）、控制器（Controller）的縮寫，是一種軟件設計模式。使用MVC模式設計創建Web應用程序，可實現對HTML、CSS、JavaScript的同時控制［4］。MVC的3個基本部分，分別負責不同的功能，不同的開發人員可同時對視圖、控制器邏輯和業務邏輯進行開發，這種分層開發的思想模式使得代碼邏輯清晰且具有很好的擴展性和移植性。ExtJS的MVC模式主要構成如圖1所示。

圖1　ExtJS的MVC模式Fig.1　MVC mode of ExtJS

視圖用來顯示數據的各種UI組件，如數據視圖（Ext.view. View）、網格面板（Ext.grid.Panel）、表單面板（Ext.form.Panel）等組件。這些組件是ExtJS的自定義類，可直接使用。

控制器為視圖綁定事件，執行相關的操作。它是從Ext.app.Controller擴展的類，在類中通過組件查詢（Ext.Component）類來查詢視圖組件。

模型配合代理（Ext.data.proxy.Proxy）、讀取器（Ext.data. reader.Reader）和編寫器（Ext.data.writer.Writer）等類提供對數據的讀取、更新、添加和刪除等操作。模型即存儲（Ext.data. Store），是一種類似于數據庫存儲數據的方式。

在本文中，嵌入式網管系統的前端界面設計采用了MVC模式，由ExtJS 4.2相關組件搭建而成。管理人員通過前端圖形界面與后端其他子系統進行交互，在控制器部分將輸入的指令和數據傳遞給業務模型，在模型部分進行業務邏輯判斷和數據庫存取，最后根據業務邏輯選擇不同的視圖進行顯示。

2　系統UI需求設計

2.1系統需求

基于B/S結構的嵌入式網管軟件，提供對專用設備中各個單板的運行管理、狀態跟蹤、操作維護、規則配置、信息采集和策略管理等功能。

嵌入式網管系統需要具備對于設備配置數據的管理和維護功能。對設備進行配置的各類數據表存儲在SQLite數據庫中，界面支持對各種數據表的顯示，并可以對各類數據表項進行增、刪、改、查等入庫操作。系統應具有對設備的操作和維護功能，包括對設備部件的狀態進行實時顯示和更新，對設備部件進行復位、封鎖、開放等。此外，系統還需要實時顯示當前輸出的告警報告信息和操作報告信息。

2.2系統結構設計

本文設計的嵌入式網管系統結構組如圖2所示。當瀏覽器向服務器發送需要對外部設備進行處理的請求時，服務器調用CGI（Common Gateway Interface，公共網關接口）程序，由CGI與單板的網管接口程序進行交互。由于CGI不常駐內存，外部程序的處理結果將由MsgRead函數接收，并寫入數據庫。CGI與數據庫交互并將處理結果返回服務器BOA，BOA再將數據發送到前端相應的界面上。

圖2　嵌入式網管系統結構圖Fig.2　Structure diagram of embedded network management system

嵌入式Web服務器包括BOA和CGI，BOA是一個運行在LINUX系統中的小型Web服務器開源軟件，它的基本功能包括：接受客戶端的連接請求，接收客戶端提交的HTTP請求消息，將HTTP響應消息返回給客戶端，關閉連接等。CGI規范給出了Web服務器和CGI應用程序進程之間傳遞信息的標準，是嵌入式Web服務器中實現客戶端與服務器動態交互的主要手段［5］。CGI通過操作SQLite數據庫來實現對各類數據表項的維護。

嵌入式網管系統運行在單板上，通過HTTP協議與Web瀏覽器接口，接收操作請求并輸出操作結果和告警信息；通過內部消息接口與單板的網管接口軟件模塊通信。將嵌入式Web服務器嵌入到單板中并運行后，用戶在Web瀏覽器上輸入單板的IP地址可以進入嵌入式網管系統的操作維護界面，通過網管系統UI直接對設備進行管控和維護。

2.3系統UI設計

根據嵌入式網管系統的功能需求以及用戶習慣，可以將前端用戶主界面分為4個部分，這4個部分分別是系統信息顯示區，功能導航區，功能模塊顯示區和操作告警信息顯示區。如圖3所示。

圖3　系統主界面設計Fig.3　Design of system main interface

頁面頂部是系統信息顯示區，用來顯示系統名稱，用戶登陸名稱，注銷按鈕，以及告警信號燈狀態。

頁面左部是功能導航區，導航區內顯示出可供用戶操作的功能菜單。用戶通過選擇菜單中的選項，進入相關的功能模塊。

頁面右部是功能模塊顯示區，按照執行的功能可以將其分成3種：設備狀態顯示界面，設備狀態管理界面和設備配置數據表顯示界面（可增加、修改和刪除每行數據）。

頁面底部是報告消息顯示區，用來顯示操作和告警信息。

3　系統實現

3.1系統界面實現

本文采用ExtJS 4.2.1對前端界面框架進行搭建，需要用到ExtJS框架里的視圖（Ext.ViewPort），窗口（Ext.Window），面板（Ext.Panel），組件（Ext.Component），容器（Ext.Container），按鈕（Ext.Button），表格（Ext.grid.GridPanel），樹（Ext.tree.Panel），標簽面板（Ext.TabPanel）等組件。

首先需要將ExtJS程序包引入到工程項目中，引入的方法為：將ExtJS 4.2.1的程序包及相關文件放入服務器的一個目錄下 （實際應用中由于嵌入式設備自身的資源空間有限，可以對沒有用到的包及文件進行裁剪）。

根據系統的設計需求，在主界面的結構設計上采用ExtJS 的ViewPort類；視圖可以由應用程序自動生成。在容器內使用邊框布局，將容器劃分為上（north）、下（south）、左（west）、右（center）4個區域。部分代碼示意如下：

north區域對應的是系統信息顯示區；在north區域中自定義一個面板類，將系統名稱的Logo、注銷按鈕等元素加入面板，部分代碼如下：

west區域對應的是功能導航區；在west區域中自定義一個樹形面板類，使用樹形布局來顯示系統的操作功能菜單，為擴展主區域的可視范圍，west區域應允許用戶折疊。功能菜單設計為兩個模塊，其中設備管理模塊主要實現對設備的操作，如部件復位、封鎖等。系統數據配置模塊用來顯示設備配置數據，這些配置數據將以表格的形式顯示在界面上，并允許用戶對數據進行增加，修改和刪除。部分代碼如下：

center區域是系統主區域，對應的是功能模塊顯示區，相應的功能標簽由卡片布局來顯示。當單擊west區域樹形的功能按鈕時，在center區域會顯示相應的標簽頁。對于設備管理模塊，在自定義面板類的基礎上，引入ExtJS的表單組件，以實現表單的自行驗證。對于系統數據顯示界面，定義表格面板類，引入ExtJS的表格控件［6］，將設備的配置數據呈現給用戶，并在用戶界面上實現對各類數據表的增、刪、改、查操作，如圖4、圖5所示。

圖4　設備管理模塊界面Fig.4　Device management module interface

south區域對應的是報告消息顯示區；在south區域中定義一個標簽面板類，引入兩個可以自由切換的標簽，分別用來顯示操作報告和告警信息。部分代碼如下。

操作報告和告警信息的顯示也采用ExtJS的表格控件，表格中的信息從后端程序中讀取。

圖5　系統數據配置模塊界面Fig.5　System data configuration module interface

3.2系統前后端交互的實現

ExtJS使用Ajax方式來提供與服務器交互的機制，使得系統前端與后端服務器的交互以異步的方式進行［7］。當正在運行的程序中需要給服務器端發送數據時，可以直接使用ExtJS中提供的Ext.Ajax對象的request方法，來訪問服務器的程序以進行數據讀取或數據保存等操作。

本文采用Ext.Ajax對象中的request方法實現系統前端程序與后端程序的數據交換、參數傳遞等功能。來自系統客戶端的請求可分為不同的種類，如表單提交請求，數據讀取、保存及修改請求，獲取告警及操作信息請求等。為使服務器端的CGI程序區分這些請求，在Ajax請求的參數項（params）里，設置不同的類型（action）。請求發出后，CGI根據action參數來執行管理命令（對設備的管理操作）或與SQLite數據庫進行數據交換（系統數據的保存和修改）。若請求發送成功，返回的數據由request方法里的success函數接收后進行處理，并給出成功提示信息。若請求發送失敗，結果返回至failure函數，同樣給出提示信息。部分實現代碼如下：

ExtJS在實用工具Utils中提供了對Json數據的解碼和反解碼，為了完成系統前后端數據的交換，本文采用統一的Json格式。在定義的數據存儲器Ext.data.Store中加入相應代碼，即可成功讀取Json數據［8］。加入的部分代碼如下：

4　結束語

基于ExtJS的嵌入式網管系統使得對設備的管控和維護更加直觀方便。實踐結果表明，ExtJS框架可以成功應用到嵌入式設備的管理系統中，利用該框架并結合CGI技術可以為嵌入式網管系統搭建了一個集功能與美觀于一體的操作界面，極大地提高了用戶體驗。

［1］方征.ExtJS在RIA開發中的應用［J］.電腦知識與技術，2009，5:4994-4995.

［2］楊永，萬曉榆，樊自甫.基于ARM9嵌入式網管系統的設計與實現［J］.通信技術，2008，41（3）:68-70.

［3］陳道鑫，宋紹云，袁中旺，等.ExtJS框架在Web軟件開發中的應用［J］.電腦知識與技術，2011，7（9）:2044-2047.

［4］黃燈橋.ExtJS 4.2實戰［M］.北京：清華大學出版社，2014.

［5］戴麗華.嵌入式Web服務器的研究與應用［J］.輕工科技，2013，（11）:72-73.

［6］鄧偉成，范軼翔，夏翔，等.ExtJS框架下Grid組件的擴展及應用［J］.計算機應用，2012，32（S1）:80-82.

［7］呂國勇，史祥龍.基于嵌入式Linux和Ajax技術的Web異步交互設計［J］.計算機應用，2013，33（S1）:247-251.

［8］任霄龍，王清心.基于ExtJS的數據存儲與傳輸的研究與實現［J］.甘肅科學學報，2013，25（1）:124-128.

Design and implementation of network management system based on ExtJS

MA Qing-qing，YU Hong-tao，LEI Juan-juan
（National Digital Switching System Engineering&Technological Research Center，Zhengzhou 450000，China）

In order to satisfy the requirement of network management for embedded devices，this paper proposed an embedded network management system which based on ExtJS 4.2.1.MVC mode is used in the program structure of the system.The interface of the system is mainly set up by view，panels，tables and forms provided by ExtJS.The BOA server which adopts CGI as its extensions is applied in the system.After downloading the network management system to the embedded devices，the system can be accessed and operated successfully.The application shows that the system has friendly interface，stronger operation and stable performance.

ExtJS；MVC；network management system；embedded

TN915.07

A

1674－6236（2016）05-0062-04

2015-04-20稿件編號：201504219

馬青青（1992—），女，安徽利辛人，碩士。研究方向：信息通信網技術。