基于MVC開發(fā)模式的在線學習互動平臺設(shè)計與實現(xiàn)

賈衛(wèi)峰 林木興 高華

摘要：隨著計算機技術(shù)和互聯(lián)網(wǎng)技術(shù)的高速發(fā)展，人們的生活和學習方式在一定程度上發(fā)生了改變，中國傳統(tǒng)遠程教育的問題日益凸顯。在線學習克服了傳統(tǒng)學習模式在時間和空間上的限制，整合了各種優(yōu)質(zhì)教育資源，并進行合理配置，提高了學習的便捷性。結(jié)合MOOC理念，采用MVC三層開發(fā)模式，即JavaBean（Model）+Servlet（View）+JSP（Control）體系，在Java平臺上設(shè)計了一個基于“互聯(lián)網(wǎng)+”的在線學習互動平臺。該平臺實現(xiàn)了視頻點播、視頻發(fā)布、視頻管理、互動交流和彈幕等功能。實踐表明，該平臺系統(tǒng)結(jié)構(gòu)清晰，可有效保障數(shù)據(jù)安全，運行效果良好。

關(guān)鍵詞：互聯(lián)網(wǎng)+；在線學習；MVC；Java平臺

DOIDOI：10.11907/rjdk.172557

中圖分類號：TP319文獻標識碼：A文章編號：16727800（2017）010007505

0引言

在線學習是通過互聯(lián)網(wǎng)和信息通信技術(shù)，在互聯(lián)網(wǎng)上構(gòu)建一個虛擬教室，然后教師和學生通過互聯(lián)網(wǎng)連接進行授課和學習的方式。目前，國內(nèi)外涌現(xiàn)出許多在線學習平臺，如MOOC、Blackboard、騰訊課堂等。當前“互聯(lián)網(wǎng)+”理念是人們關(guān)注的熱點，作為新型學習方式，在線學習可以跨越地域差異，平衡教育資源，從而培養(yǎng)出自主學習的新型人才[1]。因此，在“互聯(lián)網(wǎng)+”環(huán)境下研究在線學習互動平臺的設(shè)計和應(yīng)用具有重要的理論和現(xiàn)實意義。

1相關(guān)技術(shù)

1.1開發(fā)模式

本文采用MVC三層架構(gòu)開發(fā)，它能使數(shù)據(jù)存儲、顯示，即視圖和業(yè)務(wù)邏輯處理互相分離。其原理是：模型層負責數(shù)據(jù)格式的定義和轉(zhuǎn)存，與數(shù)據(jù)庫中的相應(yīng)字段對應(yīng)；控制層對系統(tǒng)業(yè)務(wù)邏輯進行處理，一般都是操作數(shù)據(jù)庫，是系統(tǒng)前端和后臺的橋梁。它將前端視圖層輸入的數(shù)據(jù)傳給模型層，并更新到后臺數(shù)據(jù)庫中；視圖層則是系統(tǒng)的交互接口，它將模型層的數(shù)據(jù)以特定格式呈現(xiàn)給用戶[2]。

（1）MODEL層。模型層定義了數(shù)據(jù)的格式及處理方法，它把數(shù)據(jù)和數(shù)據(jù)處理方法寫成一個JavaBean類，是系統(tǒng)軟代碼的一種實現(xiàn)。模型層定義的數(shù)據(jù)與數(shù)據(jù)庫的字段相對應(yīng)，模型并不關(guān)心數(shù)據(jù)如何控制和顯示，它只負責刷新數(shù)據(jù)庫中被更改的記錄。

（2）CONTROL層。控制層是整個系統(tǒng)的處理中心，定義了用戶接收前臺和響應(yīng)后臺數(shù)據(jù)的整個邏輯程序，這些程序負責從VIEW層讀取數(shù)據(jù)，完成應(yīng)用程序的調(diào)度，并且控制客戶的輸入。與此同時，它會在模型層和視圖層之間進行數(shù)據(jù)交互，然后將結(jié)果返回控制層，通過視圖層的用戶界面顯示給用戶。

（3）VIEW層。視圖層是根據(jù)模型數(shù)據(jù)創(chuàng)建的，它只會以特別的格式顯示接收到的數(shù)據(jù)，卻不會處理程序中的數(shù)據(jù)。所以，視圖層不需要了解或知道模型層和控制層封裝的內(nèi)容，只需知道它們的接口即可進行通信。

因此，本平臺基于MVC開發(fā)模式的原理如圖1所示。

1.2JSP前端開發(fā)技術(shù)

用于開發(fā)系統(tǒng)前端頁面的技術(shù)有很多，本平臺主要采用JSP技術(shù)，并結(jié)合CSS和Javascript技術(shù)來搭建平臺前端頁面。JSP是一種服務(wù)器端頁面，是借鑒了ASP技術(shù)而產(chǎn)生的新一代Web開發(fā)技術(shù)。用標記和腳本生成動態(tài)頁面內(nèi)容是JSP的一大特色[3]。

JSP有9大內(nèi)置對象，它們都可以不作任何聲明直接使用。其中常用的是request和response兩大對象。JSP具有非常成熟的服務(wù)器端組件，如JavaBeans、JDBC等，利用這些組件可以完成Web頁面中許多復雜的功能，使系統(tǒng)性能更上一層樓[4]。

1.3后臺開發(fā)技術(shù)

本平臺的后臺選擇Java技術(shù)進行開發(fā)，Model層用JavaBean編寫，而控制層則用Servlet編寫，前端和后臺數(shù)據(jù)庫之間的連接則采用JDBC技術(shù)實現(xiàn)[5]。

（1）Java技術(shù)。Java是跨平臺的面向?qū)ο缶幊陶Z言，其功能很強大，而且摒除了很多難以理解的概念，使其比較容易理解。由于Java語言常常要與數(shù)據(jù)庫進行交互，于是便衍生出Java Servlet、JDBC，以及JSP技術(shù)[6]。

Servlet是使用Java語言編寫的服務(wù)器端小程序，它用于動態(tài)生成網(wǎng)頁。Servlet的工作模式是基于一種請求/響應(yīng)的工作模式，客戶端向服務(wù)器發(fā)送HTTP請求，服務(wù)器將請求分配給相應(yīng)的Servlet進行處理，Servlet擁有一系列方法來處理HTTP請求[7]。

（2）JavaBean技術(shù)。JavaBean是符合某種特定規(guī)范的Java類，是用Java語言編寫的可重用組件。它的設(shè)計原則是：具體的公共類，無參的構(gòu)造方法，私有屬性且實現(xiàn)了軟代碼。同時，它還有以下特性[8]：①易于編寫和維護；②可實現(xiàn)代碼重用；③便于傳輸，不限于本地或網(wǎng)絡(luò)；④可以其它部件的模式進行工作。

（3）JDBC技術(shù)。JDBC是以接口與實現(xiàn)相分離的思想而設(shè)計的一種使用Java語言訪問數(shù)據(jù)庫的規(guī)范[9]。它有以下4種類型：①JDBC的調(diào)用完全委托給其它編程接口實現(xiàn)，該實現(xiàn)方式比較依賴于本地程序，可移植性差；②部分基于Java語言。這種連接方式使用了Java和本地的客戶端代碼。相比于只使用Java編寫，其性能更加優(yōu)越，但便攜性較差；③全部基于Java語言。該類型驅(qū)動實現(xiàn)了應(yīng)用和數(shù)據(jù)庫兩個服務(wù)器相互分離，驅(qū)動程序由某中間服務(wù)器提供，其缺點是客戶端與服務(wù)器必須使用完全相同的驅(qū)動程序；④采用純Java語言。該類型的驅(qū)動程序只采用Java語言實現(xiàn)，因此可以對數(shù)據(jù)庫進行直接的訪問和控制[10]。

2平臺設(shè)計

2.1功能需求分析

功能需求分析是針對系統(tǒng)功能模塊的劃分而進行的，其分析的好壞，直接決定了整個系統(tǒng)的功能是否完備。在該階段，分析人員需要根據(jù)用戶需求準確地對系統(tǒng)進行功能劃分，并進行模型轉(zhuǎn)化。在線學習互動平臺的功能需求，簡要概括為資源管理功能、用戶管理功能、互動功能。endprint

（1）資源管理功能。在線學習平臺的資源是各種視頻課程資源，該模塊需要對平臺上的各種視頻資源進行播放、刪除等管理。如：普通用戶可以對平臺的資源進行下載和播放等操作。

（2）用戶管理功能。平臺用戶分為未登錄用戶和已登錄用戶，未登錄用戶只能訪問平臺公共部分。未登錄用戶又分為未注冊用戶和已注冊用戶兩類，已注冊用戶直接登錄即可正常使用在線學習平臺，未注冊用戶則需先注冊后登錄才能正常使用。用戶登錄成功后可以增補和修改自己的信息。

（3）互動功能。在任何學習環(huán)境中，互動交流都是學習中不可或缺的一個關(guān)鍵部分。本平臺互動模塊分為用戶之間的互動以及用戶與平臺間的交互。用戶之間交互可以通過聊天室功能實現(xiàn)，而用戶與平臺間的互動則通過彈幕形式實現(xiàn)。

2.2功能模塊設(shè)計

本平臺采用MVC三層模式進行開發(fā)，主要實現(xiàn)視頻的播放和下載功能。其前端頁面為JSP頁面，模型層為JavaBean，控制層為servlet。通過前面的需求分析和技術(shù)分析，確定了本平臺可分為登錄/注冊模塊、用戶管理模塊、課程資源管理模塊、互動交流模塊設(shè)計4個子模塊。由此可以看到，本平臺具有很好的可擴展性，模塊之間相互獨立，通過公用的數(shù)據(jù)庫實現(xiàn)數(shù)據(jù)共享。

（1）登錄/注冊模塊設(shè)計。登錄/注冊模塊首先必須提供新用戶注冊功能，引導用戶填寫基本資料，未注冊的用戶為非法用戶，無法正常使用系統(tǒng)。其次必須提供用戶登錄訪問功能，根據(jù)用戶的輸入信息驗證用戶是否合法，并驗證其密碼的正確性，驗證成功后，跳轉(zhuǎn)到用戶主頁。

（2）用戶管理模塊設(shè)計。用戶管理模塊給予用戶管理自己信息的功能。用戶注冊時，可能存在信息不全的情況，后續(xù)還可能有變更，可以在平臺上進行增補修改。

（3）資源管理模塊設(shè)計。資源管理模塊主要實現(xiàn)管理員共享課程視頻資源，并且可以增、刪、改、查所有課程資源，而學生用戶則只具有對資源進行查找、播放的功能。

（4）互動交流模塊設(shè)計?；咏涣髂K提供用戶進行評論、討論等交流學習的平臺，用戶登錄后，可以瀏覽評論、回復評論、發(fā)送彈幕、視頻交流等。

2.3數(shù)據(jù)庫設(shè)計

數(shù)據(jù)庫設(shè)計在系統(tǒng)設(shè)計中起著非常重要的作用，是系統(tǒng)設(shè)計的起點，數(shù)據(jù)庫設(shè)計直接影響系統(tǒng)開發(fā)效率[11]。為了提高數(shù)據(jù)存儲和訪問效率，根據(jù)平臺功能模塊以及系統(tǒng)需求，在數(shù)據(jù)庫內(nèi)建立了多個數(shù)據(jù)表，數(shù)據(jù)表詳細信息如下：

（1）用戶users表。用戶是在線學習互動平臺中最基本的實體，也是數(shù)量最龐大的群體，在設(shè)計數(shù)據(jù)表時要著重考慮用戶的關(guān)鍵屬性（見表1）。

（2）視頻Videos表。視頻數(shù)據(jù)是在線學習互動平臺的重要組成部分，每個視頻有唯一編號，每個視頻也有其所屬的類別（見表2）。

（3）評論Comment表。學員在觀看完視頻后，可以對視頻內(nèi)容進行評論，給其他學員提供參考（見表3）。

（4）彈幕表。彈幕是指在觀看視頻過程中對視頻內(nèi)容進行評價，同時也是在線互動方式的體現(xiàn)（見表4）。

3平臺實現(xiàn)

3.1主界面與登錄/注冊實現(xiàn)

本平臺設(shè)計風格與愛慕課網(wǎng)站風格類似，用戶無需登錄即可訪問平臺主界面，只是一些評論和彈幕等功能無法使用。用戶需登錄后才能訪問自己的主界面。在登錄/注冊模塊中，平臺可以對后臺數(shù)據(jù)庫的users表進行查詢和插入。

（1）模型層實現(xiàn)。根據(jù)數(shù)據(jù)庫中的表設(shè)計，把所有用戶信息用Users這一JavaBean進行封裝，部分代碼如下：

package com.mooc.model；

public class Users {

private Integer user_id；

private String user_name；

private String password；

private String email；

private String mobile；

public Integer getUser_id（） {

return user_id；

}

public void setUser_id（Integer user_id） {

this.user_id = user_id；

}

}

數(shù)據(jù)庫連接類的設(shè)計核心代碼如下：

public class DBConnection {

private static final String driver = "com.mysql.jdbc.Driver"； //獲得數(shù)據(jù)庫驅(qū)動

//獲取連接

private static final String url="jdbc：mysql：//localhost：3306/stdy？useUnicode=true&characterEncoding=UTF8"；

private static final String username="root"；//用戶名

private static final String password="root"；//數(shù)據(jù)庫密碼

private static Connection conn=null；

//定義靜態(tài)模塊

static

{

try

{

Class.forName（driver）；

}

catch（Exception ex）

{

ex.printStackTrace（）；endprint

}

}

public static Connection getConnection（） throws SQLException {

// 采用TODO 自動生成的方法存根

if（conn==null）

{

conn = DriverManager.getConnection（url， username， password）；

return conn；

}

return conn；

}

}

（2）控制層設(shè)計?？刂茖邮褂肧ervlet，用戶在登錄頁上輸入用戶名和密碼，然后與數(shù)據(jù)庫中用戶表上的相應(yīng)記錄進行對比。若對比驗證通過，則跳轉(zhuǎn)到用戶自己的主頁視圖，否則跳轉(zhuǎn)到平臺的主頁視圖重新登錄。其核心代碼如下：

protected void doPost（HttpServletRequest request， HttpServletResponse response）

throws ServletException， IOException {

// TODO Autogenerated method stub

response.setCharacterEncoding（"utf8"）；

request.setCharacterEncoding（"utf8"）；

String action = request.getParameter（"action"）；

String username = request.getParameter（"username"）；

String password = request.getParameter（"password"）；

HttpSession session = request.getSession（）；

session.setAttribute（"action"，action）；

PrintWriter out=response.getWriter（）；

Connection connection；

try {

connection = DBConnection.getConnection（）；

String sql = "SELECT * FROM users WHERE user_name=" + "'" + username + "'" + " AND password = " + "'"

+ password + "'"；

PreparedStatement ps = connection.prepareStatement（sql）；

ResultSet rs = ps.executeQuery（）；

if （！rs.next（）） {

//response.sendRedirect（"pages/login.jsp"）；

out.println（""）；

//ps.close（）；

//connection.close（）；

} else {

session.setAttribute（"username"， rs.getString（2））；

session.setAttribute（"password"， rs.getString（3））；

response.sendRedirect（"pages/index1.jsp"）；

//ps.close（）；

//connection.close（）；

//rs.close（）；

}

} catch （Exception e） {

// TODO Autogenerated catch block

e.printStackTrace（）；

}

}

（3）視圖層實現(xiàn)。在用戶登錄前顯示的是公用的主頁面index1.jsp，登錄成功后，呈現(xiàn)的是用戶自己的主頁面。

3.2用戶管理模塊實現(xiàn)

用戶管理即用戶成功登錄平臺后，對自己的個人信息進行增補、修改等管理操作。然后根據(jù)用戶在平臺視圖層上的操作，更新后臺數(shù)據(jù)庫中的相應(yīng)記錄信息。相應(yīng)的操作代碼封裝在UserDao類中。

若用戶在注冊時信息不全，注冊成功后，登錄進行用戶信息的補全。其代碼如下：

public void addUser（Users u） throws Exception{

java.sql.Connection conn=DBConnection.getConnection（）；

String sql=""+

"insert into users"+

"（user_id，user_name，password，email，mobile）"

+ "values（" + "？，？，？，？，？）"；

PreparedStatement ptmt=conn.prepareStatement（sql）；endprint

ptmt.setInt（1， u.getUser_id（））；

ptmt.setString（2，u.getUser_name（） ）；

ptmt.setString（3， u.getPassword（））；

ptmt.setString（4， u.getEmail（））；

ptmt.setString（5， u.getMobile（））；

ptmt.execute（）；

}

用戶注冊成功一段時間后，若有信息變更則需更新數(shù)據(jù)庫，刪除和查詢等操作與上述操作相似，在此不再贅述。

3.3資源管理實現(xiàn)

資源管理是指對平臺上的視頻課程等資源進行相應(yīng)管理，主要實現(xiàn)了視頻的查找、播放和下載功能。用戶登錄后查找相應(yīng)的視頻課程，然后進行播放學習。

視頻資源管理中，視頻查找功能的核心代碼如下：

// response.setCharacterEncoding（"utf8"）；

request.setCharacterEncoding（"utf8"）；

response.setCharacterEncoding（"utf8"）；

String fimname = null；

if （request.getParameter（"sname"） ！= null） {

fimname = new String（request.getParameter（"sname"）.getBytes（"ISO88591"），"utf8"）； }

// String fimname=request.getParameter（"sname"）；//影片索引名

//System.out.println（fimname）；

session.setAttribute（"fimname"，fimname）；

String filpath=""；//影片物理地址

String namepath=""；//影片物理名

String str="select video_url from videoes where video_name='"+fimname+"'"；

ResultSet rslook=rst.getResult（str）；

if（！rslook.next（））{

out.println（""）；

}

else{//通過結(jié)果集獲得影片物理名，并設(shè)置影片物理地址

namepath=rslook.getString（"video_url"）；

filpath="./public/"+namepath；

//System.out.println（filpath）；

}

3.4互動交流實現(xiàn)

該模塊是用戶進行學習交流的模塊，用戶可以在該模塊中發(fā)送文字信息。在觀看過程中若遇到不懂的知識，用戶可以在聊天室詢問或與其他用戶討論。其核心代碼如下：

protected void doGet（HttpServletRequest request， HttpServletResponse response） throws ServletException， IOException {

// TODO Autogenerated method stub

//doPost（request， response）；

request.setCharacterEncoding（"utf8"）；

response.setCharacterEncoding（"utf8"）；

HttpSession session=request.getSession（）；

if（session.getAttribute（"chatindex"） == null）{

session.setAttribute（"chatindex"， 0）；

}

Integer oldindex = （int）session.getAttribute（"chatindex"）；

Integer newindex = list.size（）；

String getmsg = ""；

for （int i = oldindex； i < newindex； i++） {

getmsg = getmsg + list.get（i）+"&"；

//System.out.println（"for ："+getmsg）；

}

session.setAttribute（"chatindex"， newindex）；

response.setContentType（"text/xml；charset=UTF8"）；

PrintWriter out = response.getWriter（）；

if（getmsg == ""）{

getmsg = "0" ；

}

out.write（getmsg）；endprint

out.close（）；

}

3.5彈幕功能實現(xiàn)

彈幕是指觀看視頻時，從屏幕飄過的猶如幕布的大量吐槽評論。在觀看過程中，用戶可以發(fā)送不同顏色的彈幕來增加娛樂性。其程序運行結(jié)果如圖2所示。

圖2彈幕

4結(jié)語

本文根據(jù)MOOC資源共享、開放互動的理念，采用MVC三層開發(fā)模式，即JavaBean（Model）+Servlet（View）+JSP（Control）體系，設(shè)計了一個基于MVC開發(fā)模式的在線學習互動平臺。實踐結(jié)果表明，該平臺系統(tǒng)結(jié)構(gòu)清晰，保證了數(shù)據(jù)安全，具有很好的運行效果，增強了系統(tǒng)的可擴展性和可維護性。平臺實現(xiàn)了視頻點播、視頻發(fā)布、視頻管理、互動交流等功能，另外還加入了彈幕功能，增加了在線學習的趣味性。在信息技術(shù)高速發(fā)展的時代，人們越來越依賴于網(wǎng)絡(luò)教育。因此，基于“互聯(lián)網(wǎng)+”的在線學習平臺的研究將對在線教育的發(fā)展起到重要推動作用。下一步還需要考慮在平臺運行過程中大規(guī)模課程的存儲和并發(fā)訪問問題。

參考文獻參考文獻：

[1]陳肖庚，王頂明.MOOC的發(fā)展歷程與主要特征分析[J].現(xiàn)代教育技術(shù)，2013，23（11）：510.

[2]劉欣.基于MVC模式的Web軟件系統(tǒng)開發(fā)框架設(shè)計與實現(xiàn)[D].濟南：山東大學，2013.

[3]DAODE HE， TONG Y S， LINGLING W U， et al. The teaching reform discussion of JSP program design course based on the creative learning[J]. Computer Knowledge & Technology， 2014（8）：3034.

[4]馮相忠，王萍.基于J2EE平臺的MVC模式的辦公日志系統(tǒng)的實現(xiàn)[J].計算機應(yīng)用，2005，25（12）：29642965.

[5]SUPAARTAGORN C. PHP framework for database management based on MVC pattern[J]. International Journal of Computer Science & Information Technology， 2011，3（2）：437444.

[6]王民.基于校園網(wǎng)的英語個性化教學平臺設(shè)計與實現(xiàn)[D].西安：西安石油大學，2014.

[7]郭旭，茅俊杰，何嘉權(quán)，等.基于MOOC的在線教學實驗平臺的設(shè)計與實現(xiàn)[J].計算機工程與設(shè)計，2016，37（2）：545551.

[8]和莉.基于web2.0的網(wǎng)絡(luò)學習平臺的設(shè)計與實現(xiàn)[J].電腦知識與技術(shù)，2014（31）：73357338.

[9]谷敏，胡靜遠.強類型面向?qū)ο髣討B(tài)SQL生成器的設(shè)計與實現(xiàn)[J].信息技術(shù)，2016（9）：114120.

[10]黎華，張曉盼，龔珍.GIS專業(yè)的Java程序設(shè)計教學改革初探[J].測繪通報，2017（4）：145148.

[11]托馬斯M康諾利，卡洛琳E貝格，康諾利，等.數(shù)據(jù)庫系統(tǒng)：設(shè)計、實現(xiàn)與管理[M].北京：機械工業(yè)出版社，2016.

責任編輯（責任編輯：黃健）endprint