邱麗麗　陸　源

(中國(guó)電子科技集團(tuán)第二十八研究所　江蘇 南京 210007)

?

基于ExtJS和SSH2架構(gòu)的網(wǎng)上報(bào)銷系統(tǒng)設(shè)計(jì)與實(shí)現(xiàn)

邱麗麗陸源

(中國(guó)電子科技集團(tuán)第二十八研究所江蘇 南京 210007)

針對(duì)某企業(yè)需開發(fā)具有良好用戶體驗(yàn)和可維護(hù)性的網(wǎng)上報(bào)銷系統(tǒng)的需求，闡述一個(gè)基于ExtJS和SSH2架構(gòu)的網(wǎng)上報(bào)銷系統(tǒng)的設(shè)計(jì)及實(shí)現(xiàn)。深入研究開發(fā)中使用的整合架構(gòu)和通信方式，分析設(shè)計(jì)網(wǎng)上報(bào)銷系統(tǒng)的界面功能和數(shù)據(jù)模型，并給出關(guān)鍵功能設(shè)計(jì)，最后給出系統(tǒng)實(shí)現(xiàn)。該系統(tǒng)的實(shí)際運(yùn)行表明，這種整合架構(gòu)下的Web系統(tǒng)比傳統(tǒng)的Web應(yīng)用程序有更高的用戶體驗(yàn)和可維護(hù)性。

網(wǎng)上報(bào)銷ExtJSSSH2RowEditor擴(kuò)展

0　引　言

某大型國(guó)企，隨著企業(yè)生產(chǎn)規(guī)模的發(fā)展，目前的手工報(bào)銷模式存在業(yè)務(wù)效率低下、內(nèi)部資金無法進(jìn)行有效的控制和查詢困難等諸多問題[1]。希望借助Web技術(shù)進(jìn)行網(wǎng)上報(bào)銷，來達(dá)到提高處理效率，實(shí)現(xiàn)費(fèi)用控制和方便查詢的目的。另外，需求調(diào)研時(shí)發(fā)現(xiàn)，該單位存在大量使用無盤上網(wǎng)和使用除IE外其他多種瀏覽器的情況，所以用戶希望開發(fā)的Web應(yīng)用對(duì)客戶端要求盡量低，并有較好的體驗(yàn)。同時(shí)開發(fā)交付后，未來由該單位的信息部門自行維護(hù)升級(jí)，所以又希望有較好的維護(hù)性。Web應(yīng)用中基于B/S多層體系架構(gòu)以其客戶端和服務(wù)器端分離的優(yōu)點(diǎn)而受到廣泛的關(guān)注[2,3]。然而，傳統(tǒng)的B/S架構(gòu)沒有良好的軟件設(shè)計(jì)模式和開發(fā)框架，開發(fā)的JSP頁面中既包含表示層的數(shù)據(jù)又有實(shí)現(xiàn)業(yè)務(wù)邏輯的程序代碼，存在系統(tǒng)維護(hù)難度高、頁面交互性和表現(xiàn)能力差的不足。

本文針對(duì)該企業(yè)的實(shí)際需求，考慮到系統(tǒng)的擴(kuò)展性和可維護(hù)性，使用輕量級(jí)的SSH2架構(gòu)[4]對(duì)系統(tǒng)進(jìn)行分層構(gòu)建。對(duì)于客戶端界面表現(xiàn)力不足的問題，相比于普通的網(wǎng)頁開發(fā)語言，ExtJS有表現(xiàn)力強(qiáng)、低開發(fā)難度、跨瀏覽器運(yùn)行和低通信量的優(yōu)點(diǎn)，所以本系統(tǒng)在客戶端引入ExtJS框架實(shí)現(xiàn)，闡述了一個(gè)基于ExtJS和SSH2架構(gòu)的網(wǎng)上報(bào)銷系統(tǒng)的設(shè)計(jì)及實(shí)現(xiàn)，研究了SSH2與ExtJS框架結(jié)合后的分層架構(gòu)和通信方式，并設(shè)計(jì)擴(kuò)展RowEditor控件，使得多個(gè)信息錄入grid只需編寫一個(gè)通用RowEditor控件，減少了代碼量。實(shí)際應(yīng)用表明，該設(shè)計(jì)比傳統(tǒng)的Web系統(tǒng)不僅提高了系統(tǒng)的開發(fā)效率，提供了更好的用戶體驗(yàn)，而且邏輯清晰的架構(gòu)還使系統(tǒng)具有更好的維護(hù)性和擴(kuò)展性。

1　主要技術(shù)

1.1整合架構(gòu)

本系統(tǒng)的架構(gòu)以SSH2架構(gòu)為后臺(tái)，前臺(tái)使用ExtJS框架展示頁面。該架構(gòu)主要分為五層：視圖層、控制層、業(yè)務(wù)邏輯層、數(shù)據(jù)持久層和數(shù)據(jù)層[5]，見圖1所示。ExtJS框架實(shí)現(xiàn)視圖層，負(fù)責(zé)接收用戶請(qǐng)求，并向用戶展示結(jié)果頁面?？刂茖硬捎肧truts2框架的控制器，通過Structs-config.xml配置文件配置前臺(tái)與服務(wù)器交互的Action，控制用戶對(duì)服務(wù)器的請(qǐng)求操作，根據(jù)請(qǐng)求調(diào)用業(yè)務(wù)邏輯層的業(yè)務(wù)邏輯組件，并將執(zhí)行結(jié)果返回給視圖層。業(yè)務(wù)邏輯層管理具體的業(yè)務(wù)對(duì)象和業(yè)務(wù)操作，由Spring框架實(shí)現(xiàn)。Spring的容器除了統(tǒng)一管理業(yè)務(wù)邏輯外，還提供事務(wù)處理、緩沖池等容器組件來提高系統(tǒng)的性能，并確保數(shù)據(jù)的完整性。數(shù)據(jù)持久層由Hibernate實(shí)現(xiàn)，實(shí)現(xiàn)從對(duì)象到關(guān)系數(shù)據(jù)庫的映射，并將對(duì)數(shù)據(jù)庫的所有操作封裝在Dao接口里，達(dá)到向下屏蔽數(shù)據(jù)庫之間的差異，向上提供了數(shù)據(jù)庫訪問接口的目的。數(shù)據(jù)層主要是存儲(chǔ)系統(tǒng)中的數(shù)據(jù)信息的數(shù)據(jù)庫。分層結(jié)構(gòu)有效地降低了各層間的耦合性，將業(yè)務(wù)邏輯和數(shù)據(jù)庫操作封裝為接口，不僅規(guī)范了系統(tǒng)編程，還使得源代碼易于理解，從而有利于日后系統(tǒng)的維護(hù)與拓展。

圖1　網(wǎng)報(bào)整合架構(gòu)

1.2通信方式

前后臺(tái)的數(shù)據(jù)通信也是ExtJS與SSH2整合的一個(gè)關(guān)鍵問題，處于視圖層中的ExtJS框架，利用其自身的Ajax特性，可無需刷新瀏覽器界面，直接通過異步方式獲取服務(wù)器數(shù)據(jù)來處理用戶界面內(nèi)容，可達(dá)到提高數(shù)據(jù)傳輸速率，提高用戶體驗(yàn)[6]的目的。ExtJS 的組件可支持 JSON 或者 XML 的格式進(jìn)行數(shù)據(jù)通信。早期的Ajax技術(shù)曾經(jīng)大量的使用XML響應(yīng)，但隨著JSON技術(shù)的廣泛應(yīng)用，JSON響應(yīng)的優(yōu)點(diǎn)逐漸凸顯，包括同樣的數(shù)據(jù)轉(zhuǎn)換JSON格式比轉(zhuǎn)換XML格式數(shù)據(jù)量?。辉诜?wù)器端生成JSON格式的字符串比生成XML格式的字符串編程簡(jiǎn)單等。所以本系統(tǒng)使用 JSON 作為系統(tǒng)數(shù)據(jù)傳輸格式。

使用JSON數(shù)據(jù)通信的過程是：ExtJs前臺(tái)將請(qǐng)求指向控制層獲取數(shù)據(jù)的Action方法中，系統(tǒng)運(yùn)行時(shí)會(huì)自動(dòng)將請(qǐng)求以異步方式發(fā)送到對(duì)應(yīng)的操作方法中，請(qǐng)求可根據(jù)需要帶上參數(shù)。而在后臺(tái)獲取前端的請(qǐng)求后，傳統(tǒng)的Struts用類DispatchAction處理請(qǐng)求，因?yàn)檎螮xtJS后使用JSON傳輸數(shù)據(jù)給前臺(tái)，所以在Action的操作方法中調(diào)用業(yè)務(wù)邏輯處理類得到執(zhí)行結(jié)果對(duì)象后，改寫DispatchAction執(zhí)行請(qǐng)求結(jié)束之前的代碼，使它不再像傳統(tǒng)那樣轉(zhuǎn)到Struts中指定的結(jié)果頁面，而是將結(jié)果轉(zhuǎn)換為JSON格式。然后調(diào)用JSONObject的toString 方法，直接向HttpServletResponse里寫JSON格式內(nèi)容，并帶上成功或失敗標(biāo)識(shí)，前臺(tái)就可以根據(jù)返回的標(biāo)志，判斷請(qǐng)求是否成功，并進(jìn)行相應(yīng)的回調(diào)函數(shù)操作。

前臺(tái)利用Ext.Ajax.request，請(qǐng)求的主要代碼如下：

Ext.Ajax.request({

url: "…XXXServlet",

//服務(wù)器相應(yīng)操作的地址

params: {

//json對(duì)象 },

method: "post",

//請(qǐng)求時(shí)使用的默認(rèn)的http方法

success: function() {

//請(qǐng)求成功后的回調(diào)函數(shù)},

failure: function() {

//請(qǐng)求失敗后的回調(diào)函數(shù) }});

2　系統(tǒng)分析與設(shè)計(jì)

2.1界面功能設(shè)計(jì)

整個(gè)網(wǎng)上報(bào)銷管理系統(tǒng)包含借款、報(bào)銷和還款業(yè)務(wù)，通常又因差旅、會(huì)務(wù)、出國(guó)等事由借款或報(bào)銷，設(shè)計(jì)區(qū)分差旅、會(huì)務(wù)、出國(guó)、一般等四種事由，根據(jù)業(yè)務(wù)部門的工作和會(huì)計(jì)的管理設(shè)計(jì)總體界面模塊如圖2所示。主要分為兩大模塊，部門申請(qǐng)和會(huì)計(jì)集中辦理，其中業(yè)務(wù)經(jīng)辦人是指指具體需要借款、報(bào)銷和還款的人員因?yàn)檫€款一般是業(yè)務(wù)經(jīng)辦人直接至財(cái)務(wù)進(jìn)行還款辦理，不存在申請(qǐng)的信息，故還款辦理功能設(shè)計(jì)為會(huì)計(jì)直接辦理。

其中部門申請(qǐng)模塊包括借款申請(qǐng)、報(bào)銷申請(qǐng)和借款報(bào)銷情況查看三部分，主要供使用部門完成借款或報(bào)銷信息的申請(qǐng)錄入功能。在進(jìn)行差旅報(bào)銷信息錄入時(shí)，可同時(shí)錄入城際交通票據(jù)信息，作為會(huì)計(jì)計(jì)算補(bǔ)助的參考，實(shí)時(shí)查看業(yè)務(wù)經(jīng)辦人的借款或報(bào)銷情況的功能可作為業(yè)務(wù)部門錄入申請(qǐng)時(shí)的參考。當(dāng)申請(qǐng)完成保存提交后，會(huì)計(jì)即可在會(huì)計(jì)集中辦理頁面進(jìn)行辦理。

會(huì)計(jì)集中辦理模塊包括借款辦理、還款辦理和報(bào)銷辦理等三個(gè)模塊。借款和報(bào)銷根據(jù)業(yè)務(wù)部門錄入提交的數(shù)據(jù)逐條進(jìn)行辦理，借款辦理時(shí)，可先查看業(yè)務(wù)經(jīng)辦人借款情況，再根據(jù)借款申請(qǐng)信息進(jìn)行借款辦理。報(bào)銷辦理稍微復(fù)雜，含檢查票據(jù)和計(jì)算補(bǔ)助，核銷借款等操作。還款辦理因?yàn)椴恍铇I(yè)務(wù)經(jīng)辦人提供申請(qǐng)數(shù)據(jù)，是會(huì)計(jì)的直接錄入辦理信息操作。另外提供對(duì)借款情況、報(bào)銷情況和還款情況的綜合查詢功能。

圖2　網(wǎng)報(bào)功能總體設(shè)計(jì)

2.2數(shù)據(jù)模型分析與設(shè)計(jì)

根據(jù)企業(yè)借款、核銷、還款的靈活性。一次借多次報(bào)銷核銷和還款，多次借一次報(bào)銷核銷或還清。前賬不清，后賬不借的控制，及系統(tǒng)應(yīng)清晰展現(xiàn)借款情況的需求。核心是設(shè)計(jì)借款、報(bào)銷結(jié)算、還款、核銷記錄四張表，將會(huì)務(wù)、出國(guó)等相關(guān)事務(wù)表另行設(shè)計(jì)，并建立關(guān)聯(lián)。同時(shí)為適應(yīng)外幣借款，借款、還款、核銷記錄表應(yīng)同時(shí)記錄原幣、本幣計(jì)量以及業(yè)務(wù)發(fā)生時(shí)的“系統(tǒng)”當(dāng)時(shí)匯率。系統(tǒng)應(yīng)建立統(tǒng)一可維護(hù)的匯率。另外，為減低復(fù)雜，報(bào)銷結(jié)算，只計(jì)人民幣(即系統(tǒng)本幣類型)結(jié)算。設(shè)計(jì)的主要數(shù)據(jù)概念模型如圖3所示。

圖3　網(wǎng)報(bào)主要概念模型設(shè)計(jì)

其中借款表中記錄借款數(shù)據(jù)，在核銷時(shí)更新借款表中的核銷數(shù)據(jù)，當(dāng)全部核銷完時(shí)，在借款表中記錄核清日期。報(bào)銷表中記錄報(bào)銷數(shù)據(jù)，在核銷時(shí)，記錄核銷的合計(jì)本幣記量數(shù)據(jù)，另外記錄報(bào)銷時(shí)還款的外幣數(shù)量和外幣匯率。還款表中記錄還款數(shù)據(jù)，分為直接還款數(shù)據(jù)和核銷還款數(shù)據(jù)，核銷還款數(shù)據(jù)來自報(bào)銷時(shí)的還款本幣計(jì)量數(shù)據(jù)，直接還款數(shù)據(jù)來自于還款系統(tǒng)。核銷表中數(shù)據(jù)記錄對(duì)借款的核銷信息，按借款的幣種記錄原幣和本幣計(jì)量，數(shù)據(jù)來源于還款系統(tǒng)或報(bào)銷系統(tǒng)，報(bào)銷時(shí)的核銷數(shù)據(jù)只記錄報(bào)銷的核銷總額數(shù)據(jù)和借款數(shù)據(jù)的關(guān)系，對(duì)于報(bào)銷的還款數(shù)據(jù)，不需記錄核銷信息。

3　關(guān)鍵功能設(shè)計(jì)

3.1使用過濾器進(jìn)行統(tǒng)一管理

在網(wǎng)報(bào)系統(tǒng)中，若登錄用戶的已借款數(shù)額巨大，已經(jīng)超出了控制范圍，又未還清，系統(tǒng)應(yīng)預(yù)先處理，不允許其跳轉(zhuǎn)到借款頁面。此外，還有一些對(duì)用戶請(qǐng)求的預(yù)處理，比如網(wǎng)頁權(quán)限和數(shù)據(jù)權(quán)限控制、訪問網(wǎng)頁時(shí)常會(huì)遇到Session超時(shí)錯(cuò)誤等，都需要在頁面中加入判斷，然而當(dāng)系統(tǒng)頁面比較多的時(shí)候，每個(gè)頁面都這樣加將會(huì)很費(fèi)事，且將來的維護(hù)工作量也是很大，靈活性很差。本文通過Filter過濾器[9]來解決這個(gè)問題，它主要用于對(duì)用戶請(qǐng)求的預(yù)處理，在客戶端的HttpServletRequest到達(dá)Servlet之前，攔截HttpServletRequest進(jìn)行操作。

對(duì)于角色和數(shù)據(jù)權(quán)限控制，本系統(tǒng)定義角色應(yīng)用Action表和角色數(shù)據(jù)權(quán)限表，將用戶配置為對(duì)應(yīng)的應(yīng)用角色和數(shù)據(jù)查看角色。用戶登錄系統(tǒng)后，在過濾器中系統(tǒng)根據(jù)用戶的ID從數(shù)據(jù)庫中查找到對(duì)應(yīng)的角色權(quán)限Action和數(shù)據(jù)查看權(quán)限參數(shù)，然后再傳遞至后臺(tái)執(zhí)行對(duì)應(yīng)的操作?？蛻舳送ɡ肍ilter接口和doFilter方法實(shí)現(xiàn)系統(tǒng)統(tǒng)一管理的主要代碼如下：

public class FilterWB implements Filter{

//實(shí)現(xiàn)Filter接口

//實(shí)現(xiàn)其doFilter方法來攔截請(qǐng)求

public void doFilter(ServletRequest sreq, ServletResponse response, FilterChain filterChain)

throws IOException, ServletException {

HttpServletRequest request=(HttpServletRequest)sreq;

HttpSession session = request.getSession(false);

if(session == null) {

//如果是session超時(shí)，在此處做處理

}

var user= request.getSession.getAttribute("loginuser");

{

//在此對(duì)登錄用戶查找對(duì)應(yīng)的應(yīng)用權(quán)限Action和數(shù)據(jù)查看

//權(quán)限參數(shù)，若有借款，同時(shí)進(jìn)行借款額的判斷處理操作

}

//錯(cuò)誤頁面

request.getRequestDispatcher("/Error.jsp").

forward(request,response);

}

3.2RowEditor編輯控件的擴(kuò)展

根據(jù)上一節(jié)的分析，本系統(tǒng)存在差旅、會(huì)務(wù)、出國(guó)、一般等四種事由的借款和報(bào)銷信息錄入，需要設(shè)計(jì)實(shí)現(xiàn)8個(gè)錄入界面。本系統(tǒng)引入RowEditor編輯控件，利用RowEditor控件特性，用戶可直接在grid上添加業(yè)務(wù)信息，同時(shí)可通過雙擊對(duì)業(yè)務(wù)信息進(jìn)行修改等操作。通常情況下，需對(duì)每一類錄入信息根據(jù)不同的信息模型定制相應(yīng)的RowEditor編輯控件，使程序員編寫大量重復(fù)的代碼。

本文設(shè)計(jì)擴(kuò)展RowEditor控件，將使用控件的grid和提交編輯信息的后臺(tái)地址作為RowEditor控件的參數(shù)，RowEditor控件運(yùn)行時(shí)將根據(jù)具體的參數(shù)執(zhí)行對(duì)應(yīng)的操作。這樣一來，只需編寫一個(gè)通用的帶參數(shù)的RowEditor控件，將該RowEditor控件作為8個(gè)業(yè)務(wù)信息錄入grid的插件，用戶錄入業(yè)務(wù)信息后，將根據(jù)不同的grid傳遞不同的參數(shù)，動(dòng)態(tài)執(zhí)行數(shù)據(jù)操作，減少了代碼量。

實(shí)現(xiàn)代碼的主要流程是在RowEditor控件的編輯結(jié)束后的保存操作函數(shù)中，獲取對(duì)應(yīng)grid的業(yè)務(wù)信息參數(shù)和提交的地址參數(shù)，將業(yè)務(wù)信息參數(shù)傳遞給對(duì)應(yīng)提交地址的后臺(tái)操作保存，擴(kuò)展RowEditor控件的主要代碼如下：

extend_editor=function(config){

var defConf={

saveText:’Save’,

listeners:{

‘a(chǎn)fteredit’:function(){

var s=Ext.getcmp(config,gridid).

getSelectionModel().getSelections();

//獲取提交的數(shù)據(jù)json

var Params=Object.keys(s[0].json);

var tempArr={};

…//將json對(duì)象轉(zhuǎn)化為參數(shù)序列tempArr

Ext.Ajax.request({

url:config.url;

//數(shù)據(jù)提交的地址

params: tempArr

//數(shù)據(jù)參數(shù)

success:function(response){

…

//提交成功的操作}

…})

}}}};

在grid中實(shí)例化以上定義的RowEditor擴(kuò)展插件的主要代碼如下：

plugins;[new extend_editor({

“url”:”…”,”gridid”:”GridId”

})]

4　系統(tǒng)實(shí)現(xiàn)

4.1視圖層實(shí)現(xiàn)

新建部門借款申請(qǐng)、部門報(bào)銷申請(qǐng)和財(cái)務(wù)辦理JSP頁面，為了能使用ExtJS編碼開發(fā)，將ExtJS相關(guān)發(fā)布包：ext-all.css、ext-base.js和核心庫：ext-all.s引入系統(tǒng)。在ExtJS框架下，窗口、樹、表格和菜單都是可以直接復(fù)用的組件，在開發(fā)的時(shí)候，只需要直接使用這些組件，就可以創(chuàng)建出豐富多彩的應(yīng)用程序界面。本系統(tǒng)的客戶端界面中主要用到的是表格組件grid、record對(duì)象和存儲(chǔ)record對(duì)象的store組件，store獲取數(shù)據(jù)后，將它裝配至表格grid，就可以顯示數(shù)據(jù)了。另外，為了實(shí)現(xiàn)grid行的增刪改，需要引進(jìn)RowEditor.js文件，為了實(shí)現(xiàn)grid行的自動(dòng)合計(jì)總數(shù)的功能，需要使用GroupSummary插件，所以本系統(tǒng)還必須引入如下文件。

報(bào)銷申請(qǐng)頁面的主要代碼如下：

//自動(dòng)合計(jì)行插件

var summary = new Ext.ux.grid.GridSummary();

//主界面

var newpanel = new Ext.Panel({

…

//引入RowEditor和GroupSummary插件

plugins: [new extend_editor({ “url”:”…”,”gridid”:”GridId”

}),summary],

items:[ {

//填寫報(bào)銷信息的gridpanel

new Ext.grid.GridPanel({

id:'bx_info_grid'

title:'報(bào)銷信息填寫',

columns: [

editor:{…}

//報(bào)銷額的編輯控件

…

//增加合計(jì)行，對(duì)填寫的報(bào)銷額自動(dòng)進(jìn)行合計(jì)

summaryRenderer:function(v,params,data){

return ‘

合計(jì)

’;}

…

}]});

4.2控制層實(shí)現(xiàn)

編寫控制層類JkAction.java、BxAction.java和HkAction.java。這些類用于接收頁面發(fā)過來的請(qǐng)求，處理請(qǐng)求中傳過來的數(shù)據(jù)，并且調(diào)用相應(yīng)的業(yè)務(wù)邏輯層類完成對(duì)實(shí)體類的增刪改查操作，最后將處理的結(jié)果返回給前端頁面。最后在struts.xml文件中配置action，實(shí)現(xiàn)ExtJS與服務(wù)器進(jìn)行數(shù)據(jù)交互的目的，并將action中result類型定義為JSON，使其返回給視圖層的是JSON格式的字符串。

4.3業(yè)務(wù)邏輯層

系統(tǒng)在實(shí)現(xiàn)業(yè)務(wù)邏輯是通過調(diào)用接口的方式，而非直接調(diào)用具體類，首先編寫業(yè)務(wù)邏輯接口，然后再編寫實(shí)體類來實(shí)現(xiàn)業(yè)務(wù)邏輯組件。本系統(tǒng)分為部門申請(qǐng)和會(huì)計(jì)集中辦理兩大模塊，兩大模塊下又分為多個(gè)小模塊，因業(yè)務(wù)邏輯層在各個(gè)模塊中實(shí)現(xiàn)的方法是一致的，所以在這里就只以實(shí)現(xiàn)借款為例來介紹。編寫業(yè)務(wù)邏輯層接口JkService.java，在其中定義對(duì)實(shí)體類Jk.java 的增刪改查4 種操作，然后編寫業(yè)務(wù)邏輯層實(shí)現(xiàn)類JkServiceImpl.java，在實(shí)現(xiàn)類中調(diào)用數(shù)據(jù)持久層類中的方法實(shí)現(xiàn)接口中定義的增刪改查4種操作。

4.4數(shù)據(jù)持久層

根據(jù)數(shù)據(jù)模型編寫相應(yīng)的實(shí)體類Jk.java、Bx.java和Hk.java 及實(shí)體類映射文件Jk.hbm.xml、Bx.hbm.xml和Hk. xml。具體的數(shù)據(jù)庫連接和釋放等操作交給Hibernate和數(shù)據(jù)庫連接池實(shí)現(xiàn)。對(duì)于具體的數(shù)據(jù)庫操作應(yīng)用類，首先創(chuàng)建抽象類EntityDao類，該類繼承了HibernateDaoSupport類，且只有一個(gè)SessionFactory參數(shù)。然后在config文件下創(chuàng)建hibernateDao.xml文件來管理dao的配置，并且注入SessionFactory。接下來編寫具體的數(shù)據(jù)庫操作實(shí)現(xiàn)類：JkDaoImpl、BxDaoImpl、HkDaoImpl和HxDaoImpl都繼承抽象類EntityDao。在實(shí)現(xiàn)類中實(shí)現(xiàn)對(duì)數(shù)據(jù)庫的具體操作。

5　結(jié)　語

在主流的B/S框架下，根據(jù)某企業(yè)的業(yè)務(wù)實(shí)際，采用基于ExtJs和SSH2架構(gòu)設(shè)計(jì)實(shí)現(xiàn)了企業(yè)內(nèi)部簡(jiǎn)單高效的網(wǎng)上報(bào)銷系統(tǒng)，邏輯清晰的架構(gòu)具有較高的復(fù)用性與可維護(hù)性。同時(shí)，在視圖層引入ExtJs框架進(jìn)行開發(fā)，提高了用戶體驗(yàn)。實(shí)踐證明，這種整合架構(gòu)下的Web系統(tǒng)比傳統(tǒng)的Web應(yīng)用程序有更高的用戶體驗(yàn)和可維護(hù)性。同時(shí)，實(shí)際運(yùn)行中業(yè)發(fā)現(xiàn)，ExtJs架構(gòu)下的客戶端存在響應(yīng)速度慢的不足，這是未來研究和優(yōu)化的方向。

[1] 梁文清，劉旭光．淺談網(wǎng)上報(bào)銷系統(tǒng)[J]．計(jì)算機(jī)與網(wǎng)絡(luò)：自然科學(xué)版，2011(12):47-49.

[2] 錢亦君. 網(wǎng)絡(luò)費(fèi)用報(bào)銷管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J]．信息技術(shù), 2013,4(5): 68-71.

[3] 陳維，尚玉廷. 網(wǎng)上報(bào)銷系統(tǒng)分析與設(shè)計(jì)[J]．電腦知識(shí)與技術(shù), 2013(26):5858-5861.

[4] 張建軍，劉虎. 基于ExtJS的J2EE輕量級(jí)框架的研究與應(yīng)用[J]．計(jì)算機(jī)應(yīng)用與軟件，2014,31(4)：73-76.

[5] 閆俊甫．基于ExtJS與J2EE架構(gòu)的辦公自動(dòng)化管理系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[D]．云南大學(xué)，2012.

[6] 韓國(guó)敬．SSH2與ExtJS框架結(jié)合的應(yīng)用研究[D]．遼寧科技大學(xué)，2013.[7] 陳道鑫，宋紹云．ExtJS框架在Web軟件開發(fā)中的應(yīng)用[J]．電腦知識(shí)與技術(shù)，2011,7(9): 2044-2047.

[8] 唐永瑞，張達(dá)敏．基于Ajax與MVC模式的信息系統(tǒng)的研究與設(shè)計(jì)[J]．電子技術(shù)應(yīng)用，2014,40(2): 128-131.

[9] 賀春林，謝琪．基于協(xié)同過濾的個(gè)性化Web服務(wù)選擇方法[J]．計(jì)算機(jī)應(yīng)用，2013, 33(1): 239-242.

[10] 羅金濤．基于ExtJS的權(quán)限樹形菜單實(shí)現(xiàn)[J]．計(jì)算機(jī)安全技術(shù)，2013(16)：121-122.

DESIGN AND IMPLEMENTATION OF ONLINE REIMBURSEMENT SYSTEM BASED ON EXTJS AND SSH2

Qiu LiliLu Yuan

(28th Research Institute, China Electronics Technology Group Corporation, Nanjing 210007, Jiangsu, China)

Aiming at the demand of an enterprise to develop an online reimbursement system with good user experience and maintainability, the authors expound the development and implementation of an ExtJS and SSH2 architecture-based online reimbursement system. We intensively studied the integration architecture and communications means used in the development, analysed and designed the interface functions and data models of the system, and provided the design of key functions as well. Finally, we presented the system implementation. It is shown by practical application of this system that the Web system with such integrated architecture has better user experience and higher maintainability than traditional Web applications.

Online reimbursement systemExtJSSSH2RowEditor extension

2015-06-06。邱麗麗，工程師，主研領(lǐng)域：計(jì)算機(jī)應(yīng)用。陸源，工程師。

TP39

A

10.3969/j.issn.1000-386x.2016.09.018