Mock数据

目录

[📘 Ant Design Pro Mock 使用指南](#📘 Ant Design Pro Mock 使用指南)

[🔧 一、基础配置](#🔧 一、基础配置)

[1. ​​创建 Mock 文件​​](#1. 创建 Mock 文件)

[⚡ 二、高级功能](#⚡ 二、高级功能)

[1. ​​动态数据生成(Mock.js)​​](#1. 动态数据生成(Mock.js))

[2. ​​网络延迟模拟​​](#2. 网络延迟模拟)

[3. ​​跨域处理​​](#3. 跨域处理)

[🔄 三、联调切换至真实接口](#🔄 三、联调切换至真实接口)

[1. ​​关闭 Mock​​](#1. 关闭 Mock)

[2. ​​代理到真实后端​​](#2. 代理到真实后端)

[⚠️ 四、常见问题解决](#⚠️ 四、常见问题解决)

[1. ​​线上部署 Mock​​](#1. 线上部署 Mock)

[2. ​​页面刷新 404​​](#2. 页面刷新 404)

[💎 五、最佳实践](#💎 五、最佳实践)

[🧪 六、完整示例](#🧪 六、完整示例)

[用户管理模块 Mock](#用户管理模块 Mock)

[Service 层调用](#Service 层调用)

组件中使用

总结流程图


📘 Ant Design Pro Mock 使用指南

基于 ​​Umi 框架​​实现,支持 TypeScript 类型安全开发,核心流程如下:


🔧 一、基础配置

1. ​​创建 Mock 文件​
  • ​位置​ :项目根目录 /mock 文件夹(支持 .ts 后缀)

  • ​模板示例​

    复制代码
    // mock/user.ts
    import { Request, Response } from 'express';
    
    type User = { id: string; name: string };  // 定义TS类型
    export default {
      // 静态数据
      'GET /api/users': { 
        data: [{ id: '1', name: 'Admin' }] 
      } as { data: User[] },  // 类型断言
    
      // 动态处理函数
      'POST /api/login': (req: Request, res: Response) => {
        if (req.body.username === 'admin') {
          res.send({ success: true });
        } else {
          res.status(401).send({ error: '验证失败' });
        }
      }
    };

    💡 无需手动导入,Umi 自动加载 /mock 目录文件


⚡ 二、高级功能

1. ​​动态数据生成(Mock.js)​
复制代码
npm install mockjs @types/mockjs --save-dev  # 安装依赖

// mock/tags.ts
import mockjs from 'mockjs';
export default {
  'GET /api/tags': mockjs.mock({
    'list|100': [{ 
      id: '@id',        // 随机ID
      name: '@cname',   // 随机中文名
    }]
  })
};
2. ​​网络延迟模拟​
复制代码
// 单接口延迟
'GET /api/data': (_, res) => {
  setTimeout(() => res.send({ data: [] }), 2000); // 延迟2秒
}

// 全局延迟(需安装 roadhog-api-doc)
import { delay } from 'roadhog-api-doc';
export default delay({ /* 接口配置 */ }, 1000); // 所有接口延迟1秒
3. ​​跨域处理​
复制代码
'POST /api/create': (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', '*'); // 允许跨域
  res.send('OK');
}

🔄 三、联调切换至真实接口

1. ​​关闭 Mock​
复制代码
NO_MOCK=true umi dev   # 开发环境禁用[2,4](@ref)
2. ​​代理到真实后端​
复制代码
// config/proxy.ts
export default {
  '/api': {
    target: 'http://real-api.com:8080',  // 后端地址
    changeOrigin: true,
    pathRewrite: { '^/api': '' },       // 移除 /api 前缀
  },
};

⚠️ 四、常见问题解决

1. ​​线上部署 Mock​
复制代码
npm install umi-serve -g    # 安装独立服务
umi-serve -p 8001           # 启动服务(端口8001)[4](@ref)

通过 Nginx 代理到该服务即可

2. ​​页面刷新 404​
复制代码
# Nginx 配置
location / {
  try_files $uri $uri/ /index.html;  # 指向SPA入口[4](@ref)
}

💎 五、最佳实践

  1. ​模块化拆分​

    • 按业务创建 mock/user.tsmock/order.ts 文件,通过 mock/index.ts 汇总

      // mock/index.ts
      import user from './user';
      import order from './order';
      export default { ...user, ...order };

  2. ​统一响应格式​

    复制代码
    type Response<T> = { success: boolean; data: T; error?: string };
    'GET /api/data': { success: true, data: [...] } as Response<DataType>;
  3. ​接口文档生成​

    使用 roadhog-api-doc 自动生成文档(需配置注释)

    复制代码
    'GET /api/users': {
      $desc: "获取用户列表",
      $params: { page: { desc: '页码' } },
      $body: { data: [] },
    }

🧪 六、完整示例

用户管理模块 Mock
复制代码
// mock/user.ts
import { Request, Response } from 'express';
import mockjs from 'mockjs';

type User = { id: string; name: string };
export default {
  // 随机生成用户列表
  'GET /api/users': mockjs.mock({
    'data|10': [{ 
      id: '@id', 
      name: '@cname',
    }]
  }) as { data: User[] },

  // 删除用户
  'DELETE /api/users/:id': (req: Request, res: Response) => {
    res.send({ success: true });
  }
};
Service 层调用
复制代码
// src/services/user.ts
import { request } from 'umi';

type User = { id: string; name: string };
export async function getUsers() {
  return request<{ data: User[] }>('/api/users'); // 指定返回类型
}
组件中使用
复制代码
// src/pages/UserList.tsx
import { useRequest } from '@umijs/max';
import { getUsers } from '@/services/user';

export default () => {
  const { data, loading } = useRequest(getUsers);
  return loading ? <Spin /> : <Table dataSource={data?.data} />;
};

总结流程图

通过此流程,前端可独立于后端开发,切换真实接口时只需调整代理配置,业务代码零修改。完整示例参考 Ant Design Pro Mock 文档

相关推荐
jingyu飞鸟28 分钟前
linux系统源代码安装apache、编译隐藏版本号
linux·运维·apache
世事如云有卷舒32 分钟前
Ubunt20.04搭建GitLab服务器,并借助cpolar实现公网访问
linux·服务器·gitlab
2401_858286111 小时前
OS15.【Linux】gdb调试器的简单使用
linux·运维·服务器·开发语言·gdb
c30%003 小时前
内网渗透——红日靶场五
运维·服务器
zjw_rp4 小时前
centos停止维护后更换yum源
linux·运维·centos
宇钶宇夕4 小时前
EPLAN 电气制图:建立自己的部件库,添加部件-加SQL Server安装教程(三)上
运维·服务器·数据库·程序人生·自动化
susu10830189114 小时前
Debian 11 Bullseye 在线安装docker
运维·docker·debian
行止64 小时前
OpenStack云平台管理
linux·openstack
love530love5 小时前
Docker 稳定运行与存储优化全攻略(含可视化指南)
运维·人工智能·windows·docker·容器
岁岁岁平安5 小时前
CentOS-7-x86_64解决:使用NAT模式无法ping通www.baidu.com或无法ping 8.8.8.8问题。
linux·运维·centos·centos-7