## Mock.js的简单使用
### 简述
> Mock.js 是一款 ==模拟数据生成器==，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。
### 功能
1. 根据数据模板生成模拟数据。
2. 模拟 Ajax 请求，生成并返回模拟数据。
3. 基于 HTML 模板生成模拟数据。
### 使用场景
1. 开发期间前端非常依赖后端的接口，总会苦苦等待后端接口出来才能继续开发。
2. 开发纯前端并具备CURD功能的demo项目。
3. ...
### 好处
1. 只要前后端约定好数据结构，前端便可不受后端开发进度影响。
2. 可拦截ajax请求，模拟返回数据，后期无须再修改ajax请求参数。
3. 配置简单，拿来即用。
4. ...
---
## Vue项目中使用
### 安装
```javascript
npm install --save-dev mockjs
```
### 引入
> 为了方便后期维护，建议将Mock.js单独配置
```javascript
// main.js
... 省略Vue的引用
import './mock/mock.js'
```
### 配置
#### 方式一：直接使用
```javascript
// helloWorld.vue
import Mock from 'mockjs'
...
let data = Mock.mock({
'list|1-10': [{
'id|+1': 1
}]
})
console.log(JSON.stringify(data))
```
#### 方式二：拦截ajax请求
> 文件路径: /src/mock/mock.js
```javascript
// mock.js
// 引入mockjs
import Mock from 'mockjs'
//延时200-600毫秒请求到数据
Mock.setup({
// timeout: '300', // 延时300ms
timeout: '200-600'
})
// 配置请求路径
const url = {
tableDataOne: 'mock/mode1/tableDataOne'
}
// 配置请求拦截
Mock.mock(url.tableDataOne, {
"data": {
"date": "@datetime", // 随机生成日期时间
"score|1-800": 1, // 随机生成1-800的数字
"rank|1-100": 1, // 随机生成1-100的数字
"stars|1-5": "♥", // 随机生成1-5的♥
"name": "@cname" // 随机生成中文名字
}
})
// 拦截URL可以使用正则
Mock.mock(/\/mock\/mode1/, { ... })
```
```javascript
/* Mock获取请求参数 */
// GET url传参，必须使用正则，否则无法匹配
// axios.get(`/mock/mode1/get?name=123`)
Mock.mock(/\/mock\/mode1\/get/, option => {
console.log(option) // { "url": "/mock/mode1/get?name=123", "type": "GET", "body": null }
...
})
// POST body传参
// axios.post('/mock/model/post', { name: 11 })
Mock.mock(/\/mock\/mode1\/post/, option => {
console.log(option) // { "url": "/mock/mode1/post", "type": "POST", "body": "{name: 11}" }
// 这里返回模拟数据时需要返回Mock对象，直接返回会原封不动输出，不会触发Mock语法
return Mock.mock({
msg: 'successful',
outData: {
"name": "@cname" // 随机生成中文名字
}
})
}
```
### 常用方法
> Mock.mock()
```javascript
/*
* @param template 数据模板
* @param rurl 匹配请求的URL，可选
* @param rtype 请求的类型，一般写get/post，可选
* @param function 拦截后触发的回调函数，option可获取请求参数，可选
*/
Mock.mock(template)
Mock.mock(rurl, function(option) || template)
Mock.mock(rurl, rtype, function(option) || template)
```
### 语法规范
> 网上很多，很详细，我就不重复赘述了
[Mock.js官方文档](http://mockjs.com/0.1/#%E8%AF%AD%E6%B3%95%E8%A7%84%E8%8C%83)
[mock.js语法规范 | 清汤饺子-](https://www.jianshu.com/p/4579f40e6108)