Vue使用MockJS,从此不再等后端

mockjs可以极大的提高前端的开发效率；在前端对接后端接口时，不需要苦苦等待后端的接口，只需要约定好接口的数据格式和api地址即可。

安装Mock

通过NPM或者Yarn安装

npm install mockjs  或者 yarn add mockjs

引入Mock

在src目录下新建一个文件夹mock（名字可以自己定），在其中新建一个index.js

内容为：

// 在这里可以做一些通用的配置
import Mock from 'mockjs'
// 设置所有ajax请求的超时时间，模拟网络传输耗时
Mock.setup({
  timeout: 300
})
let baseURL = 'https://yourserver'
Mock.mock(baseURL + '/tab_data', 'get', {
  status: 'succeed',
  result: {
    'area_count|100000-800000': 1000,
    'population_count|500000-1000000': 100000
  }
})

最后在main.js中引入该文件即可

测试一下

在任意组件的mouned钩子里面 通过axios请求/tab_data路径，理论上会返回这些：

{
   status: 'succeed',
   result: {
     'area_count|100000-800000': 1000,
     'population_count|500000-1000000': 100000
   }
}

官方例子

http://mockjs.com/examples.html