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。系统实现管理员、教师、学生三种角色登录分别提供后台管理、教学发布与在线学习功能。以下展示系统主要运行界面并说明源码组成与获取方式。源码地址源码集市
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。系统实现管理员、教师、学生三种角色登录分别提供后台管理、教学发布与在线学习功能。以下展示系统主要运行界面并说明源码组成与获取方式。源码地址源码集市
