126 lines
2.6 KiB
Markdown
126 lines
2.6 KiB
Markdown
# 轮播图404错误修复
|
||
|
||
时间：2026-01-27
|
||
|
||
## 问题描述
|
||
|
||
后台管理系统的轮播图管理页面显示"请求的资源不存在"（404错误），无法加载轮播图列表。
|
||
|
||
## 问题原因
|
||
|
||
**API路径重复添加了 `/api` 前缀**
|
||
|
||
- `request.js` 中已配置：`baseURL: '/api'`
|
||
- 代码中又写了：`url: '/api/banner/admin/list'`
|
||
- 实际请求URL变成：`/api/api/banner/admin/list` ❌
|
||
|
||
这导致后端无法找到对应的接口，返回404错误。
|
||
|
||
## 修复方案
|
||
|
||
### 修复的文件
|
||
|
||
1. **peidu/admin/src/views/content/banner.vue**
|
||
2. **peidu/admin/src/api/content.js**
|
||
|
||
### 修复内容
|
||
|
||
移除所有API调用中多余的 `/api` 前缀：
|
||
|
||
#### 修复前 ❌
|
||
```javascript
|
||
// 获取列表
|
||
url: '/api/banner/admin/list'
|
||
|
||
// 创建
|
||
url: '/api/banner'
|
||
|
||
// 更新
|
||
url: `/api/banner/${id}`
|
||
|
||
// 删除
|
||
url: `/api/banner/${id}`
|
||
|
||
// 更新状态
|
||
url: `/api/banner/${id}/status`
|
||
```
|
||
|
||
#### 修复后 ✅
|
||
```javascript
|
||
// 获取列表
|
||
url: '/banner/admin/list'
|
||
|
||
// 创建
|
||
url: '/banner'
|
||
|
||
// 更新
|
||
url: `/banner/${id}`
|
||
|
||
// 删除
|
||
url: `/banner/${id}`
|
||
|
||
// 更新状态
|
||
url: `/banner/${id}/status`
|
||
```
|
||
|
||
### 实际请求URL
|
||
|
||
修复后，由于 `baseURL: '/api'`，实际请求的完整URL为：
|
||
|
||
- GET `/api/banner/admin/list` - 获取轮播图列表 ✅
|
||
- POST `/api/banner` - 创建轮播图 ✅
|
||
- PUT `/api/banner/{id}` - 更新轮播图 ✅
|
||
- DELETE `/api/banner/{id}` - 删除轮播图 ✅
|
||
- PUT `/api/banner/{id}/status` - 更新状态 ✅
|
||
|
||
这些路径与后端Controller定义完全匹配。
|
||
|
||
## 验证步骤
|
||
|
||
1. 刷新后台管理系统的轮播图管理页面
|
||
2. 应该能正常显示轮播图列表
|
||
3. 测试新增、编辑、删除、启用/禁用功能
|
||
|
||
## 经验教训
|
||
|
||
### 问题根源
|
||
在使用axios时，如果已经配置了 `baseURL`，就不应该在具体的API调用中再次添加这个前缀。
|
||
|
||
### 最佳实践
|
||
1. **统一管理baseURL**：在 `request.js` 中配置一次
|
||
2. **API路径规范**：具体调用时只写相对路径
|
||
3. **代码审查**：检查是否有重复的路径前缀
|
||
|
||
### 正确的使用方式
|
||
|
||
```javascript
|
||
// request.js
|
||
const service = axios.create({
|
||
baseURL: '/api', // 统一配置
|
||
timeout: 10000
|
||
})
|
||
|
||
// API调用
|
||
request({
|
||
url: '/banner/list', // 只写相对路径
|
||
method: 'get'
|
||
})
|
||
|
||
// 实际请求：/api/banner/list ✅
|
||
```
|
||
|
||
## 相关文件
|
||
|
||
- 修复的文件：
|
||
- `peidu/admin/src/views/content/banner.vue`
|
||
- `peidu/admin/src/api/content.js`
|
||
- 配置文件：
|
||
- `peidu/admin/src/utils/request.js`
|
||
- 后端接口：
|
||
- `peidu/backend/src/main/java/com/peidu/controller/BannerController.java`
|
||
|
||
---
|
||
|
||
**状态**: ✅ 已修复
|
||
**测试**: ⏳ 待用户验证
|