frontend/API测试指南.md

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）选项卡，执行以下代码：

// 测试材质列表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} - 获取指定角色及其属性（需要登录）

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