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",
        },
    ],
});
Last Updated 2024/3/14 09:51:53