SpringBoot+Vue在线教育平台架构设计与实践

1. 项目概述：构建一个SpringBoot+Vue在线学习平台

去年接手了一个高校在线教育平台的项目重构需求，原系统采用传统的JSP+Servlet架构，面临着性能瓶颈和扩展性差的问题。经过技术选型，我们最终决定采用SpringBoot+Vue的前后端分离架构，在三个月内完成了从零到上线的全过程。这个项目后来成为了多个院校的毕设参考模板，今天我就把其中的核心设计和实现细节分享给大家。

在线教育平台的核心价值在于打破时空限制，我们设计的系统包含三大核心模块：课程管理系统实现教学资源的数字化管理，实时交流系统支持师生即时互动，作业评测系统则完成了学习闭环。与市面上通用平台不同，我们的设计特别强调"轻量化"和"教学场景适配"，比如针对编程类课程集成了在线代码运行环境，对文科类课程则强化了批注协作功能。

技术栈选择上，后端采用SpringBoot 2.7 + MyBatis Plus的组合，前端使用Vue 3 + Element Plus，数据库是MySQL 8.0。这套技术组合的优势在于：

• SpringBoot的自动配置机制大幅减少了XML配置
• MyBatis Plus的代码生成器可快速构建CRUD接口
• Vue 3的Composition API使前端逻辑组织更清晰
• Element Plus提供了丰富的教育场景UI组件

2. 系统架构设计解析

2.1 前后端分离架构实践

我们采用典型的前后端分离架构，通过RESTful API进行数据交互。这种架构的最大优势是前后端可以并行开发，我在项目初期就使用Swagger编写了详细的API文档，前后端团队基于文档约定进行开发，最后联调时接口对接非常顺畅。

后端服务分层设计：

code复制controller层：定义REST端点
   ↓
service层：业务逻辑处理
   ↓
dao层：基于MyBatis Plus的数据访问
   ↓
MySQL数据库

前端采用模块化设计：

code复制src/
  ├── api/        # 封装所有后端接口调用
  ├── router/     # 定义Vue路由
  ├── store/      # Pinia状态管理
  ├── views/      # 页面组件
  └── utils/      # 工具函数

2.2 数据库设计关键点

用户表设计中有一个值得分享的细节：我们使用role_type字段区分用户角色（1学生，2教师，3管理员），但实际权限控制采用RBAC模型。这样设计的好处是既保持了简单性，又为后期权限扩展留有余地。

课程表的核心字段说明：

sql复制CREATE TABLE `course_info` (
  `course_id` bigint NOT NULL AUTO_INCREMENT,
  `course_name` varchar(100) NOT NULL COMMENT '课程名称',
  `teacher_id` bigint NOT NULL COMMENT '教师ID',
  `description` text COMMENT '课程详情(富文本)',
  `cover_url` varchar(255) DEFAULT NULL COMMENT '封面图OSS地址',
  `status` tinyint NOT NULL DEFAULT '1' COMMENT '1未开始 2进行中 3已结束',
  `create_time` datetime NOT NULL DEFAULT CURRENT_TIMESTAMP,
  PRIMARY KEY (`course_id`),
  KEY `idx_teacher` (`teacher_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;

注意：description字段存储富文本内容，前端展示时需要做XSS过滤。我们最终采用了js-xss库进行内容消毒处理。

3. 核心功能实现细节

3.1 课程管理模块

教师端采用"分步表单"设计，将课程创建流程分为：

1. 基础信息（名称、分类、封面）
2. 详细设置（学习目标、适用人群）
3. 章节规划（支持拖拽排序）

后端接口特别注意了幂等性设计，防止重复提交。核心代码如下：

java复制@PostMapping("/courses")
public Result createCourse(@Valid @RequestBody CourseCreateDTO dto) {
    // 幂等控制：相同教师在5秒内重复提交相同课程名视为无效请求
    String lockKey = "course:create:" + getCurrentUserId() + ":" + dto.getCourseName();
    if (redisTemplate.opsForValue().setIfAbsent(lockKey, "1", 5, TimeUnit.SECONDS)) {
        return courseService.createCourse(dto);
    }
    throw new BusinessException("请勿重复提交课程");
}

3.2 实时讨论区实现

讨论区采用WebSocket+消息队列的方案：

1. 前端建立WebSocket连接时携带课程ID和用户token
2. 服务端使用Spring WebSocket维护连接池
3. 消息先存入Redis Stream，再异步持久化到MySQL

这个设计解决了两个关键问题：

• 高并发时MySQL写入压力通过Redis缓冲
• 离线消息通过定期同步机制补发

前端消息处理核心逻辑：

javascript复制// 建立WebSocket连接
const socket = new WebSocket(`wss://api.example.com/chat?courseId=${courseId}&token=${token}`)

// 接收消息处理
socket.onmessage = (event) => {
  const message = JSON.parse(event.data)
  if (message.type === 'NEW_REPLY') {
    store.commit('addDiscussion', message.data)
  }
}

// 发送消息
function sendMessage(content, replyTo) {
  socket.send(JSON.stringify({
    courseId,
    content,
    replyTo
  }))
}

4. 开发中的典型问题与解决方案

4.1 文件上传性能优化

初期采用直接上传到应用服务器的方案，当并发上传大文件时经常导致磁盘IO瓶颈。我们最终改造为：

1. 前端使用分片上传（每片2MB）
2. 后端接收后直接转发到OSS
3. 全部片上传完成后触发OSS合并操作

关键配置项：

yaml复制# application.yml
aliyun:
  oss:
    endpoint: https://oss-cn-hangzhou.aliyuncs.com
    bucket: edu-platform
    max-size: 500MB  # 单文件上限
    thread-size: 4   # 分片上传线程数

4.2 权限控制中的坑

最初在拦截器中简单判断role_type导致权限漏洞，比如教师可以访问其他教师的课程管理接口。改进方案：

1. 实现自定义注解@PreAuthorize
2. 在Service层进行数据权限校验
3. 对敏感操作增加操作日志审计

改进后的权限校验示例：

java复制@GetMapping("/courses/{courseId}/students")
@PreAuthorize(hasRole="TEACHER")
public Result getCourseStudents(@PathVariable Long courseId) {
    // 校验当前教师是否是该课程的任教老师
    if (!courseService.isCourseTeacher(courseId, getCurrentUserId())) {
        throw new ForbiddenException("无权访问该课程数据");
    }
    return courseService.getCourseStudents(courseId);
}

5. 部署与运维实践

5.1 生产环境部署方案

我们使用Docker Compose进行服务编排，主要包含以下服务：

• app: SpringBoot应用（2个实例）
• web: Nginx反向代理+Vue静态资源
• mysql: 数据库主从
• redis: 缓存和消息队列
• prometheus: 监控数据采集

docker-compose.yml关键配置：

yaml复制services:
  app:
    image: edu-platform-backend:1.0
    ports:
      - "8080:8080"
    environment:
      - SPRING_PROFILES_ACTIVE=prod
    depends_on:
      - mysql
      - redis

  web:
    image: nginx:1.21
    ports:
      - "80:80"
    volumes:
      - ./dist:/usr/share/nginx/html
      - ./nginx.conf:/etc/nginx/conf.d/default.conf

5.2 性能监控配置

使用Spring Boot Actuator暴露监控端点，配合Prometheus+Grafana搭建监控看板，重点关注以下指标：

• JVM内存使用情况
• 接口响应时间P99
• MySQL连接池使用率
• 缓存命中率

关键Actuator配置：

properties复制management.endpoints.web.exposure.include=health,metrics,prometheus
management.metrics.tags.application=edu-platform
management.endpoint.health.show-details=always

6. 项目扩展方向

在实际使用中，我们发现几个有价值的扩展点：

1. 智能推荐系统：基于用户学习行为，使用协同过滤算法推荐相关课程
2. 自动化评测：对编程作业集成静态代码分析和单元测试自动评分
3. 直播集成：通过对接直播云服务实现实时授课功能
4. 多端同步：开发微信小程序端，支持移动学习

以直播集成为例，技术方案可选：

• 低延迟场景：使用WebRTC技术
• 大规模直播：接入阿里云直播服务
• 录播回放：结合视频点播服务

这个项目从技术选型到最终上线，最大的体会是：教育类系统要特别注意教学场景的真实需求，不能简单照搬通用架构。比如我们最初设计的讨论区是按时间倒序排列，但实际使用中发现教师更需要"按问题主题聚合"的视图，这个改动让讨论区的使用率提升了40%。