全部分类功能说明.md 6.2 KB

全部分类功能说明

功能概述

实现了"全部分类"功能,用户点击首页的"全部分类"按钮后,可以跳转到分类列表页面,查看所有书籍分类,并可以点击分类查看该分类下的书籍列表。

功能流程

  1. 首页点击"全部分类" → 跳转到分类列表页面 (/pages/category/category)
  2. 分类列表页面 → 显示所有启用的分类,每个分类显示:
    • 分类名称
    • 分类封面(从该分类的书籍中获取一张封面)
    • 该分类下的书籍数量
  3. 点击分类 → 跳转到该分类的书籍列表页面 (/pages/more-books/more-books)
  4. 分类书籍列表页面 → 显示该分类下的所有书籍,支持分页加载

后端实现

1. CategoryVO(分类视图对象)

文件book/src/main/java/com/yu/book/vo/CategoryVO.java

包含字段:

  • id - 分类ID
  • name - 分类名称
  • icon - 图标
  • color - 颜色
  • bookCount - 该分类下的书籍数量
  • cover - 分类封面(从该分类的书籍中获取)

2. CategoryMapper(分类数据访问层)

文件book/src/main/java/com/yu/book/mapper/CategoryMapper.java

新增方法:

  • countBooksByCategoryId(Integer categoryId) - 统计指定分类下的书籍数量
  • getCategoryCover(Integer categoryId) - 获取指定分类的封面

文件book/src/main/resources/mapper/CategoryMapper.xml

新增SQL查询:

-- 统计指定分类下的书籍数量
SELECT COUNT(*) FROM books
WHERE category_id = #{categoryId} AND status = 1

-- 获取指定分类的封面
SELECT COALESCE(image, cover) as cover
FROM books
WHERE category_id = #{categoryId} AND status = 1
  AND (image IS NOT NULL OR cover IS NOT NULL)
ORDER BY created_at DESC
LIMIT 1

3. CategoryService(分类服务层)

文件book/src/main/java/com/yu/book/service/CategoryService.java

主要方法:

  • getAllCategories() - 获取所有启用的分类列表(包含书籍数量和封面)
  • getCategoryById(Integer id) - 根据ID获取分类详情

4. CategoryController(分类控制器)

文件book/src/main/java/com/yu/book/controller/CategoryController.java

接口:

  • GET /api/category/list - 获取所有启用的分类列表
  • GET /api/category/{id} - 根据ID获取分类详情

前端实现

1. API方法

文件books/utils/api.js

新增方法:

// 获取所有分类列表
export function getAllCategories()

// 根据ID获取分类详情
export function getCategoryById(id)

2. 分类列表页面

文件books/pages/category/category.vue

功能:

  • 从后端获取所有分类列表
  • 显示分类名称、封面、书籍数量
  • 点击分类跳转到该分类的书籍列表页面
  • 支持加载状态和空状态显示

3. 分类书籍列表页面

文件books/pages/more-books/more-books.vue

功能:

  • 支持多种类型:category、today、bestseller、featured、ranking、popular、new、vip
  • 根据categoryId参数筛选分类书籍
  • 支持分页加载
  • 显示书籍列表,点击书籍跳转到详情页

4. 首页跳转

文件books/pages/index/index.vue

点击"全部分类"(index === 0)时,跳转到分类列表页面:

if (index === 0) {
    uni.navigateTo({
        url: '/pages/category/category'
    })
}

数据库

1. 分类表结构

使用现有的 categories 表:

  • id - 分类ID
  • name - 分类名称
  • icon - 图标
  • color - 颜色
  • sort_order - 排序顺序
  • status - 状态(1=启用,0=禁用)

2. 插入分类数据

文件book/src/main/resources/db/category_data.sql

包含以下分类:

  • 文学
  • 军事历史
  • 社会文化
  • 人物传记
  • 科学技术
  • 经济管理
  • 艺术设计
  • 哲学思想
  • 教育
  • 生活
  • 外语
  • 商业
  • 养生
  • 职场
  • 少儿

使用步骤

1. 执行数据库脚本

# 插入分类数据
mysql -u root -p books_db < book/src/main/resources/db/category_data.sql

2. 更新书籍数据

确保 books 表中的书籍有正确的 category_id,这样分类才能显示书籍数量。

可以执行以下SQL更新现有书籍的分类:

-- 示例:为现有书籍分配分类
UPDATE books SET category_id = 1 WHERE id IN (1, 2, 3);  -- 文学
UPDATE books SET category_id = 2 WHERE id IN (4, 5, 6);  -- 军事历史
-- 根据实际情况调整

3. 启动后端服务

后端服务启动后,分类接口会自动注册。

4. 测试功能

  1. 打开小程序首页
  2. 点击"全部分类"按钮
  3. 查看分类列表页面
  4. 点击某个分类
  5. 查看该分类下的书籍列表

接口响应格式

获取分类列表

请求GET /api/category/list

响应

{
  "code": 200,
  "message": "成功",
  "data": [
    {
      "id": 1,
      "name": "文学",
      "icon": "📚",
      "color": "#E57373",
      "sortOrder": 1,
      "status": 1,
      "bookCount": 10,
      "cover": "https://picsum.photos/seed/book1/200/300",
      "createdAt": "2024-01-01T00:00:00",
      "updatedAt": "2024-01-01T00:00:00"
    },
    ...
  ]
}

获取分类详情

请求GET /api/category/{id}

响应

{
  "code": 200,
  "message": "成功",
  "data": {
    "id": 1,
    "name": "文学",
    "icon": "📚",
    "color": "#E57373",
    "sortOrder": 1,
    "status": 1,
    "bookCount": 10,
    "cover": "https://picsum.photos/seed/book1/200/300",
    "createdAt": "2024-01-01T00:00:00",
    "updatedAt": "2024-01-01T00:00:00"
  }
}

注意事项

  1. 分类封面:如果分类下没有书籍或书籍没有封面,会使用默认图片
  2. 书籍数量:只统计 status = 1(上架)的书籍
  3. 分类排序:按照 sort_order 字段升序排序
  4. 分页加载:分类书籍列表页面支持分页加载,每页20本书
  5. 错误处理:前端会显示加载状态和错误提示

后续优化

  1. 分类搜索:添加分类搜索功能
  2. 分类筛选:在书籍列表页面添加分类筛选功能
  3. 分类推荐:根据用户阅读历史推荐相关分类
  4. 分类图标:支持自定义分类图标上传
  5. 分类排序:允许用户自定义分类排序