# 1.什么是Mock

Mock: 一种模拟后端接口的解决方案，能让我们提前调用模拟接口，完成前端开发

[官网地址](http://mockjs.com/)

# 2.Mock优点

![image-20210819095725847](../../照片/image-20210819095725847.png)

# 3.Mock的使用

```
npm install mockjs
var Mock = require('mockjs')
var data = Mock.mock({....})
```

# 4.Mock语法规范

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

1. 数据模板定义规范（Data Template Definition，DTD）
	数据模板中的每个属性由 3 部分构成：属性名(name)、生成规则(rule)、属性值(value)：
```
'name|rule': valu
```

2. 数据占位符定义规范（Data Placeholder Definition，DPD）
	占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中
```
@占位符
@占位符(参数 [, 参数])
```

## 4.2数据模板定义规范

### 4.2.1属性值是字符串 String
```
1. 'name|min-max': string
通过重复 string 生成一个字符串，重复次数大于等于 min，小于等于 max。
2. 'name|count': string
通过重复 string 生成一个字符串，重复次数等于 count
```

### 4.2.2属性值是数字 Numbe
```
1. 'name|min-max': number
生成一个大于等于 min、小于等于 max 的整数，属性值 number 只是用来确定类型
```

### 4.2.3其他类型
```
@id() : 得到随机的id
@cname(): 随机生成中文名字
@date('yyyy-MM-dd'): 随机生成日期
@paragraph(): 描述
@email(): 邮箱地址
```

## 4.3Mock.js基本代码格式

```
Mock.mock({
id: "@id()",//得到随机的id,对象
username: "@cname()",//随机生成中文名字
date: "@date()",//随机生成日期
description: "@paragraph()",//描述
email: "@email()", //email
'age|18-38': 0
})
```

# 5.Mock在Vue中使用

步骤：
1. 定义接口路由，在接口中并返回mock模拟的数据

```
module.exports = function (app) { app.use('/api/userinfo', (req, res) => { res.json(obj) })
```

2. 在vue.config.js中配置devServer，在before属性中引入接口路由函数

```
module.exports = {
	devServer: {
		before: require('./mock/index.js')//引入mock/index.js
	}
}
```

3. 使用axios调用该接口，获取数据



# 6.如何控制Mock接口的开关？

1. 新建.env.development，定义环境变量
```
MOCK=true
```
2. 定义接口路由前，判断当前MOCK环境变量是否为true
```
module.exports = function (app) {
	if (process.env.MOCK == 'true') {
		app.use('/api/userinfo', (req, res) => {
		res.json(obj)
	})
}
```