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

2010-02-23 06:14张鹏伟陈景霞张文平王雨团
陕西科技大学学报 2010年6期
关键词:表示层页面客户端

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

(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.

猜你喜欢
表示层页面客户端
刷新生活的页面
基于Spring的企业级Web项目架构设计研究
如何看待传统媒体新闻客户端的“断舍离”?
县级台在突发事件报道中如何应用手机客户端
孵化垂直频道:新闻客户端新策略
ASP.NET三层构架解析
基于SSH框架科研管理系统的设计
ASP.NET三层架构的概念及关系分析
客户端空间数据缓存策略
网站结构在SEO中的研究与应用