馬青青，于洪濤，雷娟娟

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

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

馬青青，于洪濤，雷娟娟

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

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

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

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

1　ExtJS4　的MVC模式

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

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

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

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

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

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

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

2.1系統(tǒng)需求

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

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

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

本文設(shè)計(jì)的嵌入式網(wǎng)管系統(tǒng)結(jié)構(gòu)組如圖2所示。當(dāng)瀏覽器向服務(wù)器發(fā)送需要對(duì)外部設(shè)備進(jìn)行處理的請(qǐng)求時(shí)，服務(wù)器調(diào)用CGI（Common Gateway Interface，公共網(wǎng)關(guān)接口）程序，由CGI與單板的網(wǎng)管接口程序進(jìn)行交互。由于CGI不常駐內(nèi)存，外部程序的處理結(jié)果將由MsgRead函數(shù)接收，并寫(xiě)入數(shù)據(jù)庫(kù)。CGI與數(shù)據(jù)庫(kù)交互并將處理結(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是一個(gè)運(yùn)行在LINUX系統(tǒng)中的小型Web服務(wù)器開(kāi)源軟件，它的基本功能包括：接受客戶端的連接請(qǐng)求，接收客戶端提交的HTTP請(qǐng)求消息，將HTTP響應(yīng)消息返回給客戶端，關(guān)閉連接等。CGI規(guī)范給出了Web服務(wù)器和CGI應(yīng)用程序進(jìn)程之間傳遞信息的標(biāo)準(zhǔn)，是嵌入式Web服務(wù)器中實(shí)現(xiàn)客戶端與服務(wù)器動(dòng)態(tài)交互的主要手段［5］。CGI通過(guò)操作SQLite數(shù)據(jù)庫(kù)來(lái)實(shí)現(xiàn)對(duì)各類數(shù)據(jù)表項(xiàng)的維護(hù)。

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

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

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

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

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

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

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

頁(yè)面底部是報(bào)告消息顯示區(qū)，用來(lái)顯示操作和告警信息。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

4　結(jié)束語(yǔ)

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

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

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

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

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

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

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

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

［8］任霄龍，王清心.基于ExtJS的數(shù)據(jù)存儲(chǔ)與傳輸?shù)难芯颗c實(shí)現(xiàn)［J］.甘肅科學(xué)學(xué)報(bào)，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稿件編號(hào)：201504219

馬青青（1992—），女，安徽利辛人，碩士。研究方向：信息通信網(wǎng)技術(shù)。