这是我参与「第四届青训营 」笔记创作活动的第4天

一、Mock.js介绍

  Mock.js是一个模拟数据生成器，并且可以拦截Ajax请求。他是在后端接口还未开发出来，但前端项目需要一些假数据来实现某些功能的时候使用的。他可以根据数据模板生成模拟数据、模拟Ajax请求生成并返回模拟数据等功能。

二、Mock.js特点

1.前后端分离,让前端工程师独立于后端进行开发。
2.增加单元测试的真实性。
3.通过随机数据，模拟各种场景。
4.开发无侵入。
5.不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。
6.用法简单。
7.符合直觉的接口。
8.数据类型丰富。
9.支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。
10.方便扩展。
11.支持支持扩展更多数据类型，支持自定义函数和正则。
最大的特点就是方便前端代码自测，提高开发效率。

三、Mock.js的用法

1、使用vue-cli创建基本的vue项目

vue create xxx(项目名)

2、安装Mock.js

npm install mockjs --save-dev

3、在src目录下创建mock文件夹，并在该文件夹中创建index.js文件

let Mock = require('mockjs')      //引入mockjs
//这里可以使用解构赋值，拿到data(数组)，使用数组的方法实现增删
let data = Mock.mock({
    'list|20-60':[{//名字叫做list的数组，里面元素个数在20-60之间
    	name:'@cname()',//中文名字的占位符
    	id:'@id()',
    	address:'@city(true)'//括号内的true意思是开启省前缀
    }]
})

4、在main.js中引入

import './mock/index.js'

四、Mock.js语法

Mock.js的语法规范包括两部分：
1.数据模板定义规范（Data Template Definition，DTD）;
例1：'name|min-max': string
Data Template:

Mock.mock({
  "string|1-10": "★"    //随机生成1-10个"★"
})

Result:

{
  "string": "★★★★"
}

例2：'name|+1': number：
Data Template:

Mock.mock({
  "number|+1": 202
})

Result:

{
  "number": 201
}

2.数据占位符定义规范（Data Placeholder Definition，DPD）;
例1：Random.url()
Data Template:

// Random.url()
Random.url()
Mock.mock('@url')
Mock.mock('@url()')

Result:

// Random.url()
"news://ymabimyp.gf/ocrkfnmxk"
"news://kih.sm/babgxvagv"
"telnet://qcsbeohle.sm/jlopy"

例2：Random.name( middle? )：
Data Template:

// Random.name()
Random.name()
Mock.mock('@name')
Mock.mock('@name()')

// Random.name( middle )
Random.name(true)
Mock.mock('@name(true)')

Result:

// Random.name()
"Richard Williams"
"Michael Walker"
"Sarah Harris"

// Random.name( middle )
"Barbara Barbara Miller"
"Ronald Patricia Taylor"

五、总结

  Mock.js的原理是拦截了所有的请求并代理到本地模拟数据，所以network中没有发出任何的请求,因为只是模拟数据进行测试，就不必频繁发请求给服务器造成压力。
  所有的mock数据都在@/src/mock目录下，它只会拦截@/src/mock/index.js文件中拦截的 url。移除只需要在@/src/main.js中移除import './mock'并且删除@/src/mock文件夹即可。