Mock 的使用方法

65 阅读 0 评论 43 点赞

我是靠谱客的博主爱笑超短裙，最近开发中收集的这篇文章主要介绍Mock 的使用方法，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

Mock 的基本使用

// 模板定义规则
        let obj1 = Mock.mock({
            info: "info字符串", // 静态取值
            "star|1-3": "★",  //冒号前为自定义属性， 生成指定范围长度的字符串
            name: "@cname" // 通过关键字生成模拟数据
        })
        console.log(obj1);


        let temp = {
            "id|+1": 10000001  // 表示在当前静态数据取值基础上每调用一次+1
        }
        console.log(Mock.mock(temp)); // 10000001
        console.log(Mock.mock(temp)); // 10000002
        console.log(Mock.mock(temp)); // 10000003
        console.log(Mock.mock(temp)); // 10000004
        console.log(Mock.mock(temp)); // 10000005
        console.log(Mock.mock(temp)); // 10000006
        console.log(Mock.mock(temp)); // 10000007
        console.log(Mock.mock(temp)); // 10000008

// 数值生成规则 |min-max.dmin(最小位数)-dmax(最大位数)
        let obj3 = Mock.mock({
            "age|0-100": 0,
            "price|1-100.2-4": 0,
            "num|.2-4": 0, // 默认认为整数位为0
            "num|1-100.3-3": 0 // 限定位数生成
        })
        console.log(obj3);


        let temp1 = {
            "flag1|0": true, // 模板规则0 表示恒false
            "flag2|1": true, // 模板规则1 表示boolean类型取值随机
            "flag3|30": true, // 模板规则>1 表示boolean类型取值随机规则偏向于默认值
            "flag4|1-2": false // mim-max 表示boolean类型随机
        }
        console.log(Mock.mock(temp1));

let obj5 = Mock.mock({
            // 在已知属性的基础上随机选择2个属性构成
            "address|2": {
                addr1: "@city",
                addr2: "@city",
                addr3: "@city",
                addr4: "@city"
            },
            // 在已知属性的基础上随机选择2~4个属性构成
            "address2|2-4": {
                addr1: "@city",
                addr2: "@city",
                addr3: "@city",
                addr4: "@city"
            }
        })
        console.log(obj5);

 let temp2 = {
            // 启用枚举格式，从[]中随机选择一个数据
            "sex|1": ["男", "女", "未知"],
            // 启用递增枚举格式，从第一个元素开始按需加载，如果不足从头开始
            "sex1|+1": ["男", "女", "未知"],
            "names|6-10": ["@cname"],
            "user|10-10": [
                {
                    "id|+1": 1000001,
                    username: "@cname",
                    password: "@word",
                    info: "@cparagraph",
                    "sex|1": ["男", "女", "未知"]
                }
            ]
        }
        console.log(Mock.mock(temp2)); // 男
        console.log(Mock.mock(temp2)); // 女
        console.log(Mock.mock(temp2)); // 未知
        console.log(Mock.mock(temp2)); // 男

正则表达式可根据下面组件进行转换，输出需求鼠标右击进行搜索

let obj7 = Mock.mock({
            user: {
                name: "@cname"
            },
            tel: /1[0-9]{10}/,
            email: /[a-z]+@[a-z]+.(net|com|cn)/,
            cardId: /^[1-9]d{7}(?:0d|10|11|12)(?:0[1-9]|[1-2][d]|30|31)d{3}$/,
            info: function () {
                // this 指向模拟数据模板对象，用于加载已生成的模拟数据
                return `我的名字是${this.user.name};电话号码是:${this.tel};邮箱是:${this.email};身份证号码:${this.cardId}`
            },
            // 路径规则中  @表示启动关键字(注意@前面不能有除空格外的其他字符)
            //            / 表示在模板数据中的层级
            message: "我的名字是 @/user/name ;电话号码是: @/tel ;邮箱是: @/email ;身份证号码: @/cardId "
        })

        console.log(obj7);

mock的特殊数据生成器

console.log( Mock.mock({
            day1:"@date",
            day2:"@date('yyyy年MM月dd日')",
            day3:"@date('yy年MM月dd日')",
            day4:"@date('y年MM月dd日')",
            time1:"@time",
            time2:"@time('HH:mm:ss.SS')",
            daytime1:"@datetime",
            now1:"@now"
        }) )

let obj = Mock.mock({
            // 生成带参请求地址
            img:"@image('200x100', '#894FC4', '#FFF', 'png', '!')",
            img1:"@image('200x100', '#aaaaa', '#FFF', 'png', '!')",
            img2:"@image('200x100', '#bbbbb', '#FFF', 'png', '!')",
            // mock占位符调用时，需要传递参数，参数也可以是占位符
            img3:"@image('200x100', '@color', '#FFF', 'png', '!')",
            img4:"https://api.ixiaowai.cn/mcapi/mcapi.php?_=@time('T')"

        })
        console.log(obj);