vue mockjs的使用

安装

npm install mockjs

使用

1、项目目录下新建mock文件夹，文件夹下新建mock-server.js，写入以下内容

import Mock from 'mockjs';
import { regUrl } from './utils.js';

//延时300-600ms请求到数据
Mock.setup({
  timeout: '300-600'
})

// 自动引入mock模块
const mockModules = require.context('./modules', true, /.js$/)
// 获取引入的mock模块，分别执行Mock.mock，，适用于Vue2
mockModules.keys().forEach((fileName) => {
  const moduleDefault = mockModules(fileName).default;
  moduleDefault.forEach((mockConfig) => {
    Mock.mock(regUrl(mockConfig.url), mockConfig.methods, mockConfig.fn)
  })
})

2、mock文件夹下新建utils.js，用于定义mock需要的方法

/**
 * 将url改写成正则模式，mock匹配get请求路由时候使用，因为get请求参数是拼接在url后面，不用正则匹配不到
 * @param {String} url
 * @returns {RegExp}
 */
export function regUrl(url) {
  return RegExp(url + ".*");
}
/**
 * 获取当前url上参数,返回参数对象：{label:val}
 * @param {Object} url
 */
export function getUrlParam(url) {
  let args = url.split('?');
  if (args[0] === url) return false;
  let hrefArr = args[1].split('#')[0].split('&');
  let obj = {};
  for (let i = 0; i < hrefArr.length; i++) {
    hrefArr[i] = hrefArr[i].split('=');
    obj[hrefArr[i][0]] = hrefArr[i][1];
  }
  return obj;
}

3、新建modules文件夹，将mock接口定义到指定文件中

// example.js

/*
 ps:fn可以直接定义为对象，也可以定义为函数
 以函数方式定义时，可以接收get/post传参，但不能再用mockjs提供的数据占位符,可以手动引入Random方法，或者自行实现数据生成
*/

import { getUrlParam } from '../utils.js';

const exampleController = [{
  url: '/example/example',
  method: 'get',
  fn: (options) => {
    const params = getUrlParam(options.url); // get传参
    console.log("======>", 'params: ', params)
  }
}, {
  url: '/example/example',
  method: 'post',
  fn: (options) => {
    const data = JSON.parse(options.body); // post传参
    console.log("======>", 'data: ', data);
  }
}];

export default exampleController;

4、main.js中引入

// mock数据
import '../mock/mock-server.js';

其他

可在mock文件夹下新建mock-data文件夹，自定义数据，直接导入modules方法中使用