官方網址：http://mockjs.com/
mockjs是用來模擬產生一些虛擬的數據，可以讓前端在後端接口還沒有開發出來時獨立開發。我們可以使用真實的url，mockjs可以攔截ajax請求，返回設定好的數據。
1.使用方式
這裏主要討論在vue項目中，使用axios發送ajax請求，mock.js模擬數據的流程。
vue-cli搭建項目後，在項目中安裝axios和mock.js
npm install -S axios
npm install -D mockjs
注意：如果安裝過程中出現類似如下圖所示的情況，是因爲fsevents是Mac OS系統的，在Windows或Linux下使用了所以會有警告，忽略即可。
在項目中新建mock.js文件夾，來設置要產生的模擬數據的格式
設想這樣一個場景，頁面在打開時要從數據庫獲取一個新聞列表，現在我們要模擬這個列表，新聞對象包括新聞標題、新聞內容和創建時間三項：
// mock.js
// 引入mockjs
const Mock = require('mockjs')
// 獲取 mock.Random 對象
const Random = Mock.Random
// mock新聞數據，包括新聞標題title、內容content、創建時間createdTime
const produceNewsData = function () {
let newsList = []
for (let i = 0; i < 20; i++) {
let newNewsObject = {
title: Random.ctitle(), // Random.ctitle( min, max ) 隨機產生一箇中文標題，長度默認在3-7之間
content: Random.cparagraph(), // Random.cparagraph(min, max) 隨機生成一箇中文段落，段落裏的句子個數默認3-7個
createdTime: Random.date() // Random.date()指示生成的日期字符串的格式,默認爲yyyy-MM-dd；
}
newsList.push(newNewsObject)
}
return newsList
}
// 請求該url，就可以返回newsList
Mock.mock('/mock/news', produceNewsData) // 後面講這個api的使用細節
在main.js中引入該mock.js文件，表明我們使用這裏面產生的數據：
// main.js
import Vue from 'vue'
import App from './App'
import router from './router'
require(./mock.js)
在APP.vue裏我們來發送get請求獲取數據：
// App.vue
<template>
<div id="#app"></div>
</template>
<script>
import axios from 'axios' // 引入axios
export default {
// 掛載的時候獲取新聞列表
mounted() {
axios.get('/mock/news').then(res => { // url即在mock.js中定義的
console.log(res.data) // 打印一下響應數據
})
}
}
</script>
運行項目打開控制檯可以看到，我們拿到了模擬的數據：
2.Mock.mock()
Mock.mock( rurl, rtype, template|function( options ) )
rurl
可選。
表示需要攔截的 URL，可以是 URL 字符串或 URL 正則。例如 '/domian/list.json'。
rtype
可選。
表示需要攔截的 Ajax 請求類型。例如 GET、POST、PUT、DELETE 等。
template
可選。
表示數據模板，可以是對象或字符串。
數據模板中的每個屬性由 3 部分構成：屬性名、生成規則、屬性值：
// 屬性名 name
// 生成規則 rule
// 屬性值 value
'name|rule': value
例如：'name|1-10':1 會產生一個1-10之間的整數，詳細規則參見官方文檔
function(options)
可選。
表示用於生成響應數據的函數。
options
指向本次請求的 Ajax 選項集，含有 url、type 和 body 三個屬性
3.增加數據
之前討論的都是產生好數據後供我們獲取，如果想測試增加數據的功能，mock.js也可以實現，對於 Mock.mock(url,function(ops)) ，ops參數就可以獲取到傳送的數據：
// App.vue
<template>
<div id="app">
<div>
<input type="text" v-model="title">
<button type="button" @click="submit">提交</button>
<button type="button" @click="getProjects">獲取</button>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
data () {
return {
title: ''
}
},
methods: {
submit () {
axios.post('/mock/addProject', { // 添加數據的接口,數據爲一個對象，有個title屬性
title: this.title
})
},
getProjects () {
axios.get('/mock/projects').then(res => { // 獲取數據
console.log(res.data)
})
}
}
}
</script>
我們在mock.js中模擬一個添加數據的接口，拿到數據後存到數組中：
// mock.js
// 添加信息
let projectList = []
Mock.mock('/mock/addProject', ops => { // 攔截ajax請求，調用函數
console.log(ops) // 先看一下這個ops是什麼
projectList.push(ops)
})
// 獲取信息
Mock.mock('/mock/projects', projectList)
在輸入框中輸入標題後，點擊提交，數據發送到/mock/addProject, mock.js攔截到請求後，調用function(ops)方法，打印看到ops是個對象，有3個屬性，url,type和body，而我們輸入的數據就在body屬性值裏，同時因爲axios默認發送的是json格式的數據，所以body裏面的數據是json串，更改function(ops)函數，將數據以js對象的形式存入數組中。當然實際開發中可以看後端的數據返回格式，選擇在前端進行json轉js的操作，這裏只是演示一下。
// mock.js
// 添加信息
let projectList = []
Mock.mock('/mock/addProject', ops => { // 攔截ajax請求，調用函數
// console.log(ops) // 先看一下這個ops是什麼
ops = JSON.parse(ops.body)
projectList.push(ops)
})
// 獲取信息
Mock.mock('/mock/projects', projectList)
更改後輸入標題，點擊提交，再點擊獲取，可以看到返回了我們提交的數據，並且是js對象的形式，拿到數據後就可以做進一步的操作了。
修改功能的代碼也是類似的。
4.刪除數據
刪除數據一般是把數據的id以get形式傳遞給後端，url形式爲: /xxx/xxx?id=value, 實際開發中後端可以很好的處理id值不同的url，我們只需要關心怎麼獲取到id，但是使用mock.js時，攔截的url我不知道怎麼寫成動態的. Mock.mock('/mock/delete') ,此時使用axios.get()時就會報錯：
所以還是改成了用post傳遞的方式。不知道是不是有什麼別的方法，可以使得刪除時使用get請求。