martial-web/doc/赛事列表加载问题排查指南.md

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

## 问题现象

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

## 排查步骤

### 1. 检查浏览器控制台

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

**查看日志输出：**
```
赛事列表API返回: {...}
解析后的赛事列表: [...]
```

**可能的错误信息：**
- `加载赛事列表失败: Network Error` - 网络连接问题
- `加载赛事列表失败: 404` - API路径错误
- `加载赛事列表失败: 500` - 后端服务错误

### 2. 检查Network请求

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

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

4. 查看Response数据结构：
```json
{
  "code": 200,
  "data": {
    "records": [...],  // 赛事列表
    "total": 10
  }
}
```

### 3. 检查后端服务

#### 3.1 确认后端服务是否启动

**Windows:**
```bash
netstat -ano | findstr 8888
```

**Linux/Mac:**
```bash
netstat -tuln | grep 8888
```

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

#### 3.2 启动后端服务

进入后端项目目录：
```bash
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` 文件：

```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` 或类似文件：

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

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

#### 6.2 检查代理配置

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

```javascript
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
```

**解决方案：**
1. 检查后端CORS配置
2. 使用代理配置
3. 确保前后端端口配置正确

#### 问题2: 404 Not Found

**可能原因：**
1. API路径错误
2. 后端Controller路径配置错误
3. 后端服务未启动

**解决方案：**
1. 检查API路径：`/api/martial/competition/list`
2. 检查后端Controller注解：`@RequestMapping("/martial/competition")`
3. 启动后端服务

#### 问题3: 数据结构不匹配

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

**解决方案：**
查看控制台日志，确认数据结构：
```javascript
console.log('赛事列表API返回:', res)
console.log('解析后的赛事列表:', records)
```

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

### 8. 快速测试

#### 8.1 使用Postman测试API

**请求：**
```
GET http://localhost:8888/api/martial/competition/list?current=1&size=10
```

**期望返回：**
```json
{
  "code": 200,
  "success": true,
  "data": {
    "records": [
      {
        "id": 1,
        "competitionName": "测试赛事",
        "status": 1,
        ...
      }
    ],
    "total": 1
  }
}
```

#### 8.2 使用curl测试

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

### 9. 临时解决方案

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

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

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

### 10. 联系支持

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

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

## 修改记录

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