基于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所示。
图5-10学习资料品界面图
管理员点击资料类型,在资料类型管理页面输入资料类型等信息,然后进行搜索、增加或删除资料类型等操作,如图5-11所示。
图5-11资料类型界面图
管理员点击试题管理,在试题管理页面输入在线测试、试题名称、分值、答案、类型等信息,然后进行搜索、增加或删除试题管理等操作,如图5-12所示。
图5-12试题管理界面图
管理员点击留言板管理,在留言板管理页面输入用户名、留言内容、留言图片、回复内容、回复图片等信息,然后进行搜索、增加或删除留言板等操作,如图5-13所示。
图5-13留言板管理界面图
管理员点击在线测试管理,在在线测试管理页面输入在线测试名称、考试时长(分钟)、在线测试状态等信息,然后进行搜索、增加或删除在线测试等操作,如图5-14所示。
图5-14在线测试管理界面图
管理员点击交流论坛,在交流论坛页面输入帖子标题、用户名、状态、是否置顶、置顶时间等信息,然后进行搜索或删除交流论坛等操作,如图5-15所示。
图5-15交流论坛界面图
管理员点击考试记录,在考试记录页面输入姓名、在线测试、考试得分、准确率、错误率等信息,然后进行删除考试记录等操作,如图5-16所示。
图5-16考试记录界面图