Mock.js-拦截Ajax请求

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: '',
    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 个元素，作为最终值