Umi for React项目mock数据的使用
2023-06-13 09:12:44 时间
使用 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数据的使用
相关文章
- 以太坊DApp开发项目平台
- maven项目 porm.xml中Dependency Scope属性「建议收藏」
- 成长之路第五期:资深项目经历和你聊
- 「TS实践」自己动手丰衣足食的TS项目开发
- 2022,数据科学与数据治理项目全纪录
- Java项目冷更新数据双缓存方案 ( Redis + GuavaCache )
- Git 本地项目连接远程仓库且推送到远程仓库
- 分享一下之前收集的一些基于百度飞浆 AI项目
- 客快物流大数据项目(八十一): Kudu原理
- 客快物流大数据项目(八十三):Kudu的优化
- python自动化高效办公第二期,带你项目实战【二】{数据可视化、发送邮件(定时任务监控)、python聊天机器人(基于微信、钉钉)}
- 客快物流大数据项目(九十七):ClickHouse的SQL语法
- 客快物流大数据项目(九十九):Clickhouse中update/delete的使用
- JavaWeb day5 Tomcat配置及idea创建Maven-Tomcat项目
- 标准&有效的项目开发流程
- Spark项目之电商用户行为分析大数据平台之(五)实时数据采集详解大数据
- Spark项目之电商用户行为分析大数据平台之(二)CentOS7集群搭建详解大数据
- Hadoop项目实战-用户行为分析之编码实践详解大数据
- Hadoop项目开发笔录详解大数据
- 实施Oracle项目实施:实现企业数据运行的可靠之路(oracle项目)
- 籍Linux项目实战:掌握系统开发和运维技能(linux项目书)
- 掰一掰GitHub上优秀的大数据项目
- .net读取项目AssemblyInfo.cs属性值