# 首页数据连接说明

## ✅ 已实现的功能

### 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）
```sql
SELECT * FROM books
WHERE status = 1
ORDER BY created_at DESC
LIMIT #{limit}
```

#### 畅销书籍查询（BookMapper.xml）
```sql
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. 启动后端服务

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

### 2. 启动前端项目

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

### 3. 查看效果

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

## 📝 注意事项

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

## 🔄 后续优化建议

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

## 📌 API接口详情

### 获取今日推荐

**请求示例**:
```http
GET /api/book/today-recommend?limit=8
```

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

### 获取畅销书籍

**请求示例**:
```http
GET /api/book/bestsellers?limit=10
```

**响应示例**:
```json
{
  "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年