企业官网建设流程全解析

基于 Spring Boot 的电影推荐系统开发实战：从 PRD 到可解释推荐（easy-vibe Stage 2 综合实战）

【免费下载链接】easy-vibe💻 vibe coding 101｜The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe

导读

本文是 easy-vibe 课程 Stage 2 的综合实战项目指南，目标是用 Spring Boot 从零构建一个「带推荐能力的电影网站」。与纯增删改查（CRUD）项目不同，本项目要求你围绕真实 PRD 展开，思考「用户行为如何影响推荐结果」以及「推荐如何做到可解释」，完整走通"内容 + 行为 + 推荐"型产品的开发模式——这种模式在电商、内容平台、个性化 Feed 等场景中非常常见。读完本文，你将掌握：从 PRD 提取开发任务清单、用 Spring Boot 搭建后端并实现 RESTful API、设计"用户行为 → 推荐"的完整数据链路、实现可解释推荐逻辑，以及完成端到端联调并交付可演示的产品原型。

项目概览

本实战要求你围绕一份真实的 PRD，使用 Spring Boot 完成一个带推荐能力的电影网站。核心挑战在于：它不是简单的增删改查，而是需要你深入思考两个问题——用户行为如何影响推荐结果、推荐如何做到可解释。这是 Stage 2 的综合实战环节，你将第一次接触"内容 + 行为 + 推荐"型产品的开发模式。

要构建的产品功能如下：

本项目的需求文档位于仓库的 PRD 文档（Draft v0.1），其中明确界定了 MVP 的最小可用边界与前后端分工，是开发前必读的第一份材料。

学习目标

完成本实战后，你将能够：

1. 阅读 PRD 并从中提取推荐系统的开发任务清单
2. 使用 Spring Boot 搭建后端项目并实现 RESTful API
3. 设计"用户行为 → 推荐"的完整数据链路
4. 实现可解释的推荐逻辑
5. 完成端到端联调，交付可演示的产品原型

前置知识

在开始本项目之前，你应该已经掌握以下内容（均为 easy-vibe 课程的前序章节）：

• 前端页面设计与组件库使用（UI 设计、现代组件库）
• 后端接口设计与开发（接口代码编写）
• 数据库基础与 Supabase（从数据库到 Supabase）
• Git 工作流与部署（Git 和 GitHub、部署 Web 应用）

四阶段开发流程

整个实战按以下四个阶段推进，每个阶段都有明确的产出：

1. 需求分析：阅读 PRD，明确推荐策略、行为数据和后台范围
2. 搭建骨架：用 AI 生成列表页、详情页、推荐页和后台页
3. 迭代开发：补充推荐逻辑、行为记录和后台管理
4. 联调上线：端到端跑通，部署并准备演示

第一部分：需求分析

1.1 阅读 PRD

打开 PRD 文档，重点回答以下问题：

• 推荐策略是什么？第一版是否使用可解释版本（如基于标签偏好 + 评分权重）？
• 用户行为数据要存哪些？评分、收藏、浏览记录是否都需要落库？
• 管理员需要看哪些推荐效果指标？如电影总数、日评分数、收藏率、推荐点击率。
• 页面清单是否完整？官网前台、用户前台、后台管理台的页面是否都能覆盖核心链路？

⚠️ 如果以上问题没有明确答案，不要开始写代码。需求理解不清楚是导致返工的最常见原因——尤其是推荐这类强逻辑模块，需求偏差的代价远超普通页面。

1.2 确认系统架构

PRD 给出的系统总览图如下，你可以据此确认前后端职责边界：

PRD 建议的技术选型：

• 前端框架：React 或 Vue（配 TypeScript，组件库可选 Ant Design / shadcn/ui）
• 后端框架：Spring Boot 3（Java 17）
• 数据库：MySQL 8（搭配 Spring Data JPA）
• 鉴权：JWT
• 缓存：Redis（可选）

1.3 产品借鉴点与页面拆解

PRD 建议参考真实电影产品的做法，避免把推荐站做成"课堂 demo"：

• 借鉴 Letterboxd 的社区化电影浏览体验：电影卡片、评分、收藏、个人记录要自然串起来
• 借鉴 IMDb 的详情页信息组织：海报、简介、标签、评分、演员和关联内容分层展示
• 推荐页不能只是一个列表，应当同时展示推荐理由
• 个人中心要强调"我的评分 / 我的收藏 / 我的推荐偏好"
• 后台管理应像内容运营后台，而不是简单 CRUD 页面

PRD 将页面定义为「3 套入口，9 个大页面」：

关键用户链路与状态流：

• 用户状态：游客 → 注册用户
• 电影交互：未评分 → 已评分
• 推荐状态：冷启动 → 有偏好推荐

第二部分：搭建项目骨架

2.1 生成前端页面

用 AI 生成前端骨架时，可以套用下面的参考提示词（建议根据 PRD 内容补充电影领域细节）：

请基于当前 PRD，帮我生成一个 Spring Boot 电影推荐系统的前端骨架。 要求： 1. 页面包括：首页、电影列表、电影详情、推荐页、个人中心、后台管理 2. 先只生成页面结构和假数据，不接真实接口 3. 风格要像真实内容产品，而不是课堂 demo

法文版作业文档给出的提示词略有侧重，同样可直接使用：

Veuillez générer, sur la base du PRD actuel, le squelette frontend d'un site web de films avec système de recommandation. Exigences : 1. Page d'accueil avec films populaires et recommandations personnalisées 2. Page de liste de films avec recherche et filtrage 3. Page de détail d'un film avec notes et avis 4. Page de profil avec favoris et historique 5. Back-office pour la gestion des films et le suivi des recommandations 6. Générer d'abord uniquement la structure des pages et des données fictives

2.2 验证页面结构

生成后用以下清单逐项检查：

• 电影列表页支持搜索和筛选
• 电影详情页包含评分和收藏按钮
• 推荐页能展示推荐结果和推荐理由
• 管理后台能展示电影数据和推荐效果

第三部分：迭代开发

3.1 按模块推进

建议按 PRD 给出的开发顺序逐模块推进，而不是一次性写完整套系统：

1. 登录与用户体系：注册、登录、JWT 鉴权
2. 电影数据管理：电影列表、详情、搜索接口（含分页）
3. 用户行为：评分、收藏接口，行为数据写入
4. 推荐逻辑：基于用户行为的推荐算法实现
5. 推荐展示：推荐结果展示，包含推荐理由
6. 管理后台：电影数据维护、推荐效果查看

3.2 模块自检清单

每完成一个模块，对照下表验证：

3.3 数据模型设计

作业文档给出的参考表结构（五张核心表）：

PRD 在此基础上给出了更完整的建表草案（含用户与标签表），可直接作为 JPA 实体设计的蓝本：

users ( id bigint primary key auto_increment, email varchar(120), password_hash varchar(255), role varchar(20), created_at datetime ) movies ( id bigint primary key auto_increment, title varchar(200), summary text, release_year int, poster_url varchar(500), created_at datetime ) movie_tags ( id bigint primary key auto_increment, movie_id bigint, tag varchar(50) ) ratings ( id bigint primary key auto_increment, user_id bigint, movie_id bigint, score int, created_at datetime ) favorites ( id bigint primary key auto_increment, user_id bigint, movie_id bigint, created_at datetime ) recommendation_logs ( id bigint primary key auto_increment, user_id bigint, strategy varchar(50), result_count int, created_at datetime )

注意几个关键差异点：PRD 中ratings.score是 int 型；recommendation_logs用于记录"哪个用户、用哪种策略、返回了多少条结果"，是后台监控推荐效果的基础数据；movie_tags将标签从电影表剥离成独立关联表，便于实现"基于标签偏好"的推荐策略。

3.4 接口草案

PRD 给出的接口清单（RESTful 风格）：

GET /api/recommendations的返回示例（推荐结果必须包含分值、理由与标签）：

{ "items": [ { "movieId": 12, "title": "Interstellar", "score": 0.91, "reason": "你近期给高分的科幻与冒险标签影片较多" } ] }

关于接口设计规范，可以对照 接口代码编写 章节中总结的 RESTful 最佳实践：

• 路径命名：URL 表示资源名，用 HTTP 方法表达动作。GET /api/movies获取列表、POST /api/movies创建资源；避免POST /api/getUser这类把动词写进路径的设计。
• 状态码标准化：200/201 表示成功；400 表示参数错误或必填字段缺失；401/403 表示未登录或无权限；404 表示资源不存在；500 表示服务端错误——切忌把错误堆栈暴露给前端。
• 永远不要信任用户输入：前端输入可能被伪造，所有关键参数校验必须在后端接口中重新执行。

3.5 推荐策略与可解释性

PRD 明确第一版推荐策略采用可解释版本（不做复杂协同过滤、不做实时流计算）：

• 基于标签偏好（从用户高分电影的标签聚合偏好）
• 结合用户评分权重
• 冷启动时叠加热门电影
• 过滤已评分 / 已收藏电影（避免推荐用户已经看过的内容）

推荐结果必须展示：推荐分值、推荐理由、对应标签。推荐理由的典型文案形态即上文的"你近期给高分的科幻与冒险标签影片较多"——把"行为 → 标签 → 推荐"的推导链暴露给用户，就是可解释推荐的核心。

关键业务规则（PRD 第 9 节）：

• 每个用户对同一电影只保留一条评分（重复评分应走更新而非插入）
• 收藏与评分都能影响推荐
• 管理员接口必须单独鉴权（与普通用户接口权限严格分离）
• 推荐结果至少返回 10 条或当前可用最大值

后台监控指标建议（PRD 第 6.1 节）：

• 电影总数、日评分数、收藏率、推荐点击率
• 热门标签分布、冷启动用户占比
• 推荐接口响应耗时、评分写入成功率、数据库慢查询（如有 Redis 可加缓存命中率）

第四部分：联调与上线

4.1 端到端测试

至少验证以下两个关键场景：

• 行为驱动推荐：浏览电影 → 评分 → 收藏 → 查看推荐页，确认推荐结果随行为发生变化
• 后台闭环：管理员登录 → 添加电影 → 查看推荐效果统计

4.2 部署方案

作业文档要求的部署形态是：

• 前端部署到 Vercel / Zeabur
• Spring Boot 后端部署到 Zeabur / Railway / Render
• 使用 Supabase 或 PostgreSQL 作为数据库

可以对照 部署 Web 应用 章节了解平台差异：Vercel 对前端框架支持好、与 GitHub 深度集成；Netlify 功能全面（支持表单处理、认证）；Zeabur 支持多语言多服务组合，适合"前端 + 后端 + 数据库"多服务联动场景。若后端使用 Zeabur，需特别注意其平台约定——只识别监听 8080 端口的应用，而 Spring Boot 默认监听 8080 端口，恰好天然匹配；如果使用了自定义端口则需要调整配置。

交付物

完成本项目后，你需要提交以下内容：

• 可访问的线上演示链接
• 源码仓库链接（含 README）
• PRD 文档
• 核心页面截图（电影列表、电影详情、推荐页、管理后台）
• 60 秒演示视频

评分标准

参考资料

• UI 设计
• 现代组件库
• 从数据库到 Supabase
• 接口代码编写
• Git 和 GitHub 工作流
• 部署 Web 应用
• 电影推荐系统 PRD

【免费下载链接】easy-vibe💻 vibe coding 101｜The first course for AI-native product builders.项目地址: https://gitcode.com/GitHub_Trending/ea/easy-vibe