基于MVC開發模式的在線學習互動平臺設計與實現

賈衛峰 林木興 高華

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

關鍵詞：互聯網+；在線學習；MVC；Java平臺

DOIDOI：10.11907/rjdk.172557

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

0引言

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

1相關技術

1.1開發模式

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

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

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

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

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

1.2JSP前端開發技術

用于開發系統前端頁面的技術有很多，本平臺主要采用JSP技術，并結合CSS和Javascript技術來搭建平臺前端頁面。JSP是一種服務器端頁面，是借鑒了ASP技術而產生的新一代Web開發技術。用標記和腳本生成動態頁面內容是JSP的一大特色[3]。

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

1.3后臺開發技術

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

（1）Java技術。Java是跨平臺的面向對象編程語言，其功能很強大，而且摒除了很多難以理解的概念，使其比較容易理解。由于Java語言常常要與數據庫進行交互，于是便衍生出Java Servlet、JDBC，以及JSP技術[6]。

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

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

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

2平臺設計

2.1功能需求分析

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

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

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

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

2.2功能模塊設計

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

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

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

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

（4）互動交流模塊設計。互動交流模塊提供用戶進行評論、討論等交流學習的平臺，用戶登錄后，可以瀏覽評論、回復評論、發送彈幕、視頻交流等。

2.3數據庫設計

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

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

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

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

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

3平臺實現

3.1主界面與登錄/注冊實現

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

（1）模型層實現。根據數據庫中的表設計，把所有用戶信息用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；

}

}

數據庫連接類的設計核心代碼如下：

public class DBConnection {

private static final String driver = "com.mysql.jdbc.Driver"； //獲得數據庫驅動

//獲取連接

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"；//數據庫密碼

private static Connection conn=null；

//定義靜態模塊

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）控制層設計。控制層使用Servlet，用戶在登錄頁上輸入用戶名和密碼，然后與數據庫中用戶表上的相應記錄進行對比。若對比驗證通過，則跳轉到用戶自己的主頁視圖，否則跳轉到平臺的主頁視圖重新登錄。其核心代碼如下：

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）視圖層實現。在用戶登錄前顯示的是公用的主頁面index1.jsp，登錄成功后，呈現的是用戶自己的主頁面。

3.2用戶管理模塊實現

用戶管理即用戶成功登錄平臺后，對自己的個人信息進行增補、修改等管理操作。然后根據用戶在平臺視圖層上的操作，更新后臺數據庫中的相應記錄信息。相應的操作代碼封裝在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（）；

}

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

3.3資源管理實現

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

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

// 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{//通過結果集獲得影片物理名，并設置影片物理地址

namepath=rslook.getString（"video_url"）；

filpath="./public/"+namepath；

//System.out.println（filpath）；

}

3.4互動交流實現

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

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彈幕功能實現

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

圖2彈幕

4結語

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

參考文獻參考文獻：

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

[2]劉欣.基于MVC模式的Web軟件系統開發框架設計與實現[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模式的辦公日志系統的實現[J].計算機應用，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]王民.基于校園網的英語個性化教學平臺設計與實現[D].西安：西安石油大學，2014.

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

[8]和莉.基于web2.0的網絡學習平臺的設計與實現[J].電腦知識與技術，2014（31）：73357338.

[9]谷敏，胡靜遠.強類型面向對象動態SQL生成器的設計與實現[J].信息技術，2016（9）：114120.

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

[11]托馬斯M康諾利，卡洛琳E貝格，康諾利，等.數據庫系統：設計、實現與管理[M].北京：機械工業出版社，2016.

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