vue mock数据

对于现在前后端分离开发来说，前期前端的mock数据也是必不可少的东西，虽然同样是死数据，但对在页面上的表现形式类似于发起的网络请求，数据渲染更加逼真。

两种方法：

第一种：在服务器上添加一段代码，模拟服务端接收的路径和响应的数据

1.自行创建一个data.json文件
2.修改build文件夹下的dev-server.js的代码
3.添加下边的代码
4.在页面路径后边加上/api/seller，就可以获得所有请求的数据

// 导入json数据,找到相对应的路径
var appData = require('../data.json');
// 获取数据中的某个对象
var seller = appData.seller;
// 添加服务端路由
var apiRoutes = express.Router();
// 设置服务端请求数据的路径及返回数据
apiRoutes.get('/seller', function(req, res) {
  res.json({
    errno: 0,
    data: seller
  });
});
// 应用服务端路由，地址前缀为/api
app.use('/api', apiRoutes);

第二种：利用插件axios-mock-adapter插件地址

1.安装插件
$ npm install axios-mock-adapter –save-dev
2.定义一些数据存在js中，导出
3.添加mock.js文件加入下边代码
4.在页面上发起请求的方法 eg: app.vue

>> mock.js
// 导入请求方法
var axios = require('axios');
// 导入依赖的插件
var MockAdapter = require('axios-mock-adapter');

// 实例化对象
var mock = new MockAdapter(axios);

// 模拟请求接口和返回数据
// arguments (status == 响应状态, data == 响应数据, headers == 响应头部信息)
mock.onGet('/users').reply(200, {
  users: [
    { id: 1, name: 'John Smith' }
  ]
});
// 导出
export default mock;

>> main.js
// 导入模块
import mock from 'mock/mock';
// 引用
Vue.use(mock);

>> app.vue
// 在页面上添加axios
import axios from 'axios';
// 发送请求
axios.get('/users').then(function(response) {
    console.log(response.data);
});

• 所谓的mock数据，不需要添加太多的条件，你只需要在页面中发起请求，能够获取你想要的数据即可，关于参数问题，可以去官网查看。