--- author: AI Assistant created_at: 2026-07-19 purpose: 小程序收藏功能从 localStorage 走真实 API,在现有剧本/事件表增加 is_favorite 字段 --- # 小程序收藏功能真实 API 化设计 ## 概述 当前小程序的「收藏」功能(剧本收藏、人生事件收藏)完全基于前端 localStorage: - 剧本:`uni.getStorageSync('script_favorites')` → 对象字典 `{ id: true/false }` - 人生事件:`uni.getStorageSync('event_favorite_${id}')` → 单条布尔 后端没有真实的剧本收藏 API,人生事件收藏接口 `/lifeEvent/favorite-placeholder` 是假的(echo 请求参数 + `placeholder: true`)。 本次修复:在现有 `e_epic_script` 表和 `t_life_event` 表上新增 `is_favorite` 字段,新增真实 API,前端从 localStorage 切换到 API。 ## 现状问题 ### 前端 | 文件 | 问题 | |---|---| | `ScriptLibraryView.vue:159` | `localFavorites = ref(uni.getStorageSync('script_favorites') \|\| {})` | | `ScriptLibraryView.vue:319-369` | `toggleFavorite` / `deleteScriptFromFavorites` 只写 localStorage | | `ScriptLibraryView.vue:244` | `isFavorite` 从 `script.isFavorite \|\| localFavorites.value[id]` 读取 | | `life-event/detail.vue:142` | 从 `current_life_event` localStorage 读整条事件数据 | | `life-event/detail.vue:144` | `isFavorite` 从 `event_favorite_${id}` localStorage 读 | | `life-event/detail.vue:315-316` | toggle 写/删 `event_favorite_${id}` localStorage | ### 后端 | 文件 | 问题 | |---|---| | `LifeEventController.java:153-163` | `/lifeEvent/favorite-placeholder` 是空壳,返回 echo + `placeholder: true` | | 无剧本收藏 Controller | `/epicScript` 下没有任何收藏端点 | ## 设计方案 ### 存储方案(已确认) 在现有表新增 `is_favorite` 字段: ```sql ALTER TABLE e_epic_script ADD COLUMN is_favorite TINYINT(1) NOT NULL DEFAULT 0 COMMENT '是否收藏:0-否 1-是'; ALTER TABLE t_life_event ADD COLUMN is_favorite TINYINT(1) NOT NULL DEFAULT 0 COMMENT '是否收藏:0-否 1-是'; ``` **选择这个方案的理由**: 1. 不新增表,改动最小 2. `is_favorite` 是当前用户维度的标记;用户只操作自己的剧本/事件,不需要 user_id 维度 3. 现有 `listAll` / `page` 接口返回全量字段,新增 `isFavorite` 字段后前端可直接读取,不需要额外的"收藏夹"接口 4. 后续如需"按用户维度"收藏(如管理员视角),再迁移到独立表 ### 后端改动 #### 1. 实体类 - `EpicScript.java` 新增:`private Boolean isFavorite;` - `LifeEvent.java` 新增:`private Boolean isFavorite;` MyBatis-Plus 自动映射下划线 `is_favorite` 到驼峰 `isFavorite`。 #### 2. Controller API **剧本**(`EpicScriptController`): ``` POST /epicScript/favorite 入参:FavoriteRequest { Long id; Boolean favorite; } 出参:Result 逻辑: 1. 通过 id 查询剧本 2. 若不存在 → 抛业务异常("剧本不存在") 3. update is_favorite = favorite 4. return Result.ok() ``` **人生事件**(`LifeEventController`): ``` POST /lifeEvent/favorite 入参:FavoriteRequest { Long id; Boolean favorite; } 出参:Result 逻辑: 1. 通过 id 查询事件 2. 若不存在 → 抛业务异常 3. update is_favorite = favorite 4. return Result.ok() ``` 删除现有 `/lifeEvent/favorite-placeholder` 接口。 #### 3. Service 层 ```java // EpicScriptService void setFavorite(Long id, Boolean favorite); // LifeEventService void setFavorite(Long id, Boolean favorite); ``` 实现:`lambdaUpdate().set(EpicScript::getIsFavorite, favorite).eq(EpicScript::getId, id).update()` #### 4. DTO 新增公共请求对象 `FavoriteRequest`: ```java public class FavoriteRequest { @NotNull private Long id; @NotNull private Boolean favorite; } ``` 放在 `common` 模块,两个 Controller 都能引用。 ### 前端改动 #### 1. `stores/app.js` 新增两个 action: ```js async toggleScriptFavorite(id, favorite) { await epicScriptService.setFavorite(id, favorite); const script = this.scripts.find(s => String(s.id) === String(id)); if (script) script.isFavorite = favorite; }, async toggleEventFavorite(id, favorite) { await lifeEventService.setFavorite(id, favorite); // 事件列表如果是 store 内状态,同步更新 } ``` #### 2. `services/epicScript.js` 新增: ```js setFavorite: (id, favorite) => post('/epicScript/favorite', { id: String(id), favorite }) ``` #### 3. `services/lifeEvent.js` 修改现有 `favoriteEvent` 实现: ```js // 之前:post('/lifeEvent/favorite-placeholder', ...) // 之后:post('/lifeEvent/favorite', { id, favorite }) ``` #### 4. `ScriptLibraryView.vue` - 删除 `const localFavorites = ref(uni.getStorageSync('script_favorites') || {})` - 删除 `toggleFavorite` / `deleteScriptFromFavorites` 的 localStorage 写/删 - `isFavorite` 计算改为:`Boolean(script.isFavorite)` - `toggleFavorite` 改为调 `store.toggleScriptFavorite(id, !script.isFavorite)` #### 5. `life-event/detail.vue` - 删除 `uni.getStorageSync('current_life_event')` 的回退读取(这是"把数据存到用户端"的另一处违规,在 sub-project B 一并清理) - 删除 `uni.getStorageSync('event_favorite_${id}')` 读取 - `isFavorite` 改为 `computed(() => Boolean(displayEvent.value?.isFavorite))` - toggle 改为调 `store.toggleEventFavorite(id, !isFavorite.value)` 或 `lifeEventService.favoriteEvent` ## 数据流 ``` 列表页 ScriptLibraryView └─ fetchScripts() (GET /epicScript/listAll) └─ 后端查 e_epic_script 含 is_favorite 字段 └─ 前端渲染 isFavorite 用户点收藏 └─ store.toggleScriptFavorite(id, true/false) └─ POST /epicScript/favorite { id, favorite } └─ 后端 update is_favorite └─ 本地 state 同步,UI 响应式更新 详情页 life-event/detail └─ fetchLifeEventDetail(id) (GET /lifeEvent/detail) └─ 后端查 t_life_event 含 is_favorite └─ 前端渲染 isFavorite ``` ## 不影响范围 - 列表渲染、筛选、排序逻辑不变,只换数据源(localStorage → API 字段) - 详情页展示逻辑不变(数据源变化在 sub-project B 清理) - 其他页面的剧本/事件展示(如首页推荐)自动受益于新的 `isFavorite` 字段 ## 数据库迁移 新增迁移 SQL 文件 `server/src/main/resources/db/migration/V{timestamp}__add_is_favorite.sql`: ```sql ALTER TABLE e_epic_script ADD COLUMN is_favorite TINYINT(1) NOT NULL DEFAULT 0 COMMENT '是否收藏:0-否 1-是'; ALTER TABLE t_life_event ADD COLUMN is_favorite TINYINT(1) NOT NULL DEFAULT 0 COMMENT '是否收藏:0-否 1-是'; ``` 如果项目不用 Flyway,则手动执行或写入项目约定的 SQL 目录。 ## 验收标准 - [ ] 剧本收藏:点击心形图标 → 调用 `POST /epicScript/favorite` → 后端字段更新 → 刷新页面后仍保持状态 - [ ] 人生事件收藏:点击收藏 → 调用 `POST /lifeEvent/favorite` → 同上 - [ ] 取消收藏:再次点击 → 同上 - [ ] 列表页 `isFavorite` 来自 API,不再依赖 localStorage - [ ] 详情页 `isFavorite` 来自 API,不再依赖 localStorage - [ ] 浏览器 Console 无报错 - [ ] 后端 `mvn clean install` 编译通过 - [ ] 通过 `deploy.py backend` 部署到服务器后,在服务器环境验证