橙心橙怡1. 项目概述：在线学习系统全栈开发指南
这套SpringBoot3+Vue3在线学习系统教程，是我在指导计算机专业毕业设计过程中沉淀的实战方案。不同于市面上简单的CRUD案例，我们完整实现了课程管理、视频点播、在线测试、学习进度跟踪等核心功能模块。采用前后端分离架构，后端基于SpringBoot3构建RESTful API，前端使用Vue3+Element Plus实现响应式界面，数据库选用MySQL 8.0，并整合Redis缓存优化性能。
特别说明：本方案已在实际毕业答辩中验证通过，包含完整的权限控制、异常处理机制和性能优化措施，绝非demo级项目。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 技术栈深度解析
2.1 SpringBoot3核心特性应用
我们充分利用SpringBoot3的新特性：
- JDK17：使用Records简化DTO定义，用Sealed Classes规范权限枚举
- 响应式编程：在文件上传模块采用WebFlux实现非阻塞IO
- GraalVM支持：通过native-image插件生成原生镜像（需注意Hibernate兼容性）
- 改进的Actuator：自定义健康检查端点监控视频转码服务状态
关键配置示例：
java复制@SpringBootApplication
@EnableCaching // 开启声明式缓存
@EnableAsync // 启用异步处理
public class EduSystemApplication {
public static void main(String[] args) {
SpringApplication.run(EduSystemApplication.class, args);
}
@Bean
public RedisCacheManager cacheManager(RedisConnectionFactory factory) {
// 自定义课程详情的TTL为2小时
RedisCacheConfiguration config = RedisCacheConfiguration.defaultCacheConfig()
.entryTtl(Duration.ofHours(2))
.disableCachingNullValues();
return RedisCacheManager.builder(factory)
.cacheDefaults(config)
.build();
}
}
2.2 Vue3组合式API实战
前端架构亮点：
- Pinia状态管理：模块化设计用户、课程、测试三个store
- 动态路由：根据权限树自动生成路由配置
- 视频播放器：基于video.js封装支持HLS协议的组件
- TypeScript强化：严格类型定义API响应数据结构
典型组件实现：
vue复制<script setup lang="ts">
// 课程卡片组件
const props = defineProps<{
id: number
title: string
coverUrl: string
studyCount: number
}>()
const router = useRouter()
const gotoDetail = () => {
router.push(`/course/detail/${props.id}`)
}
</script>
<template>
<el-card shadow="hover" @click="gotoDetail">
<img :src="coverUrl" class="cover-image" />
<div class="course-title">{{ title }}</div>
<div class="meta">
<span><i class="el-icon-user"></i> {{ studyCount }}人学习</span>
</div>
</el-card>
</template>
3. 系统架构设计
3.1 微服务化改造方案
虽然作为毕业设计可采用单体架构，但我们仍做了可扩展设计：
-
模块划分：
- edu-auth：认证中心（JWT+OAuth2）
- edu-course：课程服务
- edu-media：媒体处理服务
- edu-gateway：网关层（含接口限流）
-
通信方式：
- 同步调用：OpenFeign+LoadBalancer
- 异步事件：Spring Cloud Stream(RabbitMQ)
-
数据一致性：
- 分布式事务：Seata处理选课支付场景
- 最终一致性：通过消息队列同步ES索引
3.2 数据库设计要点
ER图核心实体关系：
code复制用户 --n---m-- 课程
课程 --1---n-- 章节
章节 --1---n-- 视频资源
用户 --n---n-- 测试 --n---1-- 题库
索引优化策略：
- 课程表：为teacher_id和category_id建立联合索引
- 学习记录表：按user_id分片，时间范围查询使用覆盖索引
- 使用EXPLAIN分析慢查询，特别关注filesort和temporary
4. 核心功能实现细节
4.1 视频点播解决方案
-
文件存储：
- 小文件（<50MB）：直接存入MinIO集群
- 大文件：分片上传+断点续传（前端spark-md5计算hash）
-
转码处理：
- FFmpeg命令模板：
bash复制
ffmpeg -i input.mp4 -c:v libx264 -profile:v high -preset faster \ -crf 23 -g 60 -keyint_min 60 -sc_threshold 0 \ -c:a aac -b:a 128k -ac 2 -f mp4 output.mp4 - 使用HLS协议自适应码率：
bash复制ffmpeg -i input.mp4 -map 0 -codec: copy \ -f hls -hls_time 10 -hls_list_size 0 \ -hls_segment_filename "v%v/segment%d.ts" \ -master_pl_name master.m3u8 \ -var_stream_map "v:0,a:0 v:1,a:1" playlist.m3u8
- FFmpeg命令模板：
-
版权保护：
- 视频水印：动态添加用户ID和时间戳
- 密钥加密：HLS EXT-X-KEY配合Nginx secure_link模块
4.2 实时测试系统
技术实现要点：
-
防止作弊：
- 题目乱序+选项随机
- 窗口失去焦点检测
javascript复制window.addEventListener('blur', () => { store.commit('recordWindowBlur') }) -
自动批改：
- 编程题：使用Docker沙箱执行代码
- 客观题：Redis Bitmap存储答案模板
-
性能优化：
- 使用WebSocket推送批改结果
- 大题量分页加载（虚拟滚动）
5. 部署与监控方案
5.1 生产环境配置
推荐服务器规格：
- 开发测试：2核4G（后端）+ 1核2G（前端）
- 生产环境：4核8G*3（微服务）+ 2核4G（前端）
Nginx关键配置：
nginx复制# 前端SPA路由处理
location / {
try_files $uri $uri/ /index.html;
}
# 视频防盗链
location ~ \.(mp4|m3u8)$ {
secure_link $arg_md5,$arg_expires;
secure_link_md5 "$secure_link_expires$uri$remote_addr secret";
if ($secure_link = "") {
return 403;
}
if ($secure_link = "0") {
return 410;
}
}
5.2 监控告警体系
-
Prometheus配置：
yaml复制scrape_configs: - job_name: 'spring' metrics_path: '/actuator/prometheus' static_configs: - targets: ['localhost:8080'] -
Grafana看板：
- API成功率（HTTP状态码分布）
- JVM内存使用（分代统计）
- 课程访问热力图（按时间段）
-
日志收集：
- ELK架构处理业务异常日志
- 关键操作审计日志单独存储
6. 毕业设计增值技巧
6.1 答辩准备要点
-
演示数据设计：
- 准备多角色测试账号（管理员、教师、学生）
- 构造典型测试用例（如并发选课冲突处理）
-
PPT制作建议：
- 技术架构图使用C4模型绘制
- 性能对比数据要有基准测试证明
-
代码审查重点：
- 检查ThreadLocal内存泄漏
- MyBatis的N+1查询问题
- Vue组件销毁时的资源释放
6.2 常见问题解决方案
-
跨域问题：
java复制@Bean public CorsFilter corsFilter() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); CorsConfiguration config = new CorsConfiguration(); config.setAllowCredentials(true); config.addAllowedOriginPattern("*"); config.addAllowedHeader("*"); config.addAllowedMethod("*"); source.registerCorsConfiguration("/**", config); return new CorsFilter(source); } -
文件上传大小限制：
yaml复制spring: servlet: multipart: max-file-size: 500MB max-request-size: 600MB -
Vue3生产环境白屏：
javascript复制// vite.config.js export default defineConfig({ base: './', build: { chunkSizeWarningLimit: 1500, rollupOptions: { output: { manualChunks(id) { if (id.includes('node_modules')) { return 'vendor' } } } } } })
这套系统我在实际教学中已迭代三个版本，建议开发时特别注意：
- 视频转码服务要添加熔断机制，防止FFmpeg进程堆积
- 考试提交采用乐观锁防止并发覆盖
- 前端路由守卫要处理401状态自动跳转登录
- 数据库迁移使用Flyway时要处理好基线版本