Mock.js的学习分享

Mock.js

写练手项目的时候常常会遇到一个问题,没有后台接口,获取数据总是很麻烦,我结合mock的学习视频和官方文档，来记录mock的学习历程，

1.Mock是啥

• Mock.js是模拟JSON数据的前端技术，为什么会产生它呢
• 对于前后端分离的项目，后端API迟迟没有上线
• 而前端没有json数据进行填充，自己写后端模拟又太繁重
• Mock.js就能解决这个问题，让前端工程师独立做自己！
• 它可以生成随机数据！

2.Mock安装

安装方式，我是在node下运行

• 安装node下的mock

  npm install mockjs
  

如果是在浏览器运行

<script src="http://mockjs.com/dist/mock.js"></script>

3.Mock初使用

const Mock = require("mockjs");

const data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个对象元素
    'list|1-10' : [{
         // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1':1
    }]
});
console.log(data);

我们发现每执行一次，data中的数据条数都不一样，是根据条件随机产生的

data的打印结果的数据格式不是JSON格式的：

需要转为JSON格式：

//JSON.stringfy(要转换的数据,是否需要转换,4字符缩进)
JSON.stringfy(data,null,4)

4.Mock语法规范

Mock.js 的语法规范包括两部分：

1. 数据模板定义规范（Data Template Definition，DTD）
2. 数据占位符定义规范（Data Placeholder Definition，DPD）

数据模板定义规范

数据模板由 3 部分构成：属性名、生成规则、属性值：
生成规则 是可选的。

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

生成规则有7种格式

我们以 min-max.dmin-dmax为例

const Mock = require("mockjs");

const data = Mock.mock({
    'list|1-10' : [{
    //表示生成1-10之间的浮点数，小数位是1~3位
        'id|1-10.1-3':1
    }]
});
console.log(data);
console.log(JSON.stringify(data,null,4));

输出结果如下：

以从对象中随机抽取属性 对象|count 为例

const obj = {
    gender:'男',
    age:18,
    name:'zs'
}
const data = Mock.mock({
    //随机生成1-5组数据
    'list|1-5':[{
        //随机生成1-3个属性
        'obj|1-3':obj
    }]
});

结果：

以数组|1 获取一次数组为例

const arr = ['a','b','c','d']
const data = Mock.mock({
//随机生成1-5组数据
    'list|1-5':[{
        //随机获取一次数组
        'arr|1':arr
    }]
});

数据定义占位符

占领属性的位置

const data = Mock.mock({
    'list|1-5':[{
        //cname city是mock内置的
        cname:'@cname',
        city :'@city'
    }]
});

随机占位符

例：

const Mock = require('mockjs');

console.log(Mock.mock('@id'));
console.log(Mock.mock('@image'));
console.log(Mock.mock('@color'));
console.log(Mock.mock('@Ctitle'));
console.log(Mock.mock('@url'));

结果

4.Mock拦截axios请求

axios.get('http://123.207.32.32:8000/home/multidata')
.then(res => {
    console.log(JSON.stringify(res.data,null,4));
})
//只要axios的请求地址和mock的相同，axios请求就被拦截到了，拿到的也是mock生成的数据
Mock.mock('http://123.207.32.32:8000/home/multidata',{
    'list|5-10':[
        {
        'id|+1':1,
        'name':'@cname',
        'gender':'@boolean',
        'age':'@integer'
        }
    ]
})

输出结果