MockJs
yuhuo2022-11-19开发库工具库
参考链接
Mock.mock(template)
生成模拟数据
import Mock from "mockjs";
let data = Mock.mock({
"list|10": [
{
// 数字
"numberA|+1": 2, // 初始值2,自动加1
"numberB|2": 0, // 整数2(属性值只用来确定类型)
"numberC|2.5": 0, // 整数2,5位小数
"numberD|2-4": 0, // 2-4的整数
"numberE|2-4.5-7": 0, // 2-4的整数,5-7位小数
// 字符串
"stringA|2": "好", // 重复2次
"stringB|2-4": "好", // 重复2-3次
// 布尔
"booleanA|1": true, // true的概率1/2
"booleanB|1-3": true, // true的概率1/(1+3)
// 对象
"objectA|2": { a: 1, b: 2, c: 3, d: 4 }, // 随机选2个属性
"objectB|2-3": { a: 1, b: 2, c: 3, d: 4 }, // 随机选2-3个属性
// 数组
"arrayA|+1": [1, 2, 3, 4], // 按顺序选取1个元素(类型变成元素的类型)
"arrayB|1": [1, 2, 3, 4], // 随机选取1个元素(类型变成元素的类型)
"arrayC|2": [1, 2], // 重复2次
"arrayD|2-4": [1, 2], // 重复2-3次
// 方法
func: function () {
return "方法返回值";
},
// 正则表达式
regexp: /[a-z][A-Z][0-9]/,
// 占位符
username: "前@FIRST 后", // 引用 Mock.Random 的方法
nickname: "前@username 后", // 引用数据模板的属性(优先)
email: "example\\@gmail.com", // 转义@符
},
],
});
Mock.mock(url[, type], template)
接口数据代理
import Mock from "mockjs";
Mock.mock("https://yuhuo.com/user/query", {
id: "@id",
});
Mock.mock("https://yuhuo.com/user/get", "GET", {
status: 500,
msg: "系统错误"
});
Mock.mock(url[, type], function(request) {})
接口数据代理
import Mock from "mockjs";
const baseUrl = "https://yuhuo.com";
Mock.mock(new RegExp("^" + baseUrl + "/user/search/.*"), (request) => {
return Mock.mock({
id: "@id",
});
});
Mock.mock(/\/user\/get/, "POST", (request) => {
// 获取接口参数
const data = JSON.parse(request.body);
return {
status: 200,
msg: "成功",
data
};
});
Mock.setup()
设置
import Mock from "mockjs";
// 设置响应时间为固定值(单位:毫秒)
Mock.setup({timeout: 400});
// 设置响应时间为范围值
Mock.setup({ timeout: "200-400" });
Mock.Random
扩展方法
import Mock from "mockjs";
Mock.Random.extend({
education: function () {
return this.pick(["小学", "初中", "高中", "中专", "大专", "本科", "研究生"]);
},
});
// 在ts中要扩展Random类型来创建自定义类型
interface myRandom extends Mock.MockjsRandom {
education(): string;
}
调用方法
import Mock from "mockjs";
let data = Mock.mock({
"list|6": [
{
// id
id: Mock.Random.id(),
// 中文姓名
cname: Mock.Random.cname(),
// 英文名
first: Mock.Random.first(),
// 英文姓
last: Mock.Random.last(),
// 随机取值
sex: Mock.Random.pick(["男", "女"]),
// 城市
city: Mock.Random.city(),
// 邮箱
email: Mock.Random.email(),
// 自定义扩展(在ts中需要断言为自定义类型)
education: (Mock.Random as myRandom).Random.education(),
},
],
});
模板中简写方法
import Mock from "mockjs";
// 所有方法名都可以任意大小写
let data = Mock.mock({
"list|6": [
{
id: "@id",
name: "@CNAME",
first: "@first",
last: "@last",
sex: "@PICK(['男', '女'])",
city: "@city",
email: "@email",
education: "@education",
},
],
});