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)' 生成省市

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

未经允许不得转载:Web前端开发资源网 » Umi for React项目mock数据的使用

推荐阅读:

Vue.js学习笔记——简介、安装使用

用css实现文本溢出 超出部分隐藏显示省略号

input[type=file]去掉“未选择任何文件”及样式改进

jQuery实现本地input选择图片实时显示

腾讯云IIS 百度HTTPS认证失败必读及抓取诊断

赞 (0)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)