1. 项目概述这个基于SpringBoot2Vue3MyBatis-PlusMySQL8.0的视频点播系统是我最近完成的一个企业级项目实战。作为一个有多年全栈开发经验的工程师我想分享一下这个项目的完整实现过程和其中的技术要点。视频点播系统在现代互联网应用中非常常见从在线教育平台到短视频应用都需要类似的技术架构。这个系统采用了前后端分离的设计后端使用SpringBoot2框架前端使用Vue3数据库采用MySQL8.0整体架构清晰性能稳定。2. 技术选型解析2.1 后端技术栈选择SpringBoot2作为后端框架有几个重要考虑快速开发SpringBoot的自动配置和起步依赖大大减少了样板代码微服务友好未来如果需要扩展为微服务架构可以平滑过渡生态丰富Spring生态有大量成熟的解决方案MyBatis-Plus相比原生MyBatis的优势内置通用CRUD操作减少重复代码强大的条件构造器简化复杂查询支持Lambda表达式代码更优雅2.2 前端技术栈Vue3相比Vue2的主要改进Composition API更好的逻辑复用性能提升更快的虚拟DOM和更小的包体积更好的TypeScript支持Element Plus作为UI组件库的选择理由丰富的组件满足后台管理系统需求良好的文档和社区支持与Vue3完美兼容2.3 数据库设计MySQL8.0的新特性在这个项目中特别有用窗口函数方便实现排行榜等复杂查询JSON支持灵活存储视频的扩展属性更好的索引性能提升查询速度3. 核心功能实现3.1 用户认证模块采用JWT(JSON Web Token)实现无状态认证关键实现如下// JWT工具类 public class JwtUtil { private static final String SECRET your-secret-key; private static final long EXPIRATION 86400000; // 24小时 public static String generateToken(Long userId, String username, String role) { return Jwts.builder() .setSubject(username) .claim(userId, userId) .claim(role, role) .setIssuedAt(new Date()) .setExpiration(new Date(System.currentTimeMillis() EXPIRATION)) .signWith(SignatureAlgorithm.HS512, SECRET) .compact(); } public static Claims parseToken(String token) { return Jwts.parser() .setSigningKey(SECRET) .parseClaimsJws(token) .getBody(); } }3.2 视频上传与处理视频上传需要考虑的几个关键点文件分片上传大文件上传的稳定性视频转码适配不同终端和网络环境封面图生成自动从视频中提取关键帧核心上传接口实现PostMapping(/upload) public R uploadVideo(RequestParam(file) MultipartFile file, RequestParam(title) String title, RequestParam(categoryId) Integer categoryId) { // 1. 保存原始文件 String originalFilename file.getOriginalFilename(); String filePath storageService.store(file); // 2. 生成视频信息 Video video new Video(); video.setTitle(title); video.setOriginalName(originalFilename); video.setFilePath(filePath); video.setCategoryId(categoryId); video.setUploaderId(getCurrentUserId()); video.setUploadTime(new Date()); // 3. 异步处理视频 videoProcessService.asyncProcessVideo(video); return R.ok().put(videoId, video.getVideoId()); }3.3 视频播放统计为了准确统计视频播放量我们实现了以下逻辑客户端上报播放进度服务端去重处理定时汇总统计数据播放记录上报接口PostMapping(/play) public R recordPlay(RequestBody PlayRecord record) { // 验证用户是否登录 Long userId getCurrentUserId(); // 检查是否已经记录过 if(!playRecordService.exists(userId, record.getVideoId())) { PlayRecord newRecord new PlayRecord(); newRecord.setUserId(userId); newRecord.setVideoId(record.getVideoId()); newRecord.setPlayTime(new Date()); newRecord.setDuration(record.getDuration()); playRecordService.save(newRecord); // 更新视频总播放量 videoService.incrementViewCount(record.getVideoId()); } return R.ok(); }4. 性能优化实践4.1 数据库优化针对视频点播系统的高并发查询特点我们做了以下优化索引优化为user_id、video_id等高频查询字段建立索引使用复合索引优化多条件查询查询优化避免SELECT *只查询必要字段使用JOIN替代多次单表查询对大表进行分表处理4.2 缓存策略采用Redis作为缓存层主要缓存以下数据热门视频列表用户个性化推荐视频基本信息缓存更新策略视频信息修改时更新缓存热门列表定时任务更新个性化推荐用户行为触发更新4.3 前端性能优化懒加载视频列表图片和组件按需加载预加载用户可能观看的视频提前加载代码分割按路由拆分代码包CDN加速静态资源使用CDN分发5. 安全防护措施5.1 接口安全JWT安全使用HTTPS传输设置合理的过期时间实现token刷新机制接口防刷限流使用Guava RateLimiter验证码敏感操作需要验证码IP限制异常IP封禁5.2 文件安全上传文件校验文件类型白名单文件大小限制病毒扫描存储安全文件权限控制访问链接签名防盗链措施5.3 数据安全敏感数据加密密码使用BCrypt加密个人隐私字段加密存储SQL注入防护使用MyBatis-Plus的条件构造器避免拼接SQLXSS防护前端使用vue-sanitize后端输入过滤6. 部署与运维6.1 后端部署采用Docker容器化部署主要步骤构建Docker镜像FROM openjdk:11 COPY target/vod-system.jar /app.jar ENTRYPOINT [java,-jar,/app.jar]使用Docker Compose编排version: 3 services: app: image: vod-system:latest ports: - 8080:8080 environment: - SPRING_PROFILES_ACTIVEprod depends_on: - redis - mysql6.2 前端部署使用Nginx作为前端静态资源服务器配置示例server { listen 80; server_name your-domain.com; location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; } location /api { proxy_pass http://backend:8080; proxy_set_header Host $host; } }6.3 监控与告警Spring Boot Actuator暴露健康检查端点Prometheus Grafana监控系统指标ELK日志收集与分析告警规则设置CPU、内存、异常请求等阈值7. 项目扩展方向这个基础版本完成后还可以考虑以下扩展推荐系统基于用户行为的个性化推荐弹幕功能实时互动体验多端适配小程序、APP端开发付费观看集成支付系统直播功能扩展为直播点播平台在实际开发过程中我遇到并解决了一些典型问题。比如视频转码的性能问题最初使用单线程转码导致处理队列堆积后来改为使用FFmpeg配合线程池大大提高了处理效率。另一个问题是前端播放器在不同浏览器下的兼容性问题通过引入专业的视频播放器库并做好降级方案最终解决。
1. 项目概述这个基于SpringBoot2Vue3MyBatis-PlusMySQL8.0的视频点播系统是我最近完成的一个企业级项目实战。作为一个有多年全栈开发经验的工程师我想分享一下这个项目的完整实现过程和其中的技术要点。视频点播系统在现代互联网应用中非常常见从在线教育平台到短视频应用都需要类似的技术架构。这个系统采用了前后端分离的设计后端使用SpringBoot2框架前端使用Vue3数据库采用MySQL8.0整体架构清晰性能稳定。2. 技术选型解析2.1 后端技术栈选择SpringBoot2作为后端框架有几个重要考虑快速开发SpringBoot的自动配置和起步依赖大大减少了样板代码微服务友好未来如果需要扩展为微服务架构可以平滑过渡生态丰富Spring生态有大量成熟的解决方案MyBatis-Plus相比原生MyBatis的优势内置通用CRUD操作减少重复代码强大的条件构造器简化复杂查询支持Lambda表达式代码更优雅2.2 前端技术栈Vue3相比Vue2的主要改进Composition API更好的逻辑复用性能提升更快的虚拟DOM和更小的包体积更好的TypeScript支持Element Plus作为UI组件库的选择理由丰富的组件满足后台管理系统需求良好的文档和社区支持与Vue3完美兼容2.3 数据库设计MySQL8.0的新特性在这个项目中特别有用窗口函数方便实现排行榜等复杂查询JSON支持灵活存储视频的扩展属性更好的索引性能提升查询速度3. 核心功能实现3.1 用户认证模块采用JWT(JSON Web Token)实现无状态认证关键实现如下// JWT工具类 public class JwtUtil { private static final String SECRET your-secret-key; private static final long EXPIRATION 86400000; // 24小时 public static String generateToken(Long userId, String username, String role) { return Jwts.builder() .setSubject(username) .claim(userId, userId) .claim(role, role) .setIssuedAt(new Date()) .setExpiration(new Date(System.currentTimeMillis() EXPIRATION)) .signWith(SignatureAlgorithm.HS512, SECRET) .compact(); } public static Claims parseToken(String token) { return Jwts.parser() .setSigningKey(SECRET) .parseClaimsJws(token) .getBody(); } }3.2 视频上传与处理视频上传需要考虑的几个关键点文件分片上传大文件上传的稳定性视频转码适配不同终端和网络环境封面图生成自动从视频中提取关键帧核心上传接口实现PostMapping(/upload) public R uploadVideo(RequestParam(file) MultipartFile file, RequestParam(title) String title, RequestParam(categoryId) Integer categoryId) { // 1. 保存原始文件 String originalFilename file.getOriginalFilename(); String filePath storageService.store(file); // 2. 生成视频信息 Video video new Video(); video.setTitle(title); video.setOriginalName(originalFilename); video.setFilePath(filePath); video.setCategoryId(categoryId); video.setUploaderId(getCurrentUserId()); video.setUploadTime(new Date()); // 3. 异步处理视频 videoProcessService.asyncProcessVideo(video); return R.ok().put(videoId, video.getVideoId()); }3.3 视频播放统计为了准确统计视频播放量我们实现了以下逻辑客户端上报播放进度服务端去重处理定时汇总统计数据播放记录上报接口PostMapping(/play) public R recordPlay(RequestBody PlayRecord record) { // 验证用户是否登录 Long userId getCurrentUserId(); // 检查是否已经记录过 if(!playRecordService.exists(userId, record.getVideoId())) { PlayRecord newRecord new PlayRecord(); newRecord.setUserId(userId); newRecord.setVideoId(record.getVideoId()); newRecord.setPlayTime(new Date()); newRecord.setDuration(record.getDuration()); playRecordService.save(newRecord); // 更新视频总播放量 videoService.incrementViewCount(record.getVideoId()); } return R.ok(); }4. 性能优化实践4.1 数据库优化针对视频点播系统的高并发查询特点我们做了以下优化索引优化为user_id、video_id等高频查询字段建立索引使用复合索引优化多条件查询查询优化避免SELECT *只查询必要字段使用JOIN替代多次单表查询对大表进行分表处理4.2 缓存策略采用Redis作为缓存层主要缓存以下数据热门视频列表用户个性化推荐视频基本信息缓存更新策略视频信息修改时更新缓存热门列表定时任务更新个性化推荐用户行为触发更新4.3 前端性能优化懒加载视频列表图片和组件按需加载预加载用户可能观看的视频提前加载代码分割按路由拆分代码包CDN加速静态资源使用CDN分发5. 安全防护措施5.1 接口安全JWT安全使用HTTPS传输设置合理的过期时间实现token刷新机制接口防刷限流使用Guava RateLimiter验证码敏感操作需要验证码IP限制异常IP封禁5.2 文件安全上传文件校验文件类型白名单文件大小限制病毒扫描存储安全文件权限控制访问链接签名防盗链措施5.3 数据安全敏感数据加密密码使用BCrypt加密个人隐私字段加密存储SQL注入防护使用MyBatis-Plus的条件构造器避免拼接SQLXSS防护前端使用vue-sanitize后端输入过滤6. 部署与运维6.1 后端部署采用Docker容器化部署主要步骤构建Docker镜像FROM openjdk:11 COPY target/vod-system.jar /app.jar ENTRYPOINT [java,-jar,/app.jar]使用Docker Compose编排version: 3 services: app: image: vod-system:latest ports: - 8080:8080 environment: - SPRING_PROFILES_ACTIVEprod depends_on: - redis - mysql6.2 前端部署使用Nginx作为前端静态资源服务器配置示例server { listen 80; server_name your-domain.com; location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; } location /api { proxy_pass http://backend:8080; proxy_set_header Host $host; } }6.3 监控与告警Spring Boot Actuator暴露健康检查端点Prometheus Grafana监控系统指标ELK日志收集与分析告警规则设置CPU、内存、异常请求等阈值7. 项目扩展方向这个基础版本完成后还可以考虑以下扩展推荐系统基于用户行为的个性化推荐弹幕功能实时互动体验多端适配小程序、APP端开发付费观看集成支付系统直播功能扩展为直播点播平台在实际开发过程中我遇到并解决了一些典型问题。比如视频转码的性能问题最初使用单线程转码导致处理队列堆积后来改为使用FFmpeg配合线程池大大提高了处理效率。另一个问题是前端播放器在不同浏览器下的兼容性问题通过引入专业的视频播放器库并做好降级方案最终解决。
