目录

工欲善其事

实践出真知

活跃标签: linux java mysql 待分类 js springboot win10 电路 vue macOS nginx git docker maven windows idea esp32 esp8266 centos7 Mybatis-plus

存档:

X

Mockjs在Vue项目中使用

先放一下 Mockjs 官网地址

首先安装mockjs

npm install mockjs

我们可以使用数据模板生成模拟数据

Mock.mock( rurl?, rtype?, template ) )
// 或者
Mock.mock( rurl, rtype, function( options ) )

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) 可选
    表示用于生成响应数据的函数

怎么配置这里就不再废话啦

首先在mock文件夹下创建index.js文件,这里就是我们注册所有mock服务的地方

// 首先引入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);
  }
});

服务注册好之后,在main.js中引入

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

在mock文件夹下随便创建一个文件demoList.js
在该文件中,我们可以按照index注册服务的格式来写我们的mock,我们可以使用template返回

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

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

当然,当我们想要展示大量数据时,不可能一个一个的写,那样又费时又费力,这是我们就可以根据mockjs的语法规范来快速生成一系列的数据

let demoList = {
  status: 200,
  message: 'success',
  data: {
    total: 100,
    'rows|10': [{
      id: '@guid',
      name: '@cname',
      'age|20-30': 23,
      'job|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师']
    }]
  }
};
export default {
    'get|/parameter/query': demoList
}

这样我们就可以每次随机生成10条数据,总数为100条,其中id和name使用的占位符,age是随机取出20-30中的数字,job是随机取出其后数组中的某一项,这在mock文档里都有说明。

以上,就是我们在项目中如何使用mock咯。

当然这还没有完!有没有发现我们一般使用get请求时候后面会跟参数,为什么拦截不到了!!!

举个例子,使用 Mock.mock("/user/getUserInfo", "get", mockData) 的时候,它只会拦截url等于 /user/getUserInfo 的请求,而对于带参数的请求,如 /user/getUserInfo?id=12,因为不等于 /user/getUserInfo就拦截不到。

解决方法

解决这个问题其实挺简单的,咱们看一下Mock.mock方法:
Mock.mock( rurl, rtype, template )
其中 rurl 的定义是

rurl
可选。
表示需要拦截的 URL,可以是 URL 字符串或 URL 正则 。例如
//domain/list.json/、’/domian/list.json’。

也就是说 rurl 参数是可以传正则的。对于 GET 请求来说,最简单的方式就是对所有的 url 都使用正则。如:

Mock.mock(RegExp(url + ".*"), "get", mockData);

这个简单粗暴加 .* 的方式在极端情况下可以会有问题,但是一般情况下是够用的了。如果你的 url 都比较相似,可能会出现冲突的话,就写一个严格点的正则替换一下就好。

Demo

import Mock from 'mockjs'

Mock.mock(RegExp(`${process.env.VUE_APP_API_BASE_URL}/setting/user/list.*`), 'get', (v) => {
    return {
        code: 0,
        message: "操作成功!",
        result: {},
        success: true
    }
})

另一种写法:(没测试)

Mock.mock(/\/api\/basic*?/, 'get', (options) => {})

标题:Mockjs在Vue项目中使用
作者:llilei
地址:http://solo.llilei.work/articles/2021/10/27/1635339550737.html