Detailed explanation of Mock.js (combined with the official website)

Install

npm install mockjs

Mock.mock() interception and response

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

rurl

optional.

Indicates the URL to be intercepted, which can be a URL string or a regular URL. For example/\/domain\/list\.json/、'/domian/list.json'。

rtype

optional.

Indicates the type of Ajax request that needs to be intercepted. For example GET, POST, PUT, DELETE, etc.

template

optional.

Represents a data template, which can be an object or a string. For example {'data|1-10':[{}]}, '@EMAIL'.

function(options)

optional.

Represents a function for generating response data.

options

Mock.mock( template )

Example: Generating mock data from a data 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 )

Record data template. When an Ajax request matching rurl is intercepted, simulated data will be generated according to the data template template and returned as response data

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

Mock.setup() configuration items

Mock.setup({ timeout: 400; // response time, can also be a range // timeout:'200-600' })


Mock.Random mock data

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

There are many more, the picture below (taken from the official website) is relatively complete
insert image description here

expand

You can also customize random data, through the extend method

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

Mock.valid() check data

Mock.valid( template, data ) Verify whether the real data data matches the data template template.
template
is required.

Represents a data template, which can be an object or a string. For example {'list|1-10':[{}]}, '@EMAIL'.

data
is required.

represents real 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()

Convert the Mock.js-style data template template into JSON Schema.
I don't have much understanding of this part for the time being, I will add it later

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
        }
    }]
}

Guess you like

Origin blog.csdn.net/qq_45859670/article/details/125680002