5.0 KiB
5.0 KiB
Design Document: Admin Integration Testing
Overview
本文档描述了后台管理系统前后端联调测试的策略和流程设计。联调测试确保后端 API 和前端页面能够正确协作。
联调策略
分阶段联调
gantt
title 前后端并行开发与联调计划
dateFormat YYYY-MM-DD
section 后端开发
基础设施搭建 :a1, 2026-02-03, 2d
配置+内容模块 :a2, after a1, 3d
测评模块 :a3, after a2, 4d
用户+订单模块 :a4, after a3, 3d
规划师+分销模块 :a5, after a4, 4d
权限控制 :a6, after a5, 2d
section 前端开发
基础设施搭建 :b1, 2026-02-03, 2d
Dashboard+Config :b2, after b1, 2d
Content模块 :b3, after b2, 2d
Assessment模块 :b4, after b3, 4d
User+Order模块 :b5, after b4, 3d
Planner+Distribution :b6, after b5, 4d
权限控制 :b7, after b6, 2d
section 联调测试
联调1: 基础模块 :c1, 2026-02-08, 1d
联调2: 内容+测评 :c2, 2026-02-14, 1d
联调3: 用户+订单 :c3, 2026-02-18, 1d
联调4: 规划师+分销 :c4, 2026-02-23, 1d
联调5: 权限+最终验收 :c5, 2026-02-25, 2d
联调检查点
| 检查点 | 后端完成任务 | 前端完成任务 | 联调内容 |
|---|---|---|---|
| CP1 | Task 1-4 | Task 1-4 | Dashboard, Config |
| CP2 | Task 5-10 | Task 5-6 | Content, Assessment |
| CP3 | Task 11-14 | Task 7-9 | User, Order |
| CP4 | Task 15-19 | Task 10-11 | Planner, Distribution |
| CP5 | Task 20-23 | Task 12-14 | 权限控制, 最终验收 |
联调环境配置
后端配置
// appsettings.Development.json
{
"Cors": {
"AllowedOrigins": ["http://localhost:5173"]
}
}
前端配置
// vite.config.ts
export default defineConfig({
server: {
proxy: {
'/api': {
target: 'http://localhost:61551',
changeOrigin: true
}
}
}
})
联调测试用例
1. 认证流程
测试步骤:
1. 打开登录页面
2. 输入用户名: admin, 密码: 123456
3. 点击登录按钮
预期结果:
- 登录成功，跳转到首页
- localStorage 中存储 accessToken 和 refreshToken
- 后续请求 Header 中包含 Authorization: Bearer {token}
2. CRUD 操作流程
测试步骤 (以轮播图为例):
1. 访问轮播图管理页面
2. 点击新增按钮
3. 上传图片，填写标题，选择跳转类型
4. 点击保存
预期结果:
- 图片上传成功，返回 URL
- 表单数据正确提交到后端
- 列表刷新显示新增数据
- 数据库中有对应记录
3. 分页和筛选
测试步骤:
1. 访问用户管理页面
2. 输入筛选条件 (手机号: 138)
3. 点击搜索
4. 切换到第 2 页
预期结果:
- 列表只显示手机号包含 138 的用户
- 分页信息正确 (总数、当前页)
- 切换页面数据正确加载
4. 权限控制
测试步骤:
1. 使用普通运营账号登录
2. 访问提现审核页面
3. 尝试点击审核按钮
预期结果:
- 如果无权限，审核按钮不显示
- 如果直接调用 API，返回 403 错误
常见问题排查
1. CORS 错误
问题: Access to XMLHttpRequest has been blocked by CORS policy
解决: 检查后端 CORS 配置是否包含前端地址
2. 401 未授权
问题: 请求返回 401 Unauthorized
解决:
- 检查 token 是否正确存储
- 检查请求 Header 是否包含 Authorization
- 检查 token 是否过期
3. 数据格式不一致
问题: 前端解析数据失败
解决:
- 对比 API 文档和实际返回数据
- 检查字段名大小写 (后端 PascalCase vs 前端 camelCase)
- 检查日期格式
4. 文件上传失败
问题: 图片上传返回错误
解决:
- 检查文件大小限制
- 检查文件类型限制
- 检查上传路径配置
联调沟通模板
问题报告
**模块**: 轮播图管理
**接口**: POST /api/admin/content/banner/create
**问题描述**: 创建轮播图时返回 500 错误
**请求参数**:
{
"title": "测试",
"imageUrl": "http://xxx/test.jpg",
"linkType": 1,
"linkUrl": "/pages/index"
}
**返回结果**:
{
"code": 500,
"message": "Internal Server Error"
}
**期望结果**: 返回创建成功的 ID
**前端/后端**: 后端
接口变更通知
**接口**: GET /api/admin/user/getList
**变更类型**: 新增字段
**变更内容**: 响应数据新增 inviteCount 字段
**变更原因**: 需要显示用户邀请人数
**影响范围**: 用户列表页面
**生效时间**: 2026-02-10
验收标准
功能验收
- 所有 CRUD 操作正常
- 分页和筛选功能正常
- 文件上传功能正常
- 导出功能正常
- 权限控制正常
性能验收
- 列表页面加载时间 < 2s
- 表单提交响应时间 < 1s
- 文件上传响应时间 < 5s
兼容性验收
- Chrome 最新版本
- Edge 最新版本
- Firefox 最新版本