基于ExtJS的IT信息管理系統(tǒng)的設(shè)計和實現(xiàn)

張一潔

(上海電氣電站設(shè)備有限公司電站輔機廠,上海 200090）

基于ExtJS的IT信息管理系統(tǒng)的設(shè)計和實現(xiàn)

張一潔

(上海電氣電站設(shè)備有限公司電站輔機廠,上海 200090）

傳統(tǒng)的Web應(yīng)用在與用戶交互上,表現(xiàn)出的響應(yīng)比較緩慢,常需要用戶在線等待,通過A jax技術(shù)可使這種狀態(tài)得到改善?；贏 jax框架-ExtJS開發(fā)的IT信息管理系統(tǒng),是一種管理IT部門軟硬件資源的數(shù)據(jù)庫系統(tǒng),充分利用了Ex tJS框架的U I控件庫及控件的可擴展機制等優(yōu)點,開發(fā)了功能豐富、互動性良好的客戶端界面。該系統(tǒng)基于B/S結(jié)構(gòu),前、后臺的結(jié)構(gòu)清晰,具備良好的可擴展性和可維護(hù)性。

軟件;應(yīng)用;框架;控件;組件;編程;設(shè)計;實現(xiàn)

1 概 述

目前,A jax技術(shù)已被廣泛地用在Web的應(yīng)用開發(fā)中。與傳統(tǒng)的Web應(yīng)用相比,A jax技術(shù)可有效地改善Web應(yīng)用的可用性。可以支持開發(fā)出功能豐富的用戶界面,讓用戶在Web瀏覽器上完成更多的工作;采用A jax技術(shù),減少了與服務(wù)器端的數(shù)據(jù)交換,不再像傳統(tǒng)的Web應(yīng)用需要向服務(wù)器提交整個頁面,僅需傳送少量的數(shù)據(jù)片斷,減少了用戶等待服務(wù)器處理的時間,提高了用戶的工作效率,改善了用戶體驗[1]。

2 Ajax應(yīng)用

2.1 Ajax與傳統(tǒng)Web的不同應(yīng)用

2.1.1 客戶端與服務(wù)器端的通信

A jax應(yīng)用采取的是異步通信,即當(dāng)用戶提交了一個Web請求后,就可繼續(xù)做系統(tǒng)操作,而不必坐著等待服務(wù)器的響應(yīng)。而且,A jax技術(shù)提交給服務(wù)器的只是數(shù)據(jù)的片斷,不似傳統(tǒng)應(yīng)用,需將整個頁面?zhèn)魉汀＿@種通信方式,提高了系統(tǒng)的反應(yīng)速度,同時也減少了網(wǎng)絡(luò)負(fù)荷。

2.1.2 用戶與系統(tǒng)的交互

傳統(tǒng)的Web應(yīng)用,提供給用戶的是顯示靜態(tài)信息的Web頁面。與系統(tǒng)的交互必定是填寫表單或單擊某個網(wǎng)頁鏈接。通過表單錄入的數(shù)據(jù),必須一次性地提交給服務(wù)器。對于大批量的數(shù)據(jù)錄入,在用戶點擊保存按鈕進(jìn)行存儲時,可能因為網(wǎng)絡(luò)問題,導(dǎo)致提交失敗和數(shù)據(jù)丟失;服務(wù)器對用戶的認(rèn)證失敗后,就需重復(fù)提交這個過程。

A jax應(yīng)用通過將用戶對數(shù)據(jù)的更改及時提交給服務(wù)器,并顯示給用戶,使用戶與系統(tǒng)的交互變得及時和直觀。由于數(shù)據(jù)是及時更新的,不會導(dǎo)致大批量數(shù)據(jù)因為網(wǎng)絡(luò)問題而丟失。

2.1.3 系統(tǒng)的架構(gòu)

傳統(tǒng)的Web應(yīng)用在很大程度上依賴于H TM L表單,并且更多地通過服務(wù)器端編程來完成主要的工作。服務(wù)器端既要處理來自客戶端的請求,又要根據(jù)請求生成相應(yīng)的頁面。這樣的工作,使得在開發(fā)中,服務(wù)器端的開發(fā)需要和UI的開發(fā)結(jié)合在一起,增加了服務(wù)器端開發(fā)的成本。

A jax技術(shù)改變了這樣的系統(tǒng)架構(gòu)。服務(wù)器的功能可以被簡化為根據(jù)A jax請求提供數(shù)據(jù)或執(zhí)行操作,數(shù)據(jù)的顯示由前端完成。

2.2 企業(yè)內(nèi)的Ajax應(yīng)用

基于以上對A jax應(yīng)用的分析,可以看出,如在企業(yè)網(wǎng)站上采用A jax技術(shù),開發(fā)的Web應(yīng)用會提高員工的工作效率。

3 ExtJS-WEB應(yīng)用的前端Ajax框架

ExtJS是一個用JavaScript語言編寫的用于瀏覽器端UI開發(fā)的A jax框架[2]。這種框架有幾個主要特點。

(1）開源項目

ExtJS是一個開源項目,它提供了免費的框架代碼,完善的API/How to文檔,以及開發(fā)人員社區(qū)。這些資源可以幫助Ex tJS快速地在項目內(nèi)投入使用。

(2）兼容各種瀏覽器

ExtJS框架可跨瀏覽器運行?；诳蚣荛_發(fā)的應(yīng)用支持IE,FireFox,Safari等多種流行的瀏覽器。

(3）后臺技術(shù)無關(guān)性

ExtJS框架作為前端的開發(fā)平臺,可與當(dāng)前流行的Web后端技術(shù)如:Java,.NET,PHP組合進(jìn)行Web應(yīng)用的開發(fā)。

(4）UI控件庫

框架擁有非常豐富的控件庫,如表格,樹,窗體,面板,按鈕等?？丶悦嫦?qū)ο蟮姆绞介_發(fā),提供了構(gòu)造器的參數(shù),可操作的屬性及方法,以及控件的事件等。這種面向?qū)ο蟮拈_發(fā),使得控件易于使用,也便于擴展。

(5）擴展控件

框架提供了對控件進(jìn)行擴展的機制。利用ExtJS.extend(）函數(shù),可以在繼承父類控件的基礎(chǔ)上,創(chuàng)建新的類構(gòu)造器,增加新的屬性、方法、事件,構(gòu)造出新的控件。

(6）組件化編程

在ExtJS的框架下進(jìn)行 UI開發(fā),將包含諸多控件的容器類控件構(gòu)造成組件。這些組件封裝了對內(nèi)部控件的具體操作,對外提供統(tǒng)一接口,便于操作,降低了項目中UI開發(fā)的復(fù)雜度。

(7）控件與后臺的數(shù)據(jù)交換

ExtJS的前、后端數(shù)據(jù)交換簡單靈活。顯示數(shù)據(jù)集合的Ex tJS控件,如:表格,樹,下拉列表等,可支持多種數(shù)據(jù)格式:JSON、XM L、A rray。在顯示數(shù)據(jù)時,前端確定數(shù)據(jù)的格式和結(jié)構(gòu),后臺只要提供符合前端要求的數(shù)據(jù)。

基于ExtJS框架的這些特點,可在項目內(nèi)使用該框架進(jìn)行客戶端UI的開發(fā)。

4 基于ExtJS的IT信息管理系統(tǒng)

IT信息管理系統(tǒng)是一種對企業(yè)內(nèi)各類計算機、服務(wù)器等進(jìn)行數(shù)據(jù)管理的應(yīng)用系統(tǒng)。系統(tǒng)的主要功能是對業(yè)務(wù)數(shù)據(jù)的增刪改查并可將各種數(shù)據(jù)匯總。

4.1 系統(tǒng)結(jié)構(gòu)

作為A jax應(yīng)用,客戶端界面集成了系統(tǒng)功能,提供給用戶操作系統(tǒng)的接口,負(fù)責(zé)接收并響應(yīng)用戶的請求。對用戶提交的執(zhí)行系統(tǒng)功能的請求,以異步通訊的方式發(fā)送到后臺服務(wù)器。在前臺收到A jax響應(yīng)后,以更新局部界面而不是將界面全部更新的方式,將執(zhí)行結(jié)果顯示到用戶界面上。后臺在A jax應(yīng)用中,負(fù)責(zé)執(zhí)行請求的系統(tǒng)功能,返回執(zhí)行結(jié)果。前、后臺在數(shù)據(jù)交換上采用統(tǒng)一的數(shù)據(jù)格式。系統(tǒng)結(jié)構(gòu)如圖1所示。

4.2 系統(tǒng)設(shè)計

4.2.1 界面設(shè)計

界面按功能分為導(dǎo)航區(qū),功能模塊顯示區(qū),系統(tǒng)信息顯示區(qū)。功能導(dǎo)航區(qū)位于頁面的左部,以樹形結(jié)構(gòu)顯示出可供用戶操作的功能。用戶通過選擇結(jié)點,進(jìn)入相關(guān)的功能模塊。頁面的右半部分顯示功能模塊的操作界面。頂部用來顯示系統(tǒng)信息,進(jìn)行系統(tǒng)操作。

圖1 系統(tǒng)結(jié)構(gòu)

功能模塊界面按照執(zhí)行的功能主要有三種:數(shù)據(jù)錄入界面,數(shù)據(jù)查詢界面和數(shù)據(jù)匯總的圖表界面。在數(shù)據(jù)錄入界面,用戶可錄入不同數(shù)據(jù)類型的數(shù)據(jù);數(shù)據(jù)查詢界面,分為查詢條件設(shè)置和查詢結(jié)果顯示兩部分:查詢條件的設(shè)置界面,執(zhí)行的也是數(shù)據(jù)錄入的功能;查詢結(jié)果的顯示界面,支持對查詢結(jié)果進(jìn)行相應(yīng)的操作。對數(shù)據(jù)的統(tǒng)計并生成各類業(yè)務(wù)報表由數(shù)據(jù)匯總界面完成。

4.2.2 功能設(shè)計

用戶身份驗證模塊:IT信息管理系統(tǒng)只能由部門的相關(guān)人員使用,因此系統(tǒng)需提供用戶身份的驗證功能。用戶在登錄界面輸入用戶名和密碼,驗證成功后,才能進(jìn)入系統(tǒng)功能的主界面。

權(quán)限管理模塊:管理用戶在系統(tǒng)內(nèi)的操作權(quán)限。用戶對系統(tǒng)的操作,需要進(jìn)行權(quán)限驗證。對不同的用戶,系統(tǒng)將提供不同的操作界面。

請求處理模塊:前臺提交的對系統(tǒng)的操作請求,由該模塊統(tǒng)一處理。首先要解析A jax請求,獲取要調(diào)用的模塊功能接口的信息。然后,調(diào)用相關(guān)的功能模塊;最后將結(jié)果返回給前臺。

業(yè)務(wù)功能模塊:執(zhí)行具體的業(yè)務(wù)操作,主要是對數(shù)據(jù)庫的操作。

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

IT信息管理系統(tǒng)采用PHP語言開發(fā)服務(wù)器功能,MySQL作為數(shù)據(jù)庫管理系統(tǒng)。前端用戶界面在Ex tJS框架下使用JavaScrip t語言進(jìn)行開發(fā)。系統(tǒng)采用A jax結(jié)構(gòu),前、后臺編碼分離,后臺不再負(fù)責(zé)生成前臺的HTM L腳本。前、后臺的聯(lián)系體現(xiàn)在數(shù)據(jù)的交互上,要求前、后臺使用一致的數(shù)據(jù)表達(dá)格式。

5.1 用戶界面

在用戶界面的開發(fā)中,Ex tJS框架的控件庫并不能完全滿足項目的需求。利用該框架的擴展功能,在項目內(nèi)構(gòu)建新的控件和界面組件。

5.1.1 擴展表單輸入框控件

在項目中,用得比較多的是表單的輸入框控件[3]。它提供了多種數(shù)據(jù)類型的輸入方式,例如:文本輸入框,數(shù)字輸入框,下拉列表,日期選擇框等。在需要錄入大量不同類型數(shù)據(jù)的時候,使用功能豐富的輸入框,可以方便用戶的操作,提高用戶的工作效率。

Ex tJS框架提供的表單輸入框,由輸入框的標(biāo)簽名稱和輸入框組成。它只提供了一個數(shù)據(jù)的錄入框。當(dāng)輸入內(nèi)容由數(shù)個部分組成時,就需要構(gòu)建新的表單輸入框。例如,在設(shè)置查詢條件時,查詢字段的值要求由操作符和查詢內(nèi)容兩部分組成。下面給出在項目內(nèi)構(gòu)建的幾個輸入框。

(1）日期區(qū)間的輸入框

在設(shè)置日期字段的查詢值時,需要錄入日期的區(qū)間值,即起始和終止日期。這就需要兩個日期的輸入。它們的輸入值構(gòu)成了這個日期查詢字段的查詢內(nèi)容。

(2）帶有操作符的條件輸入框

有些查詢字段的輸入框,要求用戶選擇該字段的限制條件。

如下圖,小于100的軟件許可數(shù)量,包含字符”制造”的部門。

(3）動態(tài)生成的查詢條件錄入框

在設(shè)備查詢中,由于設(shè)備信息保存在多張數(shù)據(jù)庫表內(nèi)。查詢時,用戶需要將不同表的查詢字段組合在一起進(jìn)行查詢。如下圖,用戶需要查詢,設(shè)備類型屬于”激光打印機”,且設(shè)備的使用部門不是”計算機”部門,滿足這個條件的所有設(shè)備。用戶可以動態(tài)地添加或刪除查詢條件。

在框架內(nèi)構(gòu)建新的錄入框,需要使用框架提供的擴展函數(shù)Ext.extend(）。由于錄入框的基本功能就是一個表單標(biāo)簽,因此繼承框架提供的控件Ex t.form.Field,并修改生成錄入框的頁面元素的方法onRender(）,以及獲取錄入內(nèi)容的getValue(）方法。部分代碼見下圖:

5.1.2 構(gòu)建界面組件

用戶界面由各種組件以不同的布局方式組合而成。組件化編程為界面的開發(fā)帶來很多優(yōu)點:首先組件提供一致的外觀,組件構(gòu)成的界面整齊美觀;其次組件封裝了數(shù)據(jù)和數(shù)據(jù)的顯示,提供特定功能,易修改或增加新的特性,可在項目內(nèi)重復(fù)使用。

ExtJS框架的擴展函數(shù)Ext.extend(）成為構(gòu)建組件的主要工具?，F(xiàn)以數(shù)據(jù)錄入和數(shù)據(jù)查詢時的界面組件為例,說明項目內(nèi)如何構(gòu)建界面組件。

(1）數(shù)據(jù)錄入表單組件

項目內(nèi)存在多個錄入業(yè)務(wù)數(shù)據(jù)的表單組件,如:軟件信息的錄入,計算機設(shè)備信息的錄入,設(shè)備維修單的錄入等。這些錄入表單組件具備共同的屬性和功能,即包含不同的數(shù)據(jù)錄入控件,提供基本的表單操作,包括獲取表單數(shù)據(jù),驗證表單數(shù)據(jù)是否有效,裝載數(shù)據(jù)等。將這些共有的特性封裝到組件DataInputFormPanel,其他錄入組件通過繼承關(guān)系共享它提供的功能。圖2顯示了組件之間的繼承關(guān)系。

圖2 組件的擴展

(2）數(shù)據(jù)查詢結(jié)果表格組件

與數(shù)據(jù)錄入相類似,在數(shù)據(jù)查詢中,有多個顯示查詢結(jié)果的組件,如:設(shè)備查詢,軟件查詢,部門查詢等。這些查詢組件共有的功能是多條數(shù)據(jù)的顯示,對結(jié)果數(shù)據(jù)進(jìn)行編輯等操作,并將結(jié)果導(dǎo)出到Excel表里等。構(gòu)建組件SearchGridPanel,它繼承了ExtJS框架的表格控件Ext.grid.GridPanel。

5.1.3 界面實例

信息查詢界面由查詢條件的錄入組件和查詢結(jié)果的顯示組件組成。查詢條件組件的表單輸入框控件錄入要查詢的信息,查詢結(jié)果組件顯示符合查詢條件的結(jié)果,并對結(jié)果數(shù)據(jù)進(jìn)行編輯、查看等操作。

5.2 后臺

IT信息管理系統(tǒng)中,前臺界面扮演了重要角色,負(fù)責(zé)數(shù)據(jù)的顯現(xiàn),而后臺在這里只是起到了訪問數(shù)據(jù)庫,發(fā)送數(shù)據(jù)結(jié)果的作用。因此,后臺的功能主要是處理A jax請求。在實現(xiàn)上,由請求處理模塊處理來自前臺的要求執(zhí)行業(yè)務(wù)功能的A jax請求,由功能模塊執(zhí)行相應(yīng)的業(yè)務(wù)邏輯流程,見圖3所示。

圖3 模塊功能的執(zhí)行流程

(1）請求處理模塊

該模塊的功能首先解析A jax請求,從請求中獲取所調(diào)用的功能模塊的接口信息,即m odule name,method nam e,method parameters。然后利用PHP的Reflection機制,調(diào)用模塊函數(shù),獲得結(jié)果。最后對結(jié)果按照前臺要求的數(shù)據(jù)格式進(jìn)行轉(zhuǎn)換,返回響應(yīng)結(jié)果。

(2）業(yè)務(wù)功能模塊

該模塊主要執(zhí)行具體的業(yè)務(wù)邏輯。它將公開可以被外部調(diào)用的接口信息。前臺界面將根據(jù)這個接口信息,生成具體的模塊功能調(diào)用并包含到A jax請求內(nèi),發(fā)送到服務(wù)器。在實現(xiàn)上,每一個功能模塊作為函數(shù)的集合,部分代碼如下圖:

(3）權(quán)限管理模塊

系統(tǒng)的權(quán)限管理是基于角色對用戶的權(quán)限進(jìn)行控制。對角色授權(quán),即使角色擁有對系統(tǒng)內(nèi)權(quán)限對象的訪問許可。對系統(tǒng)內(nèi)權(quán)限對象的查看,更新等操作,只有在擁有該對象的訪問許可的條件下才能進(jìn)行。如:對設(shè)備的查詢操作,是在擁有對設(shè)備的讀許可下進(jìn)行的;軟件錄入,需要擁有對軟件的寫許可。

一個用戶可經(jīng)授權(quán)而擁有多個角色,一個角色可由多個用戶構(gòu)成;每個角色可擁有多種許可,每個許可也可授權(quán)給多個不同的角色。

6 結(jié) 語

以IT信息管理系統(tǒng)為例,說明了使用ExtJS框架開發(fā)A jax應(yīng)用的過程。目前,該系統(tǒng)已投入使用,運行狀態(tài)良好。但在系統(tǒng)使用過程中,發(fā)現(xiàn)還存在某些問題,仍需不斷升級改進(jìn)。如下載至客戶端的腳本文件較大所帶來的問題。ExtJS框架的核心文件以及系統(tǒng)的客戶端腳本文件,會下載到客戶端瀏覽器,文件的大小會影響到下載速度和運行時占用系統(tǒng)內(nèi)存。因此,一方面采用壓縮工具,對腳本文件進(jìn)行壓縮;另一方面對系統(tǒng)進(jìn)行重構(gòu),提高代碼的質(zhì)量。還有系統(tǒng)的安全性問題,腳本下載到客戶端,就等于暴露給用戶。為防止腳本被改變,造成對系統(tǒng)的攻擊,需對某些腳本信息采取加密措施。

[1]David Johnson,A lexeiWhite,Andre Charland.A jax企業(yè)級開發(fā)[M].北京:人民郵電出版社.2008:7-11.

[2]John Fronckow iak.用 Ext JS構(gòu)建A jax應(yīng)用程序[J].http://www.ibm.com/developerw orks/web/lib rary/w a-aj-ex tjs/.

[3]徐會生,何啟偉,康愛媛.深入淺出Ext JS[M].北京:人民郵電出版社.2009:78-83.

Design&Imp lementation of IT In formation Management System based on ExtJS

ZHANG Y i-jie
(Shanghai Power Station Auxiliary Equipment Plant,Shanghai Electric Pow er Generation Equipment Co.,Ltd.,Shanghai200090,China）

Slow response to user's requestand online waiting by theuser are often found in the interac tivity with user in the traditional Web-based applications,w hich can be im proved by the Ajax technology.The IT information management system is a database app lication which is builtupon A jax Framew ork-ExtJS and developed for IT center tomanage the IT resources of hard-and softw are.It uses UIwidgets and extensibility mechanism of ExtJS to build rich and f riend ly user interface.The system bases on B/S structure w ith clear front-end structure and has fine expandability and easy maintainability.

Ajax software;application;framew ork;contro l element;component;p rogramm ing;design;realization

TP311.12

A

1672-0210(2011）02-0043-05

2011-04-06

2011-04-27

張一潔(1971-）,女,助工,碩士,現(xiàn)從事企業(yè)內(nèi)應(yīng)用軟件的開發(fā)工作。