Files

T

添加用户管理视图、API和状态管理文件

2026-03-28 14:37:29 +08:00

3.2 KiB

Raw Blame History

Mock API 服务系统

基于 OpenAPI 规范生成模拟响应数据，用于前端开发过程中的数据模拟。

概述

Mock API 服务系统旨在为前端开发提供一个完整的模拟后端环境，使前端开发可以独立于后端进行，提高开发效率。

功能特性

1. Mock 数据生成器

generateMockUser(): 生成符合规范的用户模拟数据
generateMockRole(): 生成符合规范的角色模拟数据
generateMockMenu(): 生成符合规范的菜单模拟数据
generatePageResult(): 生成分页结果
successResponse(): 生成成功响应
errorResponse(): 生成错误响应
randomDelay(): 生成随机网络延迟

2. Mock 服务器

模拟完整的 CRUD 操作
支持所有主要的 API 端点
模拟认证流程
支持查询参数和分页

3. Mock 拦截器

自动拦截 API 请求
在开发环境中自动启用
可随时切换到真实 API

API 端点支持

用户管理

GET /sys/user - 获取用户列表
POST /sys/user - 创建用户
PUT /sys/user - 更新用户
GET /sys/user/{id} - 获取用户详情
DELETE /sys/user/{id} - 删除用户
GET /sys/user/username/{username} - 根据用户名获取用户

角色管理

GET /sys/role - 获取角色列表
POST /sys/role - 创建角色
PUT /sys/role - 更新角色
GET /sys/role/{id} - 获取角色详情
DELETE /sys/role/{id} - 删除角色
GET /sys/role/roleKey/{roleKey} - 根据角色键获取角色
GET /sys/role/user/{userId} - 获取用户的角色

菜单管理

GET /sys/menu - 获取菜单列表
POST /sys/menu - 创建菜单
PUT /sys/menu - 更新菜单
GET /sys/menu/{id} - 获取菜单详情
DELETE /sys/menu/{id} - 删除菜单
GET /sys/menu/user/{userId} - 获取用户的菜单

认证

POST /sys/auth/login - 用户登录
POST /sys/auth/logout - 用户登出
POST /sys/auth/refresh/{token} - 刷新令牌

使用方法

自动启用

在开发环境中，Mock 系统会自动启用，无需任何配置。

手动控制

可以通过环境变量控制 Mock 系统：

# 启用 Mock（开发环境默认）
VITE_MOCK_ENABLED=true

# 禁用 Mock
VITE_MOCK_ENABLED=false

模拟数据定制

如果需要特定的模拟数据，可以直接使用 Mock 数据生成器：

import { generateMockUser, successResponse } from "@/mocks/mock-data";

// 生成特定用户
const user = generateMockUser(123);

// 生成成功响应
const response = successResponse(user, "User retrieved successfully");

测试覆盖

Mock 系统已全面测试，覆盖以下场景：

正常请求 - 所有 API 端点的正常操作
异常处理 - 错误响应、无效输入等
边界情况 - 空结果、大页码、特殊参数等
数据一致性 - 响应格式与真实 API 保持一致

无缝切换

当后端 API 准备就绪时，只需：

设置 VITE_MOCK_ENABLED=false
确保后端服务运行在正确的地址
前端代码无需任何修改即可连接真实 API

开发注意事项

Mock 数据遵循与真实 API 相同的数据结构
响应格式与真实 API 完全一致
HTTP 状态码模拟真实行为
网络延迟模拟真实用户体验

3.2 KiB Raw Blame History