基于SpringBoot的网上在线教育系统的设计与实现

马英瑞 陈廉元 李娟 邹红 王冬梅

摘要：系统基于MVC模式JavaEE技术，使用MyEclipse 2017 CI 10 编译器，采用Mysql关系型数据库并结合HTML+CSS的前端技术进行系统开发，完成用户管理、新闻资讯管理、学生管理、教师管理、课程资料管理、留言管理、系统简介设置等功能模块。通过浏览器与服务器通信进行数据的交互，实现集人性化、高效率、便捷等优点于一身的在线教育平台。

关键词：在线教育平台;前端技术;2017 CI 10 编译器;MVC模式

中图分类号：TP311        文献标识码：A

文章编号：1009-3044（2021）13-0077-03

Abstract： The system is based on MVC pattern Java EE Technology， compiled by Myeclipse 2017CI 10 compiler， and developed by Mysql relational database with HTML + CSS front-end technology， complete user management， News Information Management， student management， teacher management， curriculum management， message management， system introduction settings and other functional modules. Through the Browser and server communication for data exchange and change， to achieve a human， efficient， convenient and other advantages of online education platform.

Key words： online education platform; Front-end technology; 2017 CI 10 Compiler; MVC model

1 引言

知識经济时代的到来，学习模式由传统的线下学习模式转变为网络化学习模式，又称在线学习。学员通过网上教育平台，应用网络进行在线学习的一种全新方式，这种在线学习方式是由多媒体网络学习资源、网上学习社区及网络技术平台构成的全新的学习环境。相对于传统学习模式来说，它具有尊重学习的个性化、互动灵活、激发学习动力以及不受时空限制等优势。2012年起，美国顶尖大学也陆续设立了网络学习平台，MOOC（Massive Open Oniline Course，大规模开放网络课程）以教育“平台”方式在美国爆发，美国学术界对在线教育的态度也是不断转变，在美国超过2800所大学中，有70%以上的学术领袖认为在线教育与面授教育效果一样或者更好[1]。

2 相关技术分析

本设计采用MVC模式开发，主要将代码分为View层、Model层和Controller层。View层实现用户的交互，只对数据采集、处理和用户请求进行处理，不对业务流程进行操作[2]。Model层制定业务流程或业务状态的处理和业务规则，在接受了视图请求的数据后，返回处理之后的结果。MVC 最主要的核心就是业务模型的设计，目前流行的EJB模型就是一个典型的应用例子，它从应用技术实现的角度对模型做了进一步划分，以便充分利用现有组件，但是它不能作为应用设计模型的框架[3]。Controller层接受用户的请求，然后将视图和模型匹配到一起，然后完成用户请求，它对控制层进行了明确的划分，可以清晰地显示出，应该选择怎样的模型和视图才能完成用户的请求，但是控制层不做全部数据的处理[4]。

本设计采用SSM框架即SpringMVC+Spring+Mybatis，应用SSM框架的优势在于所设计的Web应用程序具有层次清晰、升级更新操作不影响正常使用、允许多次使用的特点。SpringMVC使各板块分离，Spring使开发更灵活方便，使用Mybatis让开发者直接对对象进行操纵，各层次分工明细，并实现各个层次间的解耦合，让代码更加的灵活精简[5]。

3 系统设计

3.1 各模块设计

系统能够实现的功能主要分为以下八个功能模块：其中包含用户管理模块、课程资料上传模块、课程资料管理模块、个人创作管理模块、新闻资讯管理模块、留言信息管理模块、评论信息管理模块以及导出功能模块。

1）用户管理模块

用户管理模块是面向所有用户的，权限为普通用户的只能对自己的部分进行修改，（例如修改个人资料、删除评论、修改密码等）。超级管理员拥有最高权限，可以对整个系统的数据进行管理，可以对学生信息、教师信息、系统资料等进行增删操作。

2）课程资料上传模块

上传功能主要由普通用户使用，学生用户和教师用户上传课程资料，根据课程资料的上传时间决定上传顺序并生成上传列表，用户可以在上传列表查看历史上传，可以对历史数据进行管理。

3）课程资料管理模块

教师用户创建新的课程资料，点击课程资料录入按钮，依次填写新增课程资料的名称、备注以及课程资料在本地的物理地址，点击提交按钮，提交的数据将保存在数据库中，刷新课程资料页面，新增的课程资料就会显示在页面上，同时上传的资料右边有删除和编辑按钮，可以对上传的资料进行编辑或删除。

4）个人创作管理模块

点击个人创作录入按钮，依次填写新增个人创作的名称、备注以及个人创作的内容，点击提交按钮，提交的数据将保存在数据库中，刷新个人创作页面，新增的个人创作就会显示在页面上，同时上传的资料右边有删除和编辑按钮，可以对上传的资料进行编辑或删除。

5）新闻资讯管理模块

管理员点击新闻添加子菜单下的添加新闻数据，填写新闻标题、新闻内容、新闻类别、新闻图片（例如学校最新的规章制度），待提交成功后，刷新新闻资讯页面，新增资讯会显示在页面上。

6）留言信息管理模块

登录系统的用户，可在留言板对系统提出意见，管理员在后台可以查看或键入关键字搜索留言信息，对留言信息进行管理。

7）评论信息管理模块

登录系统的用户，可以在课程资料详情页下方点击添加评论，管理员可以在后台查看该评论信息，并拥有对其进行管理（包括删除）的权限。

8）导出功能模块

系统的信息详情页，信息列表页可以导出信息，用户选择导出格式和保存文件的路径，导出至Excel中，下载到本地，可以在本地的Excel中随意编辑。

3.2 数据库设计

根据系统分析阶段所得出的结论确定在线教育平台中存在着多个实体，系统的数据库共包含了用户信息、留言信息、教师信息、课程资料信息、个人创作、留言、评论等6个数据表。

1）用户信息表（allusers表）：包含用户id、账号、密码、等个人基本信息。

2）个人创作信息表（gerenchuangzuo表）：包含个人id、名称、图片、内容、发布人等信息。

3）教师信息表（jiaoshixinxi表）：包括教师id、工号、密码、姓名、性别、身份证、电话、课程、籍贯、照片信息。

4）课程资料信息表（kechengziliao表）：包含id、资料、内容、图片、视频、工号、资料简介等相关信息。

5）留言信息表（liuyanban表）：包含留言id、昵称、留言内容、回复内容、留言人等信息。

6）评论信息表（pinglun表）：包含评论id、评论内容、评分、评论人信息。

4 系统实现

4.1 登录模块的实现

系统的所有资源只有在用户登录状态下才可以访问，登录时用户提交的表单会和数据库中的用户信息进行比对，各项信息一致才能通过校验，在系统中进行下一步操作。主要步骤为當用户输入账号和密码后，系统先校验账号和密码的格式是否正确，如果格式错误提示相关错误，验证格式无误后前端的login.jsp页面会向后端发送登录请求，通过调用代码中的Mainctrl类里的dopost方法来验证。验证成功后，将用户名显示在系统首页上。网站的首页面实现如图1所示。

4.2 用户子系统模块的实现

1）用户首页模块

2）注册模块

此页面实现普通用户的注册，必须注册登录后才能使用，用户名不允许重复，如果重复将会注册失败，并弹出相应的提示，通过Javascript实现对输入的验证。用户注册关键代码如下所示。

<%

HashMap ext = new HashMap（）;

ext.put（"issh"，"否"）;

new CommDAO（）.insert（request，response，"userRegister"，ext，true，false，"index.jsp"）;

%>

3）留言模块

用户在留言板查看留言信息，先使用sql语句查询出所有留言表的数据，然后调用PageManager.getPages（url，4，sql， request ），返回一个ArrayList的对象，在for循环中使用jsp得到每个ArrayList对象的数据，然后放入页面模板中，用户点击我要留言则跳转至留言页面（lyb.jsp）。

4）评论模块

系统使用sql语句查询出所有课程资料表的数据展示在课程资料页，用户在课程资料页查看课程资料信息和评论信息，点击评论按钮，跳转至添加评论页面，点击添加评论则将编辑好的评论数据封装在HashMap中，通过调用CommDAO的insert方法将提交的评论内容插入数据库的评论信息表中，评论管理页面则调PageManager.getPages（url，4，sql， request ）方法，返回一个ArrayList类型的对象，最后通过for循环，让jsp得到每个ArrayList对象的数据，放入到页面模板中。

4.3 管理员子系统模块的实现

1）用户管理模块

用户登录后，在后台管理中查看用户信息，后台通过sql语句查询用户表中所有数据，通过调用PageManager.getPages（url，4，sql， request ）方法，返回一个ArrayList类型的对象，使用for循环，让jsp得到每个对象的数据，在for循环里，使用jsp得到每个ArrayList对象的数据，在前端的jsp页面中解析接收到的ArrayList类型的对象，得到其各个键值对的值。用户管理界面如图2所示。

2）个人资料模块

用户点击登录填写账号信息登录后，会切换内容为“某某用户欢迎您”和历史订单，并给出注销链接。当用户登录成功后会将个人信息保存在session作用域中，点击自己的用户名时，会跳转到个人详细信息页面，由后台通过Freemarker取出session作用域中的用户信息进行动态渲染。同时页面上会显示修改个人信息和修改密码的按钮，这时客户可以修改自己的登录密码以保障账号的安全性，防止被人窃取账号，通过UserController.java的updatePassword（）实现，也可以根据自己的个人信息是否变动做出相应的修改，通过updateUserInfo（）实现。

密码修改关键代码如下所示。

if（ac.equals（"uppass"））

{

String olduserpass = request.getParameter（"ymm"）;

String userpass = request.getParameter（"xmm1"）;

String copyuserpass = request.getParameter（"xmm2"）;

HashMap m = dao.getmaps（"userName"，（String）request.getSession（）.getAttribute（"username"）， "userRegister"）;   if（！（（（String）m.get（"pwd"））.equals（olduserpass）））{

request.setAttribute（"error"， ""）;

go（"mod2.jsp"， request， response）;

}else{

String id = （String）user.get（"id"）;

String sql = "update userRegister set pwd='"+userpass+"' where userName='"+（String）request.getSession（）.getAttribute（"username"）+"'";

dao.commOper（sql）;

request.setAttribute（"suc"， ""）;

go（"mod2.jsp"， request， response）;

}

}

3）課程资料管理模块

添加课程资料信息时，输入必填字段后，表现层的KechengziliaoController接受传过来的课程资料信息参数，再调用KechengziliaoController类的addKechengzi-liao方法，经过KechengziliaoService业务层到KechengziliaoMapper持久层的处理，完成对整个添加课程资料信息的操作。addKechengziliao方法也和用户管理中的addUser方法类似，同时做添加和修改工作。

4）个人创作管理模块

查找个人创作时，输入需要查找的个人创作名，调用getData方法获取所有数据并且进行分页，把获取到的所有数据显示到视图上，这时候只需要用脚本方法便能快速查找，不涉及对数据库操作。

删除个人创作时，选择需要删除的个人创作进行删除，把主键的uId传到GerenchuangzuoController控制器，再调用控制器的deleteGerenchuangzuo方法，数据经过GerenchuangzuoService业务层解析和处理，请求GerenchuangzuoMapper持久层调用deleteByPrimaryKey方法操作数据库将个人创作数据从数据库中删除。

4.4 文件上传模块的实现

把上传文件单独编写成一个FilesUpload.类，在该类中定义一个具体实现上传文件的方法，该方法接收两个参数，通过ServletActionContext获取上传到服务器的文件路径，通过封装的FileUtils的copyFile（）方法将用户上传的文件拷贝到目标文件中即实现了文件上传到服务器。返回保存文件的相对路径，选定的文件上传后存放在代码中WEB-INF文件下的upload文件夹，先检测该文件夹是否存在，如果不存在就先创建。

4.5 文件下载模块的实现

通过JSP页面传入文件的路径，如果该文件路径包含中文名。需要通过getBytes方法以ISO-8859-1编码格式接收页面传入的参数，在把传入的参数转换成UTF-8的编码格式解决中文乱码。通getResourceAsStream方法获取文件的下载流，在该类中也同时编写一个获取下载文件的文件名，使用substring方法获取文件名后转换编码格式防止输出的文件名是一群乱码，返回该文件名。用户在页面点击下载链接后弹出下载文件提示框，在弹出的提示框中点击下载就可以下载文件。

5 结束语

本系统能够实现在线教学模式，为学生提供网络自学平台，为教师提供新的多媒体网络教学手段，能让学生不在实体课堂也能体验到学校的学习氛围，打破时空的局限性。当下在线教育学习现状转变了人们陈旧的学习思维方式，通过开发本系统对网络在线教育系统的分析与设计，完成了一个实用、便捷的在线教育学习系统，但它仍有许多可以改进之处，功能之间的过渡还可以更加自然。

参考文献：

[1]  李旭光. 翻转课堂的设计与实现[D].济南：山东大学，2019.

[2] HorstmannW S. 最新Java2核心技术卷工：原理[M].李如豹，刚冬梅，张雪莲，等译.北京：机械工业出版社，2012.

[3] Oaks S.JavaTM安全[M].北京：中国电力出版社，2002.

[4] Reese G.JDBC与Java数据库编程[M].北京：中国电力出版社，2002.

[5] Knuth D.The Art of Computer Programming[M].北京：清华大学出版社，2012.

[6] Smith E A.Java Server Pages[M].北京：电子工业出版社，2010.

[7] 高张，康小军.提高Tomcat服务器运行性能的研究[J].计算机与数字工程，2008，36（10）：203-205.

【通联编辑：王力】