0 引言
随着计算机、网络和信息技术的发展,信息在人们日常生活中受到越来越多的关注ra。尤其在高校,随着研究生大范围的扩招,使得每年参加盲审的学生数也曰益增加,如果仍然沿用之前纸质送审的方法,不仅增加大量纸质印刷与邮寄成本,同时也大大增加了高校各相关部门的工作量,降低工作效率。
为了适应现代信息化发展的趋势和高校研究生学位培养工作的迫切需求,迫切需要建立一套Web上可实现的盲审评议系统,将其与申请学位的学生数据库挂接,可供各个学院的管理部门、教师、学生、导师和外校评审专家分权限共享访问,更加方便快捷地进行学位论文双盲评审的规范化管理,加强了数据的保密性,真正意义上实现了双盲评审。
1 ExtJS简介
ExtJS最开始基于YUI(YahooUserInterfaceLi¬brary)技术,由技术人员JackSlocum开发,通过参考JavaSwing等机制来组织可视化组件,基于JavaScript和HTML/CSS技术,还支持JQuery、Prototype等多种JS底层库。因此,ExtJS的UI设计布局雅致,界面美观,可以节约开发时间。采用JS0N/XML为数据解析和交换,能够减轻服务器负荷,快速绑定数据到相应组件并更新视图,并能良好地实现多级联动、树状结构显示和分页显示等较为复杂的UI操作。相对来说,Ext要比开发者直接针对D0M、W3C对象模型开发UI组件轻松得多。
ExtJS是一个用JavaScript编写,与后台技术无关的前端AJAX框架。因此,ExtJS可用在.NET、Java、PHP等各种语言开发的应用中。
2 系统界面实现
2.1 系统功能模块介绍
研究生学位论文双盲评审系统的用户主要有在校研究生、研究生导师、院系工作人员、校级工作人员以及外校评审专家等。系统开发基于B/S结构模式,前台开发语言为C#语言,后台数据库为SQLServer2008。整个系统功能模型如图1所示。被抽检到的研究生登录该系统进行个人信息的完善和学位论文的上传。论文中不能涉及学生本人及其导师的基本信息。院级工作人员可通过该系统对学生上传的论文进行审核,一旦发现任何问题,可以及时通知学生进行修改。论文审核结束后,校级工作人员对论文进行编号,随即送去外审,整个过程快速、简洁、保密,大大节约了时间成本。
外校的评审专家根据拿到的说明书登录系统进行信息注册,以此获取专家用户名和密码。注册之后可对论文进行下载并评审。评审提交之后可直接在系统中将论文评审意见书打印出来,操作方便快捷。评审结束后,审核结果和意见能够第一时间反馈给学生、导师及其各个学院。
2.2 系统登录首页
系统首页界面米用Ext.form.FormPanel类实现用户的登录,用户名、密码和验证码均使用textfield输入组件,其中密码的inputType设置为“password”,并设置二者的allowBlank为false。页面附加了图形验证码,提高了系统的安全性。
“登录”和“重置”按钮使用Button组件,用handler设定“重置”按钮的响应事件。当点击“登录”按钮后,ExtJS向后台服务器发送异步请求。如果用户名、密码和验证码均填写正确,则调用success中的方法,进入与登录身份相对应的功能页面,否则调用failure中的方法,提示错误,系统登录首页如图2所示。
ExtJS在提交过程中使用的是UTF-8编码,所以要求所有文件均是UTF-8编码方式。运用ExtJS对界面进行编写时,可以在JSP页面的head区域加入以下代码:
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<scripttype="text/javascript"src="/ext/ext-lang-zh_CN-GBK-min.js"></script>
2.3 论文上传页面
学生可以上传Word和PDF两种格式的论文,采用FileUpload控件实现文件上传功能。FileUpload控件显示一个文本框控件和一个浏览按钮,用户可以单击“浏览”按钮,出现选择文件对话框,然后在该对话框中定位所要上传的文件,点击“上传”按钮后,文件将自动上载至服务器upload文件夹下。以Word上传为例,其关键代码如下:
varfpFileUpload=newExt.FormPanel({id:'fpFileUpload',frame:true,fileUpload:true,
items:[{xtype:'textfield',allowBlank:false,fieldLabel:'选择文件’,inputType:'file',name:'fileName'}],buttonAlign:'center',buttons:[{text:'上传’,handler:function(){if(fpFileUpload.form.isValid()){fpFileUpload.form.submit({method:'post',url:'uploadword.aspx',waitMsg:'文件上传中...',success:function(){Ext.Msg.alert("系统提示","文件上传成功!”);},failure:function(){Ext.Msg.alert("系统提示”,"文件上传失败!M);]));]else{Ext.Msg.alert(”系统提示”,"请选择文件后再上传丨”);丨丨丨,丨text:'取消’,handler:function(){winFielUpload.hide();}}]});
2.4论文评审页面
论文评审页面是该系统最重要的页面之一,包括专家对论文选题、文献综述、研究成果、专业水平、论文写作、总体意见和存在问题等方面的评审。页面下方包括“临时保存”、“确认提交”和“打印评审表”等三个按钮。当专家填写好评审表后,点击“临时保存”按钮,可将评审结果保存至数据库中,当点击“确认提交”按钮之后,方可打印评审意见书。该页面如图3所示。
2.5查看评审结果页面
评审结束后,大家最关注的仍然是评审结果页面的浏览。由于ExtJS只是一个客户端框架,与服务器端技术无关,没有相应服务端的适配层,因此必须提供它需要的数据结构。本系统选用JSON传递数据。
ExtJS提供后台数据请求控件,如JsonStore,通过配置url和method向后台发送请求。后台将JSON格式数据响应给前台。服务器端处理前台传递的参数包括start、limit寺,start和limit用来进行分页查询,start表示从第几条数据进行查询,limit表示最多返回几条查询数据。这里默认start为0,limit为25,即默认每页显示25条数据。
前台用Ext.data.Store处理从后台获得的字符串,使用Ext.data.HttpProxy从后台获取信息,返回信息中的totalProperty和root分别指数据的记录总数和当前页面显示信息的队列。创建lwstore后调用lwstore.load({params:{start:0,limit:25}});,创建Ext.grid.GridPanel的Columns中每一列显示的数据都与lwstore数据相对应,设置列的属性sortable为true,实现该列的可排序。loadMask设置为true,意在开启读取数据时的提示功能。在bbar添加分页工具条PageBar,可以实现Grid的分页跳转和数据刷新等操作。使用Ext.grid.GridPanel中双击事件rowdblclick来查看论文评申结果。显示效果如图4所示。
3.结语
ExtJS技术因其丰富的UI组件库和良好的用户体验,在Web应用开发领域获得广泛的应用。基于ExtJS技术设计并实现了适合高校使用的研究生学位论文双盲评审系统,用户界面友好便捷,页面外观更加漂亮,风格更加统一,大大简化和规范了客户端的开发。双盲评审系统的使用也提高了高校论文盲审工作的质量和效率。