在vue中使用mock

首先安装mockjs

npm install mockjs

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

// 首先引入Mock
import Mock from '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中引入

import Mock from 'mockjs';

在mock文件夹下随便创建一个文件demoList.js 规定接口数据,然后导出。方便后面处理接口名称都加前缀mock

let demoList = {
  code: 0,
  message: 'success',
  total: 10,
    'data|10': [{
      'id|+1': 1,               //生成id自动加 1
      address:'@province',      //生成地址
      name: '@cname',           //生成名字
      date:'@date("yyyy-MM-dd")',     //随机生成日期
      'any|3': "测试",                //指定字符串*3
      'status|1-2':1,                 //1~2的随机整数
      'age|20-30': 23,              
      'job|1': ['前端工程师', '后端工程师', 'UI工程师', '需求工程师']
    }]
};
export default {
    'get|/mock/demo': demoList      
}

更多mock语法参考官方文档 http://mockjs.com/examples.html

mock模拟数据和后台接口同时使用, 在axios中引入刚刚注册的mock服务。在拦截器中增加mock判断,把baseURL置空。因为vue.config加了代理,碰到api开头的会转到后台的接口。置空后请求就会转发到mock服务

require("../mock/index.js")
service.interceptors.request.use(config => {
	if(config.url.indexOf("mock/")>=0){
		config.baseURL="";              //baseURL置空
	}
	if (store.getters.token) {
		// 设置公共请求头
		config.headers.Authorization = 'Bearer ' + store.getters.token;
	}
	return config
}, error => {
	Promise.reject(error)
})

然后就可以正常调用了 接口地址为 /mock/demo

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值