基于ExtJS和SSH的Web應(yīng)用架構(gòu)的研究與實現(xiàn)

張鵬偉， 陳景霞， 張文平， 王雨團

(1.陜西科技大學(xué)電氣與信息工程學(xué)院， 陜西 西安 710021； 2.寶雞航天動力泵業(yè)有限公司， 陜西 寶雞 721001)

0 前 言

目前較為流行的Struts+Spring+Hibernate(下面簡稱SSH)架構(gòu)提供了完整的、輕量級J2EE軟件開發(fā)模型，有利于構(gòu)建高質(zhì)量的Web應(yīng)用[1].但是，開發(fā)Web系統(tǒng)除了要考慮健壯性和穩(wěn)定性之外，能夠使其與用戶快速的交互也是需要考慮的一個重要因素.ExtJS是一個出色的Ajax框架，可以在B/S構(gòu)架下實現(xiàn)帶有華麗外觀的富客戶端，可用于構(gòu)建面向異步消息的無刷新的網(wǎng)絡(luò)應(yīng)用，使得我們的Web應(yīng)用更加具有活力及生命力.本文以油田物資管理信息系統(tǒng)開發(fā)為背景，研究應(yīng)用ExtJS框架以及SSH輕量級Web應(yīng)用架構(gòu)開發(fā)企業(yè)級信息化平臺的技術(shù)與實現(xiàn)方法，從表現(xiàn)層與業(yè)務(wù)邏輯層入手，闡述了如何改進經(jīng)典的SSH架構(gòu)，并充分利用優(yōu)秀開源技術(shù)，解決傳統(tǒng)JSP及Struts應(yīng)用中響應(yīng)速度慢、層次耦合度高、軟件復(fù)用度低等問題，構(gòu)建了一個能夠提供富客戶端，并能快速、低成本、低風(fēng)險開發(fā)Web2.0服務(wù)的框架.

1 J2EE輕量級框架：Struts+Spring+Hibemate

1.1 SSH框架原理

一個Web應(yīng)用系統(tǒng)架構(gòu)總體上分為表示層、控制層、業(yè)務(wù)邏輯層和數(shù)據(jù)持久層4個層次.SSH框架提供了完整的輕量級J2EE軟件開發(fā)模型，其中struts作為表示層和控制層主要框架，提供MVC控制、各類表示層標(biāo)簽以及輸入校驗等功能，有效提高了開發(fā)效率.

Spring能有效地組織業(yè)務(wù)邏輯層對象，易于同其它表示層框架無縫集成，允許根據(jù)需要選擇使用它的某一個功能模塊；為不同的數(shù)據(jù)訪問技術(shù)提供了統(tǒng)一的接口，并且采用控制反轉(zhuǎn)技術(shù)(IoC)可以很容易地實現(xiàn)bean的裝配；提供了簡潔的AOP并據(jù)此實現(xiàn)事務(wù)管理.

Hibernate是一個工作在持久層的基于對象關(guān)系映射(ORM)的開源框架，它對JDBC進行了輕量級的對象封裝，并提供一種功能強大、完全面向?qū)ο蟮牟樵冋Z言(HQL)，使得Java程序員可以隨心所欲地按照面向?qū)ο蟮乃季S方式來操縱數(shù)據(jù)庫.通過把數(shù)據(jù)封裝成對象，降低持久層的復(fù)雜度，使開發(fā)者可以專心于應(yīng)用程序的業(yè)務(wù)邏輯，而不用關(guān)心底層的數(shù)據(jù)庫結(jié)構(gòu)[2].

1.2 SSH框架的不足

隨著Web2.0的興起，用戶對于傳統(tǒng)Web應(yīng)用的交互性有了更高的要求，高并發(fā)訪問、網(wǎng)絡(luò)延遲都對傳統(tǒng)的Web應(yīng)用形成了嚴(yán)峻考驗.在此方面，SSH框架具有幾項不可忽視的缺點[3]：

(1)原有的Struts應(yīng)用為支持AJAX，需要對已有的基于JSP的表示層代碼進行重新設(shè)計和開發(fā).如果JSP頁面采用Struts標(biāo)簽作為組件，而Struts標(biāo)簽并非標(biāo)準(zhǔn)技術(shù)，如果有特殊的需求，則必須開發(fā)自定義的標(biāo)簽，而且每個標(biāo)簽之間缺乏有效的交互機制，若某一個標(biāo)簽內(nèi)容變化需要其它幾個標(biāo)簽內(nèi)容同步發(fā)生改變時，需要刷新整個頁面，從而導(dǎo)致系統(tǒng)交互性差.

(2)Struts業(yè)務(wù)邏輯處理能力相對較低，它需要為每個表單使用FormBean，因此產(chǎn)生了大量的多余的類，并且ActionForms無法進行單元測試；struts中大量使用了模板，頻繁的模板解析，給服務(wù)器和網(wǎng)絡(luò)帶寬帶來了沉重的壓力.

(3)即使在不使用Struts標(biāo)簽的JSP頁面中引入AJAX技術(shù)，其實現(xiàn)細節(jié)也比較繁瑣，缺乏有效的調(diào)試手段，加重了開發(fā)人員的負擔(dān)，因此在整體架構(gòu)中引入AJAX技術(shù)時需要選擇合適的AJAX框架，以提高Web頁面開發(fā)的效率.

據(jù)此，文中提出了一種新的ExtJS+SSH的Web應(yīng)用架構(gòu)，設(shè)計并實現(xiàn)了一個人機交互界面友好、風(fēng)格統(tǒng)一、層次結(jié)構(gòu)清晰、可擴展、高度開放的Web應(yīng)用開發(fā)架構(gòu)，為快速構(gòu)建靈活高效的Web應(yīng)用提供強有力的支持.

2 ExtJS+SSH框架整合

2.1 ExtJS框架

ExtJS是一個基于YUI技術(shù)，用JavaScript編寫的與后臺技術(shù)無關(guān)的前端AJAX框架.ExtJS框架完全基于純HTML/CSS+Javascript技術(shù)，除了提供豐富的跨瀏覽器UI組件外，還提供了一套強大的事件處理機制，專門處理用戶動作、監(jiān)控控件狀態(tài)、更新控件視圖信息及與服務(wù)器交互等等，還支持Jquery、Property等多種Javascript底層庫，采用JSON/XML數(shù)據(jù)源開發(fā)，使得服務(wù)器端與表示層異步數(shù)據(jù)通信的負荷真正減輕，從而達到客戶端的MVC應(yīng)用[4].ExtJS框架不僅簡化了AJAX開發(fā)，而且豐富了客戶端界面效果，可以十分方便地構(gòu)建高性能、可定制的、具有桌面應(yīng)用風(fēng)格的富客戶端Web界面.

2.2 ExtJS+SSH架構(gòu)整合原理

新架構(gòu)保留了Spring+Hibemate的組合，從表示層、控制層和業(yè)務(wù)邏輯層入手，使用ExtJS實現(xiàn)Struts框架中的頁面表示層，架構(gòu)整合的基本原理如圖1所示.

圖1 ExtJS+SSH架構(gòu)整合原理圖

(1)客戶端：瀏覽器不再使用原來Struts框架中以FormBean為主的JSP頁面，取而代之的是ExtJS頁面，ExtJS框架支持的強大的JavaScript庫提供了豐富的可重用對象和可擴展的Web UI組件模型，包括表單、對話框、選項卡、樹、表格、頁面布局等，可以直接使用這些元素來快速開發(fā)自己的頁面，同時也可以擴展自己的頁面元素，使Web表示層的開發(fā)具備可復(fù)用和可繼承等面向?qū)ο蟮奶匦?ExtJS頁面作為表示層實現(xiàn)與用戶的交互，各種請求都由ExtJS動態(tài)生成的Javascript對象處理，由客戶端Ajax引擎將Javascript請求映射成Http請求，業(yè)務(wù)層的處理結(jié)果以基于XML的JSON數(shù)據(jù)結(jié)構(gòu)進行封裝，經(jīng)過Ajax引擎的解析，返回給客戶端ExtJS組件，實現(xiàn)了服務(wù)器端與表示層的異步數(shù)據(jù)通信[5].

(2)表現(xiàn)層：接收來自客戶端的請求，并調(diào)度相應(yīng)的Action來處理請求，同時傳遞請求過程中的數(shù)據(jù)，最后將執(zhí)行結(jié)果返回客戶端.其中，前端控制器(Controller)和處理用戶請求的每個動作(Action)采用Struts模式設(shè)計.前端控制器負責(zé)定位特定的動作(action)，完成上下文轉(zhuǎn)換，并把控制權(quán)轉(zhuǎn)發(fā)到具體的業(yè)務(wù)操作上，給客戶端的HTTP請求安排惟一的訪問點，從而對表現(xiàn)層的邏輯進行集中控制，將表現(xiàn)層和業(yè)務(wù)層分開，既簡化了表現(xiàn)層結(jié)構(gòu)，又利于實現(xiàn)表現(xiàn)和數(shù)據(jù)的松散耦合，同時還充分利用Servlet技術(shù)，使Servlet擔(dān)任攔截過濾器、上下文監(jiān)聽、Web頁面之間的消息轉(zhuǎn)發(fā)器的角色，實現(xiàn)Web應(yīng)用程序中的預(yù)處理和后處理邏輯，例如會話管理、權(quán)限控制、日志記錄、字符集轉(zhuǎn)換等.

(3)業(yè)務(wù)層：其中Action是表示層請求的每個動作，Business Service對應(yīng)服務(wù)器端具體的業(yè)務(wù)操作.Action的主要功能是提供從請求中取得參數(shù)的值，轉(zhuǎn)化成相應(yīng)的模型，再將模型傳遞給執(zhí)行業(yè)務(wù)操作的對象，由業(yè)務(wù)對象執(zhí)行業(yè)務(wù)操作，再返回執(zhí)行的結(jié)果.DAO (Data Access Object)則封裝了數(shù)據(jù)訪問及操作的邏輯，用于訪問、操作持久化存儲介質(zhì)中的數(shù)據(jù)，為異構(gòu)數(shù)據(jù)源提供了統(tǒng)一的數(shù)據(jù)訪問API，消除了應(yīng)用程序其余部分對持久化存儲實現(xiàn)機制之間的耦合.利用Spring框架對會話及事務(wù)進行封裝、管理，向下與Hibernate數(shù)據(jù)持久層交互，向上為Struts的Action提供功能接口，把DAO模式與工廠方法(Factory Method)模式結(jié)合，形成數(shù)據(jù)訪問對象工廠策略，使用工廠方法模式來實現(xiàn)具體工廠和工廠的產(chǎn)品DAO.N層計算模式和Spring框架的結(jié)合使用，降低了應(yīng)用程序各模塊之間和應(yīng)用層與持久層之間的耦合程度.同時，利用Spring基于IoC的延時注入思想，將類之間的依賴關(guān)系轉(zhuǎn)移到外部的配置文件中，避免在調(diào)用類中硬編碼實現(xiàn)類，實現(xiàn)了插件式編程，提高了整個框架的靈活性和擴展性.

(4)持久化層：Hibernate負責(zé)數(shù)據(jù)持久層的管理，直接與數(shù)據(jù)庫交互，將數(shù)據(jù)庫中的數(shù)據(jù)表與Java對象進行映射，這樣業(yè)務(wù)邏輯層就可以通過操作Java對象對底層數(shù)據(jù)進行管理.正因為Hibernate具有完備的對象——關(guān)系映射策略，支持復(fù)雜的對象模型，通過Hibernate注釋可以很方便地根據(jù)POJO生成關(guān)系數(shù)據(jù)庫表結(jié)構(gòu)，并且存取策略(懶加載和即時存取)和緩存策略都對應(yīng)用透明地實現(xiàn)，所以對持久層的操作非常簡便高效.

3 ExtJS+SSH開源框架的實現(xiàn)與應(yīng)用

油田物資管理信息系統(tǒng)就是基于ExtJS+SSH開源框架設(shè)計實現(xiàn)的，該系統(tǒng)包括計劃管理、采購管理、合同管理、倉儲管理、核算結(jié)算管理、物資編碼管理、價格管理、供應(yīng)商管理、質(zhì)量管理、勞保信息管理、廢料舊料管理、統(tǒng)計報表、系統(tǒng)管理等業(yè)務(wù)模塊.

3.1 ExtJS框架的實現(xiàn)

系統(tǒng)所有Web頁面都采用ExtJS框架設(shè)計，圖2所示為用戶登錄后的工作區(qū)界面，左邊的折疊菜單顯示了系統(tǒng)的兩級模塊列表，單擊二級模塊節(jié)點，右邊便會顯示相應(yīng)的工作界面.圖3所示為“到貨驗收”模塊下開具入庫單的界面.應(yīng)用extjs需要在頁面中引入extjs的樣式及extjs庫文件，樣式文件為resources/css/ext-all.css，extjs的js庫文件主要包含兩個，adapter/ext/ext-base.js及ext-all.js，其中ext-base.js表示框架基礎(chǔ)庫，ext-all.js是extjs的核心庫.在ExtJS庫文件及頁面內(nèi)容加載完后，ExtJS會執(zhí)行Ext.onReady中指定的函數(shù)，每一個用戶的ExtJS應(yīng)用都是從Ext.onReady開始的，使用ExtJS框架的頁面代碼結(jié)構(gòu)如清單1所示.可以通過javascript調(diào)用ExtJS的類及控件來實現(xiàn)需要的功能.圖2、圖3所示的頁面就綜合運用了ExtJS提供的窗口、面板、菜單、樹、選項板、表單、表格、工具欄、按鈕等組件發(fā)送用戶請求，采用JSON數(shù)據(jù)解碼及反解碼技術(shù)異步刷新用戶界面，從而實現(xiàn)了美觀友好、交互性強的UI設(shè)計.

清單1 ExtJS頁面代碼結(jié)構(gòu)

圖2 用戶登錄后的工作區(qū)界面

清單2 web.xml中Struts框架的配置actionorg.apache.struts.action.ActionServletconfig/WEB-INF/struts-config.xml action?.do

3.2 SSH框架的實現(xiàn)

首先將Struts、Spring、Hibernate框架需要的庫文件加載到當(dāng)前應(yīng)用的類庫編譯路徑下.應(yīng)用Struts需要配置WEB-INF下的web.xml和struts-config.xml文件，web.xml中的struts配置如清單2所示，將所有的.do請求映射到ActionServlet控制器，控制器根據(jù)struts-config.xml配置文件中元素的定義，將特定的請求路徑映射到相應(yīng)的Action動作處理類.由于客戶端全部采用ExtJS頁面，這里僅將Struts配置作為派遣器使用，把用戶的請求轉(zhuǎn)發(fā)到具體的業(yè)務(wù)操作上.

圖3 開具入庫單界面

在應(yīng)用Spring+Hibernate框架時，需要在web.xml中增加相應(yīng)的上下文監(jiān)聽，如清單3所示，當(dāng)Web服務(wù)器啟動時通過加載/WEB-INF/struts-config.xml獲取Spring配置信息，完成相關(guān)的業(yè)務(wù)邏輯.本文利用Spring基于IoC的延時注入思想，對Hibernate的SessionFactory、事務(wù)管理、連接池及相關(guān)屬性進行封裝，能更簡潔地應(yīng)用Hibernate，并且能透明地創(chuàng)建和綁定Session到當(dāng)前的線程.用AnnotationSessionFactoryBean將Hibernate的session工廠注入到Spring的配置文件中，在創(chuàng)建實體對象時，還可通過讀取一個或多個類的注解來創(chuàng)建相應(yīng)的數(shù)據(jù)庫表結(jié)構(gòu).將DAO和Service的實現(xiàn)類以及類之間的依賴關(guān)系注入到Spring中，避免在調(diào)用類中硬編碼實現(xiàn)類，實現(xiàn)了插件式編程，提高了系統(tǒng)的擴展性和靈活性.

清單3 web.xml中Spring框架的配置 contextConfigLocation /WEB-INF/applicationContext.xml org.springframework.web.context.ContextLoaderListener

4 結(jié)束語

本文從表示層及業(yè)務(wù)邏輯層入手，充分利用現(xiàn)有優(yōu)秀的開源技術(shù)，提出了基于ExtJS+Struts+Spring+ Hibernate的新型框架，并通過實例應(yīng)用說明了這種框架的應(yīng)用.此新型框架不但提高了Web應(yīng)用的開發(fā)效率和訪問效率，而且從結(jié)構(gòu)上進一步優(yōu)化了Web應(yīng)用的架構(gòu)，其對Web應(yīng)用的改善主要體現(xiàn)在以下3個方面：(1)Web頁面實現(xiàn)組件化設(shè)計，提高了Web界面品質(zhì)和交互性，并且具備跨瀏覽器特性；(2)有效地解決了AJAX動態(tài)技術(shù)的開發(fā)復(fù)雜性問題，降低了表示層與業(yè)務(wù)邏輯層的耦合度；(3)無侵入式設(shè)計提高了軟件的復(fù)用度和可維護性.

參考文獻

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

[2] 李成嚴(yán)，馮慧靈. 基于開源技術(shù)的Web應(yīng)用架構(gòu)研究[J].計算機技術(shù)與發(fā)展，2009，19(8):27-30.

[3] 曾 亮，齊 歡，王小平，等.基于J2EE核心模式的組合Web框架研究[J].華中科技大學(xué)學(xué)報(自然科學(xué)版)，2007,35(6):43-46.

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

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