耗时一周，从零打造的生产级在线观影平台，涵盖完整微服务架构、VIP 会员体系、实时弹幕、断点续播，前端采用 Vue3 + TypeScript，后端基于 Spring Cloud Alibaba，已在开发环境稳定运行。

📌 项目概况

IMovie 是一个功能完整、高并发设计的在线观影平台，支持电影浏览、智能搜索、高清播放器、弹幕互动、评论点赞、收藏、VIP会员体系（套餐/积分/优惠券/观影券）、个人中心等。项目采用前后端分离架构，后端拆分为 7 个微服务，前端使用 Vue3 + Element Plus + Tailwind CSS，通过 API 网关统一路由和鉴权，支持横向扩展。

开源地址：前端 https://gitee.com/walii/web-movie | 后端 https://gitee.com/walii/java-movie

---

🚀 一、为什么做这个项目？

在视频平台日益内卷的今天，我们希望构建一个开箱即用、技术栈现代、代码规范的观影系统，既能作为毕业设计/简历项目，也能直接用于中小型视频站点的二次开发。本项目重点解决了以下痛点：

• 微服务架构下的服务拆分与鉴权统一
• 高并发场景下的弹幕推送与播放进度记录
• VIP 会员体系的完整实现（套餐、订单、积分、优惠券）
• 前端高性能播放器 + 弹幕组件 + 断点续播
• 前后端分离下的 API 设计规范与统一响应

---

✨ 二、项目特点

• 🎬 完整观影闭环 —— 涵盖电影浏览、智能搜索、视频播放（倍速/画质/断点续播）、弹幕互动、评论点赞收藏、观看历史，一站式满足用户观影全流程
• 💎 成熟的 VIP 会员体系 —— 实现会员套餐、订单管理、积分系统、优惠券、观影券、礼包领取
• ⚡ 高并发异步架构 —— 基于 RabbitMQ 解耦播放进度更新、用户创建、通知发送等场景，配合 Redis 缓存热点数据，系统可横向扩展
• 🔐 统一鉴权与服务治理 —— Spring Cloud Gateway 统一入口 + JWT 无状态认证，Nacos 服务注册与配置中心，实现多服务间的路由转发与权限控制
• 💬 实时弹幕系统 —— WebSocket + STOMP 协议，支持多房间弹幕广播、用户发送/屏蔽，集群环境下基于 Redis 实现消息同步
• 🎨 现代化前端体验 —— Vue3 + TypeScript + Element Plus + Tailwind CSS，响应式设计适配 PC/平板/手机，卡片式布局与深色主题，流畅动画
• 📦 工程化最佳实践 —— 前端路由懒加载、组件按需引入、代码分割；后端独立数据库、Feign 服务调用、AOP 统一日志，代码规范且易维护
• 🛠️ 开箱即用 —— 提供完整部署脚本、Docker 中间件一键启动、详细接口文档，5 分钟即可运行前后端项目，适合学习、毕设或二次开发

🧱 三、整体技术架构

3.1 架构图（预览）

微服务架构图，包含网关、认证、用户、视频、交互、VIP、上传服务及中间件

3.2 核心技术栈

层级	技术	版本	用途
前端	Vue3 + Composition API	3.5	响应式 UI
	TypeScript	5.6	类型安全
	Vite	5.4	构建工具
	Element Plus	2.14	PC 端组件库
	Tailwind CSS	3.14	原子化样式
	Pinia	3.0	状态管理
后端核心	Spring Boot	2.7.18	基础框架
	Spring Cloud Alibaba	2021.0.5.0	微服务生态
	Nacos	2.2.3	服务注册与配置
	Gateway	2021.0.8	API 网关
数据与中间件	MySQL 8.0	-	数据库（各服务独立）
	Redis	7.0	缓存 + Session
	RabbitMQ	3.13	异步消息
其他	JWT	-	无状态认证
	WebSocket	-	实时弹幕

3.3 微服务拆分（独立数据库）

服务	端口	数据库	核心职责
gateway-service	8000	-	统一入口、路由、JWT 鉴权、跨域
auth-service	8001	imovie_auth	注册/登录、Token 管理
user-service	8002	imovie_user	用户资料、隐私设置、通知、FAQ
video-service	8003	imovie_video	视频列表、详情、播放地址、进度、历史
interaction-service	8004	imovie_interaction	评论、点赞、收藏、弹幕 (WebSocket)
vip-service	8005	imovie_vip	会员、套餐、订单、积分、优惠券
upload-service	8006	-	头像上传、OSS 签名

💡 服务通信：HTTP 调用（Feign）+ 异步消息（RabbitMQ），例如用户注册后发送 user.create 消息创建资料，播放进度异步更新。

---

🎨 四、前端亮点与页面预览

前端采用 Vue3 + TS + Vite，封装了 20+ 通用组件，支持响应式布局（PC/平板/手机），所有页面均已实现。

4.1 首页（热门推荐 + 轮播图）

首页：轮播图、电影卡片网格、分类导航

• 轮播图组件支持自动播放/指示点/跳转
• 无限滚动加载热门电影列表
• 响应式网格 (Tailwind Grid)

4.2 电影详情页

详情页：电影信息、演员表、评论、播放按钮、收藏/分享

• 相关推荐 (基于视频标签)
• 一键收藏/取消 (实时同步后端)
• 发表精彩评论

4.3 视频播放器（核心）

• 基于原生 <video> 封装，支持：
  • 倍速 (0.5x~2.0x)
  • 画质切换 (480p/720p/1080p)
  • 进度记忆（断点续播）
  • 快捷键（空格暂停/左右快进）
• 弹幕系统：WebSocket 连接，支持发送/显示/屏蔽/颜色/速度
• 全屏/网页全屏

播放页：播放器控件 + 弹幕飘过效果

4.4 用户主页（个人中心）

个人中心：头像、昵称、观看历史、收藏夹、VIP 卡片

• 观看历史（按时间倒序，继续观看按钮）
• 收藏夹管理（批量取消）
• VIP 会员信息展示（到期时间、积分）

4.5 消息通知页

消息通知页：系统通知列表，VIP 到期提醒、点赞评论通知

• 未读红点提示
• 支持标记已读/全部已读
• 分页加载

4.6 用户设置页

用户设置页：头像上传、隐私设置、绑定手机/邮箱

• 头像上传（调用 upload-service）
• 隐私设置：允许搜索、历史可见性等
• 修改密码 + 手机/邮箱绑定

---

⚙️ 五、后端核心实现精讲

5.1 网关 JWT 统一鉴权

所有请求先经过 gateway-service，GatewayFilter 提取 Authorization Header，验证 JWT 有效性，并解析用户 ID 存入请求头，下游服务可直接获取。

// GatewayFilter 核心逻辑
String token = request.getHeaders().getFirst("Authorization");
if (token != null && token.startsWith("Bearer ")) {
    token = token.substring(7);
    Claims claims = JwtUtil.parseToken(token);
    if (claims != null) {
        String userId = claims.getSubject();
        // 将用户ID转发到下游
        request.mutate().header("X-User-Id", userId).build();
    }
}

5.2 弹幕系统设计（WebSocket）

interaction-service 使用 Spring WebSocket 处理弹幕消息：

• 每个视频房间一个 SimpMessagingTemplate 目的地 /topic/danmaku/{videoId}
• 用户发送弹幕 → 广播给房间内所有订阅者
• 同时异步存入 MySQL（批量写入优化）

@MessageMapping("/danmaku.send")
public void sendDanmaku(@Payload DanmakuMessage message) {
    // 广播弹幕
    messagingTemplate.convertAndSend("/topic/danmaku/" + message.getVideoId(), message);
    // 异步存储
    danmakuService.saveAsync(message);
}

5.3 会员体系（VIP 服务）

• 套餐管理：月卡/季卡/年卡，价格与特权配置在数据库
• 积分系统：每日签到、观看时长兑换积分，积分可兑换优惠券
• 订单流程：创建订单 → 模拟支付 → 开通/续费 VIP → 发送过期提醒消息（RabbitMQ 延时队列）
• 优惠券：满减/折扣券，与积分系统联动

5.4 播放进度追踪与断点续播

video-service 设计：

• 前端每 10 秒上报一次进度（PUT /api/v1/progress）
• 后端存储至 watch_history 表，使用 Redis 缓存最新进度（减少写压力）
• 用户下次播放时，从 Redis 或 DB 读取上次进度，前端自动跳转

CREATE TABLE `watch_history` (
  `id` bigint PRIMARY KEY,
  `user_id` bigint NOT NULL,
  `video_id` bigint NOT NULL,
  `progress` int NOT NULL DEFAULT 0, -- 秒数
  `update_time` datetime
);

5.5 异步解耦（RabbitMQ）

事件	队列	消费者	作用
用户注册	user.create.queue	user-service	创建用户资料（避免注册超时）
播放进度	progress.update.queue	video-service	批量入库历史记录
VIP 到期	vip.expiring.queue	user-service	发送通知 + 降级权益

5.6 核心接口速查表（开发必备）

以下是项目中调用最频繁的 10 个接口，前端开发或调试时可直接参考。所有接口均需在请求头携带 Authorization: Bearer {token}（登录接口除外）。

功能	方法	路径	请求示例	响应说明
用户注册	POST	/api/v1/auth/register	{"username":"test","password":"123456"}	返回用户ID
用户登录	POST	/api/v1/auth/login	{"username":"test","password":"123456"}	返回 access_token 和 refresh_token
刷新Token	POST	/api/v1/auth/refresh	{"refreshToken":"xxx"}	返回新的 access_token
获取视频列表	GET	/api/v1/video/list?page=1&size=20	-	分页视频数据
获取视频详情	GET	/api/v1/video/{videoId}	-	包含播放地址(多清晰度)
上报播放进度	PUT	/api/v1/progress	{"videoId":1001,"progress":120}	更新观看进度(秒)
发送弹幕	POST	/api/v1/danmaku (WebSocket 方式见下文)	{"videoId":1001,"content":"哈哈","color":"#fff"}	实际走 WS 更佳，HTTP 为降级
发表评论	POST	/api/v1/comment	{"videoId":1001,"content":"好看"}	返回评论ID
收藏视频	POST	/api/v1/favorite/{videoId}	-	重复调用为取消
获取VIP套餐	GET	/api/v1/vip/plans	-	返回月卡/季卡/年卡列表

📌 WebSocket 弹幕接口：连接地址 ws://localhost:8004/ws，订阅 /topic/danmaku/{videoId}，发送目标 /app/danmaku.send，消息体为 JSON。

---

🔧 六、本地运行与部署（5 分钟快速体验）

6.1 环境准备

• JDK 1.8+、Maven 3.6+、Node.js 18+、MySQL 8.0、Redis、RabbitMQ、Nacos

# Docker 启动中间件
docker run -d --name nacos -p 8848:8848 nacos/nacos-server:v2.2.3
docker run -d --name mysql -p 3306:3306 -e MYSQL_ROOT_PASSWORD=root mysql:8.0
docker run -d --name redis -p 6379:6379 redis:7.0
docker run -d --name rabbitmq -p 5672:5672 -p 15672:15672 rabbitmq:3.13-management

6.2 后端启动

1. 克隆代码，导入 IDEA
2. 在 Nacos 中创建 shared-config.yaml（数据库、Redis、JWT 配置）
3. 依次启动服务：gateway-service → auth-service → user-service → video-service → interaction-service → vip-service → upload-service

6.3 前端启动

cd web-movie
npm install
# 配置 .env 文件，修改 VITE_APP_API_BASE_URL=http://localhost:8000/api
npm run dev

访问 http://localhost:8007，即可开始体验。

---

📦 七、项目优化与踩坑记录

✅ 性能优化

1. 路由懒加载 + 组件按需引入（Element Plus） – 首屏加载减少 40%
2. 视频 CDN 分发：播放地址由 video-service 返回 CDN 签名 URL
3. 弹幕批量入库：每 100 条/5 秒 写入一次，降低 DB 压力
4. Redis 缓存视频详情：TTL 1 小时，减少 MySQL 查询

🐛 典型问题与解决

• 网关跨域：Gateway 中统一配置 CorsFilter，同时前端代理避免开发环境跨域
• WebSocket 负载均衡：使用 Spring Cloud 的 @EnableWebSocketMessageBroker 配合 Redis 发布订阅实现集群弹幕同步
• VIP 到期自动降级：RabbitMQ 死信队列实现延时通知

---

写在最后：一个完整的全栈项目不仅需要写代码，更需要工程化思维和系统性设计。希望这篇博客能帮你少走弯路，快速掌握微服务 + Vue3 实战。

八、源码获取

由于项目仍在持续迭代，源码暂托管在私有仓库。关注我的CSDN并私信回复“IMovie”，我会24小时内发送下载链接（包括前端+后端+数据库脚本+Postman测试集合）。

如果这篇博客对你有帮助，请务必：
👍 点赞 | 📝 评论 | 🔄 转发 | ⭐️ 收藏

---

版权声明：本文为博主原创，遵循 MIT 协议，可随意转载但请保留出处。项目中部分图标资源来自网络，仅用于学习交流。