基于JQUERY与.NET教学质量监控系统设计与实现.docVIP

基于JQUERY与.NET教学质量监控系统设计与实现 　　摘 要： 在开发教学质量监控系统的过程中，自定义技术架构，采用Visual Studio 2010作为开发工具。为增强可扩展性，采用分层设计并实现；为增强复用，自定义后台各功能通用类库；为具有良好的用户体验及交互性，前台开发引入开源Jquery框架及Jquery EasyUI前台组件包。该系统上线运行正常并具有良好的用户体验，系统结构清晰，可扩展性强。 　　关键词： 教学质量监控系统； 技术架构； Jquery； Jquery EasyUI； Visual Studio 2010 　　中图分类号：TP311.5 文献标志码：A 文章编号：1006-8228（2013）11-34-03 　　0 引言 　　提高教育教学质量是高职院校内涵发展的重要主题。教学质量监控在教学运行过程中具有重要作用。笔者所在学校自主开发了教学质量监控系统，主要功能包括教师教学质量考核、教师与学生的互动交流、教学质量监控动态信息等功能。笔者利用主流软件技术开发教学质量监控系统，通过实时采集学院教学质量相关数据，使教学质量监控中心及各二级教学单位能够对教学质量作准确、实时的了解，为学院教学管理的决策提供意见和建议。本文采用JQUERY和.NET 技术相结合，采用Visual Studio 2010开发工具，采用分层设计并实现[1]，并重点对分层技术架构下涉及到的若干关键技术的实现进行了探讨。 　　1 基于JQUERY 和.NET的技术架构 　　整体技术架构采用分层设计[2]，分层设计的优势是能实现分散关注、松散耦合、逻辑重用，分为表示层、数据访问层、业务处理层、公共组件四层。表示层是系统的UI部分，负责用户与整个系统的交互，采用JQUERY和JQUERY下的封装框架Easy UI，部分采用ASP.NET技术。数据访问层又称为持久层，主要负责数据库的访问，封装对数据库的Select、Insert、Update、Delete操作。业务处理层封装业务处理逻辑，一部分位于后台处理ASHX中，一部分以存储过程的形式实现。公共组件层，存放抽象出的通用公共组件，JSON格式的数据转换等存放其中。 　　以课程信息管理为例，描述以上结构的具体设计与实现。访问过程如图1所示。 　　开发平台采用Visual Studio 2010集成开发工具，数据库使用SQL Server 2008。由于本系统的模块和代码众多，采用解决方案文件夹对项目进行管理，以分层为依据建立多个项目来分离关注点[3]，解决方案结构如图2所示。 　　2 前台开发 　　JQuery是JS的轻量级框架，JQuery的突出特点是开发的用户体验好，较少的开发代价能开发出用户体验好并且美观的UI界面。该类库中封装了一些对象方法，能实现处理事件、运行动画效果，添加Ajax交互进行异步获取数据。本项目选取JQuery用于前台开发，除了其代码非常小巧，只有20K左右，更为重要的是其第三方开源插件丰富。 　　JQuery EasyUI是一组基于JQuery的扩展集合，功能类同于EXTJS，但代码量很小，执行速度较快。开发者不需要深入掌握Javascript，不需要深入了解css样式，仅需要了解html标记语言。本系统采用JQuery和JQuery EasyUI作为前台开发工具，改善用户体验，提高开发效率。 　　2.1 首页实现 　　页面整体设计为左侧是折叠导航树，右侧为功能Tab面板。由于Easy UI封装了CSS和JS文件，采用JQuery EasyUI库实现整个页面框架非常方便。仅需定义Html标记即能实现首页页面框架。在使用之前引入相应的JS库和CSS文件。 　　link rel=stylesheet type=text/css href=../Scripts/easyui/ 　　themes/default/easyui.css/ 　　link href=../Scripts/easyui/themes/icon.css 　　rel=stylesheet type=text/css/ 　　script type=text/javascript src=../Scripts/easyui/jquery-1.4.4 　　.min.js 　　script type=text/javascript src=../Scripts/easyui/jquery 　　.easyui.min.js 　　左侧导航菜单定义如下： 　　 　　 　　 　　填写教学质量评价表 课程管理 　　public static DataTable ReturnTable（string strSQL） 　　{ CheckConnect