辽宁对外经贸学院基础课教研部 赵中枢

随着中国高等教育大众化进程的加剧，作为辽宁省首批民办院校的辽宁对外经贸学院在办学层次上不断提升，办学规模迅速扩大，目前在校生人数已逾万人。学院的快速发展及学生数量的增加以及学分制的实施，给教材的管理工作带来了极大的不便，特别是民办院校教学管理人员相对不足，在工作量越来越大的情形下，一个好的教材管理软件可以极好减轻教材管理人员的压力，使教材管理工作效率得以提高，更有助于提高教材管理工作人员服务水平。

本系统设计基于B/S结构，前端用户界面采用了基于AJAX技术的ExtJs框架进行设计，后台结合现今流行的J2EE轻量级开源框架Struts+Spring+Hibernate（简称SSH）进行开发，并采用了一种新的基于ExtJs+SSH的Web应用架构。有利于构建界面美观、响应速度快、用户体验效果好、系统运行稳定的高质量Web应用。

1.技术背景

1.1 ExtJs技术

ExtJs是用JavaScript、CSS、HTML等技术实现。主要用于创建用户界面，且与后台技术无关的前端AJAX框架，还被用来开发RIA（富客户端）的Web应用。ExtJs为开发者屏蔽了大量的Web UI操作以及跨浏览器方面的处理。

采用ExtJs开发Web应用与传统的Web开发方式不同，因为引入了ExtJs库，开发时可以在空白的Web页面上组合放置各种ExtJs的UI组件，与开发桌面软件放置Windows UI组件一样。运行时，ExtJs组件库会自动生成形成界面的HTML、JavaScript、CSS和图片等元素，并最终在浏览器上渲染出ExtJs的Web UI[1]。如图1所示。

图1 采用ExtJs的Web应用开发方式

图2 教材管理工作业务流程图

ExtJs还提供了一套强大的事件处理机制，在浏览器标准事件的基础上建立起来的一套更加完善的事件体系。用于监控、更新控件状态，处理视图信息及与后台服务器进行交互等等，利用JSON对象为组件提供配置信息，使得服务器端与表示层异步数据通信的负荷真正减轻，从而达到客户端的MVC应用。

1.2 JSON数据格式

JSON的全称是JavaScript Object Notation(JavaScript对象符号)。是一种结构化的、轻量级的、完全独立于语言的、基于文本的数据交换格式[2]。其格式非常适合于那些具有一些属性和值的简单对象，它以“{”开始，以“}”结束，属性名和值用“：”分隔。JSON的属性可以是简单的字符串、数组、数字、TRUE、FALSE、NULL或者对象。通常用来替代XML文件格式，在表达相同的信息时，JSON比XML形成的文件更小、便于机器解析。JSON提供了面向对象的方法，可以将元数据缓存到客户机上，帮助分离了验证数据和逻辑。其结构为Web应用程序提供了AJAX的本质。JSON格式结构基于下面两点：

(1)“名/值”对的集合不同语言中，它被理解为对象(Object)、记录(Record)、结构(Struct)、字典(Dictionary)、哈希表(Hash Table)、键列表(Keyed List)等。

(2)值的有序列表，多数语言中被理解为数组(Array)。

1.3 Struts、Spring、Hibernate框架技术

SSH为J2EE的一个集成框架，是目前较流行的一种Web应用程序开源框架的集成策略。以帮助开发人员在短期内搭建结构清晰、可复用性好、维护方便的Web应用程序[3]。

Struts是实现了MVC(Model-View-Controller)模式的框架，将Web系统的程序分为模型、视图、控制器三个部分，模型由JavaBean、EJB组件等完成具体业务的组件构成；视图有JSP文件、POJO对象组成；控制器由Action来实现。减弱了业务逻辑接口和数据接口之间的耦合，提高了组件的复用性。提供了功能强大、种类丰富的标签库以及输入校验等功能，有效提高了开发效率。

Spring是一个轻量级的控制反转(IOC)和面向切面(AOP)的容器框架。Spring的控制反转(Ioc)就是由容器控制程序之间的依赖关系，而非传统实现中，由程序代码直接操控，组件之间的依赖关系由容器在运行期决定，由容器动态的将某种依赖关系注入(DI)到组件之中。Spring容器控制所有Action对象和业务逻辑类的生命周期，由于上层不再控制下层的生命周期，层与层之间实现了完全脱耦，使程序运行起来效率更高，维护起来也方便。Spring中的AOP(动态代理)可以在不同的应用中将各个切面结合起来使用大大提高了代码重用度，可实现声明式事务、统一的日志管理等功能。

Hibernate是一种ORM(Object-Relation Mapping，对象关系映射)中间件，可以将数据库表中的数据包装为Java对象，又可以将Java对象映射到数据库表中的数据，开发人员可以利用面向对象编程的思想来操作数据库中的数据，而不用关心底层的数据库结构。

1.4 ExtJs+SSH架构整合原理

新架构采用了ExtJs和Struts的整合方式，把传统的Web应用中的表现部分即JSP页面替换成ExtJs页面，在业务逻辑层和持久层上仍然保留了Spring+Hibemate的组合，架构整合的基本原理[4]。

(1)客户端：ExtJs为Web开发引入了桌面开发中已经非常成熟的组件概念，只需要经简单的配置就可以使用ExtJs提供的丰富组件，包括进度条、工具栏、菜单栏、表单、对话框、树、表格、面板和布局类等。通过Web UI组件可以快速构建自己的页面，也可以对组件进行扩展。ExtJS页面中的数据的提交和获取都使用Ajax方式进行，因此不会造成页面刷新。向服务器端发送异步请求由动态生成Javascript对象处理，经过ExtJs的Ajax引擎映射成HTTP请求，业务层处理结果封装成JSON数据格式返回，同样经过客户端ExtJs的Ajax引擎的解析，在客户端采用Javascript处理来自服务器的响应，返回给客户端Ext JS组件，实现了服务器端与表示层的异步数据通信。

(2)表现层：Struts主要作用是分发用户请求并将业务层的处理结果返回给客户端。在通常的Struts应用中，处理完用户请求之后会将数据在新页面进行展示，即通过调用Struts的mapping.findForward方法进行页面跳转，但是当ExtJs与Struts进行结合时，ExtJs页面在大部分情况下不进行页面跳转而是只向服务器请求必要的业务数据。更新页面中的相关组件，因此不再需要配置Struts中Action的Forward标签，而是直接将业务数据通过HttpServletResponse以JSON数据格式写回到客户端。整个过程采用Struts的MVC模式设计[10]，将表现层和业务层分离，不仅简化了表示层的结构，也有利于实现表现和数据的松耦合，而且还充分利用Servlet技术，使Servlet担任上下文监听器，拦截过滤器、消息转发器的角色作用。

(3)业务层：Struts将Action的创建工作交给了Spring的代理类来完成，创建这个实例后，将这个实例注入，由Struts调用Action中的相应方法。Action中可以配置一个或多个Service对象，Action调用Service中的方法进行业务处理。Service中通常会有一个或多个DAO的对象，DAO(Data Access Object)则为了减少业务逻辑和数据访问逻辑之间的耦合，DAO继承了Hibernate的接口，用来处理数据库的操作。而Action，Service，DAO的创建与注入，都是由Spring的Bean工厂来实现的。在业务层中，管理服务组件的Spring IoC容器负责向Action提供业务模型(Model)组件和该组件的协作对象数据处理(DAO)组件完成业务逻辑，并提供事务处理、缓冲池等容器组件以提升系统性能和保证数据的完整性。

(4)持久层：Hibernate提供OR/Mapping，负责数据持久层的管理，与数据库中的表相对应，通过DAO对象完成数据库的CRUD操作。

2.系统主要功能与总体结构设计

教材所有的管理工作应以教材信息数据为主导，包括教材的预订、教材审核、教材选购、教材出库入库、库存管理、费用结算、查询都是围绕教材展开。教材管理工作业务流程如图2所示。

首先任课教师根据教务处发布的教学计划对所教课程进行教材选择，系教材委员会对教材进行审核，提交至教材科进行汇总，然后由院教材委员会审批。审批后，教材科对教材进行汇总，生成教材采购订单，向图书供应商进行采购。在下学期开学前图书供应商根据教材采购计划发货，教材科负责教材入库处理，等下学期开学后对教材进行出库处理，按班级生成学生购书统计表，将教材发放给学生，发放完成后统计生成教材费结算单，以此向财务处收取学校教材费。同时院系和学生都可以通过用户的客户端查看教材费费用和教材的基本信息。新的系统解决了原来教材系统的重复录入和重复审核的问题，由于引入教材基础信息库，教师提交征订的教材只需录入一次，进入教材基础信息库后，经过系教材委员会审核，院教材委员会审批，教师就可作为上课的教材，教材不需要重复录入和重复审定。

整个系统分为教材科管理端、教师端、学生端，其对系统主要功能的要求如下。

2.1 教材科管理端功能

(1)教材运送到以后进行入库处理，输入或者扫描教材ISBN编号即可从教材库中读出教材名称、出版社、编著者等信息，输入需要入库数量即可盘点入库。

(2)领取教材时，对领用专业、班级、人员、数量等进行登记，并打印出库单签字领取。

(3)查看教材剩余书目，盘点库存，以便核对教材订单与实际领用情况，及时联系采购中心进行相应补订与退订。

(4)可以按照年级专业学生层次统计教材需求信息，可以非常直观的查询每个系部、专业、年级、班级的教材信息。

(5)教材出库时按照年级专业层次生成教材领用单，可以明确查询到教材的出库情况。

(6)根据书商生成教材征订计划单，征订单进行教材入库，对于已入库或者未入库的教材以及部分入库的教材由明显标注。对于未入库的教材涉及到的年级专业能够查询。

(7)教材出库按照教材征订计划单直接生成，可以按照系部年级、专业、层次、班级打印教材出库单。

(8)根据院系实际领取情况进行出库处理，统计结算各单位教材费，提供给财务部门收取教材费。

2.2 教师端功能

(1)教师根据下学期选课情况录入下学期可能用到的教材书目，提交并等待上级部门的审批。审批前可以修改教材录入信息进行修改，审批未通过的也可以重新修改并提交，审批通过后就不能进行修改。

(2)教师在报订教材时首先在教材库中选择，如果教材库中没有可以直接添加教材，但是需要经过审核，审核通过后可以选为上课教材。

(3)选购相应教材后，可查询到自己所选购教材的详细费用，用于核对自己所扣教材费用。

(4)可以按照年级专业学生层次统计教材需求信息，可以非常直观的查询每个系部、专业、年级、班级的教材信息。

2.3 学生端功能

(1)通过客户端查询各学期教材使用信息及各学期书款情况；

(2)能够选择选修课教材是否订购教材。

经过需求分析后，确定系统的主要功能，在此基础上对所有功能进行模块划分，设计出系统总体架构，如图3所示。

图3 教材管理系统功能结构图

3.Extjs导航树的实现

通常在系统开发中，经常采取一次性将整棵树在前台窗口生成，如果结点层次多，数量大时，在客户端需要消耗大量的系统资源，因而等待时间也比较长，不能提供良好的用户体验。

本系统采用基于AJAX技术的ExtJs框架实现与后台交互的动态树，其具体实现思路当点击树中某个父结点时，通过异步方式向后台发出请求，获取生成其子节点，而不在一次性在浏览器中加载所有树节点，这样就避免了一次性加载整棵树的系统开销大的问题，节约了系统资源，也提高了页面的运行速度，以获得较好的用户体验。

系统所有Web页面都采用ExtJS框架设计，采用树形结构的展示方式做导航，登录后通过单击左侧动态树形菜单节点加载相应功能模块，内容区域采用Tab页的形式来显示相应的工作界面。使用ExtJs生成动态树实现代码如下所示：

Ext.onReady(function(){

var treeModel=Ext.create(‘Ext.data.Model’，{//资源树的数据模型

fields：[‘id’，’text’，’pid’，’cls’，’leaf]，

root：{expanded：true

}，

proxy：{

type：’ajax’，

url：’menu！getTree’，//向后台Action请求加载数据

reader：’json’//读取JSON的数据格式

}

})；

var leftMenu=Ext.create(‘Ext.tree.Panel’，{//创建树形面板

store：Ext.create(‘Ext.data.Tree-Store’，{//为数据模型创建数据集

defaultRootId：‘1’，//pid=1传给后台，查出一级子菜单

root：{

id：’rootnode’，nodeType：’async’//树形节点的异步加载

}，model：treeModel//加载数据模型

})，

hideHeaders：true，

rootVisible：true，

region：‘west’，

id：‘west-panel’，

title：‘系统功能导航’，

split：true，

......//设置Tree Panel属性

rootVisible：false//默认不显示根节点

})；

leftMenu.on("itemclick"，function(vi ew，record，item，index，e){

var rowcon=record.raw；

contentTabs.add({

......//点击树节点时触发事件

})；

var tab=Ext.getCmp(‘tab_’+record.raw.id)；

tab.show()；

contentTabs.setActiveTab(‘tab_’+record.raw.id)；

})；

})

在代码中，Ext.onReady函数用于客户端浏览器页面的初始化，把初始化方法都应该在写这个函数中，首先定义一个Ext.tree.Panel类型的树组件leftMenu，然后在树的属性中定义树的宽高，是否可滚动等参数。由于树节点需要异步加载，所以我们需要将树节点root定义为async类型，在model层设置根节点id，显示内容，显示图标，是否为叶子节点等属性。在其中定义数据源URL，并向后台Action中请求加载节点数据。在store层设置默认ID值为1，传递给后台，返回一级树形结构，设置节点为异步加载，当点击节点且节点下子节点未加载时，将该节点作为参数传回后台，请求该节点下一层的子节点数据。

4.结束

在本校教材管理系统实现中采用了ExtJs+SSH集成方案，设计和实现了一个人机界面友好，风格统一，层次清晰，可扩展性强，高内聚，低耦合的Web分层架构，为了迅速建立一个灵活高效的Web应用程序提供的强有力的支持。根据用户的实际需求，进行了系统模块的个性化定制设计，整个系统的功能设计趋于完整，较好的满足了用户需求。

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

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

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

[4]张鹏伟等.基于ExtJS和SSH的Web应用架构的研究与实现[J].陕西科技大学学报，2010，28(6)：111-115.