在线学习平台
1 开发环境与技术
本系统为在线学习平台，涵盖用户管理、班级管理、课程管理、作业管理、试题练习、视频学习、资料管理及讨论问答等功能。系统采用 B/S 架构与前后端分离模式，后端使用 Java + Spring Boot 实现业务逻辑，前端使用 Vue.js 构建界面，数据存储采用 MySQL 数据库。
1.1 MySQL 数据库
系统使用 MySQL 8.0 作为关系型数据库，库名为online_learn，共 17 张表。主要存储用户信息、角色权限、班级与课程数据、作业与试题记录、知识点内容、学习视频、学习资料、班级申请及讨论问答等数据，可通过 Navicat 等工具进行管理与维护。
1.2 Tomcat 介绍
后端采用 Spring Boot 2.5.6，内置 Tomcat 服务器，可直接启动运行，无需单独部署。后端默认端口为 9251，前端开发端口为 8080。开发环境推荐 IDEA 2023、JDK 1.8、MySQL 8.0、Navicat、Maven 3.8+、Node.js 16+。
1.3 Vue 技术
前端基于 Vue 2.6.11，配合 Element UI 2.4.5 组件库开发页面。使用 Axios 与后端接口通信，Vue Router 实现路由跳转，Vuex 管理全局状态。系统按管理员、教师、学生三种角色展示不同菜单与功能页面。此外集成 video.js 实现在线视频播放，mavon-editor 支持 Markdown 内容编辑，highlight.js 提供代码高亮。项目使用 Vue CLI 4.5.0 构建，通过npm run dev启动前端。
1.4 Spring Boot 框架
后端基于 Spring Boot 2.5.6，运行环境为 JDK 1.8，持久层使用 MyBatis-Plus 3.4.0 操作数据库。登录功能结合验证码校验，登录成功后通过 Cookie 保存用户信息，前端路由守卫控制页面访问权限。接口文档使用 Swagger 2.9.2 生成，项目通过 Maven 管理依赖与打包。核心模块包括用户与角色管理、班级与课程管理、作业与试题管理、知识点管理、视频与资料管理、班级申请审核及讨论问答，满足在线教学的基本业务需求。
2 系统实现
在线学习平台按管理员、教师、学生三种角色划分功能模块，各角色登录后通过侧边栏或顶部菜单进入对应页面。管理员负责全局数据维护，教师负责班级教学资源发布与学生管理，学生进行在线学习、作业提交与讨论互动。以下按角色分别介绍各功能模块的实现。
2.1 管理员端
2.1.1 学生信息管理
管理员可对学生信息进行新增、编辑和删除操作。页面表格展示账号、姓名、性别、所属班级等字段，新增时需填写姓名、账号、电话、性别并选择班级，支持分页浏览。
图2.1 管理员端学生信息管理页面
2.1.2 教师信息管理
管理员可新增、编辑和删除教师信息。表格展示账号、姓名、性别、班级、任教课程及入职时间，新增时可指定教师所属班级与任教课程，支持分页显示。
图2.2 管理员端教师信息管理页面
2.1.3 班级信息管理
管理员可对班级进行新增、编辑和删除。表格展示创建时间、班主任、班级名称，新增时需填写班级名称并选择班主任，支持分页浏览。
图2.3 管理员端班级信息管理页面
2.1.4 课程信息管理
管理员可对课程进行新增、编辑和删除，支持按课程名称关键字搜索。表格展示课程名称及操作按钮，通过弹窗表单完成课程信息维护。
图2.4 管理员端课程信息管理页面
2.1.5 作业信息管理
管理员可查看和删除全平台作业记录。表格展示作业标题、发布教师、班级、课程及发布时间，点击查看可进入作业详情页，支持分页浏览。
图2.5 管理员端作业信息管理页面
2.1.6 试题信息管理
管理员可查看和删除全平台试题。表格展示创建时间、发布教师、试题标题、班级及课程，点击「详情」查看试题内容，支持分页显示。
图2.6 管理员端试题信息管理页面
2.1.7 知识点管理
管理员可查看和删除全平台知识点。表格展示创建时间、知识点标题、发布教师、班级及课程，点击「详情」查看具体内容，支持分页浏览。
图2.7 管理员端知识点管理页面
2.2 教师端
2.2.1 作业管理
教师可发布、查看和删除作业，并查看学生完成情况。表格展示课程、作业标题、发布人、发布时间、完成时间及班级，可查看已完成与未完成学生名单及作业详情。
图2.8 教师端作业管理页面
2.2.2 加入班级审核
教师可审核学生加入班级的申请。表格展示申请日期、学生账号、姓名、电话、审核状态及审核人，对待审核记录可执行「同意」或「驳回」操作。
图2.9 教师端加入班级审核页面
2.2.3 试题管理
教师可发布和管理班级试题，查看学生答题情况。表格展示试题信息及完成状态，支持查看已完成与未完成学生列表。
图2.10 教师端试题管理页面
2.2.4 视频管理
教师可上传和管理学习视频，设置视频封面与主题。学生端以卡片形式展示视频列表，点击进入详情页在线播放。
图2.11 教师端视频管理页面
2.2.5 资料管理
教师可上传、查询和删除学习资料，支持按资料名称和时间范围搜索，以及批量删除。表格展示资料名称、文件类型、文件大小、上传时间及描述等信息。
图2.12 教师端资料管理页面
2.2.6 讨论互动
教师可在讨论模块查看学生提问并进行回复，展示问题来源、提问人、问题内容及回复状态。
图2.13 教师端讨论页面
2.3 学生端
2.3.1 学习视频
学生可浏览本班级教师发布的视频课程，以卡片形式展示视频封面、主题及发布教师，点击进入详情页使用 video.js 在线观看，支持分页浏览。
图2.14 学生端学习视频页面
2.3.2 学习资料
学生可查看和下载教师上传的学习资料，支持按资料名称和时间范围搜索。表格展示资料名称、描述、上传教师、文件类型及上传时间，可在线预览或下载。
图2.15 学生端学习资料页面
2.3.3 作业管理
学生可查看未完成和已完成的作业。未完成作业支持在线作答提交，已完成作业可查看提交内容、完成时间及批改状态，并支持查看参考答案。
图2.16 学生端作业管理页面
2.3.4 试题练习
学生可查看未完成的试题并开始答题，已完成试题可查看答题记录。表格展示发布时间、试题名称及发布人，点击「开始答题」进入答题页面。
图2.17 学生端试题练习页面
2.3.5 讨论社区
学生可在讨论区发起提问并查看教师回复。页面展示问题来源、提问人、问题描述、回复内容及回复状态，未回复问题显示「等待回复」。
图2.18 学生端讨论社区页面
2.3.6 班级申请
学生可浏览可加入的班级列表并提交加入申请，也可查看历史申请记录。已加入班级或审核中的学生无法重复申请。
图2.19 学生端班级申请页面
2.3.7 个人信息
学生可查看和修改个人基本信息，支持修改登录密码，保障账号安全。
图2.20 学生端个人信息页面
3 系统展示与源码获取
本系统为在线学习平台，采用前后端分离架构开发，后端基于 Java + Spring Boot，前端基于 Vue.js + Element UI，数据库使用 MySQL。系统实现管理员、教师、学生三种角色登录，分别提供后台管理、教学发布与在线学习功能。以下展示系统主要运行界面，并说明源码组成与获取方式。
源码地址：源码集市