# 轮播图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`

---

**状态**: ✅ 已修复
**测试**: ⏳ 待用户验证