基于 ExtJS和 S2SH的 Web开发框架研究与应用

鲍 陈,王海涛,陈 阳

安徽工程大学现代教育技术中心,安徽芜湖,241000

基于 ExtJS和 S2SH的 Web开发框架研究与应用

鲍 陈,王海涛,陈 阳

安徽工程大学现代教育技术中心,安徽芜湖,241000

针对传统的 Web应用系统开发模式中的响应速度慢、层次耦合度高和软件复用度低等缺陷,研究了目前主流的基于 J2EE的 S2SH轻量级开源框架技术和基于 Ajax技术的 ExtJS框架,并结合分层解耦的设计思想,提出了一种基于 ExtJS+ S2SH的整合框架 E-S2SH。该整合框架,选择采用以 ExtJS作为视图层,Struts2作为控制层,Spring作为业务逻辑层,持久层采用 Hibernate技术。基于该整合框架,可以极大地提高 Web应用系统的软件开发质量和软件的复用性,同时也提高了Web应用程序的响应速度和用户体验。最后,为了验证 E-S2SH的性能,将该框架应用于网络相册系统的设计与实现中,从系统的运行测试看,该框架的应用前景广阔。

ExtJS框架;富客户端;JSON;S2SH框架;事务管理;网络相册

Struts2、Spring、Hibernate(以 下简称 S2SH)是目前主流的 J2EE开源框架,它提供了完整的、轻量级的 J2EE软件开发模型,可用于构建高质量的Web应用平台[1]。然而,基于 S2SH框架的 Web应用平台在响应速度和用户体验上越来越不能满足用户的需求。随着 Web2.0概念的提出,在用户需求的推动下,基于 Ajax技术[2]构建富客户端的 Web应用成为 J2EE开发研究的热点。Ext JS主要用于创建前端用户界面,是一个与后台无关的前端 Ajax框架,利用 Ext JS JavaScript UI组件库,实现无刷新的富客户端应用。本文根据 J2EE分层解耦的设计思想,通过整合 S2SH轻量级开源框架和 Ext JS技术,构建出一个适合 J2EE的 Web应用开发领域的整合框架 E-S2SH(ExtJS+S2SH)。该框架利用 ExtJS JavaScript UI组件库,提高页面的响应速度和用户体验;利用 Struts2实现视图、业务模型和控制器的分离;利用 Spring IoC容器实现组件之间的松散耦合,提高组件的可移植性;通过 Spring AOP实现事务管理和日志服务等功能,提高系统的内聚性;利用Hibernate实现数据持久化操作;同时,使用 JSON作为数据交互格式,在 Controller层中将返回浏览器的数据以 JSON格式写入 Response。E-S2SH框架降低了系统各层的耦合度,提高了 Web应用系统软件开发质量和软件的复用性,同时也提高了 Web应用程序的响应速度和用户体验[3]。最后,为了验证E-S2SH的性能,将该框架应用于网络相册系统的设计与实现中,从该系统的应用中充分体现了该框架的应用前景。

1 E-S2SH整合框架

1.1 ExtJS框架 [4-5]

ExtJS主要用于创建前端用户界面,是一个与后台无关的前端 Ajax框架,它拥有华丽的JavaScript UI组件库,并具有 Web2.0的特性,可用于构建基于 Ajax技术的富客户端应用平台。Ext JS框架基于纯 HTML/CSS和 JavaScript技术,除了提供丰富的 UI组件外,还提供了一套强大的事件处理机制,采用 XML/JSON为数据解析和交换,使服务器端表示层的负荷减轻,无需安装任何插件即可在常用浏览器中创建出绚丽的富客户端应用平台,并能解决多级动态树形结构菜单、分页显示等复杂的 UI操作,从而实现富客户端应用。

1.2 E-S2SH框架总体设计[6]

针对传统的 Web应用系统开发模式中的响应速度慢、层次耦合度高和软件复用度低等缺陷,本文根据 J2EE分层的设计思想,通过整合 S2SH轻量级开源框架,并利用 Ext JS的 JavaScript UI组件库,构建出一个适合 J2EE的 Web应用系统开发领域的、可复用的分层实现框架 E-S2SH(ExtJS+S2SH)。该框架分为以下 5层来设计与实现:表现层(View)、控制层 (Controller)、业务逻辑层 (Service)、数据访问对象层(DAO)、持久化对象层(POJO)。该系统架构如图 1所示。

图1 E-S2SH整体架构图

(1)View层:用 JSP和 Ext JS框架技术来实现与用户的交互 ,使用 ExtJS JavaScript UI组件,构建美观、统一的用户交互界面,提升页面的表现力和用户交互体验。

(2)Controller层:由 Struts2中核心控制器 FilterDispatcher和业务逻辑控制器 Action负责视图层和业务逻辑层的交互,根据用户的请求,调用合适的Action,回调 Action的 execute方法。该方法获取用户的请求参数,并调用业务逻辑,同时以 JSON作为数据交互格式,在 Controller层中,将返回浏览器的数据以 JSON格式写入 Response,并将结果数据返回更新视图层。

(3)Service层:负责实现业务逻辑处理操作,每个模块对应一个 Service组件类。在这一层,向上提供业务逻辑处理操作,向下调用 DAO获取所需要的业务数据。应用 SpringIOC控制反转来创建、配置和管理业务逻辑,减少组件之间的依赖,使用 Setter Injection来完成相应属性值的依赖注入;采用Spring AOP技术,为容器中的对象提供事务管理和日志等服务,提高系统内聚性。该层应用 Spring框架对 Action层和 DAO层整合。

(4)DAO层:提供读写数据库中的数据,并通过接口提供对外服务,程序的其他模块可以通过 DAO来访问数据库。该层使用 Hibernate框架访问数据库,并封装了 Hibernate的 CRUD操作,完成对数据的访问操作,与数据库的交互操作,实现持久化操作。

(5)POJO层:主要提供给系统供持久化的对象以及对象到关系的映射文件。

1.3 E-S2SH框架整合

1.3.1 Ext JS与 Struts2框架整合

视图层主要采用 JSP+ExtJS技术来实现。通过引入 JSON相关的 jar包,struts2-json-plugin-2.1.8.1.jar和 json-lib-2.1.jar,并配置 struts.xml文件,完成 Ext JS与 Struts2的整合。 struts.xml文件配置该业务逻辑控制器 Action,并配置其 Result的 type类型的 JSON,为了能够配置 JSON类型的 Result,必须配置包继承 json-default。在 JSP页面中,通过 ExtJS.Ajax.request作普通的异步请求,发送 Action请求,ExtJS的 Ajax引擎开始进行监听,Action以 POST的方式捕获 JSP发过来的请求,并调用业务逻辑处理,处理完后返回给 Action,后台Action返回 JSON格式的数据给请求页面,请求页面利用 Ext JS的 UI组件处理返回的 JSON格式的数据,并呈现给用户。其整合模型图,如图 2所示。

图2 ExtJS与 Struts2整合模型图

1.3.2 Struts2与 Spring框架整合

Struts2允许用户自己开发 Struts2的关键类,并将其配置到配置文件中来使用该关键类。com.opensymphony.xwork2.Object Factory类提供了这样的扩展点,用于 Struts2框架中创建 action、interceptor实例。Spring插件 struts2-spring-plugin.jar提供了一个实现类 StrusSpringObjectFactroy,该实现类继承了 ObjectFactory基类。可以将 Action交由Spring来进行创建管理,Spring容器将负责管理Action的生命周期,为其注入依赖对象。在 struts.xml文件中配置的业务逻辑控制器 Action,其中class属性并不是 Action类的实际处理类,而是对应的 Spring容器中的 Bean实例。

1.3.3 Spring与 Hibernate框架整合

Spring作为一个开源框架,在数据库访问层上,对主流的 ORM框架 Hibernate进行了很好的集成[6]。在 Spring的应用上下文中,完成数据源 data-Source和 SessionFactory的初始化,从而实现 Hibernate的依赖注入,将数据源的 DataSource实例注入LocalSessionFactoryBean的 dataSource属性中,获得SessionFactroy实例。Spring对 Hibernate的 DAO实现提供了支持,其中 Spring提供的 HibernateTemplate模板类提供了对数据的 CRUD操作。 HibernateDaoSupport类封装了 HibernateTemplate类的操作。在 DAO实现中,可以使 DAO类继承 HibernateDaoSupport类,通过 Spring的应用依赖 Session-Factory,最后使用 getHibernateTemplate()方法来获得 HibernateTemplate对象。 Spring与 Hibernate集成的优势主要体现于 Spring对事务的管理。 Spring采用 Annotation(注释)和 XML两种方式,提供声明式事务管理,针对 Hibernate框架,通过 Session-Factory实现事务管理。本文选择使用 XM L方式进行配置事务,可利用通配符一次完成多个方法添加事务。

2 E-S2SH框架的应用扩展

网络相册系统是基于 E-SSH框架设计与实现的。该系统的功能是在数据库中将图片以文件方式存放到服务器上,并将与图片相关的信息和路径存入相应的数据表中。系统采用 MyEclipse8.5为开发工具,Mysql5为数据库,Tomacte6.0为服务器。该系统包括用户登录模块、图片数据管理模块、图片数据浏览模块。系统登录后的后台界面如图 3所示。

图3 网络相册系统登录后台界面图

2.1 Ext JS框架的实现

2.1.1 多级动态树页面

多级动态树页面采用了 ExtJS框架实现,如图3所示。通过 Ext.Ajax.request,作普通异步请求,通过 Ext.tree.TreeLoader加载树形结构,服务器端必须返回 JSON形式数据。

Ext JS树[7]加载器 Ext.tree.TreeLoader提供子节点的延时加载功能,它请求指定的 dataUrl业务逻辑 menuLoader.action,并接收服务器返回的JSON[8]数据格式如下:[{id:1,text:"一级节点",leaf:false,children:[{id:101,text:"二级节点",leaf:true,children:[]}]}]。其中,id属性的值用来标记树节点,text属性的值用来标记该节点的名称,leaf属性的值用来标记该树节点是否有子节点,如果为false,则代表有子节点,反之代表没有子节点。针对这些 JSON字段属性,笔者在数据库中设计了 Item表(表 1),用来接收服务器端 JSON数据。多级动态树层级关联是通过上层节点 id与下层 fatherid之间进行关联的。

表1 Item表字段设计

根据上述多级动态树设计思路,其实现从以下三步展开,具体描述如下。

第一步,根据节点的 fatherid和 leaf属性,加载数据库 Item表中所有的节点。下文所述 Menu类是简单的 POJO,包括以下属性:String id、String text、String leaf、 List

children。 动态加载树 ,代码如下所示:

List Itemlistroot= new ArrayList();

//从数据库 Item表中,取得所有 fatherid为root,节点列表

第二步,树形结构添加右键菜单的创建。依托Ext JS的事件模型,为树形结构添加右键菜单,完成树形导航栏的添加和删除等功能,如图 4所示。通过以下步骤实现此功能。

第三步,添加节点的实现。在业务逻辑 editorN-ode.action中,用节点的 id作为检索对象,完成向数据库中添加节点,限于篇幅原因,以下只给出了添加节点流程图,如图 4所示。

图4 添加节点流程图

2.1.2 数据浏览页面

前端数据浏览页面也采用 Ext JS框架实现,如图 3所示。 ExtJS只是一个客户端框架,通过 Ext.Ajax.request,作普通异步请求,服务端可以根据实际情况返回 JSON形式的数据;通过 Ext.data.Store及其派生类,根据服务器端返回的 JSON数据,加载表格形式的数据。表格控件 Grid实现过程中,首先通过 ColumnModel创建表格列,利用 Ext.data.Store存取显示数据,使用数据代理 Ext.data.Http-Proxy实现数据的交互,通过 Http传入,经过数据解析器 JsonReader处理,转换成为已经定义好的记录集 record对象。在 record中定义四个 string字段,分别用来存储图片的编号、图片标题描述、图片上传时间和图片上传地址。创建好 Store,调用ds.load()方法加载数据。服务器端通过前台传送的参数,包括start和 limit参数,在 PictureDaoImpl中,定义queryByPage()分页函数,来实现分页,其实现代码如下:

2.1.3 数据上传页面

传统的数据上传使用表单提交来实现,本系统中图片数据上传也采用 Ext JS实现,如图 3所示。ExtJS使用 Ext.form.FormPanel表单类,在 Form-Panel中根据需要选用组件,并设定 items的 xtype属性。图片标题使用 textfield输入组件,xtype为`textfield';上传图片使用 fileuploadfield组件,xtype为`fileuploadfield'。并为上传按钮添加事件,即为其handler参数指定一个处理函数,提交表单。

2.2 S2SH框架的实现

在 E-S2SH架构中,S2SH集成框架分离视图层、控制层、业务逻辑层和数据持久层,并通过以Spring为容器框架,在分层框架中遵循面向接口设计思想,层与层之间的依赖是向下的,底层对上层而言是透明的,改变上层的设计对于其调用的底层而言没有任何影响。下面以图片数据上传模块为例来说明各层的实现方法,其他模块的开发完全类似。

2.2.1 Controller层的实现

Controller层采用 Struts2框架设计,包括主控制器组件 FilterDispatcher和各种完成业务逻辑调度的分控制器 Action。首先将 S2SH集成框架所需要的 jar文件加载到 Web工程的类库编译路径下。

视图层 ExtJS页面的请求提交给 Strus2框架处理。以下是业务逻辑控制器 uploadAction中调用业务逻辑实现图片数据上传代码如下:

之后,需要在 struts.xml文件中配置客户端请求与 Action之间的映射关系,其配置代码如下所示:

2.2.2 Service层的实现

Service层是整个应用的核心,对外提供统一的Service接口,接收视图层的用户请求,业务控制器Action仅仅依赖这个接口,在程序运行期间,利用IoC动态地把 DAO对象注入到业务逻辑对象中。在图片数据上传管理模块中,Service层定义对视图层的接口 PictureService同时定义了接口的实现类PictureServiceImpl,接口的实现类应该对视图层的请求作出处理,并调用 DAO层 PictureDao操作数据库,并为它提供事务管理。

2.2.2.1 配置 Service接口与 DAO接口

在 applicationContext.xml配置文件中,配置Service接口与 DAO接口。其配置实现代码如下:

2.2.2.2 构建事务管理

Spring提供封装良好的 AOP,在应用程序对数据库的 CRUD操作当中,完成声明式事务管理,为目标对象(业务对象和 DAO对象)提供事务增强规则,保证了数据库事务的 ACID(原子性、一致性、隔离性和持久性)特性。具体步骤如下:首先把 Hibernate的 sessionFactory通过 IoC机制注入 Spring提供的事务管理器 HibernateTransactionManager;接下来在 标签中定义事务语义;最后在标签中配置 AOP的切入点和通知[9]。其配置文件代码如下:

2.2.3 DAO层的实现

DAO层采用 Hiberante作为中间件,使用 DAO设计模式实现对数据库的访问。以图片上传模块为例,首先建立数据库表与 Java对应的映射关系并实现数据访问接口 PictureDao及其实现类 Pic-tureDaoImpl,实现类 PictureDaoImpl继承了 HibernateDaoSupport,通过 Spring提供的 HibernateTemplate模板类,就可以打开及关闭 Hiberanate Session。 PictureDao接口中,封装了对 POJO对象 Picture类的基本操作。其中 savePicture()方法保存 Picture对象,getPictureByPage()方法通过 menuid从数据库 Picture表中获得相关上传图片信息,get AllPicture()方法获得所有的图片信息,updatePicture()方法更新图片信息,deletePicture()删除图片信息。

2.2.4 POJO层的实现

下面以图片数据上传模块中涉及的 Picture类为例,说明 POJO层的实现。首先创建 PO类,该类包括表示图片 id、图片标题 description、图片上传时间 uptime、图片地址 url和关联菜单的 menuid。然后,创建映射文件来映射持久类和数据库表,从而将持久类中的属性和数据库表中的字段关联起来。指定图片id为主键,主键的生成方式为自动递增。

2.3 系统部署与测试

网络相册系统部署到 Tomcat Web服务器中,显示前台图片浏览面图 5所示。从系统运行测试可看,充分表明了 E-S2SH框架对 Web应用开发提供了有效的支持,系统运行良好,稳定可靠。

图5 网络相册系统前台图片浏览界面

3 结束语

本文研究了目前主流的基于 J2EE的 S2SH轻量级开源框架技术和基于 Ajax技术的 ExtJS框架,并结合分层解耦的设计思想,提出了一种基于 ExtJS+S2SH的整合框架 E-S2SH。该框架利用 ExtJS JavaScript UI组件库,提高页面的响应速度和用户体验;利用 Struts2实现视图、业务模型和控制器的分离;利用 Spring IoC容器实现组件之间的松散耦合,提高组件的可移植性;通过 Spring AOP实现事务管理和日志服务等功能,提高系统的内聚性;利用 Hibernate实现了数据持久化操作;同时使用JSON作为数据交互格式,在控制层中,将返回浏览器的数据以 JSON格式写入 Response。E-S2SH框架降低了系统各层的耦合度,提高了 Web应用系统软件开发质量和软件的复用性,同时也提高了 Web应用程序的响应速度和用户体验。最后,通过对一个网络相册系统实例分析与实现,说明该框架在实际Web应用开发中的应用前景。

[1]张鹏伟,陈影霞,张文平,等.基于 ExtJS和 SSH的 Web应用架构的研究与实现[J].陕西科技大学学报,2010,28(6):111-115

[2]刘培华,董彩云,刘方爱.基于 Struts和 AJAX的项目报批系统的设计[J].济南大学学报:自然科学版,2012(1):11-14

[3]张建军,刘虎,倪芳英,等.基于 SSH整合架构的研究与应用 [J].湖南师范大学学报,2012,35(6):39-43

[4]刘晓明.Web设计开发过程中 EXT框架的应用与研究 [D].大连:大连海事大学计算机科学与技术学院,2009:5-51

[5]王建文,张俊明,韩李鹏.基于 ExtJS技术的物资管理系统设计与实现 [J].计算机工程与设计,2010,31(23):5012-5014

[6]陈遥 ,李珊 ,赵英男.基于 SSH+DWR的 Web开发框架研究与应用 [J].南京信息工程大学学报,2010,2(5):455-460

[7]朱立明,黄卫忠,倪雄军.ExtJS框架下树形组件改进及应用 [J].计算机应用:2010,30(S2):242-247

[8]李天鸣,何月顺.基于 ExtJS技术与 SSH框架的权限管理研究[J].计算机应用与软件:2011,28(5):165-168

[9]赵吉吉 ,卞艺杰 ,李亚冰,等.基于 S2SH和 SOA科技查新管理平台的设计 [J].武汉理工大学学报,2013,35(1):56-60

T P311.52

A

1673-2006(2013)09-0064-07

10.3969/j.issn.1673-2006.2013.09.018

2013-07-28

安徽工程大学青年基金项目“基于物联网的汽车车身智能化系统的研究”(2012YQ30);安徽省高等学校省级质量工程项目“以提高教学保障能力为目标构建多媒体服务校企合作新模式”(2012JYXM870)。

鲍陈(1983-),安徽芜湖人 ,硕士,助理工程师,主要研究方向:软件工程。

(责任编辑:汪材印)