胖蔡叨叨叨
你听我说

如何在Vue中使用mockjs

Mock是值在开发之初当我们一起写代码的时候,后台小伙伴们还没有设计号库表、还没有开始写接口的时候,我们前端小伙伴需要同步开发怎么办?这个时候就需要mockjs的协助了,我们可以根据mockjs来根据页面元素自己先行构造数据接口,模拟接口请求返回,从而实现界面的渲染的功能。接下来,我们来了解下如何在vue中使用mockjs。

安装

$npm install mockjs --save-dev // 或者
$yarn add mockjs -D 

创建mock对象

Mock.mock( rurl?, rtype?, template ) ) // 表示当拦截到rurl和rtype的ajax请求时,将根据数据模板template生成模拟数据,并作为响应数据返回。
// 或者
Mock.mock( rurl, rtype, function( options ) ) // 记录用于生成响应数据的函数。当拦截到匹配 rurl 和 rtype 的 Ajax 请求时,函数 function(options) 将被执行,并把执行结果作为响应数据返回。

对应的参数解析如下:

  • rurl 可选:表示要拦截的url,可以使字符串,也可以是正则
  • rtype 可选:表示要拦截的ajax请求方式,如get、post
  • template 可选:数据模板,可以是对象也可以是字符串
  • function(option) 可选:表示用于生成响应数据的函数

示例

1、在更目录创建mock文件夹

2、src/mock下创建index.js文件

// 首先引入Mock
const Mock = require('mockjs');

// 设置拦截ajax请求的相应时间
Mock.setup({
  timeout: '200-600'
});

let configArray = [];

// 使用webpack的require.context()遍历所有mock文件
const files = require.context('.', true, /\.js$/);
files.keys().forEach((key) => {
  if (key === './index.js') return;
  configArray = configArray.concat(files(key).default);
});

// 注册所有的mock服务
configArray.forEach((item) => {
  for (let [path, target] of Object.entries(item)) {
    let protocol = path.split('|');
    Mock.mock(new RegExp('^' + protocol[1]), protocol[0], target);
  }
});

3、在 src/main.js中引入Mock服务

// main.js
require('./mock');

4、在src/mock文件夹下创建一个userDao.js

let userList= [{
        id: 1,
        name: 'zs',
        age: '23',
        job: '前端工程师'
    },{
        id: 2,
        name: 'ww',
        age: '24',
        job: '后端工程师'
    }]

export default {
    'get|/user/query':  option => {
    return {
      status: 200,
      message: 'success',
      data: userList
    };
  }
}

5、模拟发送请求:/user/query

赞(0) 打赏
转载请附上原文出处链接:胖蔡叨叨叨 » 如何在Vue中使用mockjs
分享到: 更多 (0)

请小编喝杯咖啡~

支付宝扫一扫打赏

微信扫一扫打赏