# 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}` - 获取指定角色及其属性（需要登录）

通过以上测试方法，您可以全面验证前端与后端的连接状态和数据读取能力。