288 lines
7.9 KiB
Markdown
288 lines
7.9 KiB
Markdown
# 轮播图功能对接检查报告
|
||
|
||
生成时间：2026-01-27
|
||
检查目的：确认后台管理系统的轮播图管理功能是否能与用户首页的轮播图正常对接
|
||
|
||
---
|
||
|
||
## 📋 检查结果总结
|
||
|
||
**结论：⚠️ 轮播图功能存在对接问题，需要修复**
|
||
|
||
---
|
||
|
||
## 🔍 详细检查情况
|
||
|
||
### 1. 后端API情况 ✅
|
||
|
||
**Controller**: `BannerController.java` (`/api/banner`)
|
||
|
||
**提供的接口：**
|
||
```java
|
||
// 前端接口
|
||
GET /api/banner/list // 获取轮播图列表（前端）- 返回启用的轮播图
|
||
|
||
// 管理端接口
|
||
GET /api/banner/admin/list // 获取所有轮播图（管理端）
|
||
POST /api/banner // 创建轮播图
|
||
PUT /api/banner/{id} // 更新轮播图
|
||
DELETE /api/banner/{id} // 删除轮播图
|
||
PUT /api/banner/{id}/status // 更新状态
|
||
```
|
||
|
||
**后端实现：完整 ✅**
|
||
|
||
---
|
||
|
||
### 2. 后台管理系统情况 ⚠️
|
||
|
||
**管理页面**: `peidu/admin/src/views/content/banner.vue`
|
||
|
||
**API调用情况：**
|
||
```javascript
|
||
// ❌ 问题1：路径不匹配
|
||
GET /banner/admin/list // 实际调用（缺少 /api 前缀）
|
||
POST /banner // 实际调用（缺少 /api 前缀）
|
||
PUT /banner/{id} // 实际调用（缺少 /api 前缀）
|
||
DELETE /banner/{id} // 实际调用（缺少 /api 前缀）
|
||
PUT /banner/{id}/status // 实际调用（缺少 /api 前缀）
|
||
```
|
||
|
||
**后端实际路径：**
|
||
```java
|
||
GET /api/banner/admin/list // 后端提供
|
||
POST /api/banner // 后端提供
|
||
PUT /api/banner/{id} // 后端提供
|
||
DELETE /api/banner/{id} // 后端提供
|
||
PUT /api/banner/{id}/status // 后端提供
|
||
```
|
||
|
||
**问题分析：**
|
||
- ❌ 管理端调用的路径缺少 `/api` 前缀
|
||
- ⚠️ 需要检查 `peidu/admin/src/utils/request.js` 中的 baseURL 配置
|
||
- ⚠️ 如果 baseURL 已经配置了 `/api`，则对接正常
|
||
- ⚠️ 如果 baseURL 没有配置 `/api`，则无法正常调用
|
||
|
||
**还发现了另一个API定义文件：**
|
||
`peidu/admin/src/api/content.js` 中也定义了轮播图API：
|
||
```javascript
|
||
// ❌ 问题2：路径完全不同
|
||
GET /content/banner/list // 与后端不匹配
|
||
GET /content/banner/{id} // 与后端不匹配
|
||
POST /content/banner // 与后端不匹配
|
||
PUT /content/banner/{id} // 与后端不匹配
|
||
DELETE /content/banner/{id} // 与后端不匹配
|
||
PUT /content/banner/status/{id} // 与后端不匹配
|
||
```
|
||
|
||
**说明：**
|
||
- 存在两套API定义，但实际页面使用的是直接调用 `/banner/*`
|
||
- `content.js` 中的定义未被使用
|
||
|
||
---
|
||
|
||
### 3. 小程序前端情况 ⚠️
|
||
|
||
**API定义**: `peidu/uniapp/api/index.js`
|
||
|
||
**API调用：**
|
||
```javascript
|
||
export const bannerApi = {
|
||
getList() {
|
||
return request.get('/api/banner/list') // ✅ 路径正确
|
||
}
|
||
}
|
||
```
|
||
|
||
**使用情况：**
|
||
|
||
#### 3.1 UserHome-new.vue（新版首页）
|
||
```javascript
|
||
// ❌ 问题3：未调用API加载数据
|
||
data() {
|
||
return {
|
||
bannerList: [
|
||
{
|
||
id: 1,
|
||
imageUrl: 'https://ai-public.mastergo.com/ai/img_res/99c58a55e3fa48a0708f1318f5e0795d.jpg'
|
||
}
|
||
]
|
||
}
|
||
}
|
||
|
||
mounted() {
|
||
this.loadData() // 只加载未读消息数量，没有加载轮播图
|
||
}
|
||
|
||
// ❌ 没有调用 bannerApi.getList() 加载轮播图数据
|
||
```
|
||
|
||
#### 3.2 UserHome.vue（旧版首页）
|
||
```javascript
|
||
// ❌ 问题4：使用硬编码的本地图片
|
||
bannerList: [
|
||
{ id: 1, image: '/static/banner/banner1.jpg' },
|
||
// ...
|
||
]
|
||
|
||
// ❌ 没有调用 bannerApi.getList() 加载轮播图数据
|
||
```
|
||
|
||
#### 3.3 UserHome-redesign.vue（重设计版首页）
|
||
```javascript
|
||
// ❌ 问题5：有TODO注释但未实现
|
||
async loadBanners() {
|
||
// TODO: 调用API获取轮播图
|
||
}
|
||
|
||
// ❌ 没有调用 bannerApi.getList() 加载轮播图数据
|
||
```
|
||
|
||
---
|
||
|
||
## 🔴 发现的问题汇总
|
||
|
||
### 问题1：后台管理系统API路径问题 ⚠️
|
||
**位置**: `peidu/admin/src/views/content/banner.vue`
|
||
|
||
**问题描述**:
|
||
- 管理端调用 `/banner/*` 路径
|
||
- 后端提供 `/api/banner/*` 路径
|
||
- 路径不匹配
|
||
|
||
**影响**:
|
||
- 如果 request.js 中没有配置 baseURL 为 `/api`，则管理端无法正常管理轮播图
|
||
|
||
**需要确认**:
|
||
检查 `peidu/admin/src/utils/request.js` 中的 baseURL 配置
|
||
|
||
---
|
||
|
||
### 问题2：小程序前端未调用API加载轮播图 ❌
|
||
**位置**:
|
||
- `peidu/uniapp/src/pages/index/components/UserHome-new.vue`
|
||
- `peidu/uniapp/src/pages/index/components/UserHome.vue`
|
||
- `peidu/uniapp/src/pages/index/components/UserHome-redesign.vue`
|
||
|
||
**问题描述**:
|
||
- 所有首页组件都使用硬编码的轮播图数据
|
||
- 没有调用 `bannerApi.getList()` 从后端加载轮播图
|
||
- 即使管理员在后台添加/修改轮播图，前端也不会显示
|
||
|
||
**影响**:
|
||
- 后台管理的轮播图功能完全无效
|
||
- 管理员无法动态管理首页轮播图内容
|
||
|
||
---
|
||
|
||
### 问题3：存在冗余的API定义 ⚠️
|
||
**位置**: `peidu/admin/src/api/content.js`
|
||
|
||
**问题描述**:
|
||
- 定义了 `/content/banner/*` 路径的API
|
||
- 但实际页面没有使用这些API
|
||
- 造成代码冗余和混淆
|
||
|
||
---
|
||
|
||
## 📊 对接状态评估
|
||
|
||
| 组件 | 后端API | 管理端 | 小程序前端 | 对接状态 |
|
||
|------|---------|--------|-----------|---------|
|
||
| 轮播图列表 | ✅ 已实现 | ⚠️ 路径待确认 | ❌ 未调用 | ❌ 未对接 |
|
||
| 创建轮播图 | ✅ 已实现 | ⚠️ 路径待确认 | - | ⚠️ 待确认 |
|
||
| 更新轮播图 | ✅ 已实现 | ⚠️ 路径待确认 | - | ⚠️ 待确认 |
|
||
| 删除轮播图 | ✅ 已实现 | ⚠️ 路径待确认 | - | ⚠️ 待确认 |
|
||
| 更新状态 | ✅ 已实现 | ⚠️ 路径待确认 | - | ⚠️ 待确认 |
|
||
|
||
---
|
||
|
||
## 🔧 需要修复的内容
|
||
|
||
### 优先级 P0 - 必须修复
|
||
|
||
#### 1. 小程序前端：添加轮播图数据加载
|
||
**需要修改的文件**:
|
||
- `peidu/uniapp/src/pages/index/components/UserHome-new.vue`
|
||
- `peidu/uniapp/src/pages/index/components/UserHome.vue`
|
||
- `peidu/uniapp/src/pages/index/components/UserHome-redesign.vue`
|
||
|
||
**修改内容**:
|
||
```javascript
|
||
// 在 methods 中添加
|
||
async loadBanners() {
|
||
try {
|
||
const res = await bannerApi.getList()
|
||
if (res && res.code === 200) {
|
||
this.bannerList = res.data || []
|
||
}
|
||
} catch (e) {
|
||
console.error('加载轮播图失败:', e)
|
||
}
|
||
}
|
||
|
||
// 在 mounted 或 loadData 中调用
|
||
mounted() {
|
||
this.loadBanners()
|
||
this.loadData()
|
||
}
|
||
```
|
||
|
||
### 优先级 P1 - 需要确认
|
||
|
||
#### 2. 后台管理系统：确认API路径配置
|
||
**需要检查的文件**:
|
||
- `peidu/admin/src/utils/request.js`
|
||
|
||
**检查内容**:
|
||
- 确认 baseURL 是否配置为 `/api`
|
||
- 如果没有配置，需要添加或修改管理端的API调用路径
|
||
|
||
### 优先级 P2 - 代码优化
|
||
|
||
#### 3. 清理冗余的API定义
|
||
**需要处理的文件**:
|
||
- `peidu/admin/src/api/content.js`
|
||
|
||
**处理方式**:
|
||
- 删除未使用的 `/content/banner/*` API定义
|
||
- 或者统一使用 content.js 中的API定义
|
||
|
||
---
|
||
|
||
## 🎯 修复后的预期效果
|
||
|
||
1. ✅ 管理员在后台添加轮播图 → 数据保存到数据库
|
||
2. ✅ 管理员启用/禁用轮播图 → 状态更新到数据库
|
||
3. ✅ 用户打开小程序首页 → 自动从后端加载轮播图
|
||
4. ✅ 只显示已启用的轮播图
|
||
5. ✅ 轮播图内容实时更新，无需修改代码
|
||
|
||
---
|
||
|
||
## 📝 建议
|
||
|
||
1. **立即修复小程序前端**：添加轮播图数据加载功能（P0）
|
||
2. **确认管理端配置**：检查 request.js 的 baseURL 配置（P1）
|
||
3. **测试完整流程**：
|
||
- 在后台添加轮播图
|
||
- 启用轮播图
|
||
- 在小程序查看是否显示
|
||
4. **清理冗余代码**：删除未使用的API定义（P2）
|
||
|
||
---
|
||
|
||
## ✅ 检查清单
|
||
|
||
- [x] 后端API是否存在 - ✅ 存在且完整
|
||
- [x] 管理端是否能调用API - ⚠️ 需要确认路径配置
|
||
- [x] 小程序是否能调用API - ✅ API已定义
|
||
- [x] 小程序是否实际调用了API - ❌ 未调用
|
||
- [ ] 完整流程是否能正常工作 - ❌ 无法正常工作
|
||
|
||
---
|
||
|
||
**检查完成时间**: 2026-01-27
|
||
**检查结果**: ⚠️ 存在对接问题，需要修复
|
||
**主要问题**: 小程序前端未调用API加载轮播图数据
|