基于ExtJS與SSH的教材管理系統(tǒng)設(shè)計與應(yīng)用

遼寧對外經(jīng)貿(mào)學(xué)院基礎(chǔ)課教研部 趙中樞

隨著中國高等教育大眾化進程的加劇，作為遼寧省首批民辦院校的遼寧對外經(jīng)貿(mào)學(xué)院在辦學(xué)層次上不斷提升，辦學(xué)規(guī)模迅速擴大，目前在校生人數(shù)已逾萬人。學(xué)院的快速發(fā)展及學(xué)生數(shù)量的增加以及學(xué)分制的實施，給教材的管理工作帶來了極大的不便，特別是民辦院校教學(xué)管理人員相對不足，在工作量越來越大的情形下，一個好的教材管理軟件可以極好減輕教材管理人員的壓力，使教材管理工作效率得以提高，更有助于提高教材管理工作人員服務(wù)水平。

本系統(tǒng)設(shè)計基于B/S結(jié)構(gòu)，前端用戶界面采用了基于AJAX技術(shù)的ExtJs框架進行設(shè)計，后臺結(jié)合現(xiàn)今流行的J2EE輕量級開源框架Struts+Spring+Hibernate（簡稱SSH）進行開發(fā)，并采用了一種新的基于ExtJs+SSH的Web應(yīng)用架構(gòu)。有利于構(gòu)建界面美觀、響應(yīng)速度快、用戶體驗效果好、系統(tǒng)運行穩(wěn)定的高質(zhì)量Web應(yīng)用。

1.技術(shù)背景

1.1 ExtJs技術(shù)

ExtJs是用JavaScript、CSS、HTML等技術(shù)實現(xiàn)。主要用于創(chuàng)建用戶界面，且與后臺技術(shù)無關(guān)的前端AJAX框架，還被用來開發(fā)RIA（富客戶端）的Web應(yīng)用。ExtJs為開發(fā)者屏蔽了大量的Web UI操作以及跨瀏覽器方面的處理。

采用ExtJs開發(fā)Web應(yīng)用與傳統(tǒng)的Web開發(fā)方式不同，因為引入了ExtJs庫，開發(fā)時可以在空白的Web頁面上組合放置各種ExtJs的UI組件，與開發(fā)桌面軟件放置Windows UI組件一樣。運行時，ExtJs組件庫會自動生成形成界面的HTML、JavaScript、CSS和圖片等元素，并最終在瀏覽器上渲染出ExtJs的Web UI[1]。如圖1所示。

圖1 采用ExtJs的Web應(yīng)用開發(fā)方式

圖2 教材管理工作業(yè)務(wù)流程圖

ExtJs還提供了一套強大的事件處理機制，在瀏覽器標(biāo)準(zhǔn)事件的基礎(chǔ)上建立起來的一套更加完善的事件體系。用于監(jiān)控、更新控件狀態(tài)，處理視圖信息及與后臺服務(wù)器進行交互等等，利用JSON對象為組件提供配置信息，使得服務(wù)器端與表示層異步數(shù)據(jù)通信的負荷真正減輕，從而達到客戶端的MVC應(yīng)用。

1.2 JSON數(shù)據(jù)格式

JSON的全稱是JavaScript Object Notation(JavaScript對象符號)。是一種結(jié)構(gòu)化的、輕量級的、完全獨立于語言的、基于文本的數(shù)據(jù)交換格式[2]。其格式非常適合于那些具有一些屬性和值的簡單對象，它以“{”開始，以“}”結(jié)束，屬性名和值用“：”分隔。JSON的屬性可以是簡單的字符串、數(shù)組、數(shù)字、TRUE、FALSE、NULL或者對象。通常用來替代XML文件格式，在表達相同的信息時，JSON比XML形成的文件更小、便于機器解析。JSON提供了面向?qū)ο蟮姆椒?，可以將元?shù)據(jù)緩存到客戶機上，幫助分離了驗證數(shù)據(jù)和邏輯。其結(jié)構(gòu)為Web應(yīng)用程序提供了AJAX的本質(zhì)。JSON格式結(jié)構(gòu)基于下面兩點：

(1)“名/值”對的集合不同語言中，它被理解為對象(Object)、記錄(Record)、結(jié)構(gòu)(Struct)、字典(Dictionary)、哈希表(Hash Table)、鍵列表(Keyed List)等。

(2)值的有序列表，多數(shù)語言中被理解為數(shù)組(Array)。

1.3 Struts、Spring、Hibernate框架技術(shù)

SSH為J2EE的一個集成框架，是目前較流行的一種Web應(yīng)用程序開源框架的集成策略。以幫助開發(fā)人員在短期內(nèi)搭建結(jié)構(gòu)清晰、可復(fù)用性好、維護方便的Web應(yīng)用程序[3]。

Struts是實現(xiàn)了MVC(Model-View-Controller)模式的框架，將Web系統(tǒng)的程序分為模型、視圖、控制器三個部分，模型由JavaBean、EJB組件等完成具體業(yè)務(wù)的組件構(gòu)成；視圖有JSP文件、POJO對象組成；控制器由Action來實現(xiàn)。減弱了業(yè)務(wù)邏輯接口和數(shù)據(jù)接口之間的耦合，提高了組件的復(fù)用性。提供了功能強大、種類豐富的標(biāo)簽庫以及輸入校驗等功能，有效提高了開發(fā)效率。

Spring是一個輕量級的控制反轉(zhuǎn)(IOC)和面向切面(AOP)的容器框架。Spring的控制反轉(zhuǎn)(Ioc)就是由容器控制程序之間的依賴關(guān)系，而非傳統(tǒng)實現(xiàn)中，由程序代碼直接操控，組件之間的依賴關(guān)系由容器在運行期決定，由容器動態(tài)的將某種依賴關(guān)系注入(DI)到組件之中。Spring容器控制所有Action對象和業(yè)務(wù)邏輯類的生命周期，由于上層不再控制下層的生命周期，層與層之間實現(xiàn)了完全脫耦，使程序運行起來效率更高，維護起來也方便。Spring中的AOP(動態(tài)代理)可以在不同的應(yīng)用中將各個切面結(jié)合起來使用大大提高了代碼重用度，可實現(xiàn)聲明式事務(wù)、統(tǒng)一的日志管理等功能。

Hibernate是一種ORM(Object-Relation Mapping，對象關(guān)系映射)中間件，可以將數(shù)據(jù)庫表中的數(shù)據(jù)包裝為Java對象，又可以將Java對象映射到數(shù)據(jù)庫表中的數(shù)據(jù)，開發(fā)人員可以利用面向?qū)ο缶幊痰乃枷雭聿僮鲾?shù)據(jù)庫中的數(shù)據(jù)，而不用關(guān)心底層的數(shù)據(jù)庫結(jié)構(gòu)。

1.4 ExtJs+SSH架構(gòu)整合原理

新架構(gòu)采用了ExtJs和Struts的整合方式，把傳統(tǒng)的Web應(yīng)用中的表現(xiàn)部分即JSP頁面替換成ExtJs頁面，在業(yè)務(wù)邏輯層和持久層上仍然保留了Spring+Hibemate的組合，架構(gòu)整合的基本原理[4]。

(1)客戶端：ExtJs為Web開發(fā)引入了桌面開發(fā)中已經(jīng)非常成熟的組件概念，只需要經(jīng)簡單的配置就可以使用ExtJs提供的豐富組件，包括進度條、工具欄、菜單欄、表單、對話框、樹、表格、面板和布局類等。通過Web UI組件可以快速構(gòu)建自己的頁面，也可以對組件進行擴展。ExtJS頁面中的數(shù)據(jù)的提交和獲取都使用Ajax方式進行，因此不會造成頁面刷新。向服務(wù)器端發(fā)送異步請求由動態(tài)生成Javascript對象處理，經(jīng)過ExtJs的Ajax引擎映射成HTTP請求，業(yè)務(wù)層處理結(jié)果封裝成JSON數(shù)據(jù)格式返回，同樣經(jīng)過客戶端ExtJs的Ajax引擎的解析，在客戶端采用Javascript處理來自服務(wù)器的響應(yīng)，返回給客戶端Ext JS組件，實現(xiàn)了服務(wù)器端與表示層的異步數(shù)據(jù)通信。

(2)表現(xiàn)層：Struts主要作用是分發(fā)用戶請求并將業(yè)務(wù)層的處理結(jié)果返回給客戶端。在通常的Struts應(yīng)用中，處理完用戶請求之后會將數(shù)據(jù)在新頁面進行展示，即通過調(diào)用Struts的mapping.findForward方法進行頁面跳轉(zhuǎn)，但是當(dāng)ExtJs與Struts進行結(jié)合時，ExtJs頁面在大部分情況下不進行頁面跳轉(zhuǎn)而是只向服務(wù)器請求必要的業(yè)務(wù)數(shù)據(jù)。更新頁面中的相關(guān)組件，因此不再需要配置Struts中Action的Forward標(biāo)簽，而是直接將業(yè)務(wù)數(shù)據(jù)通過HttpServletResponse以JSON數(shù)據(jù)格式寫回到客戶端。整個過程采用Struts的MVC模式設(shè)計[10]，將表現(xiàn)層和業(yè)務(wù)層分離，不僅簡化了表示層的結(jié)構(gòu)，也有利于實現(xiàn)表現(xiàn)和數(shù)據(jù)的松耦合，而且還充分利用Servlet技術(shù)，使Servlet擔(dān)任上下文監(jiān)聽器，攔截過濾器、消息轉(zhuǎn)發(fā)器的角色作用。

(3)業(yè)務(wù)層：Struts將Action的創(chuàng)建工作交給了Spring的代理類來完成，創(chuàng)建這個實例后，將這個實例注入，由Struts調(diào)用Action中的相應(yīng)方法。Action中可以配置一個或多個Service對象，Action調(diào)用Service中的方法進行業(yè)務(wù)處理。Service中通常會有一個或多個DAO的對象，DAO(Data Access Object)則為了減少業(yè)務(wù)邏輯和數(shù)據(jù)訪問邏輯之間的耦合，DAO繼承了Hibernate的接口，用來處理數(shù)據(jù)庫的操作。而Action，Service，DAO的創(chuàng)建與注入，都是由Spring的Bean工廠來實現(xiàn)的。在業(yè)務(wù)層中，管理服務(wù)組件的Spring IoC容器負責(zé)向Action提供業(yè)務(wù)模型(Model)組件和該組件的協(xié)作對象數(shù)據(jù)處理(DAO)組件完成業(yè)務(wù)邏輯，并提供事務(wù)處理、緩沖池等容器組件以提升系統(tǒng)性能和保證數(shù)據(jù)的完整性。

(4)持久層：Hibernate提供OR/Mapping，負責(zé)數(shù)據(jù)持久層的管理，與數(shù)據(jù)庫中的表相對應(yīng)，通過DAO對象完成數(shù)據(jù)庫的CRUD操作。

2.系統(tǒng)主要功能與總體結(jié)構(gòu)設(shè)計

教材所有的管理工作應(yīng)以教材信息數(shù)據(jù)為主導(dǎo)，包括教材的預(yù)訂、教材審核、教材選購、教材出庫入庫、庫存管理、費用結(jié)算、查詢都是圍繞教材展開。教材管理工作業(yè)務(wù)流程如圖2所示。

首先任課教師根據(jù)教務(wù)處發(fā)布的教學(xué)計劃對所教課程進行教材選擇，系教材委員會對教材進行審核，提交至教材科進行匯總，然后由院教材委員會審批。審批后，教材科對教材進行匯總，生成教材采購訂單，向圖書供應(yīng)商進行采購。在下學(xué)期開學(xué)前圖書供應(yīng)商根據(jù)教材采購計劃發(fā)貨，教材科負責(zé)教材入庫處理，等下學(xué)期開學(xué)后對教材進行出庫處理，按班級生成學(xué)生購書統(tǒng)計表，將教材發(fā)放給學(xué)生，發(fā)放完成后統(tǒng)計生成教材費結(jié)算單，以此向財務(wù)處收取學(xué)校教材費。同時院系和學(xué)生都可以通過用戶的客戶端查看教材費費用和教材的基本信息。新的系統(tǒng)解決了原來教材系統(tǒng)的重復(fù)錄入和重復(fù)審核的問題，由于引入教材基礎(chǔ)信息庫，教師提交征訂的教材只需錄入一次，進入教材基礎(chǔ)信息庫后，經(jīng)過系教材委員會審核，院教材委員會審批，教師就可作為上課的教材，教材不需要重復(fù)錄入和重復(fù)審定。

整個系統(tǒng)分為教材科管理端、教師端、學(xué)生端，其對系統(tǒng)主要功能的要求如下。

2.1 教材科管理端功能

(1)教材運送到以后進行入庫處理，輸入或者掃描教材ISBN編號即可從教材庫中讀出教材名稱、出版社、編著者等信息，輸入需要入庫數(shù)量即可盤點入庫。

(2)領(lǐng)取教材時，對領(lǐng)用專業(yè)、班級、人員、數(shù)量等進行登記，并打印出庫單簽字領(lǐng)取。

(3)查看教材剩余書目，盤點庫存，以便核對教材訂單與實際領(lǐng)用情況，及時聯(lián)系采購中心進行相應(yīng)補訂與退訂。

(4)可以按照年級專業(yè)學(xué)生層次統(tǒng)計教材需求信息，可以非常直觀的查詢每個系部、專業(yè)、年級、班級的教材信息。

(5)教材出庫時按照年級專業(yè)層次生成教材領(lǐng)用單，可以明確查詢到教材的出庫情況。

(6)根據(jù)書商生成教材征訂計劃單，征訂單進行教材入庫，對于已入庫或者未入庫的教材以及部分入庫的教材由明顯標(biāo)注。對于未入庫的教材涉及到的年級專業(yè)能夠查詢。

(7)教材出庫按照教材征訂計劃單直接生成，可以按照系部年級、專業(yè)、層次、班級打印教材出庫單。

(8)根據(jù)院系實際領(lǐng)取情況進行出庫處理，統(tǒng)計結(jié)算各單位教材費，提供給財務(wù)部門收取教材費。

2.2 教師端功能

(1)教師根據(jù)下學(xué)期選課情況錄入下學(xué)期可能用到的教材書目，提交并等待上級部門的審批。審批前可以修改教材錄入信息進行修改，審批未通過的也可以重新修改并提交，審批通過后就不能進行修改。

(2)教師在報訂教材時首先在教材庫中選擇，如果教材庫中沒有可以直接添加教材，但是需要經(jīng)過審核，審核通過后可以選為上課教材。

(3)選購相應(yīng)教材后，可查詢到自己所選購教材的詳細費用，用于核對自己所扣教材費用。

(4)可以按照年級專業(yè)學(xué)生層次統(tǒng)計教材需求信息，可以非常直觀的查詢每個系部、專業(yè)、年級、班級的教材信息。

2.3 學(xué)生端功能

(1)通過客戶端查詢各學(xué)期教材使用信息及各學(xué)期書款情況；

(2)能夠選擇選修課教材是否訂購教材。

經(jīng)過需求分析后，確定系統(tǒng)的主要功能，在此基礎(chǔ)上對所有功能進行模塊劃分，設(shè)計出系統(tǒng)總體架構(gòu)，如圖3所示。

圖3 教材管理系統(tǒng)功能結(jié)構(gòu)圖

3.Extjs導(dǎo)航樹的實現(xiàn)

通常在系統(tǒng)開發(fā)中，經(jīng)常采取一次性將整棵樹在前臺窗口生成，如果結(jié)點層次多，數(shù)量大時，在客戶端需要消耗大量的系統(tǒng)資源，因而等待時間也比較長，不能提供良好的用戶體驗。

本系統(tǒng)采用基于AJAX技術(shù)的ExtJs框架實現(xiàn)與后臺交互的動態(tài)樹，其具體實現(xiàn)思路當(dāng)點擊樹中某個父結(jié)點時，通過異步方式向后臺發(fā)出請求，獲取生成其子節(jié)點，而不在一次性在瀏覽器中加載所有樹節(jié)點，這樣就避免了一次性加載整棵樹的系統(tǒng)開銷大的問題，節(jié)約了系統(tǒng)資源，也提高了頁面的運行速度，以獲得較好的用戶體驗。

系統(tǒng)所有Web頁面都采用ExtJS框架設(shè)計，采用樹形結(jié)構(gòu)的展示方式做導(dǎo)航，登錄后通過單擊左側(cè)動態(tài)樹形菜單節(jié)點加載相應(yīng)功能模塊，內(nèi)容區(qū)域采用Tab頁的形式來顯示相應(yīng)的工作界面。使用ExtJs生成動態(tài)樹實現(xiàn)代碼如下所示：

Ext.onReady(function(){

var treeModel=Ext.create(‘Ext.data.Model’，{//資源樹的數(shù)據(jù)模型

fields：[‘id’，’text’，’pid’，’cls’，’leaf]，

root：{expanded：true

}，

proxy：{

type：’ajax’，

url：’menu！getTree’，//向后臺Action請求加載數(shù)據(jù)

reader：’json’//讀取JSON的數(shù)據(jù)格式

}

})；

var leftMenu=Ext.create(‘Ext.tree.Panel’，{//創(chuàng)建樹形面板

store：Ext.create(‘Ext.data.Tree-Store’，{//為數(shù)據(jù)模型創(chuàng)建數(shù)據(jù)集

defaultRootId：‘1’，//pid=1傳給后臺，查出一級子菜單

root：{

id：’rootnode’，nodeType：’async’//樹形節(jié)點的異步加載

}，model：treeModel//加載數(shù)據(jù)模型

})，

hideHeaders：true，

rootVisible：true，

region：‘west’，

id：‘west-panel’，

title：‘系統(tǒng)功能導(dǎo)航’，

split：true，

......//設(shè)置Tree Panel屬性

rootVisible：false//默認不顯示根節(jié)點

})；

leftMenu.on("itemclick"，function(vi ew，record，item，index，e){

var rowcon=record.raw；

contentTabs.add({

......//點擊樹節(jié)點時觸發(fā)事件

})；

var tab=Ext.getCmp(‘tab_’+record.raw.id)；

tab.show()；

contentTabs.setActiveTab(‘tab_’+record.raw.id)；

})；

})

在代碼中，Ext.onReady函數(shù)用于客戶端瀏覽器頁面的初始化，把初始化方法都應(yīng)該在寫這個函數(shù)中，首先定義一個Ext.tree.Panel類型的樹組件leftMenu，然后在樹的屬性中定義樹的寬高，是否可滾動等參數(shù)。由于樹節(jié)點需要異步加載，所以我們需要將樹節(jié)點root定義為async類型，在model層設(shè)置根節(jié)點id，顯示內(nèi)容，顯示圖標(biāo)，是否為葉子節(jié)點等屬性。在其中定義數(shù)據(jù)源URL，并向后臺Action中請求加載節(jié)點數(shù)據(jù)。在store層設(shè)置默認ID值為1，傳遞給后臺，返回一級樹形結(jié)構(gòu)，設(shè)置節(jié)點為異步加載，當(dāng)點擊節(jié)點且節(jié)點下子節(jié)點未加載時，將該節(jié)點作為參數(shù)傳回后臺，請求該節(jié)點下一層的子節(jié)點數(shù)據(jù)。

4.結(jié)束

在本校教材管理系統(tǒng)實現(xiàn)中采用了ExtJs+SSH集成方案，設(shè)計和實現(xiàn)了一個人機界面友好，風(fēng)格統(tǒng)一，層次清晰，可擴展性強，高內(nèi)聚，低耦合的Web分層架構(gòu)，為了迅速建立一個靈活高效的Web應(yīng)用程序提供的強有力的支持。根據(jù)用戶的實際需求，進行了系統(tǒng)模塊的個性化定制設(shè)計，整個系統(tǒng)的功能設(shè)計趨于完整，較好的滿足了用戶需求。

[1]韓義波，宋莉，宋俊杰.AJAX技術(shù)結(jié)合XML或JSON的使用比較[J].電腦知識與技術(shù)，2009，5(1)：101-103.

[2]鞠鳳娟，吳志峰.EXT技術(shù)在WEB界面設(shè)計與實現(xiàn)中的應(yīng)用研究[J].計算機與現(xiàn)代化，2008，3(11)：102-105.

[3]袁華強，王亞強，朱君.利用J2EE輕量級框架構(gòu)建Web應(yīng)用研究[J].計算機工程與設(shè)計，2007，28(1)：22-25.

[4]張鵬偉等.基于ExtJS和SSH的Web應(yīng)用架構(gòu)的研究與實現(xiàn)[J].陜西科技大學(xué)學(xué)報，2010，28(6)：111-115.