VUE-本地mock数据的方法

如果后端接口的实现尚未编码完成，前端开发一般使用mock数据，以进行前端数据填充。

mock方法挺多，这里给出两种：

1. 使用Express静态服务器

  默认使用vue-cli构建项目时，会自动引入express模块，使用express的路由（Router）以相应客户端的web请求。具体实方法：

  在build/dev-server.js 中添加如下代码：

   var app = express()
   //mock the data begin
   var appData = require('../data.json');
   var apiRoutes = express.Router();
   apiRoutes.get('/appRequest',function (req,res) {
      res.json({
          status:"OK",
          data:appData
     });

  });

2. 使用mock.js配合axios-mock-adapter

mock.js:可以用来造各种通用类型的随机数据，开发人员就不需要手动造数据了。

axios-mock-adapter:请求模拟调试器

Mock.js官方网址： http://mockjs.com/

在使用之前要安装此模块：npm install mockjs

在自己搭建的vue项目的src下，创建mock目录：

目录下包含：

user.js:(用来造数据，如：名字，地址等)

mock.js：（用来模拟请求chuli）

具体用哪种方式，要依据实际的情况,如果数据量以及数据的属性很少，使用express方法最简单。如果模拟的数据属性很多，手动写入模拟数据很花时间，并且想要模拟一些简单的增，删，改的操作，mock.js的方式就更合适一点。