05 在Vue项目中使用Mock.js模拟数据接口

目的

追求前后端分离开发。

注意

Mock.js的作用是生成随机数据，拦截 Ajax 请求。所以如果使用了Mock数据，那么在控制台根本没有Ajax请求发出。

安装

npm install mockjs

使用方法

• 导入

import Mock from 'mockjs'

• 定义数据模板

let template = {
  'rank|1-5': '⭐'
}

以上例子会随机生成1-5颗星。数据模版可以生成各式各样的随机数据，参见语法规范。

• 拦截并模拟接口，并返回数据模板
  Mock.mock()第一个参数是需要拦截的接口，第二个参数表明ajax请求类型（get/post/put/delete等），第三个参数是模拟返回值的数据模版。

// 拦截并模拟接口
Mock.mock('/mock/rank', 'get', template)

接口可以通过字符串或者正则匹配，字符串需要和接口完全一样，正则只需要一部分匹配就行。
请求类型参数如果省略，就表示任何类型的请求都可以拦截。

• 在main.js中导入编辑好的mock文件

import './mock'

如果注释掉这一行，那么请求就不会被mock拦截和模拟，而是发送真实请求。