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

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

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

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

1.技術背景

1.1 ExtJs技術

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

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

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

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

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

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

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

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

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

1.3 Struts、Spring、Hibernate框架技術

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

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

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

Hibernate是一種ORM(Object-Relation Mapping，對象關系映射)中間件，可以將數(shù)據(jù)庫表中的數(shù)據(jù)包裝為Java對象，又可以將Java對象映射到數(shù)據(jù)庫表中的數(shù)據(jù)，開發(fā)人員可以利用面向對象編程的思想來操作數(shù)據(jù)庫中的數(shù)據(jù)，而不用關心底層的數(shù)據(jù)庫結構。

1.4 ExtJs+SSH架構整合原理

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

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

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

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

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

2.系統(tǒng)主要功能與總體結構設計

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

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

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

2.1 教材科管理端功能

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

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

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

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

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

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

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

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

2.2 教師端功能

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

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

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

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

2.3 學生端功能

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

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

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

圖3 教材管理系統(tǒng)功能結構圖

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

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

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

系統(tǒng)所有Web頁面都采用ExtJS框架設計，采用樹形結構的展示方式做導航，登錄后通過單擊左側動態(tài)樹形菜單節(jié)點加載相應功能模塊，內(nèi)容區(qū)域采用Tab頁的形式來顯示相應的工作界面。使用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)功能導航’，

split：true，

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

4.結束

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

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

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

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

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