4.6 KiB
4.6 KiB
🚀 快速参考卡片
一页纸搞定API对接 - 所有关键信息都在这里
⚡ 3步启动
# 1. 配置后端地址
编辑 config/env.config.js → apiBaseURL: 'http://localhost:8080'
# 2. 启动项目
npm run dev:mp-weixin
# 3. 测试登录
比赛编码: 123
邀请码: pub (普通评委) 或 admin (裁判长)
📋 后端待开发接口(5个)
🔴 POST /api/mini/login # 登录验证 (2天)
🔴 GET /api/mini/athletes # 普通评委选手列表 (1天)
🟡 GET /api/mini/athletes/admin # 裁判长选手列表 (1天)
🟡 GET /api/mini/score/detail/{id} # 评分详情 (1天)
🟡 PUT /api/mini/score/modify # 修改评分 (1天)
✅ GET /martial/venue/list # 场地列表 (已有)
✅ GET /martial/project/list # 项目列表 (已有)
✅ GET /martial/deductionItem/list # 扣分项列表 (已有)
✅ POST /martial/score/submit # 提交评分 (已有)
总工作量: 6人天
🔍 调试技巧
查看API日志
// 控制台会显示
[API请求] POST /api/mini/login { matchCode: '123', inviteCode: 'pub' }
[API响应] POST /api/mini/login { code: 200, data: {...} }
切换Mock模式
// config/env.config.js
dataMode: 'mock' // 后端未就绪时使用
检查Token
// 控制台执行
uni.getStorageSync('token')
⚠️ 常见问题速查
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 网络错误 | 后端未启动 | 检查 http://localhost:8080/doc.html |
| 401错误 | Token过期 | 重新登录(已自动处理) |
| 列表为空 | 无测试数据 | 联系后端或用Mock模式 |
| CORS错误 | 跨域未配置 | 后端配置CORS |
📚 文档快速链接
| 文档 | 用途 | 时间 |
|---|---|---|
| API对接快速启动指南 | 5分钟上手 | 5分钟 |
| 后端接口开发清单 | 后端开发规范 | 30分钟 |
| 前端API对接指南 | 前端联调指南 | 20分钟 |
🧪 测试流程
普通评委流程(5分钟)
登录(pub) → 查看选手列表 → 点击评分 → 选择扣分项 → 提交评分
裁判长流程(8分钟)
登录(admin) → 选择场地/项目 → 查看选手列表 → 点击修改 → 修改分数 → 提交
🔧 关键代码位置
配置文件: config/env.config.js
数据适配: utils/dataAdapter.js
网络请求: utils/request.js
API接口: api/index.js
登录调用: pages/login/login.vue:96
选手列表: pages/score-list/score-list.vue:150
提交评分: pages/score-detail/score-detail.vue:237
修改评分: pages/modify-score/modify-score.vue:242
✅ 检查清单
开始前
- 后端服务已启动
- apiBaseURL 配置正确
- 测试数据已准备
测试中
- 登录成功
- Token保存成功
- 选手列表显示
- 评分提交成功
📊 项目状态
前端完成: ████████████████████ 100%
后端完成: ████████░░░░░░░░░░░░ 44%
文档完成: ████████████████████ 100%
🎯 后端开发建议
// 创建专用Controller
@RestController
@RequestMapping("/api/mini")
public class MartialMiniController {
@PostMapping("/login")
public R<LoginVO> login(@RequestBody LoginDTO dto) {
// 1. 验证邀请码
// 2. 生成Token
// 3. 返回用户信息
}
@GetMapping("/athletes")
public R<List<AthleteScoreVO>> getMyAthletes(
@RequestParam Long judgeId,
@RequestParam Long venueId,
@RequestParam Long projectId
) {
// 查询选手列表 + 评分状态
}
}
💡 重要提示
Token认证
使用 Blade-Auth 头部,不是 Authorization
Blade-Auth: Bearer {token}
响应格式
{
"code": 200,
"success": true,
"msg": "操作成功",
"data": {}
}
分页数据
{
"data": {
"records": [...] // 需要提取这里
}
}
🎉 项目评分
架构设计: ⭐⭐⭐⭐⭐ 9/10
代码质量: ⭐⭐⭐⭐⭐ 8.5/10
文档完整: ⭐⭐⭐⭐⭐ 10/10
总体评价: ⭐⭐⭐⭐⭐ 9/10
📞 需要帮助?
- 详细文档: 查看 doc/ 目录
- 代码问题: 查看 utils/ 和 api/ 目录
- 后端规范: 查看 doc/后端接口开发清单.md
前端已就绪,可以立即开始API对接! 🚀
预计完成时间: 7个工作日