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:(用来造数据,如:名字,地址等)

VUE-本地mock数据的方法

mock.js:(用来模拟请求chuli)

VUE-本地mock数据的方法


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