伊凹遥1. 项目概述：Spring+Vue全栈视频学习小程序
这个毕业设计项目采用前后端分离架构，后端基于Spring Boot技术栈，前端使用Vue.js框架，最终打包为微信小程序形态的视频学习平台。从技术选型来看，这是一个典型的全栈开发实践案例，涉及Java后端开发、前端MVVM框架应用、小程序容器适配以及音视频处理等关键技术点。
在实际教学场景中，这类系统通常需要解决三个核心问题：课程资源的组织与管理、学习进度的跟踪记录、以及移动端适配的交互体验。Spring Boot提供了稳定的RESTful API服务能力，Vue.js则负责构建响应式用户界面，而微信小程序作为载体则解决了跨平台分发的问题。
提示：选择Spring Boot 2.7 + Vue 3的组合时，需特别注意axios拦截器与Spring Security的兼容性配置，这是初期最容易出现403错误的环节。
需要模型API调用？ 免费领10W Token，多模型网关一键接入 Claude、DeepSeek 等主流模型。
2. 技术架构深度解析
2.1 后端Spring Boot技术栈
采用三层架构设计：
- 控制层：使用
@RestController处理HTTP请求，配合Spring Validation进行参数校验 - 服务层：通过
@Transactional保证业务原子性，视频处理使用FFmpeg进行转码 - 持久层：MyBatis-Plus实现动态SQL构建，连接池采用HikariCP
关键配置示例：
java复制// 视频分片上传配置
@Bean
public MultipartConfigElement multipartConfigElement() {
MultipartConfigFactory factory = new MultipartConfigFactory();
factory.setMaxFileSize(DataSize.ofGB(2));
factory.setMaxRequestSize(DataSize.ofGB(5));
return factory.createMultipartConfig();
}
2.2 前端Vue技术实现
使用Vue CLI创建项目时选择：
- Vuex进行状态管理
- Vue Router实现前端路由
- Element Plus作为UI组件库
- 视频播放采用video.js集成方案
播放器核心逻辑：
javascript复制// 初始化HLS播放器
initPlayer() {
if (Hls.isSupported()) {
this.hls = new Hls({
maxBufferLength: 15,
maxMaxBufferLength: 600
});
this.hls.loadSource(this.videoUrl);
this.hls.attachMedia(this.$refs.videoPlayer);
}
}
3. 微信小程序适配方案
3.1 原生组件兼容处理
由于小程序环境与浏览器存在差异，需要特别注意：
- 视频组件使用
<video>标签需转换为<video>小程序原生组件 - 路由跳转需改用
wx.navigateTo等小程序API - 网络请求需封装兼容层：
javascript复制const request = (options) => {
return new Promise((resolve, reject) => {
wx.request({
url: baseURL + options.url,
method: options.method || 'GET',
data: options.data || {},
success: resolve,
fail: reject
})
})
}
3.2 性能优化要点
- 分包加载：将视频播放器等非核心功能拆分为独立分包
- 缓存策略：采用LRU算法缓存课程目录数据
- 预加载机制：用户浏览列表时预加载首个视频的前30秒内容
- 骨架屏技术：课程列表页使用动态生成的骨架屏提升体验
4. 核心功能实现细节
4.1 视频处理流水线
采用生产者-消费者模式构建处理队列：
- 上传原始视频到临时存储区（OSS）
- 转码服务监听消息队列（RabbitMQ）
- 使用FFmpeg生成多分辨率版本（1080p/720p/480p）
- 提取关键帧生成封面图
- 写入持久化存储并更新数据库
关键FFmpeg命令：
bash复制ffmpeg -i input.mp4 -c:v libx264 -profile:v high -level 4.0 \
-vf "scale=1280:720" -crf 23 -preset fast -c:a aac \
-b:a 128k -movflags +faststart output_720p.mp4
4.2 学习进度同步机制
采用双写策略保证数据一致性：
- 前端每30秒自动保存进度到LocalStorage
- 离开页面时触发立即同步
- 后端使用乐观锁处理并发更新：
sql复制UPDATE user_progress
SET progress = #{progress}, version = version + 1
WHERE user_id = #{userId} AND course_id = #{courseId}
AND version = #{version}
5. 典型问题排查实录
5.1 视频播放卡顿问题
现象：iOS设备播放m3u8格式视频出现缓冲
排查过程：
- 检查Nginx配置确认开启了分片缓存
- 验证视频编码格式符合HLS标准
- 发现CDN节点未正确返回206状态码
解决方案：
- 调整Nginx配置：
nginx复制location ~ \.m3u8$ {
add_header Cache-Control no-cache;
types {
application/vnd.apple.mpegurl m3u8;
}
}
- 启用HTTP/2协议提升传输效率
5.2 微信登录会话失效
异常场景：用户重新进入小程序后需要重复登录
根因分析：
- 未正确处理session_key刷新机制
- 本地存储的token过期时间设置过短
优化方案：
- 实现双token机制（access_token + refresh_token）
- 添加静默续期接口：
java复制@PostMapping("/token/refresh")
public Result refreshToken(@RequestHeader("X-Refresh-Token") String refreshToken) {
// 验证refresh_token有效性
// 生成新的access_token返回
}
6. 项目部署实践
6.1 容器化部署方案
使用Docker Compose编排服务：
yaml复制version: '3'
services:
app:
image: openjdk:11-jre
ports:
- "8080:8080"
volumes:
- ./logs:/app/logs
environment:
- SPRING_PROFILES_ACTIVE=prod
redis:
image: redis:6
ports:
- "6379:6379"
6.2 监控体系搭建
- Spring Boot Actuator 暴露健康检查端点
- Prometheus + Grafana 监控JVM指标
- ELK 收集业务日志
- 微信小程序数据助手 分析用户行为
关键监控指标：
- 视频加载耗时P99值
- API接口成功率
- 并发用户数波动趋势
- 错误日志TOP10统计
在实现视频加密播放功能时，我们最终采用了AES-128加密配合时间戳验证的方案。具体实施中发现微信小程序对CryptoJS的支持不完整，需要引入polyfill进行兼容。这个细节在官方文档中并未明确说明，需要开发者特别注意加密库的适配性问题。