springboot在线教学平台

基于springboot+vue实现的在线教学平台（源码+L文+ppt）4-069

4.1系统结构设计

这些功能可以充分满足在线教学平台的需求。此系统功能较为全面如下图系统功能结构如图4-1所示。

图4-1功能结构图

4.2系统功能模块设计

在线教学平台的使用者主要有二类用户，一类是管理员，他拥有整个系统的最高权限，然后是学员，他具有管理员给予级别的权限，都只能对自己的个人信息进行操作。系统根据这二类用户，划分出了二大功能模块。

4.3 数据库设计

4.3.1 概念模型设计

概念模型是对现实中的问题出现的事物的进行描述，ER图是由实体线以及关联构成的图，E-R图可以明确地叙述系统中涵盖的实体线相互关系。

在线测试E-R图如图4-2所示：

图4-2在线测试E-R图

考试记录E-R图如图4-3所示：

图4-3考试记录E-R图

试题信息E-R图如图4-4所示：

图4-4试题信息E-R图

学员信息E-R图如图4-5所示：

图4-5学员信息E-R图

学习资料E-R图如图4-6所示：

图4-6学习资料E-R图

在线教学平台总体E-R图如图4-7所示：

图4-7在线教学平台总体E-R图

4.3.2 数据库表结构

本论文中的在线教学平台采用MySQL数据库，系统中的所有对象以及对象的所有属性都将在下列表格中展现。

表4-1：收藏表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
userid	bigint		用户id
refid	bigint		商品id
tablename	varchar	200	表名
name	varchar	200	名称
picture	longtext	4294967295	图片
type	varchar	200	类型		1
inteltype	varchar	200	推荐类型
remark	varchar	200	备注

表4-2：留言板

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
userid	bigint		留言人id
username	varchar	200	用户名
avatarurl	longtext	4294967295	头像
content	longtext	4294967295	留言内容
cpicture	longtext	4294967295	留言图片
reply	longtext	4294967295	回复内容
rpicture	longtext	4294967295	回复图片

表4-3：论坛交流

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
title	varchar	200	帖子标题
content	longtext	4294967295	帖子内容
parentid	bigint		父节点id
userid	bigint		用户id
username	varchar	200	用户名
avatarurl	longtext	4294967295	头像
isdone	varchar	200	状态
istop	int		是否置顶		0
toptime	datetime		置顶时间

表4-4：考试记录表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
userid	bigint		用户id
username	varchar	200	用户名
paperid	bigint		在线测试id（外键）
papername	varchar	200	在线测试名称
questionid	bigint		试题id（外键）
questionname	varchar	200	试题名称
options	longtext	4294967295	选项，json字符串
score	bigint		分值		0
answer	varchar	200	正确答案
analysis	longtext	4294967295	答案解析
ismark	bigint		是否批卷		0
type	bigint		试题类型，0：单选题 1：多选题 2：判断题 3：填空题（暂不考虑多项填空） 4:主观题		0
myscore	bigint		试题得分		0
myanswer	varchar	200	考生答案

表4-5：试题库表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
questionname	varchar	200	试题名称
options	longtext	4294967295	选项，json字符串
score	bigint		分值		0
answer	varchar	200	正确答案
analysis	longtext	4294967295	答案解析
type	bigint		试题类型，0：单选题 1：多选题 2：判断题 3：填空题（暂不考虑多项填空） 4:主观题		0
sequence	bigint		试题排序，值越大排越前面		100

表4-6：试题表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
paperid	bigint		所属在线测试id（外键）
papername	varchar	200	在线测试名称
questionname	varchar	200	试题名称
options	longtext	4294967295	选项，json字符串
score	bigint		分值		0
answer	varchar	200	正确答案
analysis	longtext	4294967295	答案解析
type	bigint		试题类型，0：单选题 1：多选题 2：判断题 3：填空题（暂不考虑多项填空）4:主观题		0
sequence	bigint		试题排序，值越大排越前面		100

表4-7：资料类型

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
ziliaoleixing	varchar	200	资料类型

表4-8：在线测试表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
name	varchar	200	在线测试名称
time	int		考试时长(分钟)
status	int		在线测试状态		0

表4-9：学员

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
xueyuanxuehao	varchar	200	学员学号
mima	varchar	200	密码
xueyuanxingming	varchar	200	学员姓名
xingbie	varchar	200	性别
shouji	varchar	200	手机
youxiang	varchar	200	邮箱
touxiang	longtext	4294967295	头像

表4-10：配置文件

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
name	varchar	100	配置参数名称
value	varchar	100	配置参数值
url	varchar	500	url

表4-11：学习资料

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
addtime	timestamp		创建时间		CURRENT_TIMESTAMP
ziliaomingcheng	varchar	200	资料名称
ziliaoleixing	varchar	200	资料类型
jiaoxueshipin	longtext	4294967295	教学视频
ziliaowenjian	longtext	4294967295	资料文件
fabushijian	date		发布时间
tupian	longtext	4294967295	图片
clicktime	datetime		最近点击时间
clicknum	int		点击次数		0
storeupnum	int		收藏数		0

表4-12：用户表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
username	varchar	100	用户名
password	varchar	100	密码
image	varchar	200	头像
role	varchar	100	角色		管理员
addtime	timestamp		新增时间		CURRENT_TIMESTAMP

表4-13：token表

字段名称	类型	长度	字段说明	主键	默认值
id	bigint		主键	主键
userid	bigint		用户id
username	varchar	100	用户名
tablename	varchar	100	表名
role	varchar	100	角色
token	varchar	200	密码
addtime	timestamp		新增时间		CURRENT_TIMESTAMP
expiratedtime	timestamp		过期时间		CURRENT_TIMESTAMP

4.4本章小结

本章主要是对在线教学平台进行设计，详细的说明了该系统实现所采用的架构、系统中所有的功能模块，并以表格的形式展现了系统持久层中的所有实体和实体的所有属性。明确的功能说明和详尽的数据陈列，方便将系统业务和数据联系起来，为后面的程序开发提供方便。

5 系统实现

在上一章中，本论文中的在线教学平台进行了全面的系统设计。接下来第五章对本在线教学平台的实现过程进行说明，包括对该在线教学平台所需的开发环境、运行环境的说明以及对上一章中提到的各种内容的实现。

5.1系统开发环境以及运行环境

5.1.1 系统开发环境

表5-1 开发环境

开发使用的操作系统	Windows10
开发使用的编程语言	JAVA
开发框架选择	Spring Boot
选取的数据库	MySQL
开发采用的Eclipse	IntelliJ EclipseA

5.1.2 系统运行环境

本在线教学平台的运行环境如表5-2所示。

表5-2 客户端运行环境

运行使用操作系统	Windows10
客户端软件	Chrome浏览器

5.2在线教学平台的主要功能模块实现

5.2.1前台学员功能模块

网站首页页面主要包括系统首页、学习资料、论坛交流、在线测试、留言板、个人中心等内容，并根据需要进行详细操作；如图5-1所示：

图5-1网站首页界面图

在注册流程中，学员在Vue前端填写必要信息（如用户名、密码等）并提交。前端将这些信息通过HTTP请求发送到Java后端。后端处理这些信息，检查学员名是否唯一，并将新用户数据存入MySQL数据库。完成后，后端向前端发送注册成功的确认，前端随后通知学员完成注册。这个过程实现了新用户的数据收集、验证和存储。如图5-2所示。

图5-2学员注册界面图

在登录流程中，学员首先在Vue前端界面输入用户名和密码。这些信息通过HTTP请求发送到Java后端。后端接收请求，通过与MySQL数据库交互验证用户凭证。如果认证成功，后端会返回给前端，允许学员访问系统。这个过程涵盖了从学员输入到系统验证和响应的全过程。如图5-3所示。

图5-3学员登录界面图

学员点击学习资料，在学习资料页面输入资料名称，进行查询，查看资料类型、教学视频、资料文件、发布时间、图片、点击次数、收藏数等信息，如有需要可以点击下载或者收藏等详情操作；如图5-4所示。

图5-4学习资料界面图

学员点击在线测试，在在线测试页面查看在线测试名称、考试时长(分钟)、创建时间等信息，进行详情操作；如图5-5所示。

图5-5在线测试界面图

学员点击个人中心，在个人中心页面可以修改个人资料、密码修改，还可以对修改密码、我的发布、考试记录、错题本、我的收藏进行详情操作，如图5-6所示。

图5-6个人中心界面图

5.2.2后台管理员功能模块

管理员进行登录，进入系统前在登录页面根据要求填写用户名和密码等信息，点击登录操作，如图5-7所示。

图5-7管理员登录界面图

管理员登录系统后，可以对首页、学员、学习资料、资料类型、试题管理、留言板管理、论坛交流、在线测试管理、轮播图管理、考试记录、我的信息等进行相应的操作管理，如图5-8所示。

图5-8管理员功能界图面

学员信息功能在视图层（view层)进行交互，比如点击“增加”按钮或填写学员信息表单。这些学员信息动作被视图层捕获并作为请求发送给相应的控制器层(control1er层)。控制器接收到这些请求后，调用服务层(service层)以执行相关的业务逻辑，例如验证输入数据的有效性和与数据库的交互。服务层处理完这些逻辑后，进一步与数据访问对象层（DAO层)交互，后者负责具体的数据操作如搜索、增加、更新或删除学员信息，并将操作结果返回给控制器。最终，控制器根据这些结果更新视图层，以便学员信息功能可以看到最新的信息或相应的操作反馈。在学员信息页面的输入栏中输入学员学号、学员姓名进行搜索，可以查看到学员详细信息，并根据需要进行增加或者删除等操作。如图5-9所示。

图5-9学员信息界面图

学习资料功能在视图层（view层)进行交互，比如点击“增加”按钮或填写学习资料信息表单。这些学习资料动作被视图层捕获并作为请求发送给相应的控制器层(control1er层)。控制器接收到这些请求后，调用服务层(service层)以执行相关的业务逻辑，例如验证输入数据的有效性和与数据库的交互。服务层处理完这些逻辑后，进一步与数据访问对象层（DAO层)交互，后者负责具体的数据操作如搜索、增加、更新或删除学习资料，并将操作结果返回给控制器。最终，控制器根据这些结果更新视图层，以便学习资料功能可以看到最新的信息或相应的操作反馈。在学习资料页面的输入栏中输入资料名称、资料类型进行搜索，可以查看到学习资料详细信息，并根据需要进行增加或者删除等操作。如图5-10所示。