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`
|
|||
|
|
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
**状态**: ✅ 已修复
|
|||
|
|
**测试**: ⏳ 待用户验证
|