基于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