版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/marko_zheng/article/details/81232737
Mock.js-拦截Ajax请求
在团队开发项目时,由于不是一个人去写前端,后端代码,开发进度的不同导致一个团队等待另一个团队的情况,后端人员除了要写接口,还要写接口文档,进度可能比前端人员略慢,前端人员停下来等待接口又十分的不友好,拖慢项目的进度,有的人定义一个json,模拟返回数据,但是这样的话又不够灵活,不能模拟后台返回的不同类型的数据,于是Mock.js就是一个解决这种问题的神器,
Mock的优势
- 前后端分离—–定义好接口文档之后,前端人员不用再等待后台的接口。
- 增加测试的真实性—-不同于直接用json返回固定的数据,返回数据更加接近真实环境中的情况
- 不需要修改代码就能拦截AJax请求,并能返回请求
- 用法简单
- 数据类型丰富,支持随即文本,数字,boolean,图片,color,等
- 支持扩展
安装与使用
安装与使用都十分的简单,这里基于vue-cli写的简单的例子,使用axios发起请求
在项目中直接使用npm安装
npm install mockjs --save-dev
在main.js中引入mock.js
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
// 引入mockjs
require('./mock.js')
new Vue({
el: '#app',
router,
template: '<App/>',
components: {
App
}
})
定义一个mock.js
import Mock from "mockjs";
Mock.mock('http://123.com',{ //返回一个json对象
'name|3':'fei',
'age|20-30':25,
})
$.ajax({
url:'http://123.com',
dataType:'json',
success:function(e){
console.log(e)
}
})
浏览器输出
{
name:'feifeifei',
age:26,
}
定义数据
https://www.cnblogs.com/zhenfei-jiang/p/7235339.html
数据模板中每个属性由三部分构成:属性名(name),规则(rule),值(value)
‘name|rule’:value
1 ‘name|min-max’:string,重复str生成随机字符串,重复次数在min到max之间
'name|2-5':abc 随即重复2-5次
2 ‘name|count’:str,将str重复count次数
'name|2':abc //输出abcabc 重复2次
3.‘name|min-max’:num 随机生成min-max之间的一个整数,num只能用来确定类型
'name|2-5':25 //生成2-5之间的随机整数
4 ‘name|+1’:num 递增
'name|+1':2 //从2开始递增
5.‘name|1’:boolean 随机生成布尔值,二者的类型都是1/2
6 ‘name|count’:obj 从obj中选count个属性
'name|2':obj //从obj中选择两个属性
'name|2-5':obj //从obj中选择2-5个属性
7 ‘name|count’:arr 从数组中选count个元素
'name|2':arr ///从arr中选择2个元素,作为最终值
'name|+1':arr ///从属性值 array 中顺序选取 1 个元素,作为最终值