基于ExtJS的科研项目申报及评审系统的设计与实现

摘 要 针对某高职院校要求开发具有良好用户体验和可维护性的网上科研项目申报及评审系统的需要，阐述了基于ExtJS+Servlet+MyBatis的网上科研项目申报及评审系统的设计与实现。详述系统所使用的关键技术。分析了系统所采用的架构并给出了核心功能的实现。应用实践表明，ExtJS框架可以作为开发具有良好用户体验的Web应用的另一选择。

【关键词】ExtJS 项目申报与评审 AJAX B/S架构

随着网络技术的普及以及管理模式的变革，高职院校的科研项目申报及评审工作，大多由传统的手工处理方式提升为由计算机软件系统辅助管理。而且，高职院校在选购管理软件时，也倾向于由原来行业内统一，标准化的软件系统，向个性化订制服务软件系统的转变。

Web应用中基于B/S（浏览器/服务器）多层体系架构以其客户端和服务器端分离的优点而受到广泛的关注。然而，传统的B/S架构没有采用良好的软件设计模式和开发框架，开发的JSP、ASPX页面中通常既包含表示层的数据又嵌入了业务逻辑的程序代码，存在系统维护难度高、页面交互性和表现能力差的不足。本文针对某高职院校对网上科研项目申报及评审系统的实际需求，采用ExtJS框架，综合运用Ajax技术、Servlet技术和MyBatis持久化框架，设计并实现网上科研项目申报及评审系统。

1 采用关键技术

1.1 Ajax技术

Ajax（Asynchronous JavaScript and XML，异步JavaScript和XML）是一种创建交互式网页应用的网页开发技术，Ajax技术的核心是XMLHttpRequest对象。使用XMLHttpRequest对象，客户端应用程序向服务器发送请求，并处理服务器的响应，在处理过程中，可以避免阻塞客户端用户操作，Web页面也不需要频繁重新加载，就能产生局部刷新的效果，从而使用户具有良好操作体验。

1.2 ExtJS框架

ExtJS是一个用JavaScript编写的，与后台开发技术无关的前端Ajax框架，可以直接应用到Java、.Net、Php开发语言中，前后台之间通过JSON/XML实现数据传递。

ExtJS技术主要用于构建UI（User Interface，用户界面），也可用来开发RIA（Rich Internet Application，富客户端）应用程序。ExtJS拥有丰富的表单控件，它整合CSS，XML等多项技术，从实现的界面效果到数据解析及异常处理都非常出色，并且能够兼容不同的浏览器。ExtJS不需要在客户端安装任何插件，使用ExtJS构建的RIA应用可与桌面程序媲美，它正逐步成为开发拥有良好用户体验的Web应用的新选择。

1.3 JSON技术

JSON（JavaScript Object Notation，JS对象标记）是一种轻量级的数据交换格式。它采用完全独立于语言的文本格式，易于人阅读和编写，也易于机器解析和生成。JSON语法极其简单，对于那些轻量级的AJAX应用，相对与XML数据而言，JSON得到了更广泛的使用，成为理想的数据交换格式。

1.4 MyBatis框架

MyBatis是J2EE应用开发中的一个持久化框架，它通过配置的XML文件或注解实现对象与存储过程，SQL语句的关联，并可实现动态生成SQL语句。MyBatis与JDBC相比，简化了相关代码的实现，让程序将主要精力放在SQL语句上，通过其提供的映射方式，自由灵活生产（或半自动化）满足需要的SQL语句，修改也比较容易。

2 系统设计

2.1 架构设计

系统架构采用MVC模型设计，该模型由表现层、控制层和模型层构成，每一层采用不同的技术实现，层与层之间使用不同技术进行数据交互。系统架构由ExtJS+Servlet+JSON+MyBatis技术构成，如图1所示。

架构详细描述：表示层使用ExtJS实现用户界面及用户请求。服务层使用Servlet实现用户请求及响应。实现层使用Java技术实现系统业务的处理。数据访问层使用MyBatis实现数据持久化。数据库使用MySql5.5实现业务数据的存储。

处理主流程：用户从浏览器发出的请求（异步请求）至服务层；服务层根据请求调用实现层业务处理模块进行业务处理；业务处理完成后，一方面通过数据访问层接口与数据库管理系统对数据进行持久化处理；另一方面，实现层将用户请求结果回传给服务层，并经由服务层规范化后，返回给浏览器并呈现给用户。

2.2 功能设计

科研项目申报及评审系统由系统管理、申报子系统和评审子系统三个部分组成，功能结构如图2所示。

（1）系统管理，实现用户—角色—权限的安全管理策略，一个用户可以拥有多个角色，一个角色也可以包含多个权限。以此实现用户—权限的最大灵活性。

（2）申报子系统，由项目申报、项目修改及项目浏览三个部分组成，用于科研工作者与科研管理者用户通过浏览器便利地实现科研项目的申报、修改、查询浏览、统计以及申报书导出等功能。

（3）评审子系统，由专家管理、项目分配、项目评审和评审管理四个部分组成。主要用于科研管理者用户将待评审的科研项目分配给指定的评审专家，以及评审专家对分配的科研项目实施评审。科研管理者用户可以管理、查询和统计各评审专家评审的评审情况。

3 核心功能模块实现

3.1 前后端数据通信

本系統利用ExtJS已经封装的Ajax特性，可以无需刷新浏览器页面，直接通过异步方式将客户端的请求提交给服务层，并处理服务层的响应。ExtJS的Ajax组件支持JSON或XML等数据格式。与采用XML格式的数据相比较，JSON格式数据具有数据规模小，编程简单等优点，故本系统采用JSON格式数据进行通信。表示层使用Ext.Ajax.request组件，请求代码如下：endprint

编程实现时，使用ExtJS的Ext.define组件，将上述代码封装在一个名称为exRequest类中成独立的模块。并利用组合技术，将exRequest组合到应用类（如：登录管理）中，并注册对事件“completed”的响应，以达到利用ExtJS的事件处理机制，实现页面编码与Ajax请求的分离。

3.2 服务层的接口实现

服务层是联系表示层和模型层的纽带，服务层调用模型层的业务逻辑处理接口，实现对系统业务数据的增加、修改、删除、查询、统计、打印及导出等处理功能。请求服务（ServiceAction）抽象类与部分业务请求实现类（HdPmpProjectApply[项目申报服务]和HdPmpProjectEvalute[项目评审]）关系，如图3所示。

方法request（）是页面请求执行引擎，而response（）是服务层响应执行引擎，这两个方法不能被重写，其它抽象方法（doSeek，doModify，doDelete，…），在不同的业务实现类中被重写。采用这中接口方式，进一步达到规范服务层操作，重点关注业务逻辑处理以及降低重复代码编写的目的。

3.3 数据持久化实现

系统采用MyBatis框架实现数据的持久化。MyBatis应用程序首先创建SqlSessionFactory实例，其作用相当于一个数据库连接池；然后SqlSessionFactory通过配置的XML文件获取一个SqlSession，请求执行SQL语句；执行完成后需要释放SqlSession。实现核心代码如下：

4 结束语

经实际应用测试，科研项目申报及评审系统能达到预期功能和性能目标，满足用户管理工作的需要，具有较好的实际应用价值。实践表明，采用ExtJS技术实现基于B/S模式的Web应用系统，能缩短开发周期，提高Web应用系统的可维护性和可扩展性，可以作为开发拥有良好用户体验的Web应用的另一新选择。

参考文献

[1]魏焱，李邈.基于ExtJS的VPN管理系统的设计与实现[J].通信技术，2017（06）：1323-1327.

[3]邓源清，石智伟.售票网站后台管理系统架构设计与实现[J].软件导刊，2017（05）：96-98.

[4]张小龙，孔勇强等.基于Extjs+SSH框架的电子商务系统[J].中国科技信息，2017（10）：65-67.

[5]周珅.基于ExtJS的通用层级关系组件的设计和实现[J].数字通信世界，2017（05）：261-262.

[6]Brett McLaughlin著，OReilly Taiwan公司编译.深入浅出Ajax[M].南京：东南大学出版社，2008：28-40.

[7]张旗.浅析Ajax框架在Web系统中开发与应用[J].科技广场，2008（08）：223-225.

[8]赵俊昌，祝红涛，吴越人.精通JS之ExtJS框架[M].北京：化学工业出版社，2011.

[9]http：//json.org/json-zh.html.

[10]文欢欢等.基于Mybatis和JDBC的分页查询研究[J].电脑知识与技术，2015（25）：165-167.

[11]荣艳冬.关于Mybatis持久层框架的应用研究[J].信息安全与技术，2015（12）：86-88.

[12]姜娜，孔浩，张子锋.高校业务系统中基于MyBatis实现可复用的DAO模型[J].昭通师范高等专科学校学报，2012（05）：31-34.

[13]陈玲，夏汛.利用Mybatis的动态SQL实现物理分页[J].数字技术与應用，2011（11）：227.

作者简介

彭春富（1970-），男，湖南省澧县人。硕士学位。高级工程师。主要研究方向为软件工程。

作者单位

常德职业技术学院 湖南省常德市 415000endprint