基于ExtJS的汽車租賃系統(tǒng)的設計與實現(xiàn)

王莉利, 高新成, 王蔚龍

(1.東北石油大學 計算機與信息技術(shù)學院， 黑龍江 大慶 163318;2.東北石油大學 現(xiàn)代教育技術(shù)中心， 黑龍江 大慶 163318)

0 引 言

網(wǎng)絡的普及與發(fā)展推動了軟件開發(fā)技術(shù)和模式的變革，然而傳統(tǒng)的汽車租賃公司卻仍然采用紙質(zhì)記錄數(shù)據(jù)，導致公司的辦公效率大大的降低，同時也無法滿足數(shù)據(jù)的永久性存儲。目前普遍的辦公系統(tǒng)采用Javascript配合Jquery來控制前臺的客戶體驗，這種方法不利于控制開發(fā)的成本，而且經(jīng)常在瀏覽器上出現(xiàn)嚴重的兼容性問題，影響了客戶體驗效果[1]。在采用ExtJS技術(shù)優(yōu)化系統(tǒng)結(jié)構(gòu)的基礎(chǔ)上，設計并開發(fā)了一套汽車租賃管理系統(tǒng)，將汽車管理業(yè)務分類整合，達到了業(yè)務集中管理的效果。

1 ExtJS組件介紹

ExtJS組件主要是指HTML標簽表現(xiàn)出來的區(qū)域，它能夠讓靜態(tài)標簽轉(zhuǎn)換成有著生命周期的動態(tài)組件，組件本身不是分散的結(jié)構(gòu)集，在架構(gòu)設計上主要采用集成方式緊密關(guān)聯(lián)的倒樹結(jié)構(gòu)[2]。ExtJS組件結(jié)構(gòu)如圖1所示[3]。

ExtJS中所有組件的基類是指分層抽象出組件的共性Ext.Component，包括的子類都會自動擁有標準ExtJS組件所帶的生命周期，其中包括渲染的創(chuàng)建和銷毀，同時支持標準的啟動、禁用、隱藏和顯示等操作。ExtJS中所有組件都會有一個被指定的type屬性值，定義一個指定類型的組件或者一個組件的類型是通過這個值得到。利用ExtJS技術(shù)可以把數(shù)據(jù)和組件進行解耦，在設計用戶界面時就不用考慮各種形式的數(shù)據(jù)了，操作數(shù)據(jù)通過統(tǒng)一的數(shù)據(jù)接口來處理，可見ExtJS與后臺技術(shù)沒有什么關(guān)系，可以方便地把它運用在各種語言的開發(fā)應用中[4]。

2 系統(tǒng)功能設計與關(guān)鍵技術(shù)實現(xiàn)

2.1 系統(tǒng)功能模塊介紹

系統(tǒng)在設計過程中考慮到汽車租賃公司業(yè)務管理需求，主要功能包括系統(tǒng)管理、車輛管理、系統(tǒng)用戶管理、車輛配件管理、駕駛員管理、查詢和統(tǒng)計等功能模塊。系統(tǒng)功能模塊如圖2所示。

圖1 ExtJS組件結(jié)構(gòu)

圖2 汽車租賃系統(tǒng)功能模塊圖

2.2 ExtJS數(shù)據(jù)存儲與傳輸?shù)难芯吭O計與實現(xiàn)

在系統(tǒng)中所有的數(shù)據(jù)傳輸方式均是采用ExtJS的數(shù)據(jù)傳遞方式，ExtJS提供了JsonReader、XmlReader和ArrayReader三種數(shù)據(jù)解析方式[5]。ExtJS定義數(shù)據(jù)代理基類Ext.data.DataProxy，在DataProxy的基礎(chǔ)，通過Ext.data.MemoryProxy、Ext.data.HttpProxy和Ext.data.ScriptTagProxy三種方式讀取服務器端的數(shù)據(jù)及從跨域服務器中讀取數(shù)據(jù)，其中Httpproxy使用HTTP協(xié)議通過Ajax獲取后臺數(shù)據(jù)。代碼如下：

var cellClick = function (grid, rowIndex, columnIndex, e) {

record = grid.getStore().getAt(rowIndex), // Get the Record

columnId = grid.getColumnModel().getColumnId(columnIndex)}; // Get column id

通過輸入綁定組件的id值grid和當前行的索引值rowIndex，以及當前列的索引值columnIndex調(diào)用Ajax方法，獲取對應的記錄,ExtJS框架會自動的調(diào)用內(nèi)部的機制DataProxy類，通過JsonReader的方式將獲取到的數(shù)據(jù)通過Json流的形式，并解析出來最終顯示給客戶界面。

2.3 ExtJS組件自定義事件技術(shù)的研究與實現(xiàn)

系統(tǒng)的所有組件事件的定義都是采用Ext的自定義事件，這些自定義事件一般和組件相關(guān)，要求用戶根據(jù)組件的狀態(tài)來進行觸發(fā)，ExtJS中遵循一種樹狀的事件模型，同時為這些事件配置監(jiān)聽器，當某個事件被觸發(fā)時自動調(diào)用對應的監(jiān)聽器[6]。ExtJS中的組件添加事件方法如下：

①為eventCmP添加Click事件：eventCmp.addEvents(“click”)；傳入?yún)?shù)為要添加的事件名稱。

②為eventCmP添加事件監(jiān)聽器：eventCmp.on(“click”，fn)；這里的on()是addLiStener()的簡寫形式，第一個參數(shù)表示傳入事件名稱，第二個參數(shù)表示事件發(fā)生的執(zhí)行函數(shù)。

③觸發(fā)eventCmP的事件：eventCmp.fireEvent(“click”，“params”)；fireEvent是強迫觸發(fā)組件的事件，開始傳入事件名稱,如果有其它參數(shù)，補充到后面。

2.4 多權(quán)限化管理的設計與實現(xiàn)

系統(tǒng)在多權(quán)限化管理設計中，采用了頁面生命周期的技術(shù)來實現(xiàn)。用戶在訪問任何頁面時都會在初始化該頁面過程中，通過Web.config中注冊的信息找到權(quán)限類，在該類中，先訪問Init方法，同時關(guān)注Http的傳輸過程，在HttpModule實現(xiàn)過程中主要運用Init階段來激發(fā)權(quán)限檢測事件。實現(xiàn)自定義HttpModule類FrameWorkPermission的關(guān)鍵代碼如下：

public class FrameWorkPermission : IHttpModule

public void Init(HttpApplication app){

app.AcquireRequestState += new EventHandler(app_Auth); //處理檢測權(quán)限事件}

public void Dispose()

{ // 釋放 }

在以上代碼中，權(quán)限檢測是通過EventHandler事件激發(fā)了自定義app_Auth方法來實現(xiàn)的。

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

系統(tǒng)開發(fā)基于B/S結(jié)構(gòu)模式，前臺開發(fā)語言為C#，后臺數(shù)據(jù)庫為SQL Server 2008，開發(fā)了一套汽車租賃公司業(yè)務統(tǒng)一管理平臺，系統(tǒng)能夠根據(jù)業(yè)務范圍分配相應管理權(quán)限，滿足汽車租賃業(yè)務管理需求。系統(tǒng)主界面如圖3所示。

圖3 太平洋汽車租賃公司辦公系統(tǒng)

3 結(jié) 論

在ExtJS與ASP.NET技術(shù)相結(jié)合的應用模式下，設計并實現(xiàn)了太平洋汽車租賃辦公系統(tǒng)，系統(tǒng)采用ExtJS組件技術(shù)達到頁面可視化效果，通過HTTP管道技術(shù)實現(xiàn)對不同的功能的權(quán)限分配，具有功能全面、界面美觀大方、操作靈活、易擴展等優(yōu)點，同時避免了代碼冗余，減短了開發(fā)周期，降低了開發(fā)成本。

[參考文獻]

[1] 魏麗芬.基于.NET技術(shù)實現(xiàn)MVC三層架構(gòu)的學生事務管理系統(tǒng)[J].機電技術(shù),2011，34(1):18-21.

[2] 邢春宇.在ASP.NET中應用ExtJS開發(fā)庫存管理信息系統(tǒng)[J].電腦編程技巧與維護,2010(19):28-31.

[3] 陳道鑫,宋紹云.ExtJS框架在Web軟件開發(fā)中的應用[J].電腦知識與技術(shù),2011，7(9):2044-2047.

[4] 王建文,張俊明,韓李鵬.基于ExtJS的物資管理系統(tǒng)的設計與實現(xiàn)[J].計算機工程與設計,2010，31(23):5012-5013.

[5] 秦姣華,袁智威,王振,等.利用Ajax與ExtJS改善用戶體驗[J].電子設計工程,2011，19(10):1-4.

[6] 劉丹,馬世霞,于琨.基于ASP.NET和AJAX的社區(qū)網(wǎng)絡辦公系統(tǒng)的設計與實現(xiàn)[J].河南機電高等?？茖W校學報,2010，18(4):29-31.