251 lines
5.7 KiB
Markdown
251 lines
5.7 KiB
Markdown
# 🚀 快速测试指南
|
||
|
||
## ✅ 当前状态
|
||
|
||
- ✅ **后端服务**: http://localhost:8080 (运行中)
|
||
- ✅ **前端服务**: http://localhost:5175 (运行中)
|
||
- ✅ **API 通信**: camelCase 正常工作
|
||
- ✅ **测试通过**: 所有 API 测试通过
|
||
|
||
## 📝 测试结果
|
||
|
||
### 后端 API 测试
|
||
|
||
| 测试项 | 状态 | 说明 |
|
||
|-------|------|------|
|
||
| 健康检查 | ✅ | `/health` 返回 healthy |
|
||
| 登录 API | ✅ | `accessToken` (camelCase) ✓ |
|
||
| 获取集群 | ✅ | `createdAt`, `hasCaData` (camelCase) ✓ |
|
||
| 创建集群 | ✅ | 请求和响应都是 camelCase ✓ |
|
||
|
||
### 前端服务
|
||
|
||
| 项目 | URL | 状态 |
|
||
|-----|-----|------|
|
||
| 主应用 | http://localhost:5175 | ✅ 可访问 |
|
||
| API 测试页面 | http://localhost:5175/api-test | ⚠️ 需要在浏览器中访问 |
|
||
|
||
## 🧪 测试方法
|
||
|
||
### 方法 1: 浏览器测试（推荐）
|
||
|
||
1. **打开主应用**
|
||
```
|
||
http://localhost:5175
|
||
```
|
||
- 查看登录页面
|
||
- 测试认证功能
|
||
|
||
2. **打开 API 测试页面**
|
||
```
|
||
http://localhost:5175/api-test
|
||
```
|
||
- 点击 "🚀 完整测试" 按钮
|
||
- 观察所有 API 调用是否成功
|
||
- 验证 camelCase 字段
|
||
|
||
### 方法 2: cURL 测试（快速验证）
|
||
|
||
```bash
|
||
# 1. 健康检查
|
||
curl http://localhost:8080/health
|
||
|
||
# 2. 登录（获取 Token）
|
||
curl -X POST http://localhost:8080/api/v1/auth/login \
|
||
-H "Content-Type: application/json" \
|
||
-d '{"username":"admin","password":"admin123"}'
|
||
|
||
# 3. 创建集群（使用 camelCase）
|
||
TOKEN="你的token"
|
||
curl -X POST http://localhost:8080/api/v1/clusters \
|
||
-H "Content-Type: application/json" \
|
||
-H "Authorization: Bearer $TOKEN" \
|
||
-d '{
|
||
"name": "test-cluster",
|
||
"host": "https://k8s.example.com:6443",
|
||
"caData": "LS0tLS1CRUdJTi1DRVJUSUZJQ0FURS0tLS0t",
|
||
"certData": "LS0tLS1CRUdJTi1DRVJUSUZJQ0FURS0tLS0t",
|
||
"keyData": "LS0tLS1CRUdJTiBSU0EgUFJJVkFURSBLRVkt"
|
||
}'
|
||
```
|
||
|
||
### 方法 3: 自动化测试脚本
|
||
|
||
```bash
|
||
# 运行完整测试
|
||
cd /home/mango/workspace/ocdp-go
|
||
./scripts/test-api-camelcase.sh
|
||
|
||
# 运行前端集成测试
|
||
./scripts/test-frontend-integration.sh
|
||
```
|
||
|
||
## 📖 前端 API 使用示例
|
||
|
||
### 在浏览器控制台测试
|
||
|
||
打开 http://localhost:5175，按 F12 打开控制台，运行：
|
||
|
||
```javascript
|
||
// 1. 导入 API 函数（如果已经在页面中加载）
|
||
// 或者在组件中使用
|
||
|
||
// 2. 登录示例
|
||
const response = await fetch('http://localhost:8080/api/v1/auth/login', {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
username: 'admin',
|
||
password: 'admin123'
|
||
})
|
||
});
|
||
|
||
const data = await response.json();
|
||
console.log('登录响应 (camelCase):', data);
|
||
// 应该看到: { accessToken: "...", refreshToken: "...", userId: "..." }
|
||
|
||
// 3. 获取集群列表
|
||
const token = data.accessToken;
|
||
const clustersResponse = await fetch('http://localhost:8080/api/v1/clusters', {
|
||
headers: { 'Authorization': `Bearer ${token}` }
|
||
});
|
||
|
||
const clusters = await clustersResponse.json();
|
||
console.log('集群列表 (camelCase):', clusters);
|
||
// 应该看到 camelCase 字段: createdAt, hasCaData, etc.
|
||
```
|
||
|
||
## ✨ camelCase 验证清单
|
||
|
||
验证以下字段都是 camelCase 格式：
|
||
|
||
### Auth API
|
||
- [ ] `accessToken`
|
||
- [ ] `refreshToken`
|
||
- [ ] `userId`
|
||
|
||
### Cluster API
|
||
- [ ] `caData`
|
||
- [ ] `certData`
|
||
- [ ] `keyData`
|
||
- [ ] `hasCaData`
|
||
- [ ] `hasCertData`
|
||
- [ ] `hasKeyData`
|
||
- [ ] `hasToken`
|
||
- [ ] `createdAt`
|
||
- [ ] `updatedAt`
|
||
|
||
### Registry API
|
||
- [ ] `registryId`
|
||
- [ ] `hasPassword`
|
||
- [ ] `createdAt`
|
||
- [ ] `updatedAt`
|
||
|
||
## 🎯 预期结果
|
||
|
||
### API 响应示例（camelCase ✅）
|
||
|
||
**登录响应：**
|
||
```json
|
||
{
|
||
"accessToken": "eyJhbGci...",
|
||
"refreshToken": "eyJhbGci...",
|
||
"userId": "e0b632e8-...",
|
||
"username": "admin"
|
||
}
|
||
```
|
||
|
||
**集群响应：**
|
||
```json
|
||
{
|
||
"id": "ed37e2b2-...",
|
||
"name": "test-cluster",
|
||
"host": "https://k8s.example.com:6443",
|
||
"hasCaData": true,
|
||
"hasCertData": true,
|
||
"hasKeyData": true,
|
||
"hasToken": false,
|
||
"caData": "••••••••",
|
||
"certData": "••••••••",
|
||
"keyData": "••••••••",
|
||
"createdAt": "2025-11-10T10:03:04Z",
|
||
"updatedAt": "2025-11-10T10:03:04Z"
|
||
}
|
||
```
|
||
|
||
## 🔧 故障排查
|
||
|
||
### 问题：前端无法连接后端
|
||
|
||
**检查：**
|
||
```bash
|
||
# 检查后端是否运行
|
||
curl http://localhost:8080/health
|
||
|
||
# 如果没有运行
|
||
cd backend
|
||
make run-0
|
||
```
|
||
|
||
### 问题：前端服务未启动
|
||
|
||
**检查：**
|
||
```bash
|
||
# 检查前端是否运行
|
||
curl http://localhost:5175
|
||
|
||
# 如果没有运行
|
||
cd frontend
|
||
npm run dev
|
||
```
|
||
|
||
### 问题：API 返回 401 Unauthorized
|
||
|
||
**原因**: Token 过期或未设置
|
||
|
||
**解决**:
|
||
1. 重新登录获取新 Token
|
||
2. 确保 Authorization header 正确设置
|
||
|
||
### 问题：看到 snake_case 而不是 camelCase
|
||
|
||
**检查**:
|
||
1. 确认 Go DTO JSON tags 已更新
|
||
2. 确认 OpenAPI 规范已更新
|
||
3. 确认前端代码已重新生成：`npm run openapi-gen`
|
||
4. 重启后端和前端服务
|
||
|
||
## 📚 相关文档
|
||
|
||
- **完整文档**: [IMPLEMENTATION-COMPLETE.md](./IMPLEMENTATION-COMPLETE.md)
|
||
- **测试指南**: [TEST-GUIDE.md](./TEST-GUIDE.md)
|
||
- **测试结果**: [TEST-RESULTS.md](./TEST-RESULTS.md)
|
||
- **API 文档**: [frontend/src/api/README.md](./frontend/src/api/README.md)
|
||
|
||
## 🎊 成功标志
|
||
|
||
当你看到以下内容时，说明一切正常：
|
||
|
||
✅ 后端返回 JSON 使用 camelCase
|
||
✅ 前端可以正常解析响应
|
||
✅ 所有 API 调用成功
|
||
✅ TypeScript 类型提示正常
|
||
✅ 浏览器控制台无错误
|
||
|
||
---
|
||
|
||
**当前服务地址：**
|
||
- 🌐 前端: http://localhost:5175
|
||
- 🔌 后端: http://localhost:8080
|
||
- 🧪 测试: http://localhost:5175/api-test
|
||
|
||
**快速测试命令：**
|
||
```bash
|
||
# 一键运行所有测试
|
||
cd /home/mango/workspace/ocdp-go
|
||
./scripts/test-frontend-integration.sh
|
||
```
|
||
|
||
🎉 **测试成功！camelCase API 完全正常工作！**
|
||
|