【Mock】接口数据自动生成与拦截->实战

接口数据自动生成与拦截

mock.js

1.安装 mock.js

node -vnpm -vnpm install mockjs

2. 语法规范

1.DTD：Data Templates Definition(数据模板定义规范)
2.DPD: Data Placeholder Definition(数据占位符定义)

3. 数据模板定义

语法

1.name|rule:value : 属性|规则：值

1. 规则是可选的

2. | 两边不能有空格

规则

1. 'name|count' : value

2. 'name|count.dcount' : value

3. 'name|min-max' : value

4. 'name|min-max.dcount' : value

5. 'name|min-max.dmin-dmax' : value

6. 'name|count.dmin-dmax' : value

7. 'name|+step' : value

值

1. 属性值有时仅起类型提示作用

2. 属性值可使用@占位符

3. 属性值还指定了最终值和类型

4. 有些规则是限定了属性值类型

数据占位符定义

1. 占位符：必须写到属性值中

2. 占位符：只有一个指令，并不会出现在最终的属性值中

3. 占位符施法：@占位符（参数）

4. 如果没有参数，占位符后面的括号，可以不写

5. 占位符可以引用模板数据中的属性

6. 占位符支持绝对和相对路径

实战

1.数据模板定义

// ? 数据模板定义const Mock = require('mockjs')const opts = {    // ? 字符串 string    'str1|3': 'a',    'str2|3-6': 'a',    // ? 数组 number    'num1|18-50': 1,    // 生成小数，后面的值没有意义    'num2|315.3': 1,    'num3|315.1-3': 1,    'num4|10-100.1-3': 9,    // ? 生成 boolean    // 'true / false': 各占50%    'bool1|1': true,    // 当前值为 true ，也是初值，1/(1+2)：true的概率为33%; false概率为66%;    'bool2|1-2': true,    // ? 对象 object    // 随机取n个: |n    'obj1|1':{        310000:'上海市',        320000:'江苏省',        330000:'浙江省',        340000:'安徽省',    },    'obj2|1-3':{        310000:'上海市',        320000:'江苏省',        330000:'浙江省',        340000:'安徽省',    },    // ? 数组    // 随机取n个: |n    // 'arr1|1-5': [0],    // 'arr2|1': ['html', 'css', 'js'],    // 'arr3|3': ['php'],    // 'arr4|1-3': ['php'],    'arr5|1-3': [        {'name|+1': ['张老师','王老师','李老师']}    ],    // ? 函数 function    // "安徽省: : ( 340000 )"    // aaaa : 'hello world',    postCode: function(){        const data = Object.entries(this['obj1']).shift()        return `${data[1]} : ( ${data[0]} )`    },    // ? 生成日期    'date1': Mock.mock('@datetime'),}const data = Mock.mock(opts)// 输出结果console.log(JSON.stringify(data, null, 4))// JSON.stringify():将js对象序列化为json字符串// const obj = {//     id: 1,//     username: 'admin',// }// 对象转数组// const o = Object.entries(obj)// console.log(o)// console.log(obj);// console.log(JSON.stringify(obj));// console.log(JSON.stringify(obj,null,4));

2. 数据占位符定义

// ? 数据占位符定义const Mock = require('mockjs')const opts = {    'username': '@cname()',    // ? 布尔值    bool:'@boolean(1,9,true)',    // ? 整数    num1 : '@integer()',    num2 : '@integer(0,1)',    num3 : '@integer(0)',    num4 : '@integer(18,60)',    // ? 浮点数 float    float1 : '@float()',    float2 : '@float(0)',    float3 : '@float(10,100,3)',    float4 : '@float(10,100,1,3)',    // ? 字符串 string    str1 : '@string()',    str2 : '@string(6)',    str3 : '@string(8,12)',    str4 : '@string(`lower`,5)',    str5 : '@string(`upper`,5)',    str6 : '@string(`number`,6)',    str7 : '@string(`symbol`,5)',    str8 : '@string(`abcdefghigklmnokqrstuvwxyzABCDEFGHIGKLMNOKPRSTUVWXYZ0123456789`,8)',    str9 : '@string(`abcdefghigklmnokqrstuvwxyzABCDEFGHIGKLMNOKPRSTUVWXYZ0123456789`,8,12)',    // ? 范围 range    range1 : '@range(5)',    range2 : '@range(1,11)',    range3 : '@range(1,11,2)',    // ? 日期 date    date1 : '@date("yyyy-MM-dd")',    date2 : '@date("yyyy-MM-dd HH:mm:ss")',    date3 : '@date("yy-M-d H:m:s")',    date4 : '@date("yyyy年MM月dd日")',    // ? 时间 ? time    time1 : '@time("HH:mm:ss")',    // ? 时间快捷方法    // @now(),@year(),@month,@day,@hour,@minute,@second    currTime1 : '@now()',    currTime2 : '@now(\'year\')',    currTime3 : `@now('day')`,    currTime4 : `@now('day','y年M月d日')`,    // ? 生成图片占位符    img1 : `@image()`,    img2 : `@image('100x100')`,    img3 : `@image('100x100','#ff0000','#fff','php.cn')`,    img3 : `@image('100x100','#ff0000','#fff','png','php.cn')`,    // ? 生成随机颜色    randColor1 : `@color`,    randColor2 : `@hex()`,    randColor3 : `@rgb()`,    randColor34 : `@rgba()`,    // ? 生成文章段落    article1 : `@paragraph()`,    article2 : `@cparagraph(3)`,    article3 : `@cparagraph(10,20)`,    // ? 生成指定长度的句子    sentence1 : `@csentence(10)`,    sentence2 : `@csentence(10,20)`,    // ? 生成title标题    title1 : `@ctitle(10)`,    title2 : `@ctitle(10,20)`,    // ? 随机生成一个中文    chinese1 : `@cword()`,    chinese2 : `@cword(10)`,    chinese3 : `@cword(10,20)`,    chinese4 : `@cword('鼠牛虎兔龙蛇马羊猴鸡狗猪',1)`,    //? 生成姓名    name1 : `@cname()`,    name2 : `@cname(10)`,    name3 : `@cname(10,20)`,    // ? 生成URL    url1 : `@url()`,    url2 : `@domain(10)`,    url3 : `@protocol()`,    url4 : `@url('http://www.baidu.com')`,    // ? 生成邮箱 email    email1 : `@email()`,    email2 : `@email(10)`,    email3 : `@email(10,20)`,    email4 : `@email('hzdkv@example.com')`,    //? 生成手机号    phone1 : `@phone()`,    // ? 生成大区    district1 : `@city()`,    district1 : `@city(true)`,    district2 : `@region()`,    district3 : `@city(10,20)`,    //? 生成省份    province1 : `@province()`,    province2 : `@province(10)`,    // ? 序列号    serial1 : `@guid()`,    // ? id    id1 : `@id()`,    id2 : `@id(5)`,    // ? 打乱    shuffle1 : `@shuffle(['手机','电脑','耳机'])`,    // ? 随机取一个    pick : `@pick(['手机','电脑','耳机'])`,}const data = Mock.mock(opts)console.log(JSON.stringify(data,null,4))

3.随机生成5个用户

// 随机生成5个用户// ? 数据占位符定义const Mock = require('mockjs')const user = {    'id|+1': 1,    'username': '@cname()',    'age|18-60': 1,    sex: `@pick(['男','女'])`,    email: '@email',}const opts = {    'user|10': [user],}const data = Mock.mock(opts)console.log(JSON.stringify(data, null, 4))

4.随机生成5个用户的users.json文件

    [        {            "id": 1,            "username": "郑刚",            "age": 34,            "sex": "女",            "email": "j.bpgmfs@vhgziogkq.cx"        },        {            "id": 2,            "username": "谭秀兰",            "age": 20,            "sex": "男",            "email": "c.sxzs@cwjafbqsrk.dm"        },        {            "id": 3,            "username": "江明",            "age": 55,            "sex": "男",            "email": "u.ptbgxtd@ojcnyic.pg"        },        {            "id": 4,            "username": "朱刚",            "age": 18,            "sex": "男",            "email": "s.yqxh@vstiarkq.so"        },        {            "id": 5,            "username": "段静",            "age": 31,            "sex": "男",            "email": "v.ztkdpjxv@ashifq.af"        },        {            "id": 6,            "username": "刘秀兰",            "age": 29,            "sex": "男",            "email": "x.iqdnwqkoz@dfehcsl.ch"        },        {            "id": 7,            "username": "叶丽",            "age": 54,            "sex": "女",            "email": "m.nidpywn@ldhrqbkbf.coop"        },        {            "id": 8,            "username": "董涛",            "age": 59,            "sex": "女",            "email": "e.tzssagd@wlqq.gr"        },        {            "id": 9,            "username": "袁洋",            "age": 21,            "sex": "男",            "email": "f.adzswvgbta@ihqmatspm.hu"        },        {            "id": 10,            "username": "贾洋",            "age": 32,            "sex": "男",            "email": "g.wccfkac@itchys.bg"        }    ]

5.请求JSON接口数据

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>请求JSON接口数据</title></head><body>    <!-- <button onclick="getData()">请求JSON接口数据</button> -->    <table>        <caption>            用户信息表        </caption>        <thead>            <tr>                <th>TD</th>                <th>姓名</th>                <th>年龄</th>                <th>性别</th>                <th>邮箱</th>            </tr>        </thead>        <tbody>        </tbody>    </table>    <script>        async function getData() {            const response = await fetch('users.json')            const users = await response.json()            console.log(users)            const tbody = document.querySelector('tbody')            users.forEach((user) => {                const data = `                    <tr>                        <td>${user.id}</td>                        <td>${user.username}</td>                        <td>${user.age}</td>                        <td>${user.sex}</td>                        <td>${user.email}</td>                    </tr>                 `                 tbody.insertAdjacentHTML('beforeend',data)            })        }        window.onload = getData();    </script></body></html>