邱麗麗　陸　源

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

?

基于ExtJS和SSH2架構的網上報銷系統設計與實現

邱麗麗陸源

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

針對某企業需開發具有良好用戶體驗和可維護性的網上報銷系統的需求，闡述一個基于ExtJS和SSH2架構的網上報銷系統的設計及實現。深入研究開發中使用的整合架構和通信方式，分析設計網上報銷系統的界面功能和數據模型，并給出關鍵功能設計，最后給出系統實現。該系統的實際運行表明，這種整合架構下的Web系統比傳統的Web應用程序有更高的用戶體驗和可維護性。

網上報銷ExtJSSSH2RowEditor擴展

0　引　言

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

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

1　主要技術

1.1整合架構

本系統的架構以SSH2架構為后臺，前臺使用ExtJS框架展示頁面。該架構主要分為五層：視圖層、控制層、業務邏輯層、數據持久層和數據層[5]，見圖1所示。ExtJS框架實現視圖層，負責接收用戶請求，并向用戶展示結果頁面。控制層采用Struts2框架的控制器，通過Structs-config.xml配置文件配置前臺與服務器交互的Action，控制用戶對服務器的請求操作，根據請求調用業務邏輯層的業務邏輯組件，并將執行結果返回給視圖層。業務邏輯層管理具體的業務對象和業務操作，由Spring框架實現。Spring的容器除了統一管理業務邏輯外，還提供事務處理、緩沖池等容器組件來提高系統的性能，并確保數據的完整性。數據持久層由Hibernate實現，實現從對象到關系數據庫的映射，并將對數據庫的所有操作封裝在Dao接口里，達到向下屏蔽數據庫之間的差異，向上提供了數據庫訪問接口的目的。數據層主要是存儲系統中的數據信息的數據庫。分層結構有效地降低了各層間的耦合性，將業務邏輯和數據庫操作封裝為接口，不僅規范了系統編程，還使得源代碼易于理解，從而有利于日后系統的維護與拓展。

圖1　網報整合架構

1.2通信方式

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

使用JSON數據通信的過程是：ExtJs前臺將請求指向控制層獲取數據的Action方法中，系統運行時會自動將請求以異步方式發送到對應的操作方法中，請求可根據需要帶上參數。而在后臺獲取前端的請求后，傳統的Struts用類DispatchAction處理請求，因為整合ExtJS后使用JSON傳輸數據給前臺，所以在Action的操作方法中調用業務邏輯處理類得到執行結果對象后，改寫DispatchAction執行請求結束之前的代碼，使它不再像傳統那樣轉到Struts中指定的結果頁面，而是將結果轉換為JSON格式。然后調用JSONObject的toString 方法，直接向HttpServletResponse里寫JSON格式內容，并帶上成功或失敗標識，前臺就可以根據返回的標志，判斷請求是否成功，并進行相應的回調函數操作。

前臺利用Ext.Ajax.request，請求的主要代碼如下：

Ext.Ajax.request({

url: "…XXXServlet",

//服務器相應操作的地址

params: {

//json對象 },

method: "post",

//請求時使用的默認的http方法

success: function() {

//請求成功后的回調函數},

failure: function() {

//請求失敗后的回調函數 }});

2　系統分析與設計

2.1界面功能設計

整個網上報銷管理系統包含借款、報銷和還款業務，通常又因差旅、會務、出國等事由借款或報銷，設計區分差旅、會務、出國、一般等四種事由，根據業務部門的工作和會計的管理設計總體界面模塊如圖2所示。主要分為兩大模塊，部門申請和會計集中辦理，其中業務經辦人是指指具體需要借款、報銷和還款的人員因為還款一般是業務經辦人直接至財務進行還款辦理，不存在申請的信息，故還款辦理功能設計為會計直接辦理。

其中部門申請模塊包括借款申請、報銷申請和借款報銷情況查看三部分，主要供使用部門完成借款或報銷信息的申請錄入功能。在進行差旅報銷信息錄入時，可同時錄入城際交通票據信息，作為會計計算補助的參考，實時查看業務經辦人的借款或報銷情況的功能可作為業務部門錄入申請時的參考。當申請完成保存提交后，會計即可在會計集中辦理頁面進行辦理。

會計集中辦理模塊包括借款辦理、還款辦理和報銷辦理等三個模塊。借款和報銷根據業務部門錄入提交的數據逐條進行辦理，借款辦理時，可先查看業務經辦人借款情況，再根據借款申請信息進行借款辦理。報銷辦理稍微復雜，含檢查票據和計算補助，核銷借款等操作。還款辦理因為不需業務經辦人提供申請數據，是會計的直接錄入辦理信息操作。另外提供對借款情況、報銷情況和還款情況的綜合查詢功能。

圖2　網報功能總體設計

2.2數據模型分析與設計

根據企業借款、核銷、還款的靈活性。一次借多次報銷核銷和還款，多次借一次報銷核銷或還清。前賬不清，后賬不借的控制，及系統應清晰展現借款情況的需求。核心是設計借款、報銷結算、還款、核銷記錄四張表，將會務、出國等相關事務表另行設計，并建立關聯。同時為適應外幣借款，借款、還款、核銷記錄表應同時記錄原幣、本幣計量以及業務發生時的“系統”當時匯率。系統應建立統一可維護的匯率。另外，為減低復雜，報銷結算，只計人民幣(即系統本幣類型)結算。設計的主要數據概念模型如圖3所示。

圖3　網報主要概念模型設計

其中借款表中記錄借款數據，在核銷時更新借款表中的核銷數據，當全部核銷完時，在借款表中記錄核清日期。報銷表中記錄報銷數據，在核銷時，記錄核銷的合計本幣記量數據，另外記錄報銷時還款的外幣數量和外幣匯率。還款表中記錄還款數據，分為直接還款數據和核銷還款數據，核銷還款數據來自報銷時的還款本幣計量數據，直接還款數據來自于還款系統。核銷表中數據記錄對借款的核銷信息，按借款的幣種記錄原幣和本幣計量，數據來源于還款系統或報銷系統，報銷時的核銷數據只記錄報銷的核銷總額數據和借款數據的關系，對于報銷的還款數據，不需記錄核銷信息。

3　關鍵功能設計

3.1使用過濾器進行統一管理

在網報系統中，若登錄用戶的已借款數額巨大，已經超出了控制范圍，又未還清，系統應預先處理，不允許其跳轉到借款頁面。此外，還有一些對用戶請求的預處理，比如網頁權限和數據權限控制、訪問網頁時常會遇到Session超時錯誤等，都需要在頁面中加入判斷，然而當系統頁面比較多的時候，每個頁面都這樣加將會很費事，且將來的維護工作量也是很大，靈活性很差。本文通過Filter過濾器[9]來解決這個問題，它主要用于對用戶請求的預處理，在客戶端的HttpServletRequest到達Servlet之前，攔截HttpServletRequest進行操作。

對于角色和數據權限控制，本系統定義角色應用Action表和角色數據權限表，將用戶配置為對應的應用角色和數據查看角色。用戶登錄系統后，在過濾器中系統根據用戶的ID從數據庫中查找到對應的角色權限Action和數據查看權限參數，然后再傳遞至后臺執行對應的操作。客戶端通利用Filter接口和doFilter方法實現系統統一管理的主要代碼如下：

public class FilterWB implements Filter{

//實現Filter接口

//實現其doFilter方法來攔截請求

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超時，在此處做處理

}

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

{

//在此對登錄用戶查找對應的應用權限Action和數據查看

//權限參數，若有借款，同時進行借款額的判斷處理操作

}

//錯誤頁面

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

forward(request,response);

}

3.2RowEditor編輯控件的擴展

根據上一節的分析，本系統存在差旅、會務、出國、一般等四種事由的借款和報銷信息錄入，需要設計實現8個錄入界面。本系統引入RowEditor編輯控件，利用RowEditor控件特性，用戶可直接在grid上添加業務信息，同時可通過雙擊對業務信息進行修改等操作。通常情況下，需對每一類錄入信息根據不同的信息模型定制相應的RowEditor編輯控件，使程序員編寫大量重復的代碼。

本文設計擴展RowEditor控件，將使用控件的grid和提交編輯信息的后臺地址作為RowEditor控件的參數，RowEditor控件運行時將根據具體的參數執行對應的操作。這樣一來，只需編寫一個通用的帶參數的RowEditor控件，將該RowEditor控件作為8個業務信息錄入grid的插件，用戶錄入業務信息后，將根據不同的grid傳遞不同的參數，動態執行數據操作，減少了代碼量。

實現代碼的主要流程是在RowEditor控件的編輯結束后的保存操作函數中，獲取對應grid的業務信息參數和提交的地址參數，將業務信息參數傳遞給對應提交地址的后臺操作保存，擴展RowEditor控件的主要代碼如下：

extend_editor=function(config){

var defConf={

saveText:’Save’,

listeners:{

‘afteredit’:function(){

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

getSelectionModel().getSelections();

//獲取提交的數據json

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

var tempArr={};

…//將json對象轉化為參數序列tempArr

Ext.Ajax.request({

url:config.url;

//數據提交的地址

params: tempArr

//數據參數

success:function(response){

…

//提交成功的操作}

…})

}}}};

在grid中實例化以上定義的RowEditor擴展插件的主要代碼如下：

plugins;[new extend_editor({

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

})]

4　系統實現

4.1視圖層實現

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

報銷申請頁面的主要代碼如下：

//自動合計行插件

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

//主界面

var newpanel = new Ext.Panel({

…

//引入RowEditor和GroupSummary插件

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

}),summary],

items:[ {

//填寫報銷信息的gridpanel

new Ext.grid.GridPanel({

id:'bx_info_grid'

title:'報銷信息填寫',

columns: [

editor:{…}

//報銷額的編輯控件

…

//增加合計行，對填寫的報銷額自動進行合計

summaryRenderer:function(v,params,data){

return ‘

合計

’;}

…

}]});

4.2控制層實現

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

4.3業務邏輯層

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

4.4數據持久層

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

5　結　語

在主流的B/S框架下，根據某企業的業務實際，采用基于ExtJs和SSH2架構設計實現了企業內部簡單高效的網上報銷系統，邏輯清晰的架構具有較高的復用性與可維護性。同時，在視圖層引入ExtJs框架進行開發，提高了用戶體驗。實踐證明，這種整合架構下的Web系統比傳統的Web應用程序有更高的用戶體驗和可維護性。同時，實際運行中業發現，ExtJs架構下的客戶端存在響應速度慢的不足，這是未來研究和優化的方向。

[1] 梁文清，劉旭光．淺談網上報銷系統[J]．計算機與網絡：自然科學版，2011(12):47-49.

[2] 錢亦君. 網絡費用報銷管理系統的設計與實現[J]．信息技術, 2013,4(5): 68-71.

[3] 陳維，尚玉廷. 網上報銷系統分析與設計[J]．電腦知識與技術, 2013(26):5858-5861.

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

[5] 閆俊甫．基于ExtJS與J2EE架構的辦公自動化管理系統的設計與實現[D]．云南大學，2012.

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

[8] 唐永瑞，張達敏．基于Ajax與MVC模式的信息系統的研究與設計[J]．電子技術應用，2014,40(2): 128-131.

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

[10] 羅金濤．基于ExtJS的權限樹形菜單實現[J]．計算機安全技術，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。邱麗麗，工程師，主研領域：計算機應用。陸源，工程師。

TP39

A

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