114 lines
4.1 KiB
Markdown
114 lines
4.1 KiB
Markdown
# API连接测试指南
|
||
|
||
本指南将帮助您测试前端是否能够成功读取后端数据，以及验证登录和注册功能的实现状态。
|
||
|
||
## 登录和注册功能实现状态
|
||
|
||
根据代码分析，**登录和注册功能已经实现并连接到了真实的后端API**。系统采用了以下实现方式：
|
||
|
||
### 登录功能
|
||
- 支持使用用户名或邮箱登录
|
||
- 集成了NextAuth.js进行身份验证管理
|
||
- 在测试环境中提供测试账号（用户名: `test`, 密码: `test`）
|
||
- 非测试账号会调用真实的后端API进行认证：`https://code.littlelan.cn/CarrotSkin/APIgateway/api/v1/auth/login`
|
||
- 包含验证码验证机制（非测试账号需要）
|
||
|
||
### 注册功能
|
||
- 完整的表单验证逻辑（用户名、密码、邮箱、Minecraft用户名不能为空）
|
||
- 密码强度检查（至少6位）
|
||
- 邮箱格式验证
|
||
- 验证码验证
|
||
- 调用真实的后端注册API：`https://code.littlelan.cn/CarrotSkin/APIgateway/api/v1/auth/register`
|
||
|
||
## 如何测试后端数据连接
|
||
|
||
### 方法一：使用API测试页面
|
||
|
||
1. 访问 `http://localhost:3000/api-tester` 打开API测试工具（已修复）
|
||
2. 点击"开始API测试"按钮
|
||
3. 查看测试结果，了解各个API端点的连接状态
|
||
|
||
### 方法二：使用简化API测试页面
|
||
|
||
1. 访问 `http://localhost:3000/simple-api-test` 打开简化的API测试工具
|
||
2. 选择要测试的API端点
|
||
3. 输入必要的参数（如用户ID、角色ID等）
|
||
4. 点击"测试API"按钮查看返回结果
|
||
|
||
### 方法三：使用浏览器控制台进行测试
|
||
|
||
打开浏览器开发者工具（F12），切换到控制台（Console）选项卡，执行以下代码：
|
||
|
||
```javascript
|
||
// 测试材质列表API（无需登录）
|
||
fetch('/api/textures')
|
||
.then(response => response.json())
|
||
.then(data => console.log('材质列表数据:', data))
|
||
.catch(error => console.error('获取材质列表失败:', error));
|
||
|
||
// 如果已登录，可以测试需要认证的API
|
||
// 测试用户角色列表
|
||
fetch('/api/user-profiles?userId=1', { credentials: 'include' })
|
||
.then(response => response.json())
|
||
.then(data => console.log('用户角色列表数据:', data))
|
||
.catch(error => console.error('获取用户角色列表失败:', error));
|
||
```
|
||
|
||
## 测试登录功能
|
||
|
||
### 测试测试账号登录
|
||
|
||
1. 访问 `http://localhost:3000/login` 登录页面
|
||
2. 输入用户名：`test`，密码：`test`
|
||
3. 点击登录按钮
|
||
4. 成功后会自动跳转到用户主页 `http://localhost:3000/user-home`
|
||
|
||
### 测试注册功能
|
||
|
||
1. 访问 `http://localhost:3000/register` 注册页面
|
||
2. 填写完整的注册信息：
|
||
- 用户名：自定义
|
||
- 密码：至少6位
|
||
- 邮箱：有效的邮箱地址
|
||
- Minecraft用户名：自定义
|
||
3. 点击获取验证码，输入收到的验证码
|
||
4. 点击注册按钮
|
||
5. 成功后会提示注册成功并自动跳转到登录页面
|
||
|
||
## 常见问题排查
|
||
|
||
1. **API请求失败**
|
||
- 检查网络连接是否正常
|
||
- 确认后端服务器是否正在运行
|
||
- 查看浏览器控制台是否有错误信息
|
||
- 检查API端点URL是否正确
|
||
|
||
2. **登录失败**
|
||
- 确认用户名和密码是否正确
|
||
- 检查验证码是否输入正确
|
||
- 查看是否有网络错误提示
|
||
|
||
3. **注册失败**
|
||
- 确认所有必填项都已填写
|
||
- 检查密码是否满足长度要求
|
||
- 确认邮箱格式是否正确
|
||
- 检查用户名或邮箱是否已被注册
|
||
|
||
## 高级测试技巧
|
||
|
||
### 查看API请求详情
|
||
|
||
1. 打开浏览器开发者工具（F12）
|
||
2. 切换到网络（Network）选项卡
|
||
3. 刷新页面或执行API操作
|
||
4. 查看请求和响应详情，包括状态码、请求头、响应内容等
|
||
|
||
### 测试特定API端点
|
||
|
||
使用API测试页面，您可以测试以下主要端点：
|
||
- **材质列表**: `/api/textures` - 获取所有材质数据（无需登录）
|
||
- **用户角色列表**: `/api/user-profiles?userId={id}` - 获取指定用户的角色列表（需要登录）
|
||
- **角色详情**: `/api/profile?profileId={id}` - 获取指定角色的详细信息（需要登录）
|
||
- **角色及属性**: `/api/profile-props?profileId={id}` - 获取指定角色及其属性（需要登录）
|
||
|
||
通过以上测试方法，您可以全面验证前端与后端的连接状态和数据读取能力。 |