在以前的文档中，我们构建了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()",
"username": "@cname()",
"date": "@date()",
"avatar": "@image('200x200','red','#fff','avatar')",
"description": "@paragraph()",
"ip": "@ip()",
"email": "@email()"
}]
}
6、 修改 webpack 配置。
在路径build/webpack.dev.conf.js文件中的devServer属性中新添加一个before钩子函数,用来监听来自web的http请求。
7、完成以上步骤以后，启动应用npm run dev，地址中输入相应请求地址，即可以请求成功啦。
通过地址栏get访问接口可以看到，浏览器返回了一组json数据，mock按照我们之前定义的json格式随机生成了两组数据。
针对post方法，类似，直接在mock的index.js文件中添加方法即可。如：
三、最后
本文只是进行了mockjs的简单功能做了demo。mock的用法很多，具体还需要详细在官方文件详细的学习。
一定要坚持将官方文档进行阅读理解，这样才能更好的掌握mockjs，才能灵活的进行运用！
