## Mock.js的簡單使用
### 簡述
> Mock.js 是一款 ==模擬數(shù)據(jù)生成器==妓灌，旨在幫助前端攻城師獨立于后端進行開發(fā)椅棺，幫助編寫單元測試固灵。
### 功能
1. 根據(jù)數(shù)據(jù)模板生成模擬數(shù)據(jù)定庵。
2. 模擬 Ajax 請求西篓，生成并返回模擬數(shù)據(jù)议谷。
3. 基于 HTML 模板生成模擬數(shù)據(jù)炉爆。
### 使用場景
1. 開發(fā)期間前端非常依賴后端的接口，總會苦苦等待后端接口出來才能繼續(xù)開發(fā)卧晓。
2. 開發(fā)純前端并具備CURD功能的demo項目芬首。
3. ...
### 好處
1. 只要前后端約定好數(shù)據(jù)結(jié)構(gòu)，前端便可不受后端開發(fā)進度影響逼裆。
2. 可攔截ajax請求郁稍，模擬返回數(shù)據(jù)，后期無須再修改ajax請求參數(shù)胜宇。
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毫秒請求到數(shù)據(jù)
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的數(shù)字
? ? "rank|1-100": 1, // 隨機生成1-100的數(shù)字
? ? "stars|1-5": "?", // 隨機生成1-5的?
? ? "name": "@cname" // 隨機生成中文名字
? }
})
// 攔截URL可以使用正則
Mock.mock(/\/mock\/mode1/, { ... })
```
```javascript
/* Mock獲取請求參數(shù) */
// 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}" }
? // 這里返回模擬數(shù)據(jù)時需要返回Mock對象仅财，直接返回會原封不動輸出狈究，不會觸發(fā)Mock語法
? return Mock.mock({
? ? msg: 'successful',
? ? outData: {
? ? ? "name": "@cname" // 隨機生成中文名字
? ? }
? })
}
```
### 常用方法
> Mock.mock()
```javascript
/*
* @param template 數(shù)據(jù)模板
* @param rurl 匹配請求的URL，可選
* @param rtype 請求的類型盏求，一般寫get/post抖锥，可選
* @param function 攔截后觸發(fā)的回調(diào)函數(shù)，option可獲取請求參數(shù)碎罚，可選
*/
Mock.mock(template)
Mock.mock(rurl, function(option) || template)
Mock.mock(rurl, rtype, function(option) || template)
```
### 語法規(guī)范
> 網(wǎng)上很多磅废，很詳細，我就不重復贅述了
[Mock.js官方文檔](http://mockjs.com/0.1/#%E8%AF%AD%E6%B3%95%E8%A7%84%E8%8C%83)
[mock.js語法規(guī)范 | 清湯餃子-簡書](http://www.reibang.com/p/4579f40e6108)
