参考视频戳我跳转

mockjs介绍

Mock.js是一款开发中拦截Ajax请求再生成随机数据响应的工具，可以用来模拟服务器响应
优点是非常简单方便，无入侵性，基本覆盖常用的接口数据类型
支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等
安装：npm install mockjs
官方文档

基本使用

在项目中创建mock目录,新建index.js文件

import Mock from 'mockjs'
Mock.mock('/product/search', {
    "ret": 0,
    "data":
    {
        //随机生成日期时间
        "mtime: "@datetime", 
        //随机生成1-800的数字
        "score|1-800": 800,
        //随机生成1-100的数字
        "rank|1-100": 100,
        // 随机生成1-5的数字
        "star|1-5": 5,
        //随机生成中文名字
        "nickname": "@cname",
        //生成图片
        "img:"@image('200x100', '#ffcc33', '#FFF', 'png', 'Fast Mock')",
    }
});

组件中调用mock.js中模拟的数据接口，这时返回的response就是mock.js中用Mock.mock('url',data)中设置的data

import axios  from 'axios'
export default{
    mounted: function(){
        axios.get("/product/search").then(res =>{
            console.log(res)
        })
    }
}

当url中后面传递了参数时，上面的拦截就会失效，就需要用到RegExp

1
2
3

Mock.mock(RegExp('/product/search.*'),{
    ...
});

核心方法

Mock.mock(rurl?,rtype?,template|function(options))

rurl,表示需要拦截的URL，可以是URL字符串或者URL正则
rtype，表示需要拦截的Ajax请求类型。例如GET、POST、PUT、DELETE等
template，表示数据模板，可以是对象或者字符串
function，表示用于生成响应数据的函数

设置延时请求到数据

//延迟400ms请求到数据
Mock.setup({
    timeout: 400
})
//延时200-600ms请求到数据
Mock.setup({
    timeout: '200-600'
})

数据生成规则

mock的语法规范包含两层规范:数据模板(DTD)、数据占位符(DPD)
数据模板中的每个属性由三个部分构成:属性名name、生成规则rule、属性值value：'name|rule':value
属性名和生成规则之间用竖线|分隔，生成规则是可选的，有七种格式：
1
2
3
4
5
6
7
'name|min-max': value
'name|count': value
'name|min-max.dmin-dmax': value
'name|min-max.dcount': value
'name|count.dmin-dmax': value
'name|count.dcount': value
'name|+step': value
生成规则的含义需要依赖于属性值的类型才能确定
属性值中可以含有@占位符

生成规则和示例

属性值是字符串String

//通过重复string生成一个字符串，重复次数大于等于min，小于等于max
'name|min-max':string
//通过重复string生成一个字符串，重复次数是count
'name|count': string

var data = Mock.mock({
    'name1|1-3': 'a',   //重复生成1到3个a（随机）
    'name2|2': 'b'      //生成bb
})

属性值是数字Number

//属性值自动加1，初始值为Number
'name|+1': number
//生成一个大于等于min、小于等于max的整数，属性值number只是用来确定类型
'name|min-max': number
//生成一个浮点数，整数部分大于等于min、小于等于max、小数部分保留dmin到dmax位
'name|min-max.dmin-dmax':  number

Mock.mock({
    'number1|1-100.1-10': 1
    'number2|123.1-10': 1
    'number3|123.3':  1
})

…

更多用法参考官方文档