Mock_简单使用.js

一、技术说明为什么要使用这种技术？对于前后端分离项目，后端工程师的API上线速度不匹配前端工程师需要模拟数据接口，代替后端未上线的APIMock.js是一款模拟json数据的前端技术官网：mockjs.com二、安装测试两种安装方式，一种是node下运行，另一种是浏览器中运行如在node下运行，干燥node.js,官网：nodejs.org/zh-cn/;安装知乎，在webstorm或者vscod

JUST DO YOU LIKE

370人浏览 · 2020-07-08 09:41:35

JUST DO YOU LIKE · 2020-07-08 09:41:35 发布

一、技术说明

为什么要使用这种技术？
对于前后端分离项目，后端工程师的API上线速度不匹配
前端工程师需要模拟数据接口，代替后端未上线的API
Mock.js是一款模拟json数据的前端技术
官网：mockjs.com

二、安装测试

两种安装方式，一种是node下运行，另一种是浏览器中运行
如在node下运行，需要下载和安装node.js , node官网：nodejs.org/zh-cn/;
安装之后，在webstorm或者vscode测试node环境：node -v
创建Mock目录，在下面初始化package.json文件，命令：npm init -y
先安装node下的mock.js，命令：npm install mockjs
创建一个src，在下面创建01.js文件，然后用下面的官网实例代码练习吧：

// 引入mock.js,相当于src = "mock.js"
const Mock = require('mockjs')
const data = Mock.mock({
// list|1=10 为 list[0]-list[9]元素，默认从list[0] = 1开始，每个元素累加1，在这十个元素中随机
// 抽取元素渲染
    'list|1-10': [{
        'id|+1' : 1
    }]
});

console.log(data);

7. 如果是浏览器运行，代码如下：

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>01</title>
        <script src="http://mockjs.com/dist/mock.js"></script>
        <script>
            const data = Mock.mock({
                'list|1-10':[{
                    'id|+1':1
                }]
            });
            console.log(data);
            console.log(JSON.stringify(data,null,4));
        </script>
    </head>
    <body>
        
    </body>
</html>

三、mock语法规范

1. Mock.js的语法规范包括两个部分：数据模板定义规范和数据占位定义规范

2. 数据模板定义的规范包括3部分：属性名、生成规则和属性值；

' 属性名 | 生成规则 ' : 属性值 // ' name | rule ' : value

3. 其中，字符串、数值有 7 种生成规则，具体如下：

生成规则	说明	实例
min-max	生成min~max之间的字符串	'list \| 1-10'
count	生成count个字符串	'list \| 5'
min-max,dmin-dmax	生成min~max之间的浮点数，小数点位数在dmin~dmax之间	'id \| 1-10.1-3' : 1
count.dcount	生成count个字符串，小数点位数为dcount	'id \| 8.2' : 1
min-max.dcount	//同上
count.dmin-dmax	//同上
+step	每次的进行都会累加一个值	id \| + 1" : 1

还有布尔型，对象，数组等规则

生成规则	说明	实例
布尔值	生成bool值，1/2 概率 true	'flag \| 1' : true
布尔值 min-max	生成布尔值，概率为 min/(min + max)	'flag \| 1-10' : true
对象 count	从对象中随机抽取count个属性	'obj \| 2' : obj
对象 min - max	从对象中随机抽取min - max 属性	'obj \| 1 - 3' : obj
数组 1	获取 1次数组	'arr \| 1' : arr
数组count	重复count次组成新数组	'arr \| 2' : arr
数组 + 1	累加	'arr \| +1' : arr
数组 min - max	重复min - max 次组成新数组	'arr \| 1-2' : arr

5. 也支持函数和正则表达式：

生成规则	说明	实例
函数	支持函数	'fn \| 1' : function
正则	支持正则	'reg \| 1' : / [ a - z ] /

6. 数据定义的占位符@，比较好理解，占领属性值的位置；

const data5 = Mock.mock({

    'list|10' : [{

        cname : '@cname',

        city : '@city',

        full : '@cname - @city'

    }]

});

7. 随机占位符

（1） 通过 '@占位符' 这种方式来随机占位符，从而产生多样数据
（2） 有两种方式可以输出这种随机占位符，具体如下：
    //第一种输入占位符的方式
    console.log(Mock.Random.cname());
    //第二种输入占位符的方式
    console.log(Mock.mock("@cname));
    
    ps:如果在输出列表中，直接写 '@cname' 更加的方便快捷

8. 常用的占位符