SpringBoot+Vue在线教育平台系统开发实践

四达印务

1. 项目概述与核心价值

这套"在线教育平台信息管理系统"是一套基于SpringBoot+Vue+MySQL技术栈的完整解决方案，我从零开始搭建并优化了三个月。系统采用前后端分离架构，后端基于SpringBoot 2.7提供RESTful API，前端使用Vue 3组合式API开发，数据库选用MySQL 8.0。最大的特点是开箱即用——所有依赖都经过精确版本控制，数据库提供初始化脚本，前后端配置了完整的跨域处理，下载后只需执行mvn install和npm install就能启动。

提示：系统默认集成了Swagger接口文档，启动后端服务后访问http://localhost:8080/swagger-ui.html即可查看所有API

2. 技术架构深度解析

2.1 后端技术栈设计

采用SpringBoot 2.7.12版本（经过严格测试的稳定版本），核心模块包括：

权限控制：Spring Security + JWT
数据校验：Hibernate Validator
数据库访问：MyBatis-Plus 3.5.3（比原生MyBatis开发效率提升40%）
缓存管理：Redis 6.2（使用Spring Cache抽象层）
文件存储：本地存储与七牛云SDK双实现

我特别优化了MyBatis-Plus的分页插件，通过自定义PaginationInterceptor实现了智能分页：

java复制@Bean
public MybatisPlusInterceptor mybatisPlusInterceptor() {
    MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
    interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL){
        @Override
        public void beforeQuery(...) {
            // 自动优化count查询
        }
    });
    return interceptor;
}

2.2 前端工程化实践

Vue 3.2项目采用以下技术组合：

UI框架：Element Plus（全局按需引入）
路由管理：Vue Router 4（动态路由方案）
状态管理：Pinia（替代Vuex的轻量方案）
HTTP客户端：Axios封装（包含自动重试机制）

在src/utils/request.js中实现了智能请求拦截：

javascript复制const service = axios.create({
  baseURL: import.meta.env.VITE_APP_BASE_API,
  timeout: 30000,
  retry: 3, // 自动重试次数
  retryDelay: 1000 // 重试间隔
})

service.interceptors.response.use(null, (error) => {
  const config = error.config
  if(!config || !config.retry) return Promise.reject(error)
  
  config.__retryCount = config.__retryCount || 0
  if(config.__retryCount >= config.retry) {
    return Promise.reject(error)
  }
  
  config.__retryCount += 1
  return new Promise((resolve) => {
    setTimeout(() => resolve(service(config)), config.retryDelay)
  })
})

3. 核心功能模块实现

3.1 多维度权限控制系统

采用RBAC模型设计，包含5张核心表：

sys_user（用户表）
sys_role（角色表）
sys_menu（菜单权限表）
sys_user_role（用户角色关联）
sys_role_menu（角色权限关联）

权限验证流程：

用户登录获取JWT（有效期2小时）
前端存储token于localStorage
每次请求携带Authorization头
后端通过JwtAuthenticationFilter校验
通过SecurityContextHolder获取用户上下文

踩坑记录：最初使用简单MD5加密密码，后升级为BCryptPasswordEncoder，盐值存储和安全性显著提升

3.2 课程管理模块设计

课程实体关系图：

课程表(course)：基础信息
章节表(chapter)：树形结构存储
视频表(video)：关联七牛云key
课程分类(course_category)：三级分类

关键SQL示例（MyBatis-Plus动态SQL）：

xml复制<select id="selectCoursePage" resultType="CourseVO">
  SELECT c.*, t.name as teacherName 
  FROM course c
  LEFT JOIN teacher t ON c.teacher_id = t.id
  <where>
    <if test="query.title != null and query.title != ''">
      AND c.title LIKE CONCAT('%',#{query.title},'%')
    </if>
    <if test="query.status != null">
      AND c.status = #{query.status}
    </if>
  </where>
  ORDER BY c.update_time DESC
</select>

4. 部署与运维实践

4.1 生产环境部署方案

推荐使用Docker Compose编排：

yaml复制version: '3'
services:
  mysql:
    image: mysql:8.0
    environment:
      MYSQL_ROOT_PASSWORD: ${DB_PASSWORD}
    volumes:
      - ./mysql/data:/var/lib/mysql
      - ./mysql/init:/docker-entrypoint-initdb.d
    ports:
      - "3306:3306"
  
  redis:
    image: redis:6.2
    ports:
      - "6379:6379"

  backend:
    build: ./backend
    ports:
      - "8080:8080"
    depends_on:
      - mysql
      - redis

  frontend:
    build: ./frontend
    ports:
      - "80:80"

4.2 性能优化要点

接口响应优化：
- 启用SpringBoot Actuator监控
- 添加Logstash日志收集
- 关键接口添加@Cacheable
前端加载优化：
- 配置Gzip压缩
- 使用Webpack分包策略
- 图片转WebP格式

数据库优化：

课程表添加复合索引(teacher_id, status)
配置连接池（HikariCP推荐配置）

properties复制spring.datasource.hikari.maximum-pool-size=20
spring.datasource.hikari.minimum-idle=5
spring.datasource.hikari.idle-timeout=30000

5. 二次开发指南

5.1 代码规范约束

后端规范：
- 控制器方法名统一使用queryXxx、createXxx格式
- Service层方法必须添加@Transactional注解
- 所有DTO类名以DTO结尾
前端规范：
- 组件命名采用PascalCase
- 页面组件放在views目录
- 通用组件放在components目录

5.2 典型扩展场景

增加直播功能：
- 集成腾讯云TRTC SDK
- 创建live_stream表记录直播信息
- 添加直播间状态管理
接入支付系统：
- 设计order/payment表
- 集成支付宝/微信支付SDK
- 实现支付结果回调通知
数据分析扩展：
- 集成EasyExcel导出
- 添加Elasticsearch日志分析
- 使用ECharts实现数据可视化

这套系统在实际教学中已稳定运行8个月，日均处理3000+请求。最值得分享的经验是：在开发初期就建立完整的异常处理体系，全局异常处理器（@ControllerAdvice）能减少30%的线上问题排查时间。对于教育类系统，特别要注意数据一致性——我在关键业务操作上都添加了@Transactional注解，并配置了事务传播级别。