Mock.js 使用教程

了解更多请访问http://mockjs.com/

一、为什么要使用Mock.js

对于前后端分离的项目，后端工程师的 API 数据迟迟没有上线，而前端工程师却没有 JSON 数据进行数据填充，自己写后端模拟又太繁重，这个时候，Mock.js 就能解决这个问题，让前端工程师更加独立做自己；

二、什么是Mock.js

• 生成随机数据，拦截 Ajax 请求。
• 通过随机数据，模拟各种场景；不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据；
• 支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等；
• 支持支持扩展更多数据类型，支持自定义函数和正则。
• 非常简单方便, 无侵入性, 基本覆盖常用的接口数据类型。

三、开始&安装

安装方式，提供两种常用的，一种在 node 下运行，另一种在浏览器下运行；

1、使用npm安装(不了解的可以先学习一下node.js)

npm install mockjs

应用

// 引入 mockjs
const Mock = require('mockjs')
const data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1
    }]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))

2、直接使用script标签引入

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

应用

<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>

四、使用方式&语法规范

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

1、数据模板定义规范

数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值

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

注意：

• 属性名 和 生成规则 之间用竖线 | 分隔。
• 生成规则 是可选的。
• 生成规则 有 7 种格式：

其中，字符串、数值有 7 种生成规则，具体如表说明：

除了以上几种规则格式，还有布尔值、对象和数组等规则：

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

应用

const Mock = require('mockjs')
const obj = {
    name : 'Mr.Lon',
    age : 18,
    gender : '男'
}
const arr = ['a','b','c','d']
const data = Mock.mock({
    'list|1-10' : [{
        // 'id|+1' : 1
        // 'id|1-10' : 1
        // 'number1|1-10.1-3': 1,
        // 'flag|1' : true
        // 'obj|1-3' : obj
        // 'arr|1-2' : arr
        // 'fn' : function(){
        //     return '这是一个函数';
        // }
        'reg' : /[a-z]/
    }]
})
console.log(data);
console.log(JSON.stringify(data,null,4))

2、数据占位符定义规范

• 占位符只是在属性值字符串中占个位置，并不出现在最终的属性值中。
• 通过 ‘@占位符’ 这种方式来随机产生各种不同的数据；

有两种方式可以输出这种随机占位符，具体如下：

const Mock = require('mockjs')
//第一种输入占位符的方式 
console.log(Mock.Random.cname()); 
//第二种输入占位符的方式 
console.log(Mock.mock('@cname'));

注意：

1. 用 @ 来标识其后的字符串是 占位符。
2. 占位符 引用的是 Mock.Random 中的方法。
3. 通过 Mock.Random.extend() 来扩展自定义占位符。
4. 占位符 也可以引用 数据模板 中的属性。
5. 占位符 会优先引用 数据模板 中的属性。
6. 占位符 支持 相对路径 和 绝对路径。

Mock.Random 是一个工具类，用于生成各种随机数据。

Mock.Random 的方法在数据模板中称为『占位符』，书写格式为 @占位符(参数 [, 参数]) 。

Mock.Random 提供的完整方法（占位符）如下：

应用

const Mock = require('mockjs')
//随机中文人名，不带 c 就是英文 
console.log(Mock.mock('@cname')); 
//随机 ID 
console.log(Mock.mock('@id')); 
//随机中文标题，不带 c 就是英文 
console.log(Mock.mock('@ctitle'));
//随机颜色，十六进制 
console.log(Mock.mock('@color')); 
//随机图片，给你一个图片地址 
console.log(Mock.mock('@image')); 
//随机 ip 地址 
console.log(Mock.mock('@ip')); 
//随机 url 地址 
console.log(Mock.mock('@url')); 
//随机字符串 
console.log(Mock.mock('@string')); 
//随机数值 
console.log(Mock.mock('@integer')); 
//随机日期 
console.log(Mock.mock('@datetime'));
const data = Mock.mock({
    'list|1-10' : [{
        cname : '@cname',
        city : '@city',
        full : '@cname -- @city'
    }]
})
console.log(data);
console.log(JSON.stringify(data, null, 4));

扩展

如果没有我们想要的数据格式进行填充，可以使用扩展功能自己扩展

const Mock = require('mockjs')
// 自行拓展占位符
Mock.Random.extend({
    game(){
        return this.pick([
            '英雄联盟',
            '穿越火线',
            'QQ飞车',
            '生化危机',
            '寂静岭',
            '逃生'
        ])
    }
})
console.log(Mock.mock('@game'))

3、mock拦截 axios

这个也是最终的需求功能，我们假设 axios 异步请求的数据尚未上线或不全；

我们可以通过 mock 请求拦截，随机生成填充的数据进行前端设计；

<script src="http://mockjs.com/dist/mock.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
//Mock拦截
Mock.mock('https://jsonplaceholder.typicode.com/posts/1',{
    'list|1-10' : [{
        'userId|1' : 1,
        'id|+1' : 1,
        'title' : '@ctitle',
        'body' : '@sentence'
    }]
});
// request请求 通用
axios.request({
    method : 'get',
    url : 'https://jsonplaceholder.typicode.com/posts/1'
}).then(res => console.log(res.data));
</script>