Mock.js 基本用法

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 种生成规则，具体如表说明：

生成规则	说明	示例
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	//同上	‘id | 1-10.5’
count.dmin-dmax	//同上	‘id | 5.1-10’
+step	每次进行累加	‘id | +1’ : 1

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

生成规则	说明	示例
布尔值	生成布尔值，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	获取一次数组	‘arr | 2’ : arr
数组count	重复count次组成新数组	‘arr | 2’ : arr
数组+1	累加	‘arr | +1’ : arr
数组min-max	重复 min-max 次组成新数组	‘arr | 1-2’ : arr

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

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

应用

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 提供的完整方法（占位符）如下：

Type	Method
Basic	boolean, natural, integer, float, character, string, range, date, time, datetime, now
Image	image, dataImage
Color	color
Text	paragraph, sentence, word, title, cparagraph, csentence, cword, ctitle
Name	first, last, name, cfirst, clast, cname
Web	url, domain, email, ip, tld
Address	area, region
Helper	capitalize, upper, lower, pick, shuffle
Miscellaneous	guid, id

应用

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>