基于ExtJS的網(wǎng)管系統(tǒng)設(shè)計與實現(xiàn)

馬青青，于洪濤，雷娟娟

（國家數(shù)字交換系統(tǒng)工程技術(shù)研究中心 河南 鄭州 450000）

基于ExtJS的網(wǎng)管系統(tǒng)設(shè)計與實現(xiàn)

馬青青，于洪濤，雷娟娟

（國家數(shù)字交換系統(tǒng)工程技術(shù)研究中心 河南 鄭州 450000）

為了實現(xiàn)對嵌入式設(shè)備的網(wǎng)絡(luò)管理需求，提出一種基于ExtJS 4.2.1的嵌入式網(wǎng)絡(luò)管理系統(tǒng)設(shè)計方案，并完成系統(tǒng)的設(shè)計。該系統(tǒng)程序結(jié)構(gòu)采用MVC模式，界面部分主要利用ExtJS提供的視圖、面板、表格、表單等組件進行搭建，服務(wù)器端采用嵌入式服務(wù)器BOA并由CGI程序?qū)ζ溥M行功能擴展。將該網(wǎng)管系統(tǒng)下載到嵌入式設(shè)備的系統(tǒng)中運行后，可在客戶端瀏覽器中成功進行訪問及進行相關(guān)操作。實際應(yīng)用表明，該系統(tǒng)性能穩(wěn)定，界面友好且具有較強的操作性。

ExtJS；MVC；網(wǎng)管系統(tǒng)；嵌入式

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

1　ExtJS4　的MVC模式

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

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

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

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

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

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

2　系統(tǒng)UI需求設(shè)計

2.1系統(tǒng)需求

基于B/S結(jié)構(gòu)的嵌入式網(wǎng)管軟件，提供對專用設(shè)備中各個單板的運行管理、狀態(tài)跟蹤、操作維護、規(guī)則配置、信息采集和策略管理等功能。

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

2.2系統(tǒng)結(jié)構(gòu)設(shè)計

本文設(shè)計的嵌入式網(wǎng)管系統(tǒng)結(jié)構(gòu)組如圖2所示。當(dāng)瀏覽器向服務(wù)器發(fā)送需要對外部設(shè)備進行處理的請求時，服務(wù)器調(diào)用CGI（Common Gateway Interface，公共網(wǎng)關(guān)接口）程序，由CGI與單板的網(wǎng)管接口程序進行交互。由于CGI不常駐內(nèi)存，外部程序的處理結(jié)果將由MsgRead函數(shù)接收，并寫入數(shù)據(jù)庫。CGI與數(shù)據(jù)庫交互并將處理結(jié)果返回服務(wù)器BOA，BOA再將數(shù)據(jù)發(fā)送到前端相應(yīng)的界面上。

圖2　嵌入式網(wǎng)管系統(tǒng)結(jié)構(gòu)圖Fig.2　Structure diagram of embedded network management system

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

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

2.3系統(tǒng)UI設(shè)計

根據(jù)嵌入式網(wǎng)管系統(tǒng)的功能需求以及用戶習(xí)慣，可以將前端用戶主界面分為4個部分，這4個部分分別是系統(tǒng)信息顯示區(qū)，功能導(dǎo)航區(qū)，功能模塊顯示區(qū)和操作告警信息顯示區(qū)。如圖3所示。

圖3　系統(tǒng)主界面設(shè)計Fig.3　Design of system main interface

頁面頂部是系統(tǒng)信息顯示區(qū)，用來顯示系統(tǒng)名稱，用戶登陸名稱，注銷按鈕，以及告警信號燈狀態(tài)。

頁面左部是功能導(dǎo)航區(qū)，導(dǎo)航區(qū)內(nèi)顯示出可供用戶操作的功能菜單。用戶通過選擇菜單中的選項，進入相關(guān)的功能模塊。

頁面右部是功能模塊顯示區(qū)，按照執(zhí)行的功能可以將其分成3種：設(shè)備狀態(tài)顯示界面，設(shè)備狀態(tài)管理界面和設(shè)備配置數(shù)據(jù)表顯示界面（可增加、修改和刪除每行數(shù)據(jù)）。

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

3　系統(tǒng)實現(xiàn)

3.1系統(tǒng)界面實現(xiàn)

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

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

根據(jù)系統(tǒng)的設(shè)計需求，在主界面的結(jié)構(gòu)設(shè)計上采用ExtJS 的ViewPort類；視圖可以由應(yīng)用程序自動生成。在容器內(nèi)使用邊框布局，將容器劃分為上（north）、下（south）、左（west）、右（center）4個區(qū)域。部分代碼示意如下：

north區(qū)域?qū)?yīng)的是系統(tǒng)信息顯示區(qū)；在north區(qū)域中自定義一個面板類，將系統(tǒng)名稱的Logo、注銷按鈕等元素加入面板，部分代碼如下：

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

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

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

south區(qū)域?qū)?yīng)的是報告消息顯示區(qū)；在south區(qū)域中定義一個標(biāo)簽面板類，引入兩個可以自由切換的標(biāo)簽，分別用來顯示操作報告和告警信息。部分代碼如下。

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

圖5　系統(tǒng)數(shù)據(jù)配置模塊界面Fig.5　System data configuration module interface

3.2系統(tǒng)前后端交互的實現(xiàn)

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

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

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

4　結(jié)束語

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

［1］方征.ExtJS在RIA開發(fā)中的應(yīng)用［J］.電腦知識與技術(shù)，2009，5:4994-4995.

［2］楊永，萬曉榆，樊自甫.基于ARM9嵌入式網(wǎng)管系統(tǒng)的設(shè)計與實現(xiàn)［J］.通信技術(shù)，2008，41（3）:68-70.

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

［4］黃燈橋.ExtJS 4.2實戰(zhàn)［M］.北京：清華大學(xué)出版社，2014.

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

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

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

［8］任霄龍，王清心.基于ExtJS的數(shù)據(jù)存儲與傳輸?shù)难芯颗c實現(xiàn)［J］.甘肅科學(xué)學(xué)報，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—），女，安徽利辛人，碩士。研究方向：信息通信網(wǎng)技術(shù)。