基于Java+SpringBoot+Vue的前后端分离的线上教学平台

一、背景介绍

网上线上教学平台的设计与实现，主要实现的功能有以下几点：管理员；首页、个人中心、学员管理、资料类型管理、学习资料管理、交流论坛、我的收藏管理、试卷管理、留言板管理、试题管理、系统管理、考试管理，学员；首页、个人中心、我的收藏管理、留言板管理、考试管理，前台首页；首页、学习资料、交流论坛、试卷列表、留言反馈、个人中心、后台管理等功能

二、技术栈

• 后端：Java+SpringBoot
• 前端：Vue
• 数据库：MySQL

三、功能模块

四、详细介绍

管理员功能模块

管理员登录，通过填写注册时输入的用户名、密码、角色进行登录，如图4-1所示。

图4-1管理员登录界面图

管理员登录进入线上教学平台可以查看首页、个人中心、学员管理、资料类型管理、学习资料管理、交流论坛、我的收藏管理、试卷管理、留言板管理、试题管理、

系统管理、考试管理等信息。

学员管理，在学员管理页面中可以通过填写学号、密码、姓名、性别、头像、邮箱、手机等内容进行详情、修改、删除，如图4-2所示。还可以根据需要对资料类型管理进行详情，修改或删除等详细操作，如图4-3所示。

图4-2学员管理界面图

图4-3资料类型管理界面图

学习资料管理

在学习资料管理页面中可以查看资料名称、资料类型、图片、资料文件、教学视频、发布时间等信息，并可根据需要对已有学习资料管理进行修改或删除等操作，如图4-4所示。

图4-4学习资料管理界面图

试卷管理

在试卷管理页面中可以查看试卷名称、考试时长、试卷状态等信息，并可根据需要对已有试卷管理进行修改或删除等详细操作，如图4-5所示。

图4-5试卷管理界面图

轮播图

该页面为轮播图管理界面。管理员可以在此页面进行首页轮播图的管理，通过新建操作可在轮播图中加入新的图片，还可以对以上传的图片进行修改操作，以及图片的删除操作，如图4-6所示。

图4-6轮播图管理界面图

试题管理

在试题管理页面中可以查看试卷、试题名称、分值、答案、类型等内容，并且根据需要对已有试题管理进行详情，修改或删除等详细操作，如图4-7所示。

图4-7试题管理界面图

考试记录

在考试记录页面中可以查看用户ID、试卷、试题名称、分值、正确答案、考生答案、考生分值等内容，并且根据需要对已有考试记录进行修改或删除等详细操作，如图4-8所示。

图4-8考试记录界面图

留言板管理

在留言板管理页面中可以查看用户名、留言内容、回复内容等内容，并且根据需要对已有留言板管理进行详情，修改或删除等详细操作，如图4-9所示。

图4-9留言板管理界面图

学习资料评论

在学习资料评论页面中可以查看评论内容、回复内容等内容，并且根据需要对已有学习资料评论进行详情，修改或删除等详细操作，如图4-10所示。

图4-10学习资料评论界面图

公告信息

在公告信息页面中可以查看标题、简介、图片等内容，并且根据需要对已有公告信息进行详情，修改或删除等详细操作，如图4-11所示。

图4-11公告信息界面

前台首页功能模块

学员登录、学员注册，通过填写学号、密码、姓名、邮箱、手机等信息进行注册，登录，如图4-12所示。

图4-12学员注册、学员登录界面图

线上教学平台

通过系统可以获取首页、学习资料、交流论坛、试卷列表、公告信息、留言反馈、个人中心、后台管理等信息操作内容，如图4-13所示。

图4-13前台首页界面图

学习资料

通过内容列表可以获取资料名称、资料类型、图片、资料文件、教学视频、发布时间等信息可进行点我收藏操作，如图4-14所示。

图4-14学习资料界面图

交流论坛

通过内容列表可以获取标题、类型、内容等信息进行发布帖子操作，如图4-15所示。

图4-15交流论坛界面图

图4-16试卷列表界面图

我的发布

通过内容列表可以获取标题、发布时间等信息进行修改、删除操作，如图4-17所示。

图4-17我的发布界面图

学员功能模块

学员点击进入到系统操作界面，可以对首页、个人中心、我的收藏管理、留言板管理、考试管理等功能模块，个人信息：通过列表可以获取学号、密码、姓名、性别、头像、邮箱、手机并进行修改操作，如图4-18所示。

图4-18个人信息界面图

修改密码

通过列表可以获取原密码、新密码、确认密码等信息，进行修改、删除等操作，如图4-19所示。

图4-19修改密码界面图

留言板管理

通过列表可以获取用户名、留言内容、回复内容等信息，进行详情、删除操作，如图4-21所示。

图4-21留言板管理界面图

错题本

通过列表可以获取用户ID、试卷、试题名称、分值、正确答案、考生答案、试题分析、考试时间等信息，进行详情、删除操作，如图4-22所示。

图4-22错题本界面图

考试记录

通过列表可以获取用户ID、试卷、考试得分等信息，进行详情、删除操作，如图4-23所示。

图4-23考试记录界面图

五、结论

今天，计算机技术已经相当成熟。它的发展推动了许多行业改头换面，计算机的出现使现代社会有了进一步降低人力物力和资源的方法，提高了现代社会的生产力，转变了智能化方式。目前各大网站都在积极备战，发展计算机和互联网，结合自身优势进军互联网行业成为各大网站的重点项目。

本文利用 Spring Boot框架和MySQL数据库技术，通过分析现实了线上教学平台流程的基础上，并完成了线上教学平台。经调试结果显示，本系统基本可以满足一个线上教学平台的业务需要。系统界面简洁而有美感， 易操作，做出了自己的特点，然而因为时间仓促再加上缺乏系统开发经验和仅依靠少数问卷调查方式，因此本系统还存在不少缺陷、不足，比如：

1. 数据输入的格式并没有全部检验，所以很难保证数据的准确，可能有一些不符合规则的数据也可以通过检验。

2. 系统功能还不够完善，无法提供丰富多彩的在线功能，只能实现一系列功能。

本系统还存在一些漏洞没有解决，在现实应用情境中很难保证完全不出错，但相信通过再次完善，可以调试出真正符合实际的线上教学平台。