張以文 蔡雨豪 李學(xué)俊 錢付蘭

摘 要：網(wǎng)絡(luò)化教學(xué)平臺(tái)建設(shè)是在線教學(xué)的重要手段，極大地方便了學(xué)生的日常學(xué)習(xí)，擴(kuò)展了學(xué)生學(xué)習(xí)資源的來源途徑，是實(shí)現(xiàn)電子化教學(xué)不可或缺的重要環(huán)節(jié)。文章介紹和分析了基于jQuery、Ajax和三層結(jié)構(gòu)的課程網(wǎng)絡(luò)化教學(xué)平臺(tái)的開發(fā)和設(shè)計(jì)過程，實(shí)現(xiàn)了一個(gè)多用途的在線課程教學(xué)平臺(tái)。

關(guān)鍵詞：應(yīng)用型示范課程；三層架構(gòu)；jQuery技術(shù)

中圖分類號(hào)：G434 文獻(xiàn)標(biāo)志碼：B 文章編號(hào)：1673-8454（2015）14-0074-04

日常教學(xué)是學(xué)生獲得知識(shí)來源的重要途徑，傳統(tǒng)的言傳身教式教育方式具有較大的時(shí)空局限性。隨著Web技術(shù)和通信技術(shù)的發(fā)展，一些現(xiàn)代化的在線教學(xué)模式漸漸進(jìn)入學(xué)生的生活，極大推動(dòng)了現(xiàn)代教學(xué)模式的發(fā)展，如E-learning1.0向E-learning2.0進(jìn)化，促使單向傳遞與協(xié)同共享教學(xué)方式的融合[1]。B-learning教學(xué)模式將傳統(tǒng)教學(xué)優(yōu)勢(shì)與E-Learning網(wǎng)絡(luò)化學(xué)習(xí)優(yōu)勢(shì)結(jié)合起來，既發(fā)揮教師的主導(dǎo)作用，又充分體現(xiàn)學(xué)生作為認(rèn)知主體的主動(dòng)性[2]。M-learning不受時(shí)空限制，幫助學(xué)習(xí)者可以隨時(shí)、隨地進(jìn)行自由學(xué)習(xí)，使個(gè)體的個(gè)性化學(xué)習(xí)成為可能。MOOC在全球教育界引起了前所未有的影響[3，4]，但任何一種在線教學(xué)模式的實(shí)現(xiàn)都離不開教學(xué)資源的建設(shè)、整合與共享，而網(wǎng)絡(luò)化教學(xué)平臺(tái)依靠龐大的專業(yè)知識(shí)和數(shù)據(jù)庫(kù)，能有效實(shí)現(xiàn)教學(xué)資源的高度共享、師生互動(dòng)、作業(yè)管理等多種教學(xué)服務(wù)，可極大方便學(xué)生的日常學(xué)習(xí)生活。本文以應(yīng)用型示范課程網(wǎng)絡(luò)化教學(xué)平臺(tái)建設(shè)為例，實(shí)現(xiàn)了一個(gè)集教學(xué)資源共享、學(xué)生作品發(fā)布、師生有效互動(dòng)的綜合性教學(xué)服務(wù)平臺(tái)，該平臺(tái)已在安徽大學(xué)計(jì)算機(jī)科學(xué)與技術(shù)學(xué)院加以應(yīng)用，教學(xué)效果顯著，具有較高的實(shí)用價(jià)值，為專業(yè)應(yīng)用型人才培養(yǎng)提供了有效的技術(shù)支撐。

一、相關(guān)理論與技術(shù)

1.平臺(tái)的架構(gòu)模式選擇

傳統(tǒng)的網(wǎng)絡(luò)化平臺(tái)架構(gòu)分為兩大類：C/S架構(gòu)和B/S架構(gòu)。C/S即客戶機(jī)/服務(wù)器，B/S即瀏覽器/服務(wù)器。三層架構(gòu)是在傳統(tǒng)的模式下添加一個(gè)“中間層”，即由表現(xiàn)層（UI）、業(yè)務(wù)邏輯層（BLL）、數(shù)據(jù)訪問層（DAL）組成[5]。

（1）表現(xiàn)層（UI）

離用戶最近，位于最外層（最上層）。主要是ASPX頁(yè)面，用于顯示數(shù)據(jù)和接收用戶輸入的數(shù)據(jù)，為用戶提供方便快捷的交互界面。

（2）業(yè)務(wù)邏輯層（BLL）

針對(duì)具體問題的操作，對(duì)數(shù)據(jù)層的操作，對(duì)數(shù)據(jù)業(yè)務(wù)邏輯處理是系統(tǒng)架構(gòu)中體現(xiàn)核心價(jià)值的部分。

（3）數(shù)據(jù)訪問層（DAL）

該層主要是用來與數(shù)據(jù)庫(kù)打交道，簡(jiǎn)單來說就是對(duì)數(shù)據(jù)庫(kù)進(jìn)行添加、刪除、更新、查詢等操作。

2. jQuery

jQuery是繼prototype之后又一個(gè)優(yōu)秀的JavaScript框架。它是輕量級(jí)的js庫(kù)，兼容CSS3和各種瀏覽器。利用jQuery可以實(shí)現(xiàn)很多復(fù)雜的網(wǎng)頁(yè)特效[6]。

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

富文本輸入與輸出是基于KindEditor定制優(yōu)化（再開發(fā)）的，支持圖片、視頻、代碼、模板、Word、表情等的輸入輸出，同時(shí)支持超大附件的上傳和下載（大于2G）。

4.DotNetZip

DotNetZip是一個(gè)開源類庫(kù)，支持.net的任何語(yǔ)言，可方便的創(chuàng)建、讀取和更新zip文件。而且還可以使用在.NET Compact Framework中。本平臺(tái)主要用來實(shí)現(xiàn)多文件（有選擇性的）下載。

5.XHTML5

XHTML5表現(xiàn)方式與超文本標(biāo)記語(yǔ)言HTML類似，但語(yǔ)法上更加嚴(yán)格。從繼承關(guān)系上講，HTML是一種基于標(biāo)準(zhǔn)通用置標(biāo)語(yǔ)言的應(yīng)用，而XHTML5則基于可擴(kuò)展標(biāo)記語(yǔ)言。

6.CSS3

CSS3是CSS（Cascading StyleSheet）技術(shù)的升級(jí)版本，CSS3語(yǔ)言開發(fā)是朝著模塊化發(fā)展的。以前的規(guī)范作為一個(gè)模塊較為龐大且比較復(fù)雜，所以，把它分解為一些小的模塊，更多新的模塊也被加入進(jìn)來。這些模塊包括盒子模型、列表模塊、超鏈接方式、語(yǔ)言模塊、背景和邊框、文字特效、多欄布局等。

7.SQL Server

SQL（Structured Query Language）語(yǔ)言是關(guān)系數(shù)據(jù)庫(kù)的標(biāo)準(zhǔn)語(yǔ)言，是一種介于關(guān)系代數(shù)和關(guān)系演算之間的結(jié)構(gòu)化查詢語(yǔ)言。本平臺(tái)采用Microsoft SQL Server 2008，它提供較多的高效開發(fā)工具和較成熟的開發(fā)技術(shù)。

8.ASP.NET

ASP.NET是Microsoft 公司推出的一個(gè)統(tǒng)一的Web開發(fā)模型，它使用盡可能少的代碼生成企業(yè)級(jí)Web應(yīng)用程序所必需的各種服務(wù)[7]。本平臺(tái)主要使用了Master Page（母版頁(yè)）和ashx（一般處理程序HttpHandler），前者通過XMLHttpRequest對(duì)象傳遞全局參數(shù)，后者主要用來編寫Web公共服務(wù)，通過一個(gè)待實(shí)現(xiàn)的方法ProcessRequest（HttpContent）處理Http請(qǐng)求。

二、平臺(tái)設(shè)計(jì)

1.平臺(tái)概述

平臺(tái)主要用于學(xué)生注冊(cè)、登錄、反饋、發(fā)布帖子、發(fā)布作品、作品評(píng)論、瀏覽教學(xué)資源；管理員登錄、教學(xué)資源、課程作品、課程管理（教學(xué)設(shè)計(jì)、教學(xué)團(tuán)隊(duì)、教研成果）、批量下載學(xué)生提交的作業(yè)，以及管理員登錄后負(fù)責(zé)平臺(tái)的管理與維護(hù)，包括用戶賬戶管理、論壇管理（包括添加、更新、刪除帖子）、學(xué)生作品管理、數(shù)據(jù)庫(kù)管理（涉及到學(xué)生的變動(dòng)，需要清除或者更改數(shù)據(jù)庫(kù)）等；同時(shí)平臺(tái)建立了強(qiáng)大的搜索機(jī)制，支持任意字段檢索；基于帶cookie記錄的JavaScript的全局統(tǒng)一主題；基于模塊化和類的實(shí)現(xiàn)方式（高內(nèi)聚和低耦合），主要公共類包含數(shù)據(jù)庫(kù)連接、資源上傳和服務(wù)器資源管理。

2.數(shù)據(jù)庫(kù)設(shè)計(jì)

任何管理平臺(tái)都離不開數(shù)據(jù)庫(kù)，一個(gè)強(qiáng)健的數(shù)據(jù)庫(kù)是平臺(tái)是否成功的前提。通過對(duì)已有應(yīng)用型示范課程平臺(tái)的分析與研究，以交互性、通用性、簡(jiǎn)潔性為原則，設(shè)計(jì)出如下的數(shù)據(jù)項(xiàng)和數(shù)據(jù)結(jié)構(gòu)。

用戶賬戶表：包括學(xué)生的姓名、學(xué)號(hào)、密碼、性別、帖子數(shù)、密保問題、密保問題答案（主要用來找回賬戶）、最后登錄日期、電子郵件，還包含一個(gè)自增字段（關(guān)鍵字），其中包含管理員賬戶；

帖子表：包括帖子編號(hào)（主鍵，自增）、板塊編號(hào)、板塊名稱、標(biāo)題、作者、帖子內(nèi)容、瀏覽數(shù)、回復(fù)數(shù)、發(fā)布時(shí)間，通過帖子編號(hào)與回帖表建立關(guān)系；

回帖表：包括編號(hào)（主鍵，自增）、帖子編號(hào)、回復(fù)者、回復(fù)內(nèi)容、回復(fù)時(shí)間；

板塊表：包括編號(hào)（主鍵、自增）、板塊名；通過編號(hào)關(guān)聯(lián)版主表；

版主表：包括編號(hào)（主鍵、自增）、板塊編號(hào)、版主id；

教研成果表：包括編號(hào)（主鍵、自增）、標(biāo)題、內(nèi)容；

教學(xué)設(shè)計(jì)表：包括編號(hào)（主鍵、自增）、內(nèi)容；

課程簡(jiǎn)介表：包括編號(hào)（主鍵、自增）、內(nèi)容；

教學(xué)團(tuán)隊(duì)表：包括編號(hào)（主鍵、自增）、內(nèi)容、頭像；

反饋表：包括編號(hào)（主鍵、自增）、反饋者姓名、反饋內(nèi)容、反饋者電子郵件；

教學(xué)資源表：包括編號(hào)（主鍵、自增）、標(biāo)題、簡(jiǎn)介、文件信息、日期；

教學(xué)視頻表：包括編號(hào)（主鍵、自增）、標(biāo)題、簡(jiǎn)介、視頻信息、視頻封面；

學(xué)生作品（課程作業(yè)）表：包括編號(hào)（主鍵、自增）、板塊名稱、標(biāo)題、作者、日期、內(nèi)容、瀏覽數(shù)、回復(fù)數(shù)，通過編號(hào)與回復(fù)表建立聯(lián)系；

回復(fù)表：包括編號(hào)（自增，主鍵）、學(xué)生作品（課程作業(yè)）編號(hào)、回復(fù)者id、回復(fù)內(nèi)容、回復(fù)日期。

3.功能模塊設(shè)計(jì)

按照平臺(tái)的功能模塊劃分，將平臺(tái)分為用戶管理模塊、數(shù)據(jù)處理模塊、后臺(tái)管理模塊三個(gè)部分。如圖1所示，平臺(tái)主要包含以下基本功能。

用戶管理模塊：用戶登錄（注冊(cè)，找回賬戶）、發(fā)布帖子、發(fā)布作品、瀏覽課程簡(jiǎn)介、瀏覽教學(xué)設(shè)計(jì)、瀏覽教學(xué)團(tuán)隊(duì)、瀏覽教研成果、瀏覽帖子、瀏覽作品、瀏覽教學(xué)資源、瀏覽教學(xué)視頻、反饋意見建議等。

后臺(tái)管理模塊：管理用戶賬戶、管理帖子、管理學(xué)生作品、發(fā)布課程作業(yè)、發(fā)布課程資源、發(fā)布課程視頻、發(fā)布課程相關(guān)信息（課程簡(jiǎn)介、教學(xué)設(shè)計(jì)、教研成果、教學(xué)團(tuán)隊(duì)）等。

數(shù)據(jù)處理模塊：處理上傳（下載）數(shù)據(jù)、處理用戶賬戶數(shù)據(jù)、處理帖子數(shù)據(jù)、處理學(xué)生作品數(shù)據(jù)、處理教學(xué)資源數(shù)據(jù)、處理教學(xué)視頻數(shù)據(jù)、數(shù)據(jù)庫(kù)連接處理。

三、平臺(tái)實(shí)現(xiàn)

1.數(shù)據(jù)庫(kù)鏈接

導(dǎo)入命名空間：

using System.Data；

using System.Data.SqlClient；

using System.Configuration；

基于類庫(kù)的實(shí)現(xiàn)方法：

private static string strConn = /conStr是定義在webconfig文件中的全局?jǐn)?shù)據(jù)庫(kù)連接字段

ConfigurationManager.ConnectionStrings["conStr"].ConnectionString；

private static SqlConnection conn；

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

2.基于JavaScript實(shí)現(xiàn)的全局主題

設(shè)置全局主題樣式：

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端代碼設(shè)置主題文件：

3.用戶登錄

登錄分為學(xué)生、管理員兩種角色，分別有各自不同的權(quán)限。經(jīng)身份合法性認(rèn)證后可直接登錄，登錄后進(jìn)入各自的操作界面。管理員登錄代碼實(shí)現(xiàn)如下，其他角色代碼類似。

Seesion["userid"]記錄學(xué)號(hào)信息，Session["password"]記錄密碼信息；

主要是通過記錄學(xué)號(hào)、密碼和操作類型，實(shí)現(xiàn)快速登錄，同時(shí)利用Session對(duì)象記錄學(xué)號(hào)的相關(guān)信息，用于不同界面之間的相互調(diào)用。為了保證Session對(duì)象的相對(duì)安全性，防止遭受網(wǎng)絡(luò)木馬的攻擊，設(shè)計(jì)了相關(guān)的安全機(jī)制進(jìn)行保護(hù)，同時(shí)由于數(shù)據(jù)操作的分離，遭受木馬攻擊的可能性相對(duì)更低。

4.文件上傳

建立HttpContext對(duì)象：private HttpContext context；

文件保存目錄路徑：String savePath = "attached/"；

定義允許上傳的文件擴(kuò)展名：

Hashtable extTable = new Hashtable（）；

extTable.Add（）；

定義最大文件大?。篿nt maxSize = 2000000000；（2GB）

獲取FileUpLoad對(duì)象：HttpPostedFile imgFile = context.Request.Files["imgFile"]；

驗(yàn)證上傳路徑：String dirPath = context.Server.MapPath（savePath）；

驗(yàn)證文件大?。篿f （imgFile.InputStream == null || imgFile.InputStream.Length > maxSize）；

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

首先類UpLoad繼承自IHttpHandler（一般處理程序），同時(shí)利用一個(gè)哈希表來記錄相關(guān)文件的擴(kuò)展名（保證上傳文件的合法性）。由于采用覆蓋上傳的機(jī)制，為了保證文件的唯一性，采用正則表達(dá)式來唯一確定文件名，消除文件覆蓋可能帶來的bug，主要實(shí)現(xiàn)是通過HttpContent對(duì)象來處理頁(yè)面的請(qǐng)求。

5.數(shù)據(jù)處理

String sql = “select * from [表]（order by id（主鍵編號(hào)））”；

DataSet ds = DbManager.getDataSet（sql， "[數(shù)據(jù)表名]"）；

this.articlelist.DataSource = ds.Tables["數(shù)據(jù)表名"]；

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

this.articlelist.DataBind（）；

DbManager.closeConnection（）；

由于asp.net提供了一個(gè)復(fù)雜環(huán)境下的asp：GridView控件。其中articlelist就是GridView控件的一個(gè)實(shí)例化，通過其提供的不同的類（例如BoundField，CommondField，ButtonField，HyperLinkField等）可以快速實(shí)現(xiàn)對(duì)數(shù)據(jù)的查看、添加、刪除、更新等。

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"）；

主要思想是引用第三方類庫(kù)DotNetZip （事例代碼列舉的是其一般實(shí)現(xiàn)）。本平臺(tái)的實(shí)現(xiàn)方法主要是用GridView控件在控件里添加CheckBox用來有選擇性的選擇，從而實(shí)現(xiàn)動(dòng)態(tài)添加文件。利用Label控件記錄文件信息，達(dá)到讀取文件信息的目的，其核心是實(shí)現(xiàn)打包（zip）下載。

7.系統(tǒng)安全性

對(duì)現(xiàn)代網(wǎng)絡(luò)化平臺(tái)而言，安全性至關(guān)重要，通過以下技術(shù)提高平臺(tái)的安全性。

（1）角色控制：每位學(xué)生注冊(cè)以后，必須要得到管理員的審核或與系統(tǒng)數(shù)據(jù)庫(kù)中合法人員的身份認(rèn)證一致以后才能進(jìn)入系統(tǒng)。

（2）密碼管理：對(duì)于考生以及管理員的密碼，采用與密保問題和密保答案進(jìn)行綁定，要想獲得相關(guān)密碼，必須輸入驗(yàn)證通過的密保問題和密保答案才可以；設(shè)置嘗試次數(shù)，超過次數(shù)將自動(dòng)鎖定相關(guān)的賬戶；同時(shí)考慮到Session對(duì)象的安全性，網(wǎng)頁(yè)傳值采用了加密機(jī)制。

（3）后臺(tái)管理：采用了唯一入口，同時(shí)提供一個(gè)登錄接口，設(shè)置嘗試次數(shù)，一旦發(fā)現(xiàn)非法登錄等現(xiàn)象，將立即被封號(hào)。同時(shí)學(xué)生注冊(cè)采用了學(xué)號(hào)檢測(cè)機(jī)制，特殊學(xué)號(hào)將由管理員幫助注冊(cè)。

四、結(jié)束語(yǔ)

在網(wǎng)絡(luò)技術(shù)逐漸滲入社會(huì)生活各個(gè)層面的今天，傳統(tǒng)的教學(xué)方式也面臨著變革，而網(wǎng)絡(luò)化在線教學(xué)平臺(tái)是實(shí)現(xiàn)E-learning、B-learning、M-learning以及MOOC等現(xiàn)代教學(xué)方式的重要組成部分。傳統(tǒng)的教學(xué)具有消耗資源大、局限性大等缺點(diǎn)，而網(wǎng)絡(luò)在線教學(xué)平臺(tái)正好彌補(bǔ)了以上缺點(diǎn)，已受到人們的高度重視。本文以應(yīng)用型示范課程網(wǎng)絡(luò)化在線教學(xué)平臺(tái)為例詳細(xì)介紹了平臺(tái)的設(shè)計(jì)和實(shí)現(xiàn)過程，隨著平臺(tái)的運(yùn)行，積累了很多有價(jià)值的教學(xué)資源，這些教學(xué)資源成為了網(wǎng)絡(luò)化課程重要的一部分，有效實(shí)現(xiàn)了教學(xué)資源的收集、整合和共享。教學(xué)平臺(tái)中還有諸多需要進(jìn)一步完善的地方，如建立學(xué)生個(gè)人的學(xué)習(xí)筆記共享中心，實(shí)現(xiàn)學(xué)生學(xué)習(xí)和交流的知識(shí)分享機(jī)制等，這將是下一步的研發(fā)工作。

參考文獻(xiàn)：

[1]張紅宇，王堅(jiān)強(qiáng)，高陽(yáng).E-learning 2.0環(huán)境下高校教學(xué)資源的構(gòu)建及應(yīng)用——以經(jīng)管類信息系統(tǒng)核心課程為例[J].計(jì)算機(jī)教育，2012（14）：52-55.

[2]田淑海，朱振玉，郎春玲等.基于B-Learning的“物聯(lián)網(wǎng)技術(shù)導(dǎo)論”課程設(shè)計(jì)分析[J].中國(guó)電力教育，2014（11）： 126-127.

[3]夏春明，裴小琴，杜龍兵等.MOOC 的發(fā)展及其對(duì)遠(yuǎn)程教育的影響[J].化工高等教育，2014，31（1）：13-16.

[4]汪瓊. MOOCs與現(xiàn)行高校教學(xué)融合模式舉例[J].中國(guó)教育信息化，2013（6）：14-15.

[5]王進(jìn).B/S模式下的三層架構(gòu)選擇[J].軟件導(dǎo)刊， 2011，10（3）：30-31.

[6]（美）Jonathan Chaffer、Karl Swedberg著，李松峰譯. jQuery基礎(chǔ)教程（第4版）[M].北京：人民郵電出版社，2013.

[7]（美）加洛韋等著， 孫遠(yuǎn)帥、鄒權(quán)譯. ASP.NET MVC 4 高級(jí)編程（第4版） [M].北京：清華大學(xué)出版社，2013.

（編輯：魯利瑞）