【万字文档+源码】基于SpringBoot+Vue在线教育系统-可用于毕设-课程设计-练手学习-学习资料分享

一、项目概述

1.1 项目开发背景

传统线下教学模式存在时空限制，课后课程资料分发、视频授课、作业收发、课堂签到、教学通知传递流程繁琐，教师与学生线上交互渠道缺失，教学数据无法直观统计。
为打破线下教学局限，搭建一套线上一体化教学平台，实现学生线上选课、观看教学视频、下载课件、完成作业、课程签到；教师发布课程视频、上传课件、布置作业、管理学生；管理员统一维护系统用户、公告、轮播、课程分类、数据可视化统计，以此提升线上教学效率，简化教务管理工作，特开发基于 SpringBoot+Vue 的在线教育系统。

1.2 项目开发目标

1. 划分管理员、教师、学生三类角色，实现分级权限管控，不同角色可见对应功能菜单；

2. 前台门户模块：首页轮播展示、公告浏览、视频教学预览、课程资源浏览、账号登录注册；

3. 教师后台：发布教学视频、上传课程课件、布置课后作业、管理签到、维护个人课程；

4. 学生后台：观看课程视频、下载课件、提交作业、参与课程签到、查看公告；

5. 管理员后台：全量用户管理（学生 / 教师）、轮播图管理、公告管理、课程分类管理、课程资源管理、签到管理、作业管理；

6. 数据可视化：首页展示作业、签到数据总量，饼图统计各课程作业完成占比；

7. 支持文件上传（头像、课程封面、教学视频、课件附件）、富文本作业编辑、分页查询、多条件模糊搜索、新增 / 修改 / 删除 / 详情全套 CRUD 操作。

1.3 系统整体功能概述

系统采用前后端分离架构，分为前台学生门户、后台管理系统两大板块，核心业务模块：登录注册模块、前台首页模块、轮播图管理模块、公告信息模块、系统用户管理（学生 / 教师）、视频教学管理、课程资源管理、课程类别管理、课程签到管理、课后作业管理、数据统计可视化模块。

二、项目技术栈说明

2.1 后端技术（SpringBoot 服务端）

1. 核心框架：SpringBoot 2.7.x，自动配置简化 SSM 搭建，内置 Tomcat 容器；

2. 持久层：MyBatis-Plus，封装通用 CRUD、分页插件、条件查询，简化数据库操作；

3. 数据库：MySQL 8.0，存储用户、课程、视频、作业、签到、公告、分类全量业务数据；

4. 核心工具依赖

   • Lombok：简化实体类 get/set/toString/ 构造函数；

   • Hutool：验证码生成、文件工具、日期工具、字符串校验；

   • Druid：高性能数据库连接池，SQL 监控；

   • JSR303 Validation：表单参数校验（手机号、账号、非空校验）；

   • FileUpload：本地文件存储，支持图片、视频、文档课件上传；

5. 接口规范：RESTful 风格接口，统一 JSON 格式返回，全局异常处理；

6. 权限控制：Session 登录拦截器，未登录拦截、角色菜单权限隔离；

7. 多媒体支持：后端提供视频预览、文件下载接口。

2.2 前端技术（Vue 客户端）

1. 核心框架：Vue2 + Element UI，页面表单、弹窗、表格、分页、按钮组件与系统界面完全匹配；

2. 路由管理：VueRouter，区分前台门户路由、后台管理路由，多标签页缓存；

3. 网络请求：Axios 封装请求 / 响应拦截器，统一处理 token、登录失效跳转；

4. 可视化图表：ECharts 饼图，实现各课程作业完成度统计；

5. 富文本编辑器：Element 内置富文本，用于课后作业内容编辑；

6. 文件上传组件：图片、视频、多文件拖拽上传，预览回显；

7. 布局方案

   • 前台：顶部导航栏 + 轮播横幅 + 卡片内容流布局；

   • 后台：经典管理布局（顶部标题栏 + 左侧侧边菜单栏 + 主内容区域）。

2.3 开发与部署工具

1. 开发工具：IDEA（后端 Java 开发）、VSCode（前端 Vue 开发）、Navicat（数据库可视化）；

2. 构建打包：Maven（后端 jar 包打包）、npm/yarn（前端 dist 静态资源打包）；

3. 运行环境：JDK1.8、MySQL8.0、Nginx（前端静态资源反向代理）；

4. 版本管理：Git，代码分支管理。

三、系统需求分析

3.1 用户角色需求分析

（1）学生角色

1. 前台操作：浏览首页轮播、查看全部公告、浏览视频教学、查看课程资源；

2. 账号操作：账号密码登录、学生账号注册、记住密码；

3. 学习功能：查看对应课程视频、下载课程课件、查看作业并提交作答、参与课程线上签到；

4. 信息查看：查看个人作业提交记录、签到记录、教学公告。

（2）教师角色

1. 账号：教师账号注册、登录系统；

2. 课程视频管理：新增 / 修改 / 删除教学视频，上传课程封面、上传教学视频文件；

3. 课程资源管理：上传课件附件、发布课后作业（富文本编辑作业内容）；

4. 教学管理：查看学生签到记录、查看学生提交作业，审核作业状态；

5. 数据查看：查看本课程作业完成统计图表。

（3）管理员角色

1. 首页数据看板：展示课后作业总数、课程签到总数，查看作业完成饼图统计；

2. 轮播图管理：新增、修改、删除前台首页轮播横幅图片；

3. 公告信息管理：发布 / 编辑 / 删除教学公告，标题模糊搜索、分页展示；

4. 系统用户管理：分页维护学生、教师账号，新增、修改、删除用户信息（头像、姓名、电话、性别）；

5. 视频教学管理：全量查看所有教师发布的课程视频，支持搜索、详情查看；

6. 课程分类管理：维护课程大类，新增、修改、删除课程类别；

7. 课程签到管理：查看全部课程签到记录，多条件筛选（课程名称、日期、审核状态）；

8. 课后作业管理：查看所有作业数据，打开作业完成统计图表，批量维护作业信息。

3.2 功能性需求

3.2.1 前台门户功能

1. 首页：顶部导航（首页、公告信息、视频教学、课程资源）、全屏轮播 banner、视频教学卡片展示区；

2. 公告信息页：公告卡片列表、标题搜索框、分页控件，查看公告详情；

3. 登录页面：账号密码输入框、记住密码复选框、登录按钮、跳转注册入口；

4. 注册页面：教师 / 学生通用注册表单，账号、密码、确认密码、姓名、头像上传、性别下拉、联系电话，表单校验。

3.2.2 后台管理通用布局

1. 顶部：系统名称、当前登录用户头像与名称；

2. 左侧菜单栏：分层导航，根据角色动态渲染菜单；

3. 主内容区：多标签页切换，表格 + 弹窗完成数据操作；

4. 通用组件：分页、搜索框、新增 / 修改弹窗、详情弹窗、图表弹窗。

3.2.3 后台核心业务模块

1. 轮播图管理
   列表展示轮播图片、排序；新增弹窗上传横幅图片、设置展示顺序；支持修改、删除。

2. 公告信息管理
   表格字段：序号、公告标题、封面图片、发布时间；按标题模糊搜索；新增 / 编辑弹窗填写标题、上传公告配图；分页展示、单条详情查看。

3. 系统用户管理
   分为学生、教师两个子菜单；表格展示账号、姓名、头像、性别、联系电话；新增弹窗上传用户头像、填写账号密码个人信息；支持修改、删除用户数据。

4. 视频教学管理
   搜索条件：课程名称、班级；列表字段：课程名称、班级、封面、视频预览、发布时间、教师账号、教师姓名；操作按钮：新增、详情、修改；新增弹窗上传课程封面、上传教学视频、填写课程班级、绑定授课教师。

5. 课程资源管理
   弹窗表单：课程图片上传、选择日期、课件文件拖拽上传、自动回填教师账号姓名、富文本编辑器编辑课后作业；用于发布课程课件与课后作业。

6. 课程类别管理
   维护课程分类名称；列表分页展示类别；支持新增、详情、修改、删除课程分类，作为视频课程分类绑定项。

7. 课程签到管理
   多条件联合搜索：课程名称、起止日期、审核状态；分页展示全平台签到记录，管理员统一查看签到数据。

8. 课后作业管理
   分页展示全部课后作业；点击「作业完成统计」弹出 ECharts 饼图，直观展示各课程作业提交占比；支持多维度条件筛选作业数据。

9. 系统首页数据统计看板
   卡片展示课后作业总数、课程签到总数；下方嵌入作业完成饼图，无需弹窗直接可视化展示。

3.3 非功能性需求

1. 易用性：弹窗表单操作，按钮区分新增 / 修改 / 删除，分页、搜索功能简化数据查找；

2. 兼容性：适配 Chrome、Edge 主流浏览器，1080P、720P 分辨率页面无错位；

3. 安全性：未登录用户禁止访问后台页面，密码后端加密存储，角色功能隔离；

4. 性能：分页加载大数据，千条表格数据无卡顿，视频、文件上传无超时；

5. 可扩展性：预留成绩管理、在线直播、课程评论模块扩展接口。

四、数据库设计

4.1 数据库基础说明

数据库名称：online_edu_system，共 8 张核心业务数据表，覆盖用户、课程、视频、公告、签到、作业、分类、轮播业务。

4.2 数据表详细结构

表 1：sys_user 用户表（存储学生、教师、管理员账号）

表 2：banner 轮播图表

表 3：notice 公告信息表

表 4：course_type 课程分类表

表 5：video_course 视频课程表

表 6：course_resource 课程资源表（课件 + 作业）

表 7：course_sign 课程签到表

表 8：homework_submit 作业提交表

4.3 数据表关联关系

1. sys_user（1 对多）video_course：一名教师可发布多条视频课程；

2. course_type（1 对多）video_course：一个课程分类包含多个视频课程；

3. video_course（1 对多）course_resource：一门课程对应多个课件、课后作业；

4. video_course（1 对多）course_sign：一门课程多条学生签到记录；

5. course_resource（1 对多）homework_submit：一份课后作业对应多条学生提交记录；

6. sys_user（学生）1 对多 course_sign、homework_submit：学生多条签到、作业提交记录。

五、系统整体架构设计

5.1 前后端分离三层架构

整体分层：Vue 前端表现层 → SpringBoot 后端服务层 → MySQL 数据持久层

1. 前端表现层

   • 视图层：前台门户页面、后台管理页面、弹窗组件；

   • 控制层：Vue methods 处理搜索、新增、删除、上传、图表渲染；

   • 请求层：Axios 封装接口，调用后端 REST API；

2. 后端服务层

   • Controller 控制层：接收前端请求，参数校验，统一返回 JSON；

   • Service 业务层：封装注册、文件上传、视频发布、签到、统计图表业务逻辑；

   • Mapper 持久层：MyBatis-Plus 操作数据库，分页、条件查询；

   • Entity 实体层：映射数据库 8 张表；

   • Util 工具层：文件上传工具、验证码、日期工具、统一返回结果工具；

   • Config 配置层：跨域配置、拦截器、MyBatis 分页配置、文件上传路径配置；

3. 数据持久层
   MySQL 存储全部业务数据，Druid 连接池完成数据交互。

5.2 后端项目目录分层

com.edu ├── config // 全局配置（跨域、登录拦截、分页、文件上传） ├── controller // 接口控制器 │ ├── LoginController // 登录注册接口 │ ├── BannerController // 轮播图接口 │ ├── NoticeController // 公告接口 │ ├── UserController // 学生/教师用户管理 │ ├── CourseTypeController // 课程分类接口 │ ├── VideoController // 视频教学接口 │ ├── ResourceController // 课程资源/作业接口 │ ├── SignController // 课程签到接口 │ ├── HomeworkController // 课后作业接口 │ └── EchartsController // 统计图表数据接口 ├── entity // 数据库实体类 ├── mapper // Mapper持久层接口 ├── service // 业务接口 │ └── impl // 业务逻辑实现类 ├── util // 工具类（文件、返回封装、校验） └── OnlineEduApplication.java // SpringBoot启动类

5.3 前端 Vue 项目目录分层

src ├── api // 后端接口统一封装 │ ├── login.js │ ├── banner.js │ ├── notice.js │ ├── user.js │ ├── video.js │ ├── resource.js │ ├── sign.js │ ├── homework.js │ └── echarts.js ├── components // 公共组件（侧边栏、顶部导航、上传组件、弹窗） ├── views // 页面视图 │ ├── front // 前台门户页面 │ │ ├── index.vue // 前台首页 │ │ ├── notice.vue // 公告列表页 │ │ ├── video.vue // 视频教学页 │ │ ├── resource.vue // 课程资源页 │ │ ├── login.vue // 登录页 │ │ └── register.vue // 注册页 │ ├── admin // 后台管理页面 │ │ ├── home.vue // 后台首页统计看板 │ │ ├── banner.vue // 轮播图管理 │ │ ├── notice.vue // 公告管理 │ │ ├── student.vue // 学生管理 │ │ ├── teacher.vue // 教师管理 │ │ ├── video.vue // 视频教学管理 │ │ ├── courseType.vue // 课程分类管理 │ │ ├── resource.vue // 课程资源管理 │ │ ├── sign.vue // 签到管理 │ │ └── homework.vue // 课后作业管理 ├── router // Vue路由配置（区分前台/后台路由） ├── utils // axios请求封装、通用工具函数 └── main.js & App.vue // 项目全局入口

六、核心功能模块详细设计

6.1 前台门户模块

6.1.1 前台首页

页面元素：顶部导航菜单、全屏轮播 banner、「视频教学展示」卡片区域；
业务逻辑：后端查询所有启用轮播图返回前端渲染，展示全部公开教学视频卡片，点击卡片跳转视频详情。

6.1.2 公告信息页面

页面元素：标题搜索输入框、搜索按钮、公告卡片列表、分页控件；
业务逻辑：输入标题模糊查询公告数据，分页加载，点击公告卡片弹出详情弹窗展示完整内容与配图。

6.1.3 登录页面

页面元素：系统标题、账号输入框、密码输入框、记住密码复选框、登录按钮、注册学生跳转按钮；
业务流程：

1. 前端校验账号密码非空；

2. 请求登录接口，后端校验账号密码、区分角色；

3. 登录成功根据角色跳转前台 / 后台页面；登录失败弹窗提示错误；

4. 勾选记住密码，前端本地存储账号密码缓存。

6.1.4 注册页面（教师 / 学生通用）

表单字段：教师 / 学生账号、密码、确认密码、姓名、头像上传框、性别下拉、联系电话；
校验规则：

1. 账号唯一，不可重复注册；

2. 两次输入密码必须一致；

3. 手机号 11 位数字格式校验；

4. 头像必须上传图片；
   注册流程：填写完整表单提交，后端校验全部参数，校验通过新增 sys_user 用户数据，跳转登录页面。

6.2 后台首页数据统计看板

页面布局：顶部欢迎标题、数据统计卡片（课后作业总数、课程签到总数）、下方 ECharts 饼图展示作业完成占比；
业务逻辑：前端页面加载自动请求统计接口，后端聚合作业表数据，统计每个课程作业提交数量，封装饼图 X/Y 轴数据，前端渲染可视化图表。

6.3 公告信息管理模块

1. 列表展示字段：序号、公告标题、封面图片、发布时间；

2. 搜索功能：输入标题关键词模糊筛选；

3. 操作功能：新增、详情、修改、删除；

4. 新增弹窗：填写公告标题、上传公告配图、编辑公告正文；提交后存入 notice 表。

6.4 系统用户管理（学生 / 教师）

分为学生、教师两个子菜单，功能逻辑一致：

1. 分页表格展示账号、姓名、头像、性别、手机号；

2. 新增弹窗：上传头像、填写账号密码、姓名、性别、电话；

3. 修改：回显用户原有信息，可重新更换头像；

4. 删除：删除用户同步清除关联签到、作业提交数据。

6.5 视频教学管理模块

1. 搜索条件：课程名称、授课班级双条件联合搜索；

2. 表格字段：课程名称、班级、封面图、视频预览按钮、发布时间、教师账号、教师姓名；

3. 新增弹窗：上传课程封面、上传教学视频文件、填写课程名称、班级、选择课程分类、绑定授课教师；

4. 视频预览：弹窗加载后端视频文件流，在线播放教学视频。

6.6 课程资源管理（课件 + 课后作业）

弹窗表单核心元素：

1. 课程图片上传、日期选择框；

2. 课件拖拽上传区域，支持多文档附件上传；

3. 自动回填当前登录教师账号、姓名；

4. 富文本编辑器编辑课后作业内容；
   业务逻辑：表单提交后保存课件文件到服务器，作业文本存入 course_resource 表，关联对应视频课程 ID。

6.7 课程类别管理模块

1. 表格分页展示全部课程分类名称；

2. 操作按钮：新增、详情、修改、删除；

3. 新增弹窗仅需填写分类名称，用于视频课程绑定分类使用。

6.8 课程签到管理模块

1. 多条件搜索栏：课程名称、签到起止日期、审核状态下拉筛选；

2. 分页展示所有学生签到记录，管理员统一查看全平台签到数据；

3. 支持查看签到详情，修改签到审核状态。

6.9 课后作业管理与统计图表

1. 分页表格展示所有课程发布的课后作业；

2. 多条件筛选：课程名称、发布日期区间、作业审核状态；

3. 统计功能：点击「作业完成统计」弹出 ECharts 饼图弹窗，展示各课程作业提交数量占比；

4. 图表逻辑：后端统计每个课程下学生作业提交总数，返回图表所需数据集，前端渲染饼图可视化。

6.10 轮播图管理模块

1. 列表展示轮播图片、排序序号；

2. 新增弹窗上传横幅图片、设置展示排序；

3. 支持修改轮播图片、调整排序、删除不需要的首页横幅。

七、核心业务流程

7.1 学生完整线上学习流程

1. 学生前台注册账号 → 登录前台门户；

2. 浏览首页轮播、查看教学公告；

3. 进入视频教学页面，选择对应课程观看教学视频；

4. 打开课程资源页面，下载课件附件、查看老师布置的课后作业；

5. 在作业页面完成作答并提交；

6. 对应课程开放签到时，完成线上课程签到；

7. 教师 / 管理员审核签到、作业，学生查看审核结果。

7.2 教师课程发布流程

1. 教师注册账号登录后台；

2. 先发布视频教学课程（上传封面、教学视频，填写班级信息）；

3. 在课程资源模块上传课程课件、使用富文本编辑并发布课后作业；

4. 查看学生签到记录，审核签到状态；

5. 查看学生提交的课后作业，批改并更新作业审核状态。

7.3 管理员数据统计流程

1. 管理员登录后台首页，自动加载作业、签到总量卡片与作业统计饼图；

2. 进入课后作业管理页面，筛选课程、日期数据；

3. 点击「作业完成统计」按钮，弹窗加载各课程作业占比饼图，直观分析教学作业完成情况。

八、RESTful 接口设计

8.1 登录注册接口

1. POST /api/login用户登录，参数 username、password、role；返回登录状态与用户信息

2. POST /api/register学生 / 教师注册，携带头像文件、账号、密码、姓名、电话等表单参数

8.2 轮播图、公告接口

1. GET /api/banner/list分页查询轮播图

2. POST /api/banner/add新增轮播图

3. PUT /api/banner/update修改轮播图

4. GET /api/notice/list公告分页 + 标题搜索

5. POST /api/notice/add新增公告

8.3 用户管理接口（学生 / 教师）

1. GET /api/user/studentList分页查询学生

2. GET /api/user/teacherList分页查询教师

3. POST /api/user/uploadAvatar用户头像上传接口

4. POST/PUT/DELETE /api/user用户新增、修改、删除

8.4 视频课程、课程分类接口

1. GET /api/video/list视频课程分页、多条件搜索

2. POST /api/video/add新增视频课程（携带视频、封面文件）

3. GET /api/courseType/list查询课程分类列表

8.5 课程资源、作业、签到接口

1. POST /api/resource/uploadFile课件附件上传

2. POST /api/resource/add发布课程资源与课后作业

3. GET /api/sign/list课程签到多条件分页查询

4. GET /api/homework/list课后作业分页筛选查询

8.6 ECharts 统计图表接口

1. GET /api/echarts/homeworkStat获取各课程作业完成统计饼图数据

九、系统测试

9.1 功能测试

1. 登录注册测试

   • 空账号 / 密码提交，前端拦截提示；错误账号密码返回登录失败；

   • 重复账号注册提示冲突；两次密码不一致、手机号格式错误拦截注册；

   • 头像图片上传成功，文件路径存入数据库；

2. 课程发布测试

   • 教师新增视频课程，视频、封面文件正常保存，数据库新增课程记录；

   • 上传课件、发布作业后，前台学生页面可正常查看、下载；

3. 签到与作业流程测试

   • 学生提交签到、作业，后台管理员列表可查询到对应记录；管理员修改审核状态数据同步更新；

4. 图表统计测试

   • 存在作业数据时饼图正常渲染；无数据时图表空白展示；

5. 搜索分页测试

   • 输入标题、课程名称、日期条件，表格精准过滤对应数据，分页切换正常。

9.2 兼容性测试

1. 浏览器：Chrome、Edge、360 浏览器页面布局、上传、视频播放功能全部正常；

2. 分辨率：19201080、1366768 页面自适应，弹窗、表格无错位、溢出。

9.3 性能测试

1. 千条课程、用户数据分页查询，接口响应时间 < 300ms；

2. 图片、短视频文件（200M 以内）上传无卡顿、无超时；

3. ECharts 饼图渲染加载时间 < 1 秒。

十、项目部署流程

10.1 后端 SpringBoot 部署

1. IDEA 执行 Maven 打包命令：clean package -DskipTests，生成可执行 jar 包；

2. 服务器安装 JDK1.8、MySQL8.0；

3. 创建数据库online_edu_system，执行项目提供的 SQL 初始化脚本，创建全部数据表；

4. 修改 application.yml 配置文件：数据库连接地址、账号密码、文件上传存储路径、服务端口；

5. 服务器终端执行启动命令：java -jar online-edu.jar &；

6. 防火墙开放后端服务端口（默认 8080），放行访问权限。

10.2 前端 Vue 部署

1. 前端项目执行打包命令：npm run build，生成 dist 静态资源文件夹；

2. 服务器安装 Nginx，配置站点根目录指向 dist 文件夹；

3. 配置 Nginx 反向代理，将/api请求转发至后端 8080 端口；

4. 启动 Nginx 服务，访问域名进入系统前台登录页面。

十一、系统优缺点与优化拓展方向

11.1 系统优势

1. 前后端分离架构，业务代码解耦，分层清晰，易于维护迭代；

2. 覆盖线上教学全场景：视频授课、课件下载、作业收发、线上签到、教学公告；

3. 三类角色权限隔离，管理员统一管控全平台教学数据；

4. ECharts 可视化图表直观统计作业完成情况，辅助教务数据分析；

5. 支持图片、视频、文档多类型文件上传，富文本作业编辑，贴合真实教学场景；

6. 前台 + 后台完整双端页面，分页、多条件搜索、批量 CRUD 等基础功能齐全。

11.2 优化与拓展方向

1. 角色拓展：新增辅导员、超级管理员细分角色，分级审批签到、作业；

2. 直播拓展：集成第三方视频直播 SDK，增加实时线上授课模块；

3. 消息通知：接入短信、邮箱通知，签到审核、作业批改后自动推送提醒；

4. 存储优化：本地文件存储改为阿里云 / 腾讯云 OSS 对象存储，解决服务器磁盘占用问题；

5. 导出功能：支持签到记录、作业数据 Excel 表格导出打印；

6. 权限升级：引入 RBAC 权限框架，精细化按钮、菜单访问权限；

7. 登录优化：Session 登录替换为 JWT Token，支持分布式多服务器部署；

8. 评论互动：增加课程评论、师生留言互动模块；

9. 成绩管理：新增学生作业成绩、期末成绩录入与统计功能。

十二、项目总结

本在线教育系统基于 SpringBoot+Vue 前后端分离技术开发，解决传统线下教学时空受限、教学资料分发繁琐、签到作业管理困难、教学数据难以统计的痛点。系统划分管理员、教师、学生三类核心角色，实现前台教学展示、后台教务管理一体化，完整覆盖轮播维护、公告发布、视频授课、课件资源、课后作业、线上签到、数据可视化统计全套线上教学业务。

项目分层架构规范、数据库设计合理、接口遵循 RESTful 标准，适配中小学、高校线上网课教学场景，同时预留直播、成绩、消息推送等拓展接口，具备良好的可扩展性，可用于课程设计、毕业设计、小型校园线上教学平台落地使用。

十三、项目资料

👇🏻 精彩专栏推荐订阅👇🏻 在下方专栏👇🏻不然下次找不到哟
《Java精品推荐项目》
《springboot+vue项目100套》
《ssm项目100套》
《微信小程序合集》