美文网首页
05 在Vue项目中使用Mock.js模拟数据接口

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

作者: 酷炫派大星 | 来源:发表于2019-07-03 16:45 被阅读0次

目的

追求前后端分离开发。

注意

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拦截和模拟,而是发送真实请求。

相关文章

网友评论

      本文标题:05 在Vue项目中使用Mock.js模拟数据接口

      本文链接:https://www.haomeiwen.com/subject/xdaqcctx.html