在以前的文檔中，我們構建了vue項目的整體架構，詳見vue入門：vue項目架構設計起步，現在我們主要對其中的mock server 進行完善。
一、概述
前后端分離的項目優點之一就是可以前后端并行開發，互不影響。那么在后端接口沒有完成之前，我們怎么進行前端項目的測試呢，這就需要我們自己構建一個前端測試服務，自己模擬假數據，以便于我們的前端開發工作。
這里我主要是應用mockjs做的mock server，并在vue2.0項目中進行使用。
mockjs可用來生成隨機數據，并攔截 Ajax 請求，返回模擬的響應數據。
mockjs數據類型豐富，支持多種數據類型，如文本、數字、布爾值、日期、郵箱、鏈接、圖片、顏色等。
mockjs增加了前端單元測試的真實性，用法簡單。
mockjs的功能強大，語法也很多，具體可以查看mockjs官方文檔
二、使用
1、在vue項目中安裝依賴
npm install mockjs --save-dev
2、建立項目文件結構
根目錄下建立mock文件夾，然后分別構建util.js 、index.js 、json文件(以index.json為例)
3、util.js文件，主要是用來進行json數據讀取方法的封裝。內容如下：
// 引入外部資源
const fs = require('fs')
const path = require('path')
module.exports = {
// 用于被index.js進行調用
getJsonFile (filePath) {
// 讀取指定的json文件
const json = fs.readFileSync(path.resolve(__dirname, filePath), 'utf-8')
// 解析并返回
console.log(json)
return JSON.parse(json)
}
}
4、index.js文件，主要是用來定義各個接口方法。內容如下：
const Mock = require('mockjs')
const util = require('./util')
module.exports = function(app) {
// 監聽請求
app.get('/api/index', (rep, res) => {
// 響應時，返回 mock data的json數據
const articleList = util.getJsonFile('./index.json')
// 將json傳入 Mock.mock 方法中，生成的數據返回給瀏覽器
res.json(Mock.mock(articleList))
})
}
5、index.json文件，主要是用來構建自己的模擬數據。如：
{
"ret":true,
"data|1-10":[{
"userid": "@id()
...)
)
)
