首页数据连接说明.md 4.4 KB

首页数据连接说明

✅ 已实现的功能

1. 后端接口

获取今日推荐

  • 接口地址: GET /api/book/today-recommend?limit=8
  • 参数说明:
    • limit: 返回数量,默认8本
  • 排序规则: 按创建时间倒序(最新的书籍)
  • 筛选条件: 只返回状态为1(上架)的书籍

获取畅销书籍

  • 接口地址: GET /api/book/bestsellers?limit=10
  • 参数说明:
    • limit: 返回数量,默认10本
  • 排序规则: 按阅读量(read_count)倒序,如果阅读量相同则按浏览量(view_count)倒序
  • 筛选条件: 只返回状态为1(上架)的书籍

2. 数据库查询

今日推荐查询(BookMapper.xml)

SELECT * FROM books
WHERE status = 1
ORDER BY created_at DESC
LIMIT #{limit}

畅销书籍查询(BookMapper.xml)

SELECT * FROM books
WHERE status = 1
ORDER BY read_count DESC, view_count DESC
LIMIT #{limit}

3. 前端实现

API调用(api.js)

  • getTodayRecommend(limit): 获取今日推荐
  • getBestsellers(limit): 获取畅销书籍

页面数据加载(index.vue)

  • onLoad 生命周期中调用API获取数据
  • onShow 生命周期中刷新数据
  • 处理图片URL(优先使用 image 字段,其次 cover 字段,最后使用默认图片)
  • 处理数据格式,确保与前端显示格式匹配
  • 添加空状态显示(当没有数据时显示"暂无推荐书籍"或"暂无畅销书籍")
  • 添加图片加载错误处理

📋 数据流程

  1. 页面加载 → 调用 loadTodayRecommend()loadBestsellers()
  2. API请求 → 调用后端接口获取数据
  3. 数据处理 → 将后端返回的数据转换为前端显示格式
  4. 页面渲染 → 显示书籍列表

🔍 数据字段映射

后端返回的字段(BookVO)

  • id: 书籍ID
  • title: 书名
  • author: 作者
  • image: 图片URL
  • cover: 封面URL
  • brief: 简介
  • desc: 描述
  • introduction: 详细介绍

前端显示的字段

  • id: 书籍ID(用于跳转详情页)
  • title: 书名
  • author: 作者
  • image: 图片URL(优先使用 image,其次 cover,最后默认图片)
  • desc: 描述(优先使用 desc,其次 brief,最后 introduction

🚀 使用说明

1. 启动后端服务

cd book
mvn spring-boot:run

2. 启动前端项目

在微信开发者工具中打开 books 项目

3. 查看效果

  • 打开首页,应该能看到"今日推荐"和"畅销书籍"两个部分
  • 数据来自数据库,不再使用硬编码数据
  • 如果数据库中没有数据,会显示空状态提示

📝 注意事项

  1. 数据库数据: 确保数据库中有书籍数据,且状态为1(上架)
  2. 图片URL: 确保数据库中的 imagecover 字段有有效的图片URL
  3. 网络连接: 确保前端能访问后端API(检查 books/utils/config.js 中的 BASE_URL
  4. 空数据处理: 如果数据库中没有数据,前端会显示空状态,不会报错

🔄 后续优化建议

  1. 缓存机制: 可以添加前端缓存,减少API请求次数
  2. 加载状态: 可以添加加载动画,提升用户体验
  3. 错误提示: 可以添加更友好的错误提示
  4. 分页加载: 如果数据量大,可以考虑分页加载
  5. 推荐算法: 可以根据用户行为数据优化推荐算法

📌 API接口详情

获取今日推荐

请求示例:

GET /api/book/today-recommend?limit=8

响应示例:

{
  "code": 200,
  "message": null,
  "data": [
    {
      "id": 1,
      "title": "西游记",
      "author": "(明) 吴承恩",
      "image": "https://example.com/image.jpg",
      "cover": "https://example.com/cover.jpg",
      "brief": "简介",
      "desc": "描述",
      "introduction": "详细介绍",
      ...
    }
  ]
}

获取畅销书籍

请求示例:

GET /api/book/bestsellers?limit=10

响应示例:

{
  "code": 200,
  "message": null,
  "data": [
    {
      "id": 1,
      "title": "西游记",
      "author": "(明) 吴承恩",
      "image": "https://example.com/image.jpg",
      "cover": "https://example.com/cover.jpg",
      "brief": "简介",
      "desc": "描述",
      "introduction": "详细介绍",
      "readCount": 100,
      "viewCount": 500,
      ...
    }
  ]
}

创建时间:2024年 最后更新:2024年