161 lines
4.3 KiB
Markdown
161 lines
4.3 KiB
Markdown
# 平台更新功能 - 问题修复记录
|
||
|
||
## ❌ 原始错误
|
||
|
||
### 前端错误信息
|
||
```
|
||
获取数据失败:SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON
|
||
```
|
||
|
||
### 错误原因分析
|
||
|
||
1. **路径不匹配**:
|
||
- 前端请求:`/api/platform/upgrade/list`
|
||
- Vite 代理配置:只代理 `/platform/*` 和 `/backend/*` 路径
|
||
- 后端路由:注册在 `/api/platform/upgrade/list`
|
||
|
||
2. **请求被重定向到 404 页面**:
|
||
- 由于 `/api/*` 没有被代理,请求直接访问前端开发服务器(端口 4000)
|
||
- 找不到对应路由,返回 HTML 格式的 404 页面
|
||
- 前端尝试解析 HTML 为 JSON,导致语法错误
|
||
|
||
## ✅ 解决方案
|
||
|
||
### 修改前端请求路径
|
||
|
||
**文件**: `platform/src/views/platform/platformupgrade/index.vue`
|
||
|
||
**修改前**:
|
||
```javascript
|
||
const response = await fetch(`/api/platform/upgrade/list?limit=${pageSize.value * 2}`);
|
||
```
|
||
|
||
**修改后**:
|
||
```javascript
|
||
const response = await fetch(`/platform/api/upgrade/list?limit=${pageSize.value * 2}`);
|
||
```
|
||
|
||
### 路径映射说明
|
||
|
||
```
|
||
前端请求:/platform/api/upgrade/list
|
||
↓
|
||
Vite 代理 (vite.config.js)
|
||
↓
|
||
转发到:http://127.0.0.1:9000/platform/api/upgrade/list
|
||
↓
|
||
Beego 路由匹配
|
||
↓
|
||
实际路由:/api/platform/upgrade/list ← 注意路径顺序不同!
|
||
```
|
||
|
||
## 🔧 需要调整的地方
|
||
|
||
当前方案存在路径不一致的问题。为了保持路径统一,有两种方案:
|
||
|
||
### 方案一:修改后端路由(推荐)
|
||
|
||
**文件**: `go/routers/api/api.go`
|
||
|
||
将路由从 `/api/platform/upgrade/list` 改为 `/platform/api/upgrade/list`:
|
||
|
||
```go
|
||
// 修改前
|
||
beego.Router("/api/platform/upgrade/list", &controllers.ApiPlatformUpgradeController{}, "get:List")
|
||
beego.Router("/api/platform/upgrade/detail", &controllers.ApiPlatformUpgradeController{}, "get:Detail")
|
||
|
||
// 修改后
|
||
beego.Router("/platform/api/upgrade/list", &controllers.ApiPlatformUpgradeController{}, "get:List")
|
||
beego.Router("/platform/api/upgrade/detail", &controllers.ApiPlatformUpgradeController{}, "get:Detail")
|
||
```
|
||
|
||
**优点**:
|
||
- 前后端路径完全一致
|
||
- 便于维护和理解
|
||
|
||
### 方案二:保持现有路由,前端使用完整路径
|
||
|
||
如果后端服务已经部署且无法修改路由,前端可以这样写:
|
||
|
||
```javascript
|
||
// 生产环境:直接使用完整 URL
|
||
const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'http://localhost:9000';
|
||
const response = await fetch(`${API_BASE_URL}/api/platform/upgrade/list?limit=${pageSize.value * 2}`);
|
||
```
|
||
|
||
**缺点**:
|
||
- 开发环境和生产环境配置复杂
|
||
- 不利于本地调试
|
||
|
||
## 📝 后续建议
|
||
|
||
1. **统一路径规范**:
|
||
- 建议采用方案一,统一使用 `/platform/api/*` 路径结构
|
||
- 所有 Platform 相关接口都以此前缀开头
|
||
|
||
2. **添加错误处理**:
|
||
```javascript
|
||
const response = await fetch(`/platform/api/upgrade/list?limit=${pageSize.value * 2}`);
|
||
|
||
// 检查响应状态
|
||
if (!response.ok) {
|
||
throw new Error(`HTTP error! status: ${response.status}`);
|
||
}
|
||
|
||
// 检查是否是 JSON 格式
|
||
const contentType = response.headers.get('content-type');
|
||
if (!contentType?.includes('application/json')) {
|
||
const text = await response.text();
|
||
console.error('非 JSON 响应:', text.substring(0, 200));
|
||
throw new Error('API 返回非 JSON 格式');
|
||
}
|
||
|
||
const result = await response.json();
|
||
```
|
||
|
||
3. **环境变量配置**:
|
||
创建 `.env.development` 和 `.env.production` 文件:
|
||
```env
|
||
# .env.development
|
||
VITE_API_BASE_URL=http://127.0.0.1:9000
|
||
|
||
# .env.production
|
||
VITE_API_BASE_URL=https://your-domain.com
|
||
```
|
||
|
||
## 🚀 立即测试步骤
|
||
|
||
1. **确保数据库已初始化**:
|
||
```sql
|
||
-- 执行 SQL 脚本
|
||
source docs/sql/platform_upgrade.sql
|
||
```
|
||
|
||
2. **重启后端服务**:
|
||
```bash
|
||
cd go
|
||
bee run
|
||
```
|
||
|
||
3. **启动前端服务**:
|
||
```bash
|
||
cd platform
|
||
npm run dev
|
||
```
|
||
|
||
4. **访问管理页面**:
|
||
- 登录系统
|
||
- 访问:`http://127.0.0.1:4000/platform/platformupgrade`
|
||
- 应该能看到示例数据
|
||
|
||
5. **查看官网首页展示**:
|
||
- 访问官网首页
|
||
- 滚动到"近期平台更新内容"区域
|
||
- 应该能看到 3 条示例更新记录
|
||
|
||
---
|
||
|
||
**修复时间**: 2026-09-18
|
||
**修复内容**: 修正前端 API 请求路径
|
||
**影响范围**: Platform 管理平台页面
|