Ajax 框架Ext JS 在旅游信息管理系統(tǒng)中的運用

黃 立

(武漢理工大學(xué) 計算機(jī)科學(xué)與技術(shù)學(xué)院，湖北 武漢430070)

隨著用戶對應(yīng)用軟件界面的要求不斷提高，客戶體驗要求也越來越高，亟待尋找到一種不僅能夠簡單實現(xiàn)炫麗的外表，同時又不需要對后臺的實現(xiàn)進(jìn)行過多修改的技術(shù)［1］，Ext JS 因此走進(jìn)了程序開發(fā)者的視野，Ext JS 是一個非常優(yōu)秀的Ajax［2］(asynchronous javascript and XML)框架，它不但擁有Ajax 支持局部刷新的功能，而且使得整個前端的開發(fā)簡單化。Ext JS 為那些沒有美術(shù)功底的程序員解決了一大難題，同時，有很多用其他技術(shù)無法或者極難實現(xiàn)，卻能用Ext JS 輕易實現(xiàn)的功能。筆者以旅游信息管理系統(tǒng)為實例，探索Ajax 框架Ext JS 在旅游信息管理系統(tǒng)中的運用。

1 基于Ext JS 的富客戶端架構(gòu)設(shè)計

整個系統(tǒng)的框架設(shè)計中，S2SH(struts2 -spring-hibernate)集成框架依舊是以MVC 設(shè)計模式為基礎(chǔ)的，Struts2 框架作為整個系統(tǒng)的基礎(chǔ)，主要負(fù)責(zé)對MVC 模型中的各層進(jìn)行分離，系統(tǒng)持久層采用Hibernate 實現(xiàn)，解決對象與數(shù)據(jù)庫之間的“阻抗”匹配問題，同時中間業(yè)務(wù)邏輯層由Spring 進(jìn)行統(tǒng)一管理［3］。S2SH 在與Ext JS 框架進(jìn)行集成時并不需要進(jìn)行過多改動，其整體邏輯結(jié)構(gòu)并未改變。主要需要進(jìn)行的修改集中在Struts 配置文件中，需要對Struts 繼承的包進(jìn)行修改，不再是先前使用的defaults 包，而是改成繼承以JSON 格式傳遞參數(shù)的JSON-defaults 包，這樣前端頁面與后臺業(yè)務(wù)邏輯層之間直接傳遞JSON格式的數(shù)據(jù)，不再需要另外封裝。Ext JS 框架所體現(xiàn)的功能主要還是在客戶端瀏覽器中進(jìn)行實現(xiàn)。從MVC 設(shè)計角度出發(fā)，瀏覽器端框架主要實現(xiàn)了用戶交互界面，即表示層［4］。作為一個Ajax的主流框架，Ext JS 較好地支持了Ajax 的異步發(fā)送請求，即在不需要程序開發(fā)者自己處理XMLhttpRequest 的前提下實現(xiàn)了無刷新動態(tài)更新頁面。并且Ext JS 作為純JavaScript 框架采用了軟件工程中面向?qū)ο蟮脑O(shè)計思想，改善了傳統(tǒng)Ajax 技術(shù)的代碼分離和編寫復(fù)雜的問題，這樣不僅讓不具備前端美術(shù)功底的程序開發(fā)者也能結(jié)合先前所學(xué)的面向?qū)ο蟮幕舅枷雭黹_發(fā)前臺的應(yīng)用，而且還不需要將過多的精力花費在頁面美工設(shè)計上，Ext JS-S2SH 整合框架結(jié)構(gòu)如圖1 所示。

2 旅游信息系統(tǒng)分析與設(shè)計

結(jié)合實際生活中旅游信息管理系統(tǒng)的需求［5］，分析其具體的功能模塊，將旅游信息系統(tǒng)分為用戶管理、行程管理、景點管理、旅行團(tuán)管理和媒體文件管理這5 大模塊，通過進(jìn)一步分析各個模塊的分工，可以得到如圖2 所示的系統(tǒng)整體功能模塊圖。

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

結(jié)合系統(tǒng)整體功能模塊的需求，選擇Ext JS作為前臺頁面展示框架［6］。Ext JS 作為一套全面的前端界面庫，不僅對JavaScript 前端開發(fā)進(jìn)行了簡化，而且還提供了豐富的用戶界面組件，在系統(tǒng)中使用Ext JS，只需要在下載好的Ext JS 包的相應(yīng)文件中添加到項目下即可。在該系統(tǒng)中采用的是Ext JS 3.4.0 穩(wěn)定版，并將其中的ext -all. js、ext-lang-zh_CN.js 和ext.js 添加到項目中。

圖1 Ext JS-S2SH 框架結(jié)構(gòu)圖

圖2 系統(tǒng)整體功能模塊圖

3.1 Ext JS 與后臺交互實現(xiàn)動態(tài)樹

系統(tǒng)主界面的設(shè)計采用Ext JS 中的TreePanel 實現(xiàn)左側(cè)功能菜單，TreePanel 作為Ext JS 的核心控件，使用過程中主要注意的兩個問題是：①從相應(yīng)的業(yè)務(wù)邏輯層action 獲得需要加載的數(shù)據(jù)，并且傳遞給相應(yīng)的節(jié)點;②對樹節(jié)點進(jìn)行動態(tài)編輯，即實現(xiàn)樹節(jié)點的動態(tài)增加、刪除和修改。創(chuàng)建菜單樹的主要代碼如下：

Store：treeStore， //指定該樹所作用的TreeStore，即樹節(jié)點加載數(shù)據(jù)源

Ext JS 獲得數(shù)據(jù)大多是以JSON 格式進(jìn)行傳遞的［7］，要獲得后臺的數(shù)據(jù)就必須先將數(shù)據(jù)格式轉(zhuǎn)換成JSON。結(jié)合S2SH 框架，就需要將struts.xml 文件中相應(yīng)的action 返回值類型定義為JSON類型，并且將相應(yīng)業(yè)務(wù)邏輯層action 中各變量名與前臺頁面中要獲得參數(shù)值的名稱設(shè)置一致，這樣在頁面上就可直接獲得并使用接收到的數(shù)據(jù)。

TreePanel 實現(xiàn)功能菜單中的數(shù)據(jù)實際上是從數(shù)據(jù)庫中相應(yīng)的表中讀取出來的，要對樹節(jié)點進(jìn)行動態(tài)編輯，實現(xiàn)上就是通過TreePanel 響應(yīng)事件對該表中的數(shù)據(jù)進(jìn)行相應(yīng)的編輯［8］。筆者在實現(xiàn)系統(tǒng)中，通過TreePanel 響應(yīng)單擊事件來獲得相應(yīng)的TreeNode，然后通過調(diào)用相應(yīng)的業(yè)務(wù)邏輯層action 來對TreeNode 中的id，name 等屬性進(jìn)行相應(yīng)的修改，并將數(shù)據(jù)持久化到數(shù)據(jù)庫中以實現(xiàn)對樹節(jié)點的修改。其效果圖如圖3 所示。

圖3 樹形菜單實現(xiàn)效果圖

3.2 Ext JS 實現(xiàn)谷歌地圖加點與加線功能

為了能夠既形象又直觀地展示景區(qū)的景點和線路，在系統(tǒng)中引入了谷歌地圖來展示［9］。在Ext JS 中將谷歌地圖集成在GMapPanel 控件中，只需要申請一個谷歌地圖的鑰匙，就可以通過該控件載入谷歌地圖，同時結(jié)合Google Map API 所提供的信息，還可以在地圖上添加一系列響應(yīng)的事件來豐富谷歌地圖應(yīng)用，這比直接使用HTML/CSS 和JavaScript 來載入谷歌地圖更方便有效。

(1)基礎(chǔ)數(shù)據(jù)的準(zhǔn)備。要在地圖上展示景點信息與線路，就必須先要準(zhǔn)備基礎(chǔ)數(shù)據(jù)(包括景點的經(jīng)度和緯度信息)，保存入數(shù)據(jù)庫，這樣才能夠為在地圖上展示景點與線路提供數(shù)據(jù)支持。

(2)引入相應(yīng)的js 文件。要想在頁面中使用GMapPanel 控件，就必須先引入所需要的. js 文件，在這里引入了以下文件：

其中第一個引入的文件通過申請到谷歌鑰匙來獲取到谷歌地圖，并且設(shè)置了支持語言為大陸中文。第二個文件是Ext JS 包已經(jīng)設(shè)計好的GmapPanel 控件的引用，這樣就可以直接定義使用GmapPanel 而不需要自己再單獨來編寫相應(yīng)的設(shè)計控件代碼。

(3)定義GMapPanel 和相應(yīng)的響應(yīng)事件。GMapPanel 控件在Ext JS 中已經(jīng)被封裝好，引入.js文件后直接定義即可。為了使載入的谷歌地圖能響應(yīng)單擊實現(xiàn)添加景點，單擊實現(xiàn)雙擊添加線路的功能，需要在其中添加以下響應(yīng)事件：

事件主體中主要通過鼠標(biāo)點擊調(diào)用谷歌地圖提供的API 來獲得每個點的經(jīng)度和緯點以及用戶輸入的景點相關(guān)信息，然后通過“添加景點”和“添加線路”按鈕來觸發(fā)相應(yīng)的業(yè)務(wù)邏輯層action進(jìn)行業(yè)務(wù)處理，最終把數(shù)據(jù)提交持久化到后臺數(shù)據(jù)庫中。其景點與線路展示效果如圖4 所示。

3.3 Ext JS 日歷控件實現(xiàn)行程安排

為了能夠?qū)β眯袌F(tuán)中每個行程進(jìn)行合理安排，并提高用戶體驗，在系統(tǒng)中選擇了使用日歷控件來實現(xiàn)安排行程的功能［10］。Ext JS 中提供的日歷控件集成度很高，且能夠很清晰地分別針對Day、Week、Month 來對時間進(jìn)行合理的安排。其操作與谷歌日歷形式類似，因此不僅操作簡單而且能夠較好地滿足用戶的需要。

(1)引入日歷控件所必須的.js 文件。使用日歷控件時，要引入的. js 文件比較多，就不一一贅述，主要是要將下載的Ext JS3.4.0 包中example 內(nèi)的Calendar 文件夾中的所有js 文件引入到所需要的頁面中，避免因為缺少.js 文件導(dǎo)致頁面問題。

(2)添加日歷控件的響應(yīng)事件。點擊日歷時，需要在日歷的某一天或幾天編輯行程，即時間、地點、人物以及要游覽哪些景點，并且將用戶輸入的信息持久化到數(shù)據(jù)庫相應(yīng)的表中，這就需要添加日歷控件相應(yīng)的響應(yīng)事件，并對引入的EventEditForm. js、EventEditWindow. js 和EventRecord.js 文件進(jìn)行相應(yīng)的修改，將EventEdit-Form.js 中點擊某個時間彈出的窗體中的屬性修改為行程安排中需要管理的屬性，并將要調(diào)用的業(yè)務(wù)邏輯層action 修改成已經(jīng)編寫并配置好的action，這樣就可以得到所需的行程安排日歷。在EventEditWindow.js 中將添加某個時間的事件所觸發(fā)的業(yè)務(wù)邏輯層action 修改成所對應(yīng)的action，這樣就可以將添加的日歷事件持久化到相應(yīng)的數(shù)據(jù)庫表中，使得再次進(jìn)入該頁面時仍然可以看到先前行程安排的內(nèi)容，其行程安排實現(xiàn)的效果圖如圖5 所示。

圖4 景點與線路展示效果圖

圖5 行程安排效果圖

4 頁面性能的優(yōu)化

Ext JS 框架之所以能夠簡單方便地開發(fā)前端是因為Ext JS 是一個專業(yè)JavaScript 和UI 組件庫的RIA 框架，這也就意味著Ext JS 是一個重量級的前端框架，為了不影響用戶體驗，需要提升頁面的加載速度［11］。當(dāng)然，Ext JS 本身也通過對源代碼進(jìn)行壓縮和混淆以提升加載速度，但這還不能很好地滿足用戶對友好系統(tǒng)的需求。目前主要實現(xiàn)提升加載速度的方法有3 種：①對JavaScript 文件進(jìn)行壓縮混淆;②使用客戶端緩存;③使用GZIP 等方法進(jìn)行壓縮。

在旅游信息管理系統(tǒng)中，主要是通過GZIP對使用到的JavaScript 進(jìn)行壓縮，因為目前市場上主流的瀏覽器都能很好地支持對GZIP 格式的文件進(jìn)行處理，與此同時，GZIP 的壓縮率可以達(dá)到原文件的1/4。

主要實現(xiàn)的方法是通過編寫相應(yīng)的程序來實現(xiàn)將.js 后綴的文件壓縮成.js.gz 后綴的文件［12］，然后通過編寫過濾器程序來實現(xiàn)對.js.gz 結(jié)尾的文件識別，同時在自動請求中添加“Content -Encoding”，“gzip”的頭文件，通過這樣的操作，瀏覽器就知道如何處理以. js. gz 結(jié)尾的文件內(nèi)容了。與此同時，為了使該過濾器程序能夠起作用，還需要對web.xml 文件進(jìn)行修改，在其中添加過濾器，代碼如下：

經(jīng)過這樣的配置后，當(dāng)瀏覽器調(diào)用.js 后綴名的文件時，服務(wù)器會先將經(jīng)過GZIP 壓縮過的文件傳輸給瀏覽器，瀏覽器接收到這些文件后，會自動將其進(jìn)行解壓縮成原來的形式，然后再進(jìn)行加載，這樣就實現(xiàn)了頁面性能的優(yōu)化。

5 結(jié)論

筆者采用Ext JS 作為旅游信息管理系統(tǒng)客戶端架構(gòu)，并在此基礎(chǔ)上結(jié)合S2SH 框架實現(xiàn)了一個具有良好用戶體驗的旅游信息管理系統(tǒng)，其中主要針對通過動態(tài)樹實現(xiàn)功能菜單，借助谷歌地圖來實現(xiàn)景區(qū)內(nèi)景點和線路的展示，以及結(jié)合日歷控件來對旅游行程進(jìn)行安排管理，同時對于頁面性能提升的方法進(jìn)行了一定的研究，最終選擇通過GZIP 壓縮實現(xiàn)對頁面加載速度的優(yōu)化。

［1］徐會生，康愛媛.深入淺出Ext JS［M］.北京：人民郵電出版社，2010：25 -30.

［2］CRANE D，PASCARELLO E.Ajax in action［M］.［S.l.］：Manning Publishing，2005：125-135.

［3］劉中兵.開發(fā)者突擊：Java Web 主流框架整合開發(fā)(J2EE+ Struts + Hibernate + Spring)［M］. 北京：電子工業(yè)出版社，2008：256 -268.

［4］徐黎明，李志蜀，宋飛. 基于SSH 和Ext JS 的Web應(yīng)用框架的設(shè)計與實現(xiàn)［J］.數(shù)字技術(shù)與應(yīng)用，2010(4)：123 -128.

［5］王昱.基于Ext JS 的JSON 數(shù)據(jù)交換格式研究［J］.現(xiàn)代計算機(jī)：專業(yè)版，2013(2)：25 -30.

［6］朱立明，黃衛(wèi)忠，倪雄軍.Ext JS 框架下樹形組件改進(jìn)及應(yīng)用［J］.計算機(jī)應(yīng)用，2010(2)：242 -244.

［7］ORCHARD L M，PEHIVANIAN A，KOON S，et al.Prodesional Java script frameworks［M］. ［S. l.］：Wrox，2009：124 -136.

［8］張鑫，黃燈橋.Ext JS3 詳解與實踐［M］.北京：清華大學(xué)出版社，2010：25 -39.

［9］赫爾德爾.Ajax 權(quán)威指南［M］.陳宗斌，譯.北京：機(jī)械工業(yè)出版社，2009：255 -289.

［10］衛(wèi)軍，夏慧軍.Ext js Web 應(yīng)用程序開發(fā)指南［M］.北京：機(jī)械工業(yè)出版社，2011：156 -178.

［11］李剛.瘋狂Ajax 講義：Query/Ext JS/Prototype/DWR企業(yè)應(yīng)用前端開發(fā)實戰(zhàn)［M］.北京：電子工業(yè)出版社，2013：152-169.

［12］葉健毅.精通Java EE -Eclipse、Struts2、Hibernate、Spring 整合應(yīng)用案例［M］.北京：人民郵電出版社，2009：255 -289.