martial/martial-web

Fork 0

Files

宅房 d8730cc2c2 fix bugs

2025-12-17 09:31:14 +08:00

5.2 KiB

Raw Blame History

赛事列表加载问题排查指南

问题现象

赛事下拉框显示"无数据"
所有按钮（发送邀请、批量生成邀请码等）无法点击
页面显示"暂无数据"

排查步骤

1. 检查浏览器控制台

打开浏览器开发者工具（F12），查看Console标签页：

查看日志输出：

赛事列表API返回: {...}
解析后的赛事列表: [...]

可能的错误信息：

加载赛事列表失败: Network Error - 网络连接问题
加载赛事列表失败: 404 - API路径错误
加载赛事列表失败: 500 - 后端服务错误

2. 检查Network请求

在开发者工具的Network标签页中：

刷新页面
找到 /api/martial/competition/list 请求
查看请求状态：
- 200: 请求成功，检查返回数据
- 404: API路径不存在
- 500: 后端服务错误
- Failed: 网络连接失败
查看Response数据结构：

{
  "code": 200,
  "data": {
    "records": [...],  // 赛事列表
    "total": 10
  }
}

3. 检查后端服务

3.1 确认后端服务是否启动

Windows:

netstat -ano | findstr 8888

Linux/Mac:

netstat -tuln | grep 8888

如果没有输出，说明后端服务未启动。

3.2 启动后端服务

进入后端项目目录：

cd martial-master
mvn spring-boot:run

或者使用IDE（IDEA/Eclipse）启动。

4. 检查数据库数据

4.1 连接数据库

使用数据库客户端（Navicat、DBeaver等）连接：

Host: 127.0.0.1
Port: 3306
Database: martial_db
Username: root
Password: 123456

4.2 执行检查SQL

运行项目根目录下的 check_data.sql 文件：

-- 检查赛事数据
SELECT * FROM martial_competition LIMIT 10;

-- 检查赛事总数
SELECT COUNT(*) FROM martial_competition;

如果赛事表为空： 需要先创建赛事数据。

5. 创建测试数据

5.1 创建赛事

进入"赛事管理"页面，点击"新增赛事"，填写：

赛事名称：测试赛事
赛事编码：TEST001
主办单位：测试单位
地区：北京
详细地点：测试地点
报名时间：选择日期范围
比赛时间：选择日期范围

保存后，赛事列表应该就能显示了。

5.2 创建裁判

进入"评委管理"页面，点击"新增评委"，填写：

姓名：张三
性别：男
手机号：13800138000
身份证号：110101199001011234
裁判类型：普通裁判
等级/职称：一级

6. 检查API配置

6.1 检查前端API配置

查看 martial-web/src/axios/index.js 或类似文件：

const baseURL = process.env.VUE_APP_API_BASE_URL || '/api'

确认API基础路径配置正确。

6.2 检查代理配置

查看 martial-web/vite.config.js 或 vue.config.js：

proxy: {
  '/api': {
    target: 'http://localhost:8888',
    changeOrigin: true
  }
}

确认代理配置指向正确的后端地址。

7. 常见问题解决

问题1: CORS跨域错误

错误信息：

Access to XMLHttpRequest at 'http://localhost:8888/api/...' from origin 'http://localhost:5173' has been blocked by CORS policy

解决方案：

检查后端CORS配置
使用代理配置
确保前后端端口配置正确

问题2: 404 Not Found

可能原因：

API路径错误
后端Controller路径配置错误
后端服务未启动

解决方案：

检查API路径：/api/martial/competition/list
检查后端Controller注解：@RequestMapping("/martial/competition")
启动后端服务

问题3: 数据结构不匹配

现象： API返回数据，但前端解析失败。

解决方案： 查看控制台日志，确认数据结构：

console.log('赛事列表API返回:', res)
console.log('解析后的赛事列表:', records)

如果数据结构不对，修改前端解析逻辑。

8. 快速测试

8.1 使用Postman测试API

请求：

GET http://localhost:8888/api/martial/competition/list?current=1&size=10

期望返回：

{
  "code": 200,
  "success": true,
  "data": {
    "records": [
      {
        "id": 1,
        "competitionName": "测试赛事",
        "status": 1,
        ...
      }
    ],
    "total": 1
  }
}

8.2 使用curl测试

curl -X GET "http://localhost:8888/api/martial/competition/list?current=1&size=10"

9. 临时解决方案

如果急需使用，可以临时修改代码，手动添加测试数据：

// 在 loadCompetitionList 函数中添加
competitionList.value = [
  {
    id: 1,
    competitionName: '测试赛事',
    status: 1
  }
]
queryParams.competitionId = 1

注意： 这只是临时方案，不要提交到代码库。

10. 联系支持

如果以上步骤都无法解决问题，请提供以下信息：

浏览器控制台完整错误日志
Network请求的详细信息（Request/Response）
后端服务日志
数据库查询结果

修改记录

2025-12-13

✨ 添加详细的日志输出
✨ 优化数据解析逻辑，支持多种返回格式
✨ 移除status=1的限制，查询所有赛事
📝 创建排查指南文档

5.2 KiB Raw Blame History Unescape Escape