Back_end_Management_System/前端书籍显示问题修复指南.md

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

🔍 问题现象

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

✅ 已修复的问题

1. 前端错误处理增强

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

2. 数据验证改进

• ✅ 检查 res.code === 200
• ✅ 检查 res.data 是否存在
• ✅ 检查 res.data 是否为数组
• ✅ 检查数组长度是否大于0

📋 排查步骤

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

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 中执行：

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：

// 确保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显示网络错误

解决方案：

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 方法中，添加：

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

2. 测试API接口

使用浏览器或Postman测试：

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

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

3. 检查数据库查询

在 Navicat 中执行后端使用的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年