轮播图404错误修复

时间：2026-01-27

问题描述

后台管理系统的轮播图管理页面显示"请求的资源不存在"（404错误），无法加载轮播图列表。

问题原因

API路径重复添加了 /api 前缀

request.js 中已配置：baseURL: '/api'
代码中又写了：url: '/api/banner/admin/list'
实际请求URL变成：/api/api/banner/admin/list ❌

这导致后端无法找到对应的接口，返回404错误。

修复方案

修复的文件

peidu/admin/src/views/content/banner.vue
peidu/admin/src/api/content.js

修复内容

移除所有API调用中多余的 /api 前缀：

修复前 ❌

// 获取列表
url: '/api/banner/admin/list'

// 创建
url: '/api/banner'

// 更新
url: `/api/banner/${id}`

// 删除
url: `/api/banner/${id}`

// 更新状态
url: `/api/banner/${id}/status`

修复后 ✅

// 获取列表
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定义完全匹配。

验证步骤

刷新后台管理系统的轮播图管理页面
应该能正常显示轮播图列表
测试新增、编辑、删除、启用/禁用功能

经验教训

问题根源

在使用axios时，如果已经配置了 baseURL，就不应该在具体的API调用中再次添加这个前缀。

最佳实践

统一管理baseURL：在 request.js 中配置一次
API路径规范：具体调用时只写相对路径
代码审查：检查是否有重复的路径前缀

正确的使用方式

// request.js
const service = axios.create({
  baseURL: '/api',  // 统一配置
  timeout: 10000
})

// API调用
request({ 
  url: '/banner/list',  // 只写相对路径
  method: 'get' 
})

// 实际请求：/api/banner/list ✅

2.6 KiB Raw Blame History Unescape Escape