基于jQuery三层架构的网络化教学平台设计与实现

张以文 蔡雨豪 李学俊 钱付兰

摘 要：网络化教学平台建设是在线教学的重要手段，极大地方便了学生的日常学习，扩展了学生学习资源的来源途径，是实现电子化教学不可或缺的重要环节。文章介绍和分析了基于jQuery、Ajax和三层结构的课程网络化教学平台的开发和设计过程，实现了一个多用途的在线课程教学平台。

关键词：应用型示范课程；三层架构；jQuery技术

中图分类号：G434 文献标志码：B 文章编号：1673-8454（2015）14-0074-04

日常教学是学生获得知识来源的重要途径，传统的言传身教式教育方式具有较大的时空局限性。随着Web技术和通信技术的发展，一些现代化的在线教学模式渐渐进入学生的生活，极大推动了现代教学模式的发展，如E-learning1.0向E-learning2.0进化，促使单向传递与协同共享教学方式的融合[1]。B-learning教学模式将传统教学优势与E-Learning网络化学习优势结合起来，既发挥教师的主导作用，又充分体现学生作为认知主体的主动性[2]。M-learning不受时空限制，帮助学习者可以随时、随地进行自由学习，使个体的个性化学习成为可能。MOOC在全球教育界引起了前所未有的影响[3，4]，但任何一种在线教学模式的实现都离不开教学资源的建设、整合与共享，而网络化教学平台依靠庞大的专业知识和数据库，能有效实现教学资源的高度共享、师生互动、作业管理等多种教学服务，可极大方便学生的日常学习生活。本文以应用型示范课程网络化教学平台建设为例，实现了一个集教学资源共享、学生作品发布、师生有效互动的综合性教学服务平台，该平台已在安徽大学计算机科学与技术学院加以应用，教学效果显著，具有较高的实用价值，为专业应用型人才培养提供了有效的技术支撑。

一、相关理论与技术

1.平台的架构模式选择

传统的网络化平台架构分为两大类：C/S架构和B/S架构。C/S即客户机/服务器，B/S即浏览器/服务器。三层架构是在传统的模式下添加一个“中间层”，即由表现层（UI）、业务逻辑层（BLL）、数据访问层（DAL）组成[5]。

（1）表现层（UI）

离用户最近，位于最外层（最上层）。主要是ASPX页面，用于显示数据和接收用户输入的数据，为用户提供方便快捷的交互界面。

（2）业务逻辑层（BLL）

针对具体问题的操作，对数据层的操作，对数据业务逻辑处理是系统架构中体现核心价值的部分。

（3）数据访问层（DAL）

该层主要是用来与数据库打交道，简单来说就是对数据库进行添加、删除、更新、查询等操作。

2. jQuery

jQuery是继prototype之后又一个优秀的JavaScript框架。它是轻量级的js库，兼容CSS3和各种浏览器。利用jQuery可以实现很多复杂的网页特效[6]。

3.富文本输入输出（KindEditor）

富文本输入与输出是基于KindEditor定制优化（再开发）的，支持图片、视频、代码、模板、Word、表情等的输入输出，同时支持超大附件的上传和下载（大于2G）。

4.DotNetZip

DotNetZip是一个开源类库，支持.net的任何语言，可方便的创建、读取和更新zip文件。而且还可以使用在.NET Compact Framework中。本平台主要用来实现多文件（有选择性的）下载。

5.XHTML5

XHTML5表现方式与超文本标记语言HTML类似，但语法上更加严格。从继承关系上讲，HTML是一种基于标准通用置标语言的应用，而XHTML5则基于可扩展标记语言。

6.CSS3

CSS3是CSS（Cascading StyleSheet）技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块较为庞大且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等。

7.SQL Server

SQL（Structured Query Language）语言是关系数据库的标准语言，是一种介于关系代数和关系演算之间的结构化查询语言。本平台采用Microsoft SQL Server 2008，它提供较多的高效开发工具和较成熟的开发技术。

8.ASP.NET

ASP.NET是Microsoft 公司推出的一个统一的Web开发模型，它使用尽可能少的代码生成企业级Web应用程序所必需的各种服务[7]。本平台主要使用了Master Page（母版页）和ashx（一般处理程序HttpHandler），前者通过XMLHttpRequest对象传递全局参数，后者主要用来编写Web公共服务，通过一个待实现的方法ProcessRequest（HttpContent）处理Http请求。

二、平台设计

1.平台概述

平台主要用于学生注册、登录、反馈、发布帖子、发布作品、作品评论、浏览教学资源；管理员登录、教学资源、课程作品、课程管理（教学设计、教学团队、教研成果）、批量下载学生提交的作业，以及管理员登录后负责平台的管理与维护，包括用户账户管理、论坛管理（包括添加、更新、删除帖子）、学生作品管理、数据库管理（涉及到学生的变动，需要清除或者更改数据库）等；同时平台建立了强大的搜索机制，支持任意字段检索；基于带cookie记录的JavaScript的全局统一主题；基于模块化和类的实现方式（高内聚和低耦合），主要公共类包含数据库连接、资源上传和服务器资源管理。

2.数据库设计

任何管理平台都离不开数据库，一个强健的数据库是平台是否成功的前提。通过对已有应用型示范课程平台的分析与研究，以交互性、通用性、简洁性为原则，设计出如下的数据项和数据结构。

用户账户表：包括学生的姓名、学号、密码、性别、帖子数、密保问题、密保问题答案（主要用来找回账户）、最后登录日期、电子邮件，还包含一个自增字段（关键字），其中包含管理员账户；

帖子表：包括帖子编号（主键，自增）、板块编号、板块名称、标题、作者、帖子内容、浏览数、回复数、发布时间，通过帖子编号与回帖表建立关系；

回帖表：包括编号（主键，自增）、帖子编号、回复者、回复内容、回复时间；

板块表：包括编号（主键、自增）、板块名；通过编号关联版主表；

版主表：包括编号（主键、自增）、板块编号、版主id；

教研成果表：包括编号（主键、自增）、标题、内容；

教学设计表：包括编号（主键、自增）、内容；

课程简介表：包括编号（主键、自增）、内容；

教学团队表：包括编号（主键、自增）、内容、头像；

反馈表：包括编号（主键、自增）、反馈者姓名、反馈内容、反馈者电子邮件；

教学资源表：包括编号（主键、自增）、标题、简介、文件信息、日期；

教学视频表：包括编号（主键、自增）、标题、简介、视频信息、视频封面；

学生作品（课程作业）表：包括编号（主键、自增）、板块名称、标题、作者、日期、内容、浏览数、回复数，通过编号与回复表建立联系；

回复表：包括编号（自增，主键）、学生作品（课程作业）编号、回复者id、回复内容、回复日期。

3.功能模块设计

按照平台的功能模块划分，将平台分为用户管理模块、数据处理模块、后台管理模块三个部分。如图1所示，平台主要包含以下基本功能。

用户管理模块：用户登录（注册，找回账户）、发布帖子、发布作品、浏览课程简介、浏览教学设计、浏览教学团队、浏览教研成果、浏览帖子、浏览作品、浏览教学资源、浏览教学视频、反馈意见建议等。

后台管理模块：管理用户账户、管理帖子、管理学生作品、发布课程作业、发布课程资源、发布课程视频、发布课程相关信息（课程简介、教学设计、教研成果、教学团队）等。

数据处理模块：处理上传（下载）数据、处理用户账户数据、处理帖子数据、处理学生作品数据、处理教学资源数据、处理教学视频数据、数据库连接处理。

三、平台实现

1.数据库链接

导入命名空间：

using System.Data；

using System.Data.SqlClient；

using System.Configuration；

基于类库的实现方法：

private static string strConn = /conStr是定义在webconfig文件中的全局数据库连接字段

ConfigurationManager.ConnectionStrings["conStr"].ConnectionString；

private static SqlConnection conn；

comm = new SqlCommand（“连接字段”， conn）；

2.基于JavaScript实现的全局主题

设置全局主题样式：

function setActiveStyleSheet（title） {

var i， a， main；

for（i=0； （a = document.getElementsByTagName（"link"）[i]）； i++） {

if（a.getAttribute（"rel"）.indexOf（"style"） ！= -1 && a.getAttribute（"title"）） {

a.disabled = true；

if（a.getAttribute（"title"） == title） a.disabled = false；}

}

}

获取全局主题样式：

function getActiveStyleSheet（） {

var i， a；

for（i=0； （a = document.getElementsByTagName（"link"）[i]）； i++） {

if（a.getAttribute（"rel"）.indexOf（"style"） ！= -1 && a.getAttribute（"title"） && ！a.disabled） return a.getAttribute（"title"）；}

return null；

}

Web端代码获取css文件名：

Web端代码设置主题文件：

3.用户登录

登录分为学生、管理员两种角色，分别有各自不同的权限。经身份合法性认证后可直接登录，登录后进入各自的操作界面。管理员登录代码实现如下，其他角色代码类似。

Seesion["userid"]记录学号信息，Session["password"]记录密码信息；

主要是通过记录学号、密码和操作类型，实现快速登录，同时利用Session对象记录学号的相关信息，用于不同界面之间的相互调用。为了保证Session对象的相对安全性，防止遭受网络木马的攻击，设计了相关的安全机制进行保护，同时由于数据操作的分离，遭受木马攻击的可能性相对更低。

4.文件上传

建立HttpContext对象：private HttpContext context；

文件保存目录路径：String savePath = "attached/"；

定义允许上传的文件扩展名：

Hashtable extTable = new Hashtable（）；

extTable.Add（）；

定义最大文件大小：int maxSize = 2000000000；（2GB）

获取FileUpLoad对象：HttpPostedFile imgFile = context.Request.Files["imgFile"]；

验证上传路径：String dirPath = context.Server.MapPath（savePath）；

验证文件大小：if （imgFile.InputStream == null || imgFile.InputStream.Length > maxSize）；

判断文件格式：Array.IndexOf（（（String）extTable[dirName]）.Split（'，'），fileExt.Substring（1）.ToLower（））；

首先类UpLoad继承自IHttpHandler（一般处理程序），同时利用一个哈希表来记录相关文件的扩展名（保证上传文件的合法性）。由于采用覆盖上传的机制，为了保证文件的唯一性，采用正则表达式来唯一确定文件名，消除文件覆盖可能带来的bug，主要实现是通过HttpContent对象来处理页面的请求。

5.数据处理

String sql = “select * from [表]（order by id（主键编号））”；

DataSet ds = DbManager.getDataSet（sql， "[数据表名]"）；

this.articlelist.DataSource = ds.Tables["数据表名"]；

this.articlelist.DataKeyNames = new string[] { "id" }；

this.articlelist.DataBind（）；

DbManager.closeConnection（）；

由于asp.net提供了一个复杂环境下的asp：GridView控件。其中articlelist就是GridView控件的一个实例化，通过其提供的不同的类（例如BoundField，CommondField，ButtonField，HyperLinkField等）可以快速实现对数据的查看、添加、删除、更新等。

6.批量下载文件

using （ZipFile zip = new ZipFile（））{

把图像文件添加到zip档案的"images"目录下zip.AddFile（"[文件地址]"， "images"）；

把PDF文件添加到zip档案的"files"目录下zip.AddFile（"[文件地址]"， "files"）；

把不确定文件类型放到zip档案中zip.AddFile（"[文件地址]"）；

保存压缩好的zip文件zip.Save（"MyZipFile.zip"）；

主要思想是引用第三方类库DotNetZip （事例代码列举的是其一般实现）。本平台的实现方法主要是用GridView控件在控件里添加CheckBox用来有选择性的选择，从而实现动态添加文件。利用Label控件记录文件信息，达到读取文件信息的目的，其核心是实现打包（zip）下载。

7.系统安全性

对现代网络化平台而言，安全性至关重要，通过以下技术提高平台的安全性。

（1）角色控制：每位学生注册以后，必须要得到管理员的审核或与系统数据库中合法人员的身份认证一致以后才能进入系统。

（2）密码管理：对于考生以及管理员的密码，采用与密保问题和密保答案进行绑定，要想获得相关密码，必须输入验证通过的密保问题和密保答案才可以；设置尝试次数，超过次数将自动锁定相关的账户；同时考虑到Session对象的安全性，网页传值采用了加密机制。

（3）后台管理：采用了唯一入口，同时提供一个登录接口，设置尝试次数，一旦发现非法登录等现象，将立即被封号。同时学生注册采用了学号检测机制，特殊学号将由管理员帮助注册。

四、结束语

在网络技术逐渐渗入社会生活各个层面的今天，传统的教学方式也面临着变革，而网络化在线教学平台是实现E-learning、B-learning、M-learning以及MOOC等现代教学方式的重要组成部分。传统的教学具有消耗资源大、局限性大等缺点，而网络在线教学平台正好弥补了以上缺点，已受到人们的高度重视。本文以应用型示范课程网络化在线教学平台为例详细介绍了平台的设计和实现过程，随着平台的运行，积累了很多有价值的教学资源，这些教学资源成为了网络化课程重要的一部分，有效实现了教学资源的收集、整合和共享。教学平台中还有诸多需要进一步完善的地方，如建立学生个人的学习笔记共享中心，实现学生学习和交流的知识分享机制等，这将是下一步的研发工作。

参考文献：

[1]张红宇，王坚强，高阳.E-learning 2.0环境下高校教学资源的构建及应用——以经管类信息系统核心课程为例[J].计算机教育，2012（14）：52-55.

[2]田淑海，朱振玉，郎春玲等.基于B-Learning的“物联网技术导论”课程设计分析[J].中国电力教育，2014（11）： 126-127.

[3]夏春明，裴小琴，杜龙兵等.MOOC 的发展及其对远程教育的影响[J].化工高等教育，2014，31（1）：13-16.

[4]汪琼. MOOCs与现行高校教学融合模式举例[J].中国教育信息化，2013（6）：14-15.

[5]王进.B/S模式下的三层架构选择[J].软件导刊， 2011，10（3）：30-31.

[6]（美）Jonathan Chaffer、Karl Swedberg著，李松峰译. jQuery基础教程（第4版）[M].北京：人民邮电出版社，2013.

[7]（美）加洛韦等著， 孙远帅、邹权译. ASP.NET MVC 4 高级编程（第4版） [M].北京：清华大学出版社，2013.

（编辑：鲁利瑞）