# 1.什么是Mock

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

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

# 2.Mock优点

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

# 3.Mock的使用

```javascript
npm install mockjs
const Mock = require("mockjs");
```

# 4.Mock语法规范

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

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

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

## 4.2数据模板定义规范

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

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

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

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

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

# 5.Mock在Vue中使用

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

```javascript
const Mock = require("mockjs");
const data = {
  id: "@guid",
  name: "@cname",
};
Mock.mock("/api/test", "post", data);
module.exports = Mock;
```

2. 在main.js中导入

```javascript
require("./mock/index")
```

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

```javascript
axios.post("/api/test").then(res=>{
    console.log(res);
})
```

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

1. 新建.env.development，定义环境变量
```javascript
MOCK=true
```
2. 定义接口路由前，判断当前MOCK环境变量是否为true
```javascript
process.env.MOCK &&  require("./mock/index")
```