Mock.js详解(结合官网)

安装

npm install mockjs

Mock.mock()拦截与响应

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

rurl

可选。

表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。例如 /\/domain\/list\.json/、'/domian/list.json'。

rtype

可选。

表示需要拦截的 Ajax 请求类型。例如 GET、POST、PUT、DELETE 等。

template

可选。

表示数据模板，可以是对象或字符串。例如 { ‘data|1-10’:[{}] }、‘@EMAIL’。

function(options)

可选。

表示用于生成响应数据的函数。

options

Mock.mock( template )

示例：根据数据模板生成模拟数据

Mock.mock({
    
    
    'resultCode': 200,
    'message': "请求成功",
    "data": {
    
    
        "nickName": "火花",
        "loginName": "spark",
        "introduceSign": "万物之中，希望最美"
    }
})

let user =Mock.mock({
    
    
    'resultCode': 200,
    'message': "请求成功",
    "data": {
    
    
        "nickName": "火花",
        "loginName": "spark",
        "introduceSign": "万物之中，希望最美"
    }
})
console.log(user) 
// {
    
    
//     resultCode: 200,
//     message: '请求成功',
//     data: { nickName: '火花', loginName: 'spark', introduceSign: '万物之中，希望最美' }
// }

Mock.mock( rurl, template )

记录数据模板。当拦截到匹配 rurl 的 Ajax 请求时，将根据数据模板 template 生成模拟数据，并作为响应数据返回

export let postRegister = Mock.mock(/\/user\/register/, 'post', {
    
    
    'resultCode': 200,
    'message': "请求成功",
    "data": {
    
    
        "nickName": "火花",
        "loginName": "spark",
        "introduceSign": "万物之中，希望最美"
    }
})

Mock.setup() 配置项

Mock.setup({
timeout: 400; // 响应时间，也可以是一个范围
// timeout:‘200-600’
})

Mock.Random 模拟数据

// 随机邮箱
console.log(Mock.Random.email());
// 随机颜色
console.log(Mock.Random.color());

还有很多，下图（摘自官网）是比较完整的

拓展

也可以自定义随机数据，通过extend拓展方法

Mock.Random.extend({
    
    
    constellation: function(date) {
    
    
        var constellations = ['白羊座', '金牛座', '双子座', '巨蟹座', '狮子座', '处女座', '天秤座', '天蝎座', '射手座', '摩羯座', '水瓶座', '双鱼座']
        return this.pick(constellations)
    }
})
Mock.Random.constellation()
// => "水瓶座"
Mock.mock('@CONSTELLATION')
// => "天蝎座"
Mock.mock({
    
    
    constellation: '@CONSTELLATION'
})

Mock.valid() 校验数据

Mock.valid( template, data ) 校验真实数据 data 是否与数据模板 template 匹配。
template
必选。

表示数据模板，可以是对象或字符串。例如 { ‘list|1-10’:[{}] }、‘@EMAIL’。

data
必选。

表示真实数据。

var template = {
    
    
    name: '迪丽热巴'
}
var data = {
    
    
    name: '神奇龙'
}
Mock.valid(template, data);
// [
//     {
    
    
//       path: [ 'ROOT', 'name' ],
//       type: 'value',
//       actual: '神奇龙',
//       expected: '迪丽热巴',
//       action: 'is equal to',
//       message: "[VALUE] Expect ROOT.name'value is equal to 迪丽热巴, but is 神奇龙"
//     }
// ]

Mock.toJSONSchema()

把 Mock.js 风格的数据模板 template 转换成 JSON Schema。
暂时对这一块没有什么理解，以后会补充上来

var template = {
    
    
    'key|1-10': '★'
}
Mock.toJSONSchema(template)
// =>
{
    
    
    "name": undefined,
    "path": [
        "ROOT"
    ],
    "type": "object",
    "template": {
    
    
        "key|1-10": "★"
    },
    "rule": {
    
    },
    "properties": [{
    
    
        "name": "key",
        "path": [
            "ROOT",
            "key"
        ],
        "type": "string",
        "template": "★",
        "rule": {
    
    
            "parameters": ["key|1-10", "key", null, "1-10", null],
            "range": ["1-10", "1", "10"],
            "min": 1,
            "max": 10,
            "count": 3,
            "decimal": undefined,
            "dmin": undefined,
            "dmax": undefined,
            "dcount": undefined
        }
    }]
}