如何在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