# 前端书籍显示问题修复指南

## 🔍 问题现象

前端页面显示"暂无推荐书籍"和"暂无畅销书籍"，书籍列表不显示。

## ✅ 已修复的问题

### 1. 前端错误处理增强
- ✅ 添加了详细的调试日志（console.log）
- ✅ 添加了错误提示（uni.showToast）
- ✅ 改进了数据验证逻辑
- ✅ 检查数据是否为数组且长度大于0

### 2. 数据验证改进
- ✅ 检查 `res.code === 200`
- ✅ 检查 `res.data` 是否存在
- ✅ 检查 `res.data` 是否为数组
- ✅ 检查数组长度是否大于0

## 📋 排查步骤

### 步骤1：检查后端服务是否启动

```bash
cd book
mvn spring-boot:run
```

**验证后端服务**：
- 访问：`http://localhost:8081`
- 或者在浏览器中测试API：
  - `http://localhost:8081/api/book/today-recommend?limit=8`
  - `http://localhost:8081/api/book/bestsellers?limit=10`

### 步骤2：检查数据库是否有数据

在 Navicat 中执行：

```sql
USE books_db;

-- 检查书籍数量
SELECT COUNT(*) as total FROM books WHERE status = 1;

-- 查看今日推荐应该返回的数据
SELECT id, title, status, created_at 
FROM books 
WHERE status = 1 
ORDER BY created_at DESC 
LIMIT 8;

-- 查看畅销书籍应该返回的数据
SELECT id, title, status, read_count 
FROM books 
WHERE status = 1 
ORDER BY read_count DESC, view_count DESC 
LIMIT 10;
```

**如果查询结果为空**，需要执行SQL脚本插入数据。

### 步骤3：执行SQL脚本插入数据

执行 `book/src/main/resources/db/quick_insert_books.sql` 文件。

### 步骤4：检查前端API配置

检查 `books/utils/config.js`：

```javascript
// 确保BASE_URL正确
const BASE_URL = 'http://localhost:8081/api'
```

### 步骤5：查看前端控制台日志

在微信开发者工具中：

1. 打开 **"调试器"** -> **"Console"** 面板
2. 刷新页面
3. 查看日志输出：
   - `开始加载今日推荐...`
   - `今日推荐API响应: {...}`
   - `今日推荐数据加载成功，共 X 本`
   - 或者错误信息

### 步骤6：查看网络请求

在微信开发者工具中：

1. 打开 **"调试器"** -> **"Network"** 面板
2. 刷新页面
3. 查看请求：
   - `GET /api/book/today-recommend?limit=8`
   - `GET /api/book/bestsellers?limit=10`
4. 检查响应：
   - 状态码：200
   - 响应数据：应该包含 `code: 200` 和 `data: [...]`

## 🔧 常见问题及解决方案

### 问题1：后端服务未启动

**现象**：Network面板显示请求失败，Console显示网络错误

**解决方案**：
```bash
cd book
mvn spring-boot:run
```

### 问题2：数据库中没有数据

**现象**：API返回 `code: 200, data: []`（空数组）

**解决方案**：
执行 `book/src/main/resources/db/quick_insert_books.sql` 文件

### 问题3：API地址配置错误

**现象**：Network面板显示404或网络错误

**解决方案**：
检查 `books/utils/config.js` 中的 `BASE_URL` 是否正确

### 问题4：CORS跨域问题

**现象**：Network面板显示CORS错误

**解决方案**：
- 后端已配置 `@CrossOrigin(origins = "*")`
- 确保微信开发者工具已勾选"不校验合法域名"

### 问题5：数据格式问题

**现象**：Console显示"数据为空或格式不正确"

**解决方案**：
- 检查后端返回的数据格式
- 确保 `data` 字段是数组
- 检查后端日志查看实际返回的数据

## 📝 调试技巧

### 1. 查看完整API响应

在 `books/pages/index/index.vue` 的 `loadTodayRecommend` 方法中，添加：

```javascript
console.log('完整API响应:', JSON.stringify(res, null, 2))
```

### 2. 测试API接口

使用浏览器或Postman测试：

```bash
# 今日推荐
curl http://localhost:8081/api/book/today-recommend?limit=8

# 畅销书籍
curl http://localhost:8081/api/book/bestsellers?limit=10
```

### 3. 检查数据库查询

在 Navicat 中执行后端使用的SQL：

```sql
-- 今日推荐SQL
SELECT * FROM books
WHERE status = 1
ORDER BY created_at DESC
LIMIT 8;

-- 畅销书籍SQL
SELECT * FROM books
WHERE status = 1
ORDER BY read_count DESC, view_count DESC
LIMIT 10;
```

## ✅ 验证清单

修复后，请确认：

- [ ] 后端服务已启动（端口8081）
- [ ] 数据库中有书籍数据（至少18本，status=1）
- [ ] API接口可以访问（浏览器测试通过）
- [ ] 前端API地址配置正确
- [ ] 网络请求成功（Network面板显示200）
- [ ] 控制台有成功日志（"数据加载成功，共X本"）
- [ ] 前端页面显示书籍列表

## 🎯 预期结果

修复成功后，应该看到：

1. **控制台日志**：
   ```
   开始加载今日推荐...
   今日推荐API响应: {code: 200, data: [...]}
   今日推荐数据加载成功，共 8 本
   开始加载畅销书籍...
   畅销书籍API响应: {code: 200, data: [...]}
   畅销书籍数据加载成功，共 10 本
   ```

2. **前端页面**：
   - "今日推荐"显示8本书
   - "畅销书籍"显示10本书

3. **Network面板**：
   - 请求状态码：200
   - 响应数据包含书籍列表

---

**创建时间**：2024年
**最后更新**：2024年