听书书架功能说明

功能概述

实现了将听书添加到书架的功能，用户可以在听书详情页面点击"加入书架"按钮，将喜欢的听书添加到个人书架中，方便后续收听。

数据库设计

表结构：`user_audiobook_bookshelf`

字段名	类型	说明
id	INT(11)	主键ID
user_id	INT(11)	用户ID（外键关联users表）
audiobook_id	INT(11)	听书ID（外键关联audiobooks表）
last_listened_chapter_id	INT(11)	最后收听章节ID（外键关联audiobook_chapters表）
last_listened_position	INT(11)	最后收听位置（秒）
added_at	DATETIME	加入书架时间
updated_at	DATETIME	更新时间

唯一约束：user_id + audiobook_id 组合唯一，防止重复添加

后端接口

1. 添加听书到书架

接口地址：POST /api/audiobook-bookshelf/add
请求参数：
```
{
"userId": 1,
"audiobookId": 1
}
```
响应：返回书架记录信息

2. 从书架移除听书

接口地址：DELETE /api/audiobook-bookshelf/remove
请求参数：
```
{
"userId": 1,
"audiobookId": 1
}
```
响应：返回成功/失败信息

3. 获取用户听书书架列表

接口地址：GET /api/audiobook-bookshelf/list?userId=1
响应：返回用户听书书架列表（包含听书信息）

4. 检查听书是否在书架中

接口地址：GET /api/audiobook-bookshelf/check?userId=1&audiobookId=1
响应：返回布尔值（true/false）

5. 更新听书进度

接口地址：PUT /api/audiobook-bookshelf/progress

请求参数：

{
"userId": 1,
"audiobookId": 1,
"lastListenedChapterId": 1,
"lastListenedPosition": 100
}

响应：返回更新后的书架记录

前端功能

听书详情页面 (`listen-detail.vue`)

功能特性

✅ 点击"加入书架"按钮，调用后端接口
✅ 检查用户是否登录（未登录提示跳转登录页）
✅ 检查听书是否已在书架中（显示不同状态）
✅ 加入成功后更新按钮状态（显示"已在书架"）
✅ 支持从书架移除（再次点击可移除）
✅ 错误提示和成功提示
✅ 页面显示时自动检查书架状态

按钮状态

未在书架：显示"加入书架"，白色背景
已在书架：显示"已在书架"，灰色背景
点击已在书架：从书架移除，恢复为"加入书架"状态

文件清单

后端文件

数据库表：book/src/main/resources/db/audiobook_bookshelf_table.sql
实体类：book/src/main/java/com/yu/book/domain/UserAudiobookBookshelf.java
DTO：book/src/main/java/com/yu/book/dto/AudiobookBookshelfDTO.java
VO：book/src/main/java/com/yu/book/vo/AudiobookBookshelfVO.java
Mapper接口：book/src/main/java/com/yu/book/mapper/AudiobookBookshelfMapper.java
Mapper XML：book/src/main/resources/mapper/AudiobookBookshelfMapper.xml
Service：book/src/main/java/com/yu/book/service/AudiobookBookshelfService.java
Controller：book/src/main/java/com/yu/book/controller/AudiobookBookshelfController.java

前端文件

API方法：books/utils/api.js（添加了5个听书书架相关API方法）
详情页面：books/pages/listen-detail/listen-detail.vue（实现了加入书架功能）

使用步骤

1. 创建数据库表

执行SQL脚本创建表：

mysql -u root -p books_db < book/src/main/resources/db/audiobook_bookshelf_table.sql

或者使用MySQL客户端工具执行 audiobook_bookshelf_table.sql 文件。

2. 启动后端服务

确保后端服务正常启动，新的接口会自动注册。

3. 前端测试

打开小程序，进入"听书"模块
点击任意听书，进入详情页面
点击"加入书架"按钮
如果未登录，会提示登录
登录后，再次点击"加入书架"，应该成功添加到书架
按钮状态变为"已在书架"，再次点击可以移除

注意事项

用户登录：添加听书到书架需要用户登录，未登录时会提示跳转登录页
重复添加：数据库有唯一约束，防止同一用户重复添加同一本听书
数据同步：页面显示时会自动检查书架状态，确保显示正确
错误处理：所有操作都有错误提示，用户体验友好

后续扩展

可以进一步实现的功能：

在书架页面显示听书列表
显示最后收听章节和进度
继续收听功能（从上次位置继续）
批量管理（批量删除等）
书架分类（自定义分类）

问题排查

问题1：点击"加入书架"没有反应

检查用户是否已登录
检查网络请求是否正常
查看浏览器控制台是否有错误信息

问题2：按钮状态不更新

检查 checkBookshelfStatus 方法是否被调用
检查后端接口是否正常返回数据
查看页面 onShow 生命周期是否正常执行

问题3：数据库错误

检查表是否已创建
检查外键约束是否正确
检查用户ID和听书ID是否存在

听书书架功能说明.md 5.2 KB Kalıcı Bağlantı Geçmiş Ham