基于ExtJS的IT信息管理系統的設計和實現

張一潔

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

基于ExtJS的IT信息管理系統的設計和實現

張一潔

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

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

軟件;應用;框架;控件;組件;編程;設計;實現

1 概 述

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

2 Ajax應用

2.1 Ajax與傳統Web的不同應用

2.1.1 客戶端與服務器端的通信

A jax應用采取的是異步通信,即當用戶提交了一個Web請求后,就可繼續做系統操作,而不必坐著等待服務器的響應。而且,A jax技術提交給服務器的只是數據的片斷,不似傳統應用,需將整個頁面傳送。這種通信方式,提高了系統的反應速度,同時也減少了網絡負荷。

2.1.2 用戶與系統的交互

傳統的Web應用,提供給用戶的是顯示靜態信息的Web頁面。與系統的交互必定是填寫表單或單擊某個網頁鏈接。通過表單錄入的數據,必須一次性地提交給服務器。對于大批量的數據錄入,在用戶點擊保存按鈕進行存儲時,可能因為網絡問題,導致提交失敗和數據丟失;服務器對用戶的認證失敗后,就需重復提交這個過程。

A jax應用通過將用戶對數據的更改及時提交給服務器,并顯示給用戶,使用戶與系統的交互變得及時和直觀。由于數據是及時更新的,不會導致大批量數據因為網絡問題而丟失。

2.1.3 系統的架構

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

A jax技術改變了這樣的系統架構。服務器的功能可以被簡化為根據A jax請求提供數據或執行操作,數據的顯示由前端完成。

2.2 企業內的Ajax應用

基于以上對A jax應用的分析,可以看出,如在企業網站上采用A jax技術,開發的Web應用會提高員工的工作效率。

3 ExtJS-WEB應用的前端Ajax框架

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

(1）開源項目

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

(2）兼容各種瀏覽器

ExtJS框架可跨瀏覽器運行。基于框架開發的應用支持IE,FireFox,Safari等多種流行的瀏覽器。

(3）后臺技術無關性

ExtJS框架作為前端的開發平臺,可與當前流行的Web后端技術如:Java,.NET,PHP組合進行Web應用的開發。

(4）UI控件庫

框架擁有非常豐富的控件庫,如表格,樹,窗體,面板,按鈕等。控件以面向對象的方式開發,提供了構造器的參數,可操作的屬性及方法,以及控件的事件等。這種面向對象的開發,使得控件易于使用,也便于擴展。

(5）擴展控件

框架提供了對控件進行擴展的機制。利用ExtJS.extend(）函數,可以在繼承父類控件的基礎上,創建新的類構造器,增加新的屬性、方法、事件,構造出新的控件。

(6）組件化編程

在ExtJS的框架下進行 UI開發,將包含諸多控件的容器類控件構造成組件。這些組件封裝了對內部控件的具體操作,對外提供統一接口,便于操作,降低了項目中UI開發的復雜度。

(7）控件與后臺的數據交換

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

基于ExtJS框架的這些特點,可在項目內使用該框架進行客戶端UI的開發。

4 基于ExtJS的IT信息管理系統

IT信息管理系統是一種對企業內各類計算機、服務器等進行數據管理的應用系統。系統的主要功能是對業務數據的增刪改查并可將各種數據匯總。

4.1 系統結構

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

4.2 系統設計

4.2.1 界面設計

界面按功能分為導航區,功能模塊顯示區,系統信息顯示區。功能導航區位于頁面的左部,以樹形結構顯示出可供用戶操作的功能。用戶通過選擇結點,進入相關的功能模塊。頁面的右半部分顯示功能模塊的操作界面。頂部用來顯示系統信息,進行系統操作。

圖1 系統結構

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

4.2.2 功能設計

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

權限管理模塊:管理用戶在系統內的操作權限。用戶對系統的操作,需要進行權限驗證。對不同的用戶,系統將提供不同的操作界面。

請求處理模塊:前臺提交的對系統的操作請求,由該模塊統一處理。首先要解析A jax請求,獲取要調用的模塊功能接口的信息。然后,調用相關的功能模塊;最后將結果返回給前臺。

業務功能模塊:執行具體的業務操作,主要是對數據庫的操作。

5 系統實現

IT信息管理系統采用PHP語言開發服務器功能,MySQL作為數據庫管理系統。前端用戶界面在Ex tJS框架下使用JavaScrip t語言進行開發。系統采用A jax結構,前、后臺編碼分離,后臺不再負責生成前臺的HTM L腳本。前、后臺的聯系體現在數據的交互上,要求前、后臺使用一致的數據表達格式。

5.1 用戶界面

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

5.1.1 擴展表單輸入框控件

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

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

(1）日期區間的輸入框

在設置日期字段的查詢值時,需要錄入日期的區間值,即起始和終止日期。這就需要兩個日期的輸入。它們的輸入值構成了這個日期查詢字段的查詢內容。

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

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

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

(3）動態生成的查詢條件錄入框

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

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

5.1.2 構建界面組件

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

ExtJS框架的擴展函數Ext.extend(）成為構建組件的主要工具。現以數據錄入和數據查詢時的界面組件為例,說明項目內如何構建界面組件。

(1）數據錄入表單組件

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

圖2 組件的擴展

(2）數據查詢結果表格組件

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

5.1.3 界面實例

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

5.2 后臺

IT信息管理系統中,前臺界面扮演了重要角色,負責數據的顯現,而后臺在這里只是起到了訪問數據庫,發送數據結果的作用。因此,后臺的功能主要是處理A jax請求。在實現上,由請求處理模塊處理來自前臺的要求執行業務功能的A jax請求,由功能模塊執行相應的業務邏輯流程,見圖3所示。

圖3 模塊功能的執行流程

(1）請求處理模塊

該模塊的功能首先解析A jax請求,從請求中獲取所調用的功能模塊的接口信息,即m odule name,method nam e,method parameters。然后利用PHP的Reflection機制,調用模塊函數,獲得結果。最后對結果按照前臺要求的數據格式進行轉換,返回響應結果。

(2）業務功能模塊

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

(3）權限管理模塊

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

一個用戶可經授權而擁有多個角色,一個角色可由多個用戶構成;每個角色可擁有多種許可,每個許可也可授權給多個不同的角色。

6 結 語

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

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

[2]John Fronckow iak.用 Ext JS構建A jax應用程序[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-）,女,助工,碩士,現從事企業內應用軟件的開發工作。