基于Ext+SSH集成開發架構的科研管理系統的研究與應用

高瞻+鎖志海

摘 要： 通過對高?？蒲泄芾憩F狀的分析與研究，運用基于 Struts，Spring和Hibernate的輕量級Web集成開發框架，并結合 Ext 富客戶端技術，從科研管理的基礎數據組織入手，認真分析科研業務管理流程及信息交互特點，最終構建高效、靈活和穩定的高?？蒲泄芾硇畔⑾到y。該系統實現了科研管理的網絡化和數字化，有效提高了信息的集成效率，提升了科研信息精細化管理水平。

關鍵字： 科研管理； SSH； Ext； 精細化管理

中圖分類號： TN911?34 文獻標識碼： A 文章編號： 1004?373X（2015）20?0052?03

Research and application of scientific research management system based on Ext +SSH Integrated development framework

GAO Zhan， SUO Zhihai

（Data and Information Center， Xian Jiaotong University， Xian 710049， China）

Abstract： In this paper， the current situation of research project management in universities is studied. Proceeding from basic data organization of scientific research management， the scientific research management procedures and information interaction characteristics are analyzed by using light?weighted Web integrated development framework based on SSH （Struts Spring Hibernate） and rich client technology of Ext. Finally， a scientific research management system based on Ext+SSH integrated development framework with the advantages of reliability， efficiency and flexibility was constructed. The digitization and networking of scientific research management were achieved by means of the system， which improve the efficiency of information integration and promote the level of scientific research information management.

Keywords： scientific research management； SSH； Ext； delicacy management

學?？茖W研究能力的發展是制約高校整體辦學水平的重要因素，對于建設“研究型大學”更是具有舉足輕重的作用。近年來，隨著學?？蒲泄ぷ鞣秶鸵幠５难杆贁U大，信息交互頻繁，科研業務的復雜度日益增大，這就要求科研信息要做到快速流轉和有效管理，為了滿足科研管理系統建設的實際要求，構建了基于Struts，Spring，Hibernate 輕量級集成開發框架和Ext 富客戶端技術的高?？蒲泄芾硐到y，為科研工作提供了重要保障。

1 SSH和Ext框架介紹

1.1 基于SSH的Web系統開發框架介紹

SSH是一種基于J2EE技術的MVC軟件開發框架， 與J2EE重量級體系相對應，輕量級Web框架SSH不僅保持了J2EE的優勢（例如事務管理） ，還簡化了Web的開發[1]，提高開發效率。SSH集成框架從邏輯上分為三層： 表示層、業務邏輯層、數據持久層[2]。系統架構圖如圖1所示。在表示層，Struts 作為系統的整體基礎架構，它利用控制器分離模型和視圖，把用戶界面和事務邏輯進行分離，從而極大地縮短了開發時間。在數據持久層，Hibernate 框架對JDBC 進行了輕量級的對象封裝，將數據庫表通過配置文件映射成對象。程序開發人員無需關心數據庫的具體結構，直接操作數據對象即可。Spring 管 理 Struts 和 Hibernate，通過Spring的反轉機制，利用容器來創建對象，即在運行期間將對象的依賴關系注入到組件之中，使得應用代碼可直接使用實例。

1.2 基于Ext的富客戶端技術

Ext是一個基于純 HTML/CSS+ JavaScript技術的開源的富客戶端應用程序框架，它與后臺開發技術無關，可以用在多種開發語言的開發應用中，使B/S應用更具有活力和生命力，大幅度提升了用戶體驗。Ext提供了豐富的跨瀏覽器UI組件，靈活采用JSON和XML為交換格式，減輕了服務端表示層的負荷，從而達到客戶端的 RIA應用[3]。Ext還提供了豐富的學習文檔和方便易查的 API文檔， 方便開發者查詢和使用。

圖1 Struts，Spring，Hibernate集成框架的系統架構圖

Ext在開發中主要使用到Application，Controller，Viewport，View，Store，Model和Data七大類[4]，其邏輯關系如圖 2 所示。 Application 控制Ext 到找對應 Controller 與 View 等 Javascript 文件；Controller用來實現 View 上的所觸發事件和操作，并將對應的 View，Store ，Model 進行關聯；Model和Store是模型數據類，主要是給View類提供數據；View主要負責頁面展示。

圖2 Ext類邏輯關系圖

2 科研管理系統的設計與實現

2.1 科研管理系統的功能模塊設計

科研管理系統的設計與開發以“高效管理、服務師生、信息共享、公正公開”為建設目標，以科研管理的內容、流程為中心。從管理內容的覆蓋范圍來看，科研管理系統的主要分為了科研項目管理、科研成果管理、經費管理、科研問題管理、科研機構管理、科研辦公管理功能、統計管理、專家庫管理、基地管理等9大功能模塊。各個功能模塊具有相對獨立性，同時也相互聯系。從服務對象來看，為校領導、學院、科研基地、教師、科研管理人員5大服務對象提供全方位的服務。

2.2 基于Ext和SSH集成框架的系統架構設計

良好架構的選擇對提高項目的開發效率有著重大影響?；?Ajax的 Web應用程序打破了傳統Web程序開發模式，大大提高了程序的可用性用戶體驗。 因此SSH和Ext的組合構建了一個具有健壯架構體系和具有良好用戶體驗的Web系統開發架構[5]。

Ext+SSH 集成架構整合的基本原理如圖 3 所示。Ext 實現 Struts 框架中的頁面表示和頁面跳轉，管理界面上的各種操作事件，同時做出相應的響應，由于其提供了豐富的UI 組件，并采用JSON數據格式傳輸數據，提高程序員的開發效率[6]。在業務層，Spring實現 MVC三層分離， 控制各層負責不同的任務，協作完成一次完整的請求/響應。在數據持久層 ， Hibernate 實現數據庫表到Java類的映射，簡化數據庫事務管理。

圖3 Ext+SSH集成架構圖

2.3 關鍵技術的實現

Ext框架擁有豐富的組件，而且創建組件的方法也非常簡單，可以直接通過new關鍵字來創建，比如創建一個窗口，可以使用new Ext.window（），創建一個表格可以使用new Ext.grid.GridPanel（）。在本系統中，用戶登錄后的首頁面板顯示了用戶基本信息，科研通知公告，代辦事宜等信息，它們可以通過拖拽的方式調整位置，這里采用的Ext的Ext.ViewPort組件來實現頁面布局，它可以隨著瀏覽器的大小而自適應。部分核心代碼如下所示：

…

var viewport = new Ext.Viewport（{

layout：′border′，

items：[ {

region ： ′west′，

id ： ′app?portal?demo?settings?panel′，

title ： ′設置′，

split ： true，

width ： 230，

minSize ： 175，

maxSize ： 400，

collapsible ： true，

collapsed： true，

collapseFirst：false，

stateful： false，

margins ： ′5 0 5 5′，

cmargins ： ′5 5 5 5′，

layout ： ′fit′，

items ： [{html ： "

id ： ′app?portal?demo?settings?exts′，

autoScroll ： true，

border ： false，

iconCls ： ′nav′}]

}，

{xtype：′portal′，

region：′center′，

margins：′2 2 2 2′，

items： items，

bodyStyle： ′overflow?x： hidden′

}]

}）；

//將布局的左邊部分（west），在隱藏條上添加‘組織機構的title

viewport.layout.west.getCollapsedEl（）.createChild（{

html： ′′

+ ′ ′

+ ′′

+ ′ ′

+ ′

}）；

Ext.callback（function（）{

show_data（）；

show_setup（）；

}， viewport， []， 1000）；

}）；

…

科研數據不僅數量大，而且數據關聯性也較強，在每個數據列表上建立快捷查詢項是非常必要的，如圖4所示。

圖4 Ext的panel組件實現快捷查詢頁面

以下代碼是利用Ext的panel組件實現的快速查詢頁面的代碼：

function getQueryItems（）{

var items = []；

//添加第一行查詢條件

var query1 = new Ext.Panel（{

id： ′querypanel1′，

layout： ′column′，

border： false，

items： [

{xtype：′label′，width：10}，

{xtype：′label′，width：60，text：′項目編號：′}，

{id： ′query_xmbh′，width：140

，xtype： ′textfield′

，enableKeyEvents：true

，initEvents：function（）{

var keyPress=function（e）{

if（e.getKey（）==e.ENTER）{

query（）； } }；

this.el.on（"keypress"，keyPress，this）；

}}，

…

，{xtype：′label′，width：10}

，{ width："60"，

layout： ′form′，

border： false，

labelAlign ： ′right′，

items： [{

xtype： ′button′

，text： ′查詢′

，tooltip： {title：′查詢′，text：′

根據您設置的條件查詢結果′}

，iconCls： ′find′

，enableKeyEvents： true

，handler： query

，scope ： this

}]}

，{ width："60"，

layout： ′form′，

border： false，

labelAlign ： ′right′，

items： [{

xtype： ′button′

，text： ′重置′

，tooltip： {title：′重置′，text：′清空您設置的條件查詢結果′}

，iconCls： ′reset′

，enableKeyEvents： true

，handler： reset

，scope ： this

} ] }

] } ）；

…

3 結 語

采用Ext+SSH集成架構開發的科研管理信息系統，結構清晰，快速高效，可維護性和靈活性較高。目前該系統已在西安交通大學科研院的科研管理工作中得到了應用，體現了“人性化操作”的設計理念，充分兼顧了校領導、科研管理人員、教師等用戶的不同需求，實現了與校園信息化平臺的其他應用系統對接，提升了學校科研管理能力和水平。

參考文獻

[1] 邵雄凱，楊京濤.基于Struts，Spring和Hibernate的集成框架研究[J].軟件導刊，2007（23）：25?28.

[2] 張瑋，陳為.基于Struts+Spring+Hibernate框架的探討與研究[J].長春大學學報，2006（12）：75?80.

[3] 王曉燕，宋紹云.Ext的組件體系結構研究[J].電腦知識與技術，2011（9）：1999?2002.

[4] 田建偉，黎曦，劉瀟瀟，等.基于Ext和SSH開發架構的電力生產信息系統的研究與應用[J].湖南電力，2014（2）：16?19.

[5] 郭永樂，劉列根，張宇.基于輕量級框架構建Web應用[J].電子技術應用，2007（4）：78?90.

[6] 王淵，懷自國，羅怡桂.基于Ext+Spring+Hibernate的Web系統開發架構的研究與應用[J].計算機與現代化，2009（12）：78?81.

[7] 于湛麟，李仲秋，任永昌.SSH框架實現MVC架構的電子商務軟件平臺[J].計算機技術與發展，2012（10）：169?172.