yunzer/frontend/API_SETUP.md

API 设置说明

概述

本项目已从模拟登录改为真实的API调用，支持通过数据库进行用户认证。

后端API要求

1. 基础配置

• API基础URL: http://localhost:8000/api (开发环境)
• 请求格式: JSON
• 认证方式: Bearer Token

2. 必需接口

用户登录

POST /api/user/login
Content-Type: application/json

请求体:
{
  "username": "用户名",
  "password": "密码"
}

响应格式:
{
  "code": 200,
  "message": "登录成功",
  "data": {
    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...",
    "userInfo": {
      "id": 1,
      "username": "admin",
      "name": "管理员",
      "avatar": "/static/images/avatar.png",
      "role": "admin"
    }
  }
}

获取用户信息

GET /api/user/info
Authorization: Bearer {token}

响应格式:
{
  "code": 200,
  "message": "获取成功",
  "data": {
    "id": 1,
    "username": "admin",
    "name": "管理员",
    "avatar": "/static/images/avatar.png",
    "role": "admin"
  }
}

用户登出

POST /api/user/logout
Authorization: Bearer {token}

响应格式:
{
  "code": 200,
  "message": "登出成功",
  "data": null
}

修改密码

POST /api/user/change-password
Authorization: Bearer {token}
Content-Type: application/json

请求体:
{
  "oldPassword": "旧密码",
  "newPassword": "新密码"
}

响应格式:
{
  "code": 200,
  "message": "密码修改成功",
  "data": null
}

3. 错误处理

所有接口都应该返回统一的错误格式：

{
  "code": 400,
  "message": "错误描述",
  "data": null
}

常见HTTP状态码：

• 200: 成功
• 400: 请求参数错误
• 401: 未授权（token无效或过期）
• 500: 服务器内部错误

环境配置

开发环境

• 后端API运行在 http://localhost:8000
• 前端开发服务器运行在 http://localhost:5173

生产环境

• 使用相对路径 /api
• 需要配置反向代理

数据库表结构建议

用户表 (users)

CREATE TABLE users (
  id INT PRIMARY KEY AUTO_INCREMENT,
  username VARCHAR(50) UNIQUE NOT NULL,
  password VARCHAR(255) NOT NULL, -- 加密后的密码
  name VARCHAR(100) NOT NULL,
  avatar VARCHAR(255),
  role VARCHAR(20) DEFAULT 'user',
  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
  updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);

示例数据

INSERT INTO users (username, password, name, role) VALUES 
('admin', '$2y$10$...', '管理员', 'admin'),
('user1', '$2y$10$...', '普通用户', 'user');

注意事项

1. 密码安全: 使用bcrypt等加密算法存储密码
2. Token安全: 使用JWT等安全的token机制
3. CORS配置: 确保前端可以访问后端API
4. 错误处理: 提供清晰的错误信息
5. 日志记录: 记录登录、登出等重要操作

测试

1. 启动后端服务
2. 确保API接口正常工作
3. 启动前端开发服务器
4. 尝试使用真实用户名密码登录
5. 检查token是否正确保存和使用