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数据的使用
本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录