mock.js

课程目标

1、掌握mockjs的使用

背景
当前后端分离开发的时候，如果前端一直要等后端的数据，那么就会比较浪费时间，所以聪明的前
端人员就研发出了mock.Js，出了使用它意外，还可以使用easymock（在线）

一、 Mock.js入门

1． 什么是mock.js?

Mock.js （官网http://mockjs.com/）是一款模拟数据生成器，旨在帮助前端攻城师独立
于后端进行开发，帮助编写单元测试。提供了以下模拟功能：
1、模拟数据
2、截ajax请求，返回需要的数据
Mock.js具有以下特点：
前后端分离,让前端攻城狮独立于后端进行开发。
增加单元测试的真实性
通过随机数据，模拟各种场景。
开发无侵入
不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。
用法简单
符合直觉的接口
数据类型丰富
支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
方便扩展
支持支持扩展更多数据类型，支持自定义函数和正则。
在进行前后端分离式的开发中，前端负责制作页面和显示数据，后端负责提供数据，前端通过后端
提供的RESTFul规范的接口来获取 JSON 格式的数据：

对于前端开发人员来说，必须要从服务器获取数据，所以就只能等待后端开发好接口之后，前端才
可以获取数据，这会影响前端开发的效果。
聪明的前端开发人员就会想：如果前端可以自己模拟出数据，那么在开发时就不需要服务器提供的
数据了。于是就出现了mockjs

2． Mock.js安装

 

         npm install mockjs

3． Mock.js入门案例

3.1． 模拟数据

需求：模拟一个用户列表，用户两个字段组件：ID、姓名
显示效果如下：

{
"list": [
{
"id": 1,
"name": "测试"
},
{
"id": 1,
"name": "测试"
},
{
"id": 1,
"name": "测试"
},
{
"id": 1,
"name": "测试"
},
{
"id": 1,
"name": "测试"
}
]
}

Mock模拟代码如下：

<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
</div>
</template>
<script>
var Mock = require('mockjs')
var data = Mock.mock({
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
'list|1-10': [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
'id|+1': 1,
'name':'测试'
}]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))
</script>

测试结果：

 

Mock.js模拟数据成功。

二、 Mock.js的语法规范

Mock.js 的语法规范包括两部分：
1.数据模板定义规范（Data Template Definition，DTD）
2.数据占位符定义规范（Data Placeholder Definition，DPD）
1． 数据模板定义规范
数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值

// 属性名 name
// 生成规则 rule
// 属性值 value
'name|rule': value
属性名 和 生成规则 之间用竖线 | 分隔。
生成规则 是可选的。
生成规则 有 7 种格式：

'name|min-max': value
'name|count': value
'name|min-max.dmin-dmax': value
'name|min-max.dcount': value
'name|count.dmin-dmax': value
'name|count.dcount': value
'name|+step': value
属性值 中可以含有 @占位符。
属性值 还指定了最终值的初始值和类型
例如：

var data = Mock.mock({
//list是一个数组，包含5个元素
'list|5':[
{
'id':1,
'name':'测试'
}
]
})

可见： list 是属性名 中间使用|分隔，数字5是生成规则（表示生成5条数据），后面是json数据。
生成规则的含义需要依赖属性值的类型才能确定。因此我们需要根据属性的值类型来学习Mock.js
的模板语法规范

1.1． 属性值是字符串

1）'name|count': string
通过重复 string 生成一个字符串，重复次数等于 count

<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
</div>
</template>
<script>
var Mock = require('mockjs')
var data = Mock.mock({
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
'list|1-10': [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
'id|+1': 1,
'name':'@string(3,6)',
'phone|11':'1'
}]
})
// 输出结果
console.log(JSON.stringify(data, null, 2))
</script>

浏览器控制台结果：

2）'name|min-max': string
通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max

var data = Mock.mock({
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
'list|1-10': [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
'id|+1': 1,
'name':'@string(3,6)',
'phone|3-11':'1'
}]
}

)

显示结果：

可以发现：name属性的值有长，有短，说明随机重复设置成功。

1.2． 属性值是数字

1）'name|+1': number
属性值自动加 1，初始值为 number

<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
</div>
</template>
<script>
var Mock = require('mockjs')
var data = Mock.mock({
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
'list|1-10': [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
'id|+1': 1,
'name':'@string(3,6)',
'phone|3-11':'1',
'age|+1':1
}]
})
// 输出结果
console.log(JSON.stringify(data, null, 2))
</script>

浏览器显示结果：

可以发现：此时id的值是自动增长的。每次循环加1.
2）'name|min-max': number
生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型
示例如下：
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
</div>
</template>
<script>
var Mock = require('mockjs')
var data = Mock.mock({
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
'list|1-10': [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
'id|+1': 1,
'name':'@string(3,6)',
'phone|3-11':'1',
'age|+1':1,
'point|100-200':0
}]
})
// 输出结果
console.log(JSON.stringify(data, null, 2))
</script>
浏览器效果如下所示：

3）'name|min-max.dcount': value
生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分为dcount位
示例如下：

<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
</div>
</template>
<script>
var Mock = require('mockjs')
var data = Mock.mock({
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
'list|1-10': [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
'id|+1': 1,
'name':'@string(3,6)',
'phone|3-11':'1',
'age|+1':1,
'point|100-200':0,
'money|3000-8000.2':0
}]
})
// 输出结果
console.log(JSON.stringify(data, null, 2))
</script>

浏览器显示如下图所示：

 

4）'name|min-max.dmin-dmax': number
生成一个浮点数，整数部分大于等于 min、小于等于 max，小数部分保留 dmin 到dmax 位。
示例如下：

<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
</div>
</template>
<script>
var Mock = require('mockjs')
var data = Mock.mock({
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
'list|1-10': [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
'id|+1': 1,
'name':'@string(3,6)',
'phone|3-11':'1',
'age|+1':1,
'point|100-200':0,
'money|3000-8000.2-5':0
}]
})
// 输出结果
console.log(JSON.stringify(data, null, 2))
</script>

浏览器控制台显示效果如下所示：

1.3． 属性是布尔值

1）'name|1': Boolean
随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
</div>
</template>
<script>
var Mock = require('mockjs')
var data = Mock.mock({
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
'list|1-10': [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
'id|+1': 1,
'name':'@string(3,6)',
'phone|3-11':'1',
'age|+1':1,
'point|100-200':0,
'money|3000-8000.2-5':0,
'state|1':true,
}]
})
// 输出结果
console.log(JSON.stringify(data, null, 2))
</script>

1.4． 属性值是Object

1）'name|count': object
从属性值 object 中随机选取 count 个属性。

<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
</div>
</template>
<script>
var Mock = require('mockjs')
var data = Mock.mock({
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
'list|1-10': [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
'id|+1': 1,
'name':'@string(3,6)',
'phone|3-11':'1',
'age|+1':1,
'point|100-200':0,
'money|3000-8000.2-5':0,
'state|1-3':1,
'detail|2':{'id':1,'date':'2005-01-01','content':'记录'}
}]
})
// 输出结果
console.log(JSON.stringify(data, null, 2))
</script>

2）'name|min-max': object
从属性值 object 中随机选取 min 到 max 个属性
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
</div>
</template>

<script>
var Mock = require('mockjs')
var data = Mock.mock({
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
'list|1-10': [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
'id|+1': 1,
'name':'@string(3,6)',
'phone|3-11':'1',
'age|+1':1,
'point|100-200':0,
'money|3000-8000.2-5':0,
'state|1-3':1,
'detail|2-3':{'id':1,'date':'2005-01-01','content':'记录'}
}]
})
// 输出结果
console.log(JSON.stringify(data, null, 2))
</script>

 

1.5． 属性值是数组

1）'name|count': array（参考入门测试案例）
通过重复属性值 array 生成一个新数组，重复次数为 count
2）'name|min-max': array
通过重复属性值 array 生成一个新数组，重复次数大于等于 min，小于等于 max。

 

2． 数据占位符定义规范

Mock.Random 是一个工具类，用于生成各种随机数据。Mock.Random 的方法在数据模板中称为
『占位符』.
书写格式为: @占位符(参数 [, 参数])
内置方法列表：

使用时只需要把值设置成 @方法名【内置列表名】 即可，比如，生成一个随机的 Email：

2.1． 基本方法

可以生成随机的基本数据类型
1，string 字符串
2，integer 整数
3，date 日期
示例如下所示：
<template>
<div class="about">
<img alt="Vue logo" src="../assets/logo.png">
</div>
</template>
<script>
var Mock = require('mockjs')
var data = Mock.mock({
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
'list|1-10': [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
'id|+1':1,
'name':'@string',
'point':'@integer',
'birthday':'@date'
}]
})
// 输出结果
console.log(JSON.stringify(data, null, 2))

</script>

 

2.2． 图像方法

内置方法image 随机生成图片地址

<template>
<div class="about">
<img alt="Vue logo" src="../assets/logo.png">
</div>
</template>
<script>
var Mock = require('mockjs')
var data = Mock.mock({
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
'list|1-10': [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
'id|+1':1,
'name':'@string',
'point':'@integer',
'birthday':'@date',
'head':'@image'
}]
})
// 输出结果
console.log(JSON.stringify(data, null, 2))
</script>

浏览器生成结果如下所示：

图片随机地址已经生成。
图片设置的其他用法：
@image()
@image( size )
@image( size, background )
@image( size, background, text )
@image( size, background, foreground, text )
@image( size, background, foreground, format, text )
size：尺寸，格式为：'宽x高'
background：背景色，格式为：#FFFFFF
text：图片上显示的文本
foreground：广本颜色
format：图片格式，可选值包括：png、gif、jpg。
@image()
// => "http://dummyimage.com/125x125"
@image('200x100')
// => "http://dummyimage.com/200x100"
@image('200x100', '#fb0a2a')
// => "http://dummyimage.com/200x100/fb0a2a"
@image('200x100', '#02adea', 'Hello')
// => "http://dummyimage.com/200x100/02adea&text=Hello"
@image('200x100', '#00405d', '#FFF', 'Mock.js')
// => "http://dummyimage.com/200x100/00405d/FFF&text=Mock.js"
@image('200x100', '#ffcc33', '#FFF', 'png', '!')
// => "http://dummyimage.com/200x100/ffcc33/FFF.png&text=!"

2.3． 文本方法

@title: 标题
@cword(100) :文本内容 参数为字数
代码实例如下所示：
<template>
<div class="about">
<img alt="Vue logo" src="../assets/logo.png">
</div>
</template>
<script>
var Mock = require('mockjs')
var data = Mock.mock({


// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
'list|1-10': [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
'id|+1':1,
'name':'@string',
'point':'@integer',
'birthday':'@date',
'head':'@image(50*50)',
'title':"@title",
'content':"@cword(20)"
}]
})
// 输出结果
console.log(JSON.stringify(data, null, 2))
</script>

显示结果：

可以发现：

@title： 生成随机的英文标题
@cword(字数)：生成随机的中文标题
3）其他的文本方法
单个字符：@character
英文单词
@word
@word(length)
@word(min,max)
英文句子
@sentence
@sentence(len)
@sentence(min,max)
中文汉字
@cword
@cword(len)
@cword(min,max)
中文句子
@csentence
@csentence(len)
@csentence(min,max)
中文段落
@cparagraph
@cparagraph(len)
@cparagraph(min,max)
中文标题
@ctitle
@ctitle(len)
@ctitle(min,max)

2.4． 名称方法

1）英文名生成
@first名
@last姓
@name姓名
@name(middle):middle：是否生成中间名字
@name() // => "Larry Wilson"
@name(true) //true表示生成 // => "Helen Carol Martinez"
2）中文名
@cfirst姓
@clast名
@cname
@cname()// => "袁军"
如果需要生成中文名称，需要在前面加上c字母做一标识。
@cname :中文名称
@cfirst:中文姓氏
@last:英文姓氏
使用实例如下所示：
<template>
<div class="about">
<img alt="Vue logo" src="../assets/logo.png">
</div>
</template>
<script>

2.5． 网络方法

可以生成url ip email等网络相关信息

<template>
<div class="about">
<img alt="Vue logo" src="../assets/logo.png">
</div>
</template>
<script>
var Mock = require('mockjs')
var data = Mock.mock({
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
'list|1-10': [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
'id|+1':1,
'name':'@cname',
'point':'@integer',
'birthday':'@date',
'head':'@image(50*50)',
'title':"@title",

'content':"@cword(20)",
'url':"@url",
//生成ip
'ip':"@ip",
//生成邮箱
'email':"@email"
}]
})
// 输出结果
console.log(JSON.stringify(data, null, 2))
</script>

生成结果如下所示：

2.6． 地址方法

1）生成中国大区：@region 区域 （华北……）
2）生成省份：@province
3）生成城市：
@city
@city(prefix) //prefix：布尔值，是否生成所属的省
@city() // => "唐山市"
@city(true) // => "福建省 漳州市"
4）生成县：
@county
@county(prefix) //prefix：布尔值，是否生成所属省、市
@county() // => "上杭县"
@county(true)// => "甘肃省 白银市 会宁县"
5）生成邮政编码: @zip
'content':"@cword(20)",
'url':"@url",
//生成ip
'ip':"@ip",
//生成邮箱
'email':"@email"
}]
})
// 输出结果
console.log(JSON.stringify(data, null, 2))
</script>
6）生成身份证号 @id
@id()// => "420000200710091854"
7）生成GUID字符串 @guid
@guid()// => "662C63B4-FD43-66F4-3328-C54E3FF0D56E"

生成实例如下所示：

<template>
<div class="about">
<img alt="Vue logo" src="../assets/logo.png">
</div>
</template>
<script>
var Mock = require('mockjs')
var data = Mock.mock({
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
'list|1-10': [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
'id|+1':1,
'name':'@cname',
'point':'@integer',
'birthday':'@date',
'head':'@image(50*50)',
'title':"@title",
'content':"@cword(20)",
'url':"@url",
'ip':"@ip",
'email':"@email",
//生成区域
'erea':'@region',
//生成省，市
'city':'@city(true)',
//县
'contry':'@county(true)',
'id':'@id',
'zip':'@zip',
'guid':'@guid'
}]
})
// 输出结果
console.log(JSON.stringify(data, null, 2))
</script>

浏览器输出结果：