首页 IT程序员内容详情

Mock.js-拦截Ajax请求

2021-03-13 40006 编程艺术家

Mock.js-拦截Ajax请求

在团队开发项目时,由于不是一个人去写前端,后端代码,开发进度的不同导致一个团队等待另一个团队的情况,后端人员除了要写接口,还要写接口文档,进度可能比前端人员略慢,前端人员停下来等待接口又十分的不友好,拖慢项目的进度,有的人定义一个json,模拟返回数据,但是这样的话又不够灵活,不能模拟后台返回的不同类型的数据,于是Mock.js就是一个解决这种问题的神器,


Mock的优势

前后端分离—–定义好接口文档之后,前端人员不用再等待后台的接口。

增加测试的真实性—-不同于直接用json返回固定的数据,返回数据更加接近真实环境中的情况

不需要修改代码就能拦截AJax请求,并能返回请求

用法简单

数据类型丰富,支持随即文本,数字,boolean,图片,color,等

支持扩展

安装与使用

安装与使用都十分的简单,这里基于vue-cli写的简单的例子,使用axios发起请求


在项目中直接使用npm安装


npm install mockjs --save-dev

1

在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

    }

})

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

定义一个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)

  }

})

1

2

3

4

5

6

7

8

9

10

11

12

13

浏览器输出


{

     name:'feifeifei',

     age:26,

}

1

2

3

4

定义数据

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次

1

2 ‘name|count’:str,将str重复count次数


'name|2':abc     //输出abcabc   重复2次

1

3.‘name|min-max’:num 随机生成min-max之间的一个整数,num只能用来确定类型


'name|2-5':25     //生成2-5之间的随机整数

1

4 ‘name|+1’:num 递增


'name|+1':2   //从2开始递增 

1

5.‘name|1’:boolean 随机生成布尔值,二者的类型都是1/2

6 ‘name|count’:obj 从obj中选count个属性


'name|2':obj   //从obj中选择两个属性


'name|2-5':obj   //从obj中选择2-5个属性

1

2

3

7 ‘name|count’:arr 从数组中选count个元素


'name|2':arr   ///从arr中选择2个元素,作为最终值


'name|+1':arr   ///从属性值 array 中顺序选取 1 个元素,作为最终值

————————————————

版权声明:本文为CSDN博主「Markov Zheng」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。

原文链接:https://blog.csdn.net/marko_zheng/article/details/81232737


相关标签: # mock.js

 暂无评论,快来抢沙发吧~

发布评论