Umi for React项目mock数据的使用

使用 Mock 可以方便的模拟接口数据，只需要简单配置，就能实现上万级别的模拟数据。下面简单记录一下， Umi 项目 Mock 的使用：

本地配置开启 Mock

修改 umi 配置文件 .umirc.ts ，开启 mock ：

export default defineConfig({
  mock: {},
});

配置接口

在项目配置接口的文件。例如：

在 ./src/api/table.ts 中添加获取 table 的接口：

import https from '@/utils/https'; // axios 实例
import { ContentType, Method } from 'axios-mapper';
import { baseURL } from '@/constant/service';
 
export async function getTableData() {
  const result = await https.request<{ data: any[] }>(
    `${baseURL}/api/getTableData`,
    Method.GET,
    {},
    ContentType.json,
  );
  return result?.data;
}

在 mock 中添加接口

在 ./mock/api.ts 中配置接口及返回的数据：

import mockjs from 'mockjs';
export default {
  'GET /api/getTableData': mockjs.mock({
    'data|2000': [
      {
        'key|+1': 1,
        name: '@cname',
        'age|18-50': 1,
        address: '@city',
      },
    ],
  }),
};

在页面中调用接口

import { getTableData } from '@/api/table';

mock 的使用

如果需要批量生成数据，需要安装一下 mockjs ：

npm install mockjsnpm install mockjs

使用 mockjs ：

var Mock = require('mockjs')
var data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1
    }]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))

mock 数据模板规范

比如需要生成 100 条数据：

mockjs.mock({
  'data|2000': [
    {
      name: '@cname',
    },
  ],
}),

数值生成规则 有 7 种格式：

'name|min-max': value
'name|count': value
'name|min-max.dmin-dmax': value
'name|min-max.dcount': value
'name|count.dmin-dmax': value
'name|count.dcount': value
'name|+step': value

详细规则可以参考官方文档。

这里的 'key|+1': 1 就是从 1 开始，逐个加 1 。

还有一些工具类，比如：

'@date' 生成日期

'@date("YYYYMMDD")' 自定义格式的日期

'@email' 生成邮箱

'@cname' 生成中文名

'@city' 生成市

'@city(true)' 生成省市

等等，有很多使用方法，可以根据自己需求进行实现。

未经允许不得转载：前端资源网 - w3h5 » Umi for React项目mock数据的使用