基于ExtJS和SSH的Web应用架构的研究与实现

张鹏伟， 陈景霞， 张文平， 王雨团

(1.陕西科技大学电气与信息工程学院， 陕西 西安 710021； 2.宝鸡航天动力泵业有限公司， 陕西 宝鸡 721001)

0 前 言

目前较为流行的Struts+Spring+Hibernate(下面简称SSH)架构提供了完整的、轻量级J2EE软件开发模型，有利于构建高质量的Web应用[1].但是，开发Web系统除了要考虑健壮性和稳定性之外，能够使其与用户快速的交互也是需要考虑的一个重要因素.ExtJS是一个出色的Ajax框架，可以在B/S构架下实现带有华丽外观的富客户端，可用于构建面向异步消息的无刷新的网络应用，使得我们的Web应用更加具有活力及生命力.本文以油田物资管理信息系统开发为背景，研究应用ExtJS框架以及SSH轻量级Web应用架构开发企业级信息化平台的技术与实现方法，从表现层与业务逻辑层入手，阐述了如何改进经典的SSH架构，并充分利用优秀开源技术，解决传统JSP及Struts应用中响应速度慢、层次耦合度高、软件复用度低等问题，构建了一个能够提供富客户端，并能快速、低成本、低风险开发Web2.0服务的框架.

1 J2EE轻量级框架：Struts+Spring+Hibemate

1.1 SSH框架原理

一个Web应用系统架构总体上分为表示层、控制层、业务逻辑层和数据持久层4个层次.SSH框架提供了完整的轻量级J2EE软件开发模型，其中struts作为表示层和控制层主要框架，提供MVC控制、各类表示层标签以及输入校验等功能，有效提高了开发效率.

Spring能有效地组织业务逻辑层对象，易于同其它表示层框架无缝集成，允许根据需要选择使用它的某一个功能模块；为不同的数据访问技术提供了统一的接口，并且采用控制反转技术(IoC)可以很容易地实现bean的装配；提供了简洁的AOP并据此实现事务管理.

Hibernate是一个工作在持久层的基于对象关系映射(ORM)的开源框架，它对JDBC进行了轻量级的对象封装，并提供一种功能强大、完全面向对象的查询语言(HQL)，使得Java程序员可以随心所欲地按照面向对象的思维方式来操纵数据库.通过把数据封装成对象，降低持久层的复杂度，使开发者可以专心于应用程序的业务逻辑，而不用关心底层的数据库结构[2].

1.2 SSH框架的不足

随着Web2.0的兴起，用户对于传统Web应用的交互性有了更高的要求，高并发访问、网络延迟都对传统的Web应用形成了严峻考验.在此方面，SSH框架具有几项不可忽视的缺点[3]：

(1)原有的Struts应用为支持AJAX，需要对已有的基于JSP的表示层代码进行重新设计和开发.如果JSP页面采用Struts标签作为组件，而Struts标签并非标准技术，如果有特殊的需求，则必须开发自定义的标签，而且每个标签之间缺乏有效的交互机制，若某一个标签内容变化需要其它几个标签内容同步发生改变时，需要刷新整个页面，从而导致系统交互性差.

(2)Struts业务逻辑处理能力相对较低，它需要为每个表单使用FormBean，因此产生了大量的多余的类，并且ActionForms无法进行单元测试；struts中大量使用了模板，频繁的模板解析，给服务器和网络带宽带来了沉重的压力.

(3)即使在不使用Struts标签的JSP页面中引入AJAX技术，其实现细节也比较繁琐，缺乏有效的调试手段，加重了开发人员的负担，因此在整体架构中引入AJAX技术时需要选择合适的AJAX框架，以提高Web页面开发的效率.

据此，文中提出了一种新的ExtJS+SSH的Web应用架构，设计并实现了一个人机交互界面友好、风格统一、层次结构清晰、可扩展、高度开放的Web应用开发架构，为快速构建灵活高效的Web应用提供强有力的支持.

2 ExtJS+SSH框架整合

2.1 ExtJS框架

ExtJS是一个基于YUI技术，用JavaScript编写的与后台技术无关的前端AJAX框架.ExtJS框架完全基于纯HTML/CSS+Javascript技术，除了提供丰富的跨浏览器UI组件外，还提供了一套强大的事件处理机制，专门处理用户动作、监控控件状态、更新控件视图信息及与服务器交互等等，还支持Jquery、Property等多种Javascript底层库，采用JSON/XML数据源开发，使得服务器端与表示层异步数据通信的负荷真正减轻，从而达到客户端的MVC应用[4].ExtJS框架不仅简化了AJAX开发，而且丰富了客户端界面效果，可以十分方便地构建高性能、可定制的、具有桌面应用风格的富客户端Web界面.

2.2 ExtJS+SSH架构整合原理

新架构保留了Spring+Hibemate的组合，从表示层、控制层和业务逻辑层入手，使用ExtJS实现Struts框架中的页面表示层，架构整合的基本原理如图1所示.

图1 ExtJS+SSH架构整合原理图

(1)客户端：浏览器不再使用原来Struts框架中以FormBean为主的JSP页面，取而代之的是ExtJS页面，ExtJS框架支持的强大的JavaScript库提供了丰富的可重用对象和可扩展的Web UI组件模型，包括表单、对话框、选项卡、树、表格、页面布局等，可以直接使用这些元素来快速开发自己的页面，同时也可以扩展自己的页面元素，使Web表示层的开发具备可复用和可继承等面向对象的特性.ExtJS页面作为表示层实现与用户的交互，各种请求都由ExtJS动态生成的Javascript对象处理，由客户端Ajax引擎将Javascript请求映射成Http请求，业务层的处理结果以基于XML的JSON数据结构进行封装，经过Ajax引擎的解析，返回给客户端ExtJS组件，实现了服务器端与表示层的异步数据通信[5].

(2)表现层：接收来自客户端的请求，并调度相应的Action来处理请求，同时传递请求过程中的数据，最后将执行结果返回客户端.其中，前端控制器(Controller)和处理用户请求的每个动作(Action)采用Struts模式设计.前端控制器负责定位特定的动作(action)，完成上下文转换，并把控制权转发到具体的业务操作上，给客户端的HTTP请求安排惟一的访问点，从而对表现层的逻辑进行集中控制，将表现层和业务层分开，既简化了表现层结构，又利于实现表现和数据的松散耦合，同时还充分利用Servlet技术，使Servlet担任拦截过滤器、上下文监听、Web页面之间的消息转发器的角色，实现Web应用程序中的预处理和后处理逻辑，例如会话管理、权限控制、日志记录、字符集转换等.

(3)业务层：其中Action是表示层请求的每个动作，Business Service对应服务器端具体的业务操作.Action的主要功能是提供从请求中取得参数的值，转化成相应的模型，再将模型传递给执行业务操作的对象，由业务对象执行业务操作，再返回执行的结果.DAO (Data Access Object)则封装了数据访问及操作的逻辑，用于访问、操作持久化存储介质中的数据，为异构数据源提供了统一的数据访问API，消除了应用程序其余部分对持久化存储实现机制之间的耦合.利用Spring框架对会话及事务进行封装、管理，向下与Hibernate数据持久层交互，向上为Struts的Action提供功能接口，把DAO模式与工厂方法(Factory Method)模式结合，形成数据访问对象工厂策略，使用工厂方法模式来实现具体工厂和工厂的产品DAO.N层计算模式和Spring框架的结合使用，降低了应用程序各模块之间和应用层与持久层之间的耦合程度.同时，利用Spring基于IoC的延时注入思想，将类之间的依赖关系转移到外部的配置文件中，避免在调用类中硬编码实现类，实现了插件式编程，提高了整个框架的灵活性和扩展性.

(4)持久化层：Hibernate负责数据持久层的管理，直接与数据库交互，将数据库中的数据表与Java对象进行映射，这样业务逻辑层就可以通过操作Java对象对底层数据进行管理.正因为Hibernate具有完备的对象——关系映射策略，支持复杂的对象模型，通过Hibernate注释可以很方便地根据POJO生成关系数据库表结构，并且存取策略(懒加载和即时存取)和缓存策略都对应用透明地实现，所以对持久层的操作非常简便高效.

3 ExtJS+SSH开源框架的实现与应用

油田物资管理信息系统就是基于ExtJS+SSH开源框架设计实现的，该系统包括计划管理、采购管理、合同管理、仓储管理、核算结算管理、物资编码管理、价格管理、供应商管理、质量管理、劳保信息管理、废料旧料管理、统计报表、系统管理等业务模块.

3.1 ExtJS框架的实现

系统所有Web页面都采用ExtJS框架设计，图2所示为用户登录后的工作区界面，左边的折叠菜单显示了系统的两级模块列表，单击二级模块节点，右边便会显示相应的工作界面.图3所示为“到货验收”模块下开具入库单的界面.应用extjs需要在页面中引入extjs的样式及extjs库文件，样式文件为resources/css/ext-all.css，extjs的js库文件主要包含两个，adapter/ext/ext-base.js及ext-all.js，其中ext-base.js表示框架基础库，ext-all.js是extjs的核心库.在ExtJS库文件及页面内容加载完后，ExtJS会执行Ext.onReady中指定的函数，每一个用户的ExtJS应用都是从Ext.onReady开始的，使用ExtJS框架的页面代码结构如清单1所示.可以通过javascript调用ExtJS的类及控件来实现需要的功能.图2、图3所示的页面就综合运用了ExtJS提供的窗口、面板、菜单、树、选项板、表单、表格、工具栏、按钮等组件发送用户请求，采用JSON数据解码及反解码技术异步刷新用户界面，从而实现了美观友好、交互性强的UI设计.

清单1 ExtJS页面代码结构

图2 用户登录后的工作区界面

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

3.2 SSH框架的实现

首先将Struts、Spring、Hibernate框架需要的库文件加载到当前应用的类库编译路径下.应用Struts需要配置WEB-INF下的web.xml和struts-config.xml文件，web.xml中的struts配置如清单2所示，将所有的.do请求映射到ActionServlet控制器，控制器根据struts-config.xml配置文件中元素的定义，将特定的请求路径映射到相应的Action动作处理类.由于客户端全部采用ExtJS页面，这里仅将Struts配置作为派遣器使用，把用户的请求转发到具体的业务操作上.

图3 开具入库单界面

在应用Spring+Hibernate框架时，需要在web.xml中增加相应的上下文监听，如清单3所示，当Web服务器启动时通过加载/WEB-INF/struts-config.xml获取Spring配置信息，完成相关的业务逻辑.本文利用Spring基于IoC的延时注入思想，对Hibernate的SessionFactory、事务管理、连接池及相关属性进行封装，能更简洁地应用Hibernate，并且能透明地创建和绑定Session到当前的线程.用AnnotationSessionFactoryBean将Hibernate的session工厂注入到Spring的配置文件中，在创建实体对象时，还可通过读取一个或多个类的注解来创建相应的数据库表结构.将DAO和Service的实现类以及类之间的依赖关系注入到Spring中，避免在调用类中硬编码实现类，实现了插件式编程，提高了系统的扩展性和灵活性.

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

4 结束语

本文从表示层及业务逻辑层入手，充分利用现有优秀的开源技术，提出了基于ExtJS+Struts+Spring+ Hibernate的新型框架，并通过实例应用说明了这种框架的应用.此新型框架不但提高了Web应用的开发效率和访问效率，而且从结构上进一步优化了Web应用的架构，其对Web应用的改善主要体现在以下3个方面：(1)Web页面实现组件化设计，提高了Web界面品质和交互性，并且具备跨浏览器特性；(2)有效地解决了AJAX动态技术的开发复杂性问题，降低了表示层与业务逻辑层的耦合度；(3)无侵入式设计提高了软件的复用度和可维护性.

参考文献

[1] 袁华强，王亚强，朱 君.利用J2EE轻量级框架构建Web应用研究[J]. 计算机工程与设计，2007，28(1):22-25.

[2] 李成严，冯慧灵. 基于开源技术的Web应用架构研究[J].计算机技术与发展，2009，19(8):27-30.

[3] 曾 亮，齐 欢，王小平，等.基于J2EE核心模式的组合Web框架研究[J].华中科技大学学报(自然科学版)，2007,35(6):43-46.

[4] 鞠凤娟，吴志峰. EXT技术在WEB界面设计与实现中的应用研究[J].计算机与现代化，2008，3(11):102-105.

[5] 韩义波，宋 莉，宋俊杰.AJAX技术结合XML或JSON的使用比较[J]. 电脑知识与技术，2009，5(1):101-103.