基于ExtJS的高校同等学力研究生信息管理系统设计与实现

邢飞燕,沈春梅,施 佺

(1.南通大学 研究生院,江苏 南通 226019；2.南通大学 交通与土木工程学院,江苏 南通 226019)

0 引言

随着同等学力申请硕士学位人数不断增长，具有研究生毕业同等学力人员申请硕士学位已成为我国学位与研究生教育的重要组成部分。[1]2012年，国家教育部开发并使用了“全国同等学力人员申请硕士学位管理信息平台”，主要用于现场确认、全国统一考试报名和学位信息上报等，不适用于培养过程化的管理。[2]目前，许多高校针对同等学力人员的过程管理是通过多个零散的子系统进行的，普遍没有形成一个统一的综合管理平台，功能不够完整，信息化程度也不够高；这不仅不利于研究生管理体制的健全、同等学力研究生教育的规范化管理，而且在一定程度上影响了管理效率，最终影响同等学力申请硕士学位研究生的培养质量与教育水平的提高。[3]

1 系统采用的关键技术

1.1 ExtJS框架

ExtJS是采用JavaScript、CSS和HTML等技术实现的与后台开发技术无关的前端Ajax框架，可以直接应用在.Net技术及Java、Php 等开发语言中。ExtJS框架主要用于创建用户界面，或用来开发RIA(富客户端)的应用程序，前后台之间通过JSON/XML实现数据传递。ExtJS最开始基于UI技术，通过参考Java Swing等机制来组织可视化组件，为开发者屏蔽了大量WebUI操作和跨浏览器方面地处理；无论是UI界面上CSS样式的应用，还是数据解析上的异常处理，都可算是一款不可多得的JavaScript客户端技术精品。

1.2 AJAX技术

Ajax即“Asynchronous Javascript And XML”(异步JavaScript和XML)，是用来创建交互式、快速动态网页的开发技术。Ajax的核心是JavaScript对象XMLHttpRequest，它允许使用JavaScript向服务器提出请求，并处理响应而不阻塞用户。通过使用XMLHttpRequest对象，可在不刷新网页的情况下，与服务器交换数据并更新部分网页，提高应用程序交互性、敏感性和实用性。

1.3 JSON技术

JSON(即JavaScript Object Notation) 作为一种轻量级的数据交换格式，采用完全独立于语言的文本格式，其语法是一种用于传输和生成数据的协定，既易于人们的读写，同时，也易于机器地解析和生成，是理想的数据交换格式。JSON支持ActionScript、C、 C#、Java、JavaScript、 ML等语言且语法简单，JSON的值可以是数字、字符串、逻辑值，也可以是数组、对象等。同XML或 HTML相比，数据交换格式JSON更具有简单性和灵活性。

2 系统需求分析

基于B/S结构的同等学力信息管理系统，其用户分为同等学力人员、任课教师/导师、管理人员等。同等学力人员是服务的主体对象，在设计上除基本的登录和信息维护外，还需要系统对其提供注册报名、学位信息上报等模块。主要功能包括：注册、登录、获取个人培养计划、获取目前学业状态(包括学分、绩点、科研结果等)和学位上报等。

任课教师/导师用户，主要功能包括：听课情况、成绩管理、导师上岗申请和导师带教管理等。系统需支持从不同层面对同等学力人员进行统计，包括学位类型、性别、学院、民族等，使任课教师/导师更加直观、全面了解目前同等学力人员实际情况。

管理人员主要分为院系管理人员、校级管理人员和系统管理员。其中，院系管理人员主要负责本学院用户信息地查询、修改、审核、打印及数据导出等；校级管理人员主要负责本校所有学院用户信息的查询、修改、审核、打印及数据导出等；系统管理员主要负责对系统功能进行维护，例如：所有用户的信息维护、角色权限管理及其他操作管理等。同等学力信息管理系统功能如图1所示。

图1 系统功能

除基本功能性要求外，同等学力信息管理系统作为教育管理系统应具有以下特性：

(1)预警性：系统不仅能够根据研究生教育管理业务与流程变化，方便快捷地进行模块更新与升级，而且具有信息平台的数据分析与应用功能，可通过短信、邮件等多种方式，实现全方位的研究生教育质量监测与预警服务，强化信息平台对研究生质量监测及预警信息服务的技术支撑。[4]

(2)可扩展性：系统开发前要深入了解不同用户需求，分析提炼出不同用户之间的共性需求和个性需求。其中，共性需求可供所有用户共同使用，需放在平台最底层实现；个性需求是对不同用户进行个性化定制，需放在平台最高层实现。另外，要实现数据与业务控制分离，保证数据导入不影响业务。

(3)易维护性：设计过程中应完全模块化开发，遵循高内聚低耦合设计原则。在实际应用布署中，可以根据用户需求进行灵活地功能扩展，以保证后期维护便捷，提高维护效率，降低升级维护成本。

3 系统总体设计

3.1 系统技术架构

为提高系统性能，提高系统后期的可扩展性与可维护性，本系统采用基于Ajax的前端 ExtJS框架技术开发，后端采用微软的ASP.NET三层架构(3-tier application)来实现，即将整个业务应用划分为：表现层(UI)、业务逻辑层(BLL)和数据访问层(DAL)。区分层次的目是为了方便地进行扩展和移植。ASP.NET三层架构(3-tier application)结构图如图2所示。

图2 ASP.NET三层架构(3-tier application)结构

利用ExtJS搭建的表现层(UI)位于最上层，离客户最近。主要用于接收用户输入的数据，提交给业务逻辑层(BLL)做处理，同时，将业务逻辑层(BLL)的处理结果显示给用户，为用户提供一种交互式操作的界面。业务逻辑层(BLL)位于Web服务器端，将表现层(UI)传送的请求经过相关业务规则和逻辑，对数据访问层(DAL)提出处理要求，再按照相反方向将数据传输到表现层(UI)进行显示。数据访问层(DAL)位于数据库服务端，通过执行Web服务端的数据操作请求，完成相应的数据编辑、查询、删除等操作，再将结果返回给Web服务器。[5-6]

ExtJS框架整合了XML、CSS等多项技术，可兼容各种浏览器，从界面效果实现到数据解析及异常处理等都非常出色，并且支持局部刷新和异步加载，界面美观友好，支持多种系统风格。另外，ExtJS无需在客户端安装任何插件，大大减轻服务器负重。[7]

3.2 数据库设计

为保证系统的稳定性、安全性，根据系统的需求分析，遵循数据库的设计范式，设计24个数据表实现各业务数据的持久化，主要分为五个部分：用户信息、课程学习阶段信息、进入课题阶段信息、学位申请阶段信息和其它基础信息，如图3所示。

图3 数据库设计

3.3 系统UI设计

根据系统功能需求和用户习惯，可将前端用户界面分为4个区域，即信息显示区、树形菜单导航区、功能模块区和版权标志区等。系统信息显示区在页面的顶部，主要显示系统的名称，支持查询信息和修改密码等功能；树形菜单导航区分布在页面左端，主要显示可供当前用户操作的功能菜单，当前用户点击相应的菜单栏，可进入相关的功能模块区；功能模块区分布在页面的右端，包括数据的查询、修改、删减等操作；版权标志区分布在页面底端，具体设计如图4所示。

图4 系统UI设计

4 系统功能实现

4.1 登录模块实现

登录模块通常为管理系统的第一个模块，集成了各类用户登录功能，用户登录时须进行前台校验防止信息泄露，为后台程序减少不必要的流量攻击，提高数据安全性。登录模块前台主要是由JS库中丰富的控件库完成，用户的密码采用Utility.MD5(password, 16)进行加密保存。用户在登录界面输入正确的用户名、密码和验证码，后台首先对用户名、密码和验证码进行匹配验证，若都正确，则该用户可顺利进入系统，同时，系统会对用户进行身份匹配，根据用户信息表中的lbm字段判断其角色。系统登录设计基于ExtJS+ASP.NET，采用Ajax技术进行数据交互，具体代码如下：

//界面框架

var loginWin = new Ext.Window({

width: 415,

autoHeight: true,

title: "用户登录",

items: [bannerPanel, mainPanel],

draggable: true,

closable: false,

resizable: false,

modal: true,

buttonAlign: 'center',

buttons: [{id: 'btnLogin',text: "登 录"},

{id: 'btnReset',text: "重置密码",handler: function () {...}}]});

var bannerPanel = new Ext.Panel({...});

var mainPanel = new Ext.Panel({...});

//数据交互

Ext.Ajax.request({

url: 'data/Login.aspx',

method: 'post',

params: {...},

success: function (response, options) {

Ext.MessageBox.hide();

var respText = Ext.util.JSON.decode(response.responseText);

if (true == respText.success) {window.location = 'Index.aspx';}

else { MessageBox.showWarning(respText.msg);}},

failure: function (response, options) {

Ext.MessageBox.hide();

MessageBox.showError('登录失败，请稍后重试！');}});});

4.2 报表导出及打印功能实现

为方便用户能够第一时间获取培养过程数据，系统提供便捷的报表打印和数据导出功能。采用基于Web 的PDF文档生成和打印技术，彻底解决Web报表打印难题；同时，系统提供数据导出功能，直接动态生成Excel文件，供客户端下载。数据库的读取采用 Ext.data.JsonStore进行，它相当于前台页面的一个数据仓库，负责保存后台传过来的JSON数据，对容量大的数据采用分页显示，用start和limit来分页查询。成绩单导出和打印功能的具体代码如下：

var cjstore = new Ext.data.JsonStore({

url: 'data/GetCjKcb.aspx',

root: 'data',

idProperty: 'id',

totalProperty: "totalCount",

fields: [...]});

cjstore.load({ params: { start: 0, limit: pageSize} });

//分页

var pageBar = new Ext.PagingToolbar({

store: cjstore,

pageSize: pageSize,

displayInfo: true,

items: [

{ text: '导出成绩单', iconCls: 'iconExcel', handler: function () {

downloadFile(' ...' );}},

{ text: '打印成绩单', iconCls: 'iconPrint', handler: function () {

Print("打印成绩单", '...' );}}]});//前端代码

//导出Excel

public void ExportExcel(string yxsh)

{

ExcelXML excel = new ExcelXML();

Sheetsheet = new Sheet(fileName);

int colCount = ds.Tables[0].Columns.Count;

//添加列名

sheet.Rows.AddTitle(rowTitles);

//添加行

sheet.Rows.IsAutoType = false;

sheet.Rows.Add(rowValues);

}//后端代码

//打印功能

private void CreatePDF(){

Documentdocument = new Document(PageSize.A4);//创建一个Document实例

MemoryStream ms = new MemoryStream();

PdfWriter writer = PdfWriter.GetInstance(document, ms);//创建Writer实例

document.Open();

...

document.Close();

//下载生成的pdf

fileName = "..." ;

myPDF.OpenFile(ms, fileName)}//后端代码

4.3 数据统计与监测预警功能实现

信息管理系统对研究生各类数据进行实时统计并公开，统计类型主要包括培养类型、培养学院、民族等。以民族类型进行数据统计的代码如下：

var viewport = new Ext.Viewport({

layout: 'border',

border:false,

items: [{

xtype: 'portal',

region: 'center',

border: false,

items: [{

style: 'padding:10px',

items: [{

title: '民族统计',

tools: tools,

html:''}]}]}]});});//前端代码

protected void Page_Load(object sender, EventArgs e)

{

...

JavaScriptSerializer jss = new JavaScriptSerializer();

string strColumn = "mz,count(*) as count";

string strWhere = "... group by " + strColumn";

Xs_kcbBLL bllXs = new Xs_kcbBLL();//读取Xs_kcb数据表

DataSet ds = bllXs.GetList(strColumn, strWhere);

if (ds.Tables[0].Rows.Count > 0)

{

List