Mock.js 笔记

1.介绍

• 官方文档，Mock.js用来生成随机数据，拦截 Ajax 请求
• 支持的数据类型丰富，包括文本、数字、布尔值、日期、邮箱、链接、图片、颜色等
• 功能灵活，生成随机数据 和 拦截 Ajax 请求 这两个功能可以独立开来用，也可以混合到一起使用，适合模拟各种场景
• 引入Mock.js

<script src="http://mockjs.com/dist/mock.js"></script>

2.生成随机数据

• 调用对应的方法生成单个数据

<script>
    //生成单个随机数据
    var flag = Mock.Random.boolean() //true
    var num = Mock.Random.natural(0, 100) //9
    var date = Mock.Random.date() //2000-06-29
    var time = Mock.Random.time() //03:34:09
    var cname = Mock.Random.cname() //邱静
</script>

• 根据模版(对象)来输出对应的随机数据

<script>
    //生成单个对象
    var obj = Mock.mock({
        "flag|1": true,//各占50%几率
        "num|0-100": 0,//随机数值
        "date": "@date",//特殊类型
        "time": "@time",//特殊类型
        "cname": "@cname",//特殊类型
    })
    //模拟后台返回数据
    var res = Mock.mock({
        "code|0-1": 1,
        "data|10": [
            {
                "flag|1": true,//各占50%几率
                "num|0-100": 0,//随机数值
                "date": "@date",//特殊类型
                "time": "@time",//特殊类型
                "cname": "@cname",//特殊类型
            }
       ],
    })
    console.log('obj',obj)
    console.log('res',res)
</script>

3.拦截Ajax请求

• 通过模版数据来返回对应的数据，这种模式生成的随机数据是一次性的，不支持缓存和修改

<script>
    Mock.mock('/list','get',{
       "code|0-1": 1,
       "data|10": [
            {
                "id|+1": 1,
                "name": "@cname"
            }
       ],
    })
</script>

• 通过回调函数来返回对应的数据，这种模式可以对生成的随机数据进行缓存和修改，推荐

Mock.mock('/list', 'get', function(options){
    //{url: '/list', type: 'GET', body: null}
    console.log('options',options)
    //要返回的数据可提前生成，这里直接返回
    return {}
})

• url支持正则表达式，可以给url添加参数，并在回调函数中读取

//ajax请求（带参数）
axios.get('/list?page=1&limit=10')

//正则匹配，可通过options.url对参数进行读取
var url_reg = /\/list*/
Mock.mock(url_reg, 'get', function(options){
    //{url: '/list?page=1&limit=10', type: 'GET', body: null}
    console.log('options',options)
    //要返回的数据可提前生成，这里直接返回
    return {}
})

4.数据模板定义规范

• 数据模板中的每个属性由 3 部分构成：属性名、生成规则（可选）、属性值：
• 当生成规则不存在时，则原样输出value，如果存在生成规则，详见下方说明

// 属性名   key
// 生成规则 rule
// 属性值   value
'key|rule': value

• 属性值是字符串：当以值为模板，进行批量复制，如果值是空的，则模板为随机的一个字符

"str|3-7":'hi', // 重复生成 3-7 次 'hi' 例如：str: "hihihihihi"
"str2|2":'hi',  // 重复生成 2 次 'hi'    例如：str2: "hihi"
"str3|5":'',  // 重复生成 5 次 随机字符    例如：str3: "BwpB9"

• 属性值是数字：+1代表自增，10-20数字代表生产的数值范围

"id|+1":0, // id默认为0 每生成一次数据 id就+1
"age|10-20":10,  // age在10-20之间，且为整数
"weight|40-60.0-2":40  // weight在40-60直接，小数部分保留0到2位

• 属性值是布尔型：通过生成规则控制布尔值的几率

"flag|1":true, // flag为随机的布尔值，true/false的概率都是50%
"flag2|10-40":true,  // flag为true的几率为 10/(10+40)=0.2，及true与false的比例为10:40

• 属性值是对象：生成规则表示随机选取n个属性进行返回

// 属性值对象中随机选取2个属性
"userInfo|2":{
    "name":'张三',
    "age":18,
    "hobby":'看电影',
    "skill":'PHP'
}
// => userInfo: {hobby: "看电影", age: 18}

// 属性值对象中随机选取2-4个属性
"userInfo|2-4":{
    "name":'张三',
    "age":18,
    "hobby":'看电影',
    "skill":'PHP'
}

• 属性值是数组：

//规则为 1，从数组元素中随机选一个作为字段值
"gender|1":['男','女']
//规则为 大于1  循环生成数组元素
"userInfo|2":['hi']  // 循环创建数组中的内容，循环次数为2次 => "userInfo":['hi',hi']
"userInfo|2-4":['hi']  // 循环创建数组中的内容，循环次数为2-4次
//规则为 +1 依次输出数组元素
"music|+1":['爱你的早晨','玻璃鞋对白','梦的翅膀受了伤','寂寞在唱什么歌']

5.预定义的值类型

• 将属性值设置成下面的类型值，则可以生成特定格式的数据(格式固定，但值是随机的)

类型值	说明	示例
@date	年月日	2008-05-14
@time	时分秒	19:52:14
@color	颜色	#a8f279
@name	英文名	Elizabeth Brown
@cname	中文名	叶洋
@domain	域名	bdor.wf
@ip	ip	13.226.27.93
@email	邮箱	i.mvxss@vstcgevu.tc
@province	省	江苏省
@city	市	无锡市
@county	县/区	濮阳县
@paragraph	无规则长文本(英文)	Znkgvut uspgwtqkt
@cparagraph	无规则长文本(中文)	节术该发速

Mock.mock('http://localhost:8080/userInfo',{
    "userInfo":{
        "name":'@name', // 英文名
        "cname":'@cname', // 中文名
        "province":'@province', // 随机的省
        'city': '@city(true)', // 中国城市
        "county":'@county', // 县
        'color': '@color',  // 16进制颜色编码
        "date":'@date', // 年月日 "1993-08-15"
        "time":'@time', // 时分秒 "03:34:51"
        "text":'@paragraph', // 随机生成一段英文文本
        "text2":'@paragraph(2)', // 随机  2句 英文文本
        "ctext":'@cparagraph', // 随机生成一段中文文本
        "ctext2":'@cparagraph(2)', // 随机生成 2句 中文文本
        "domain":'@domain', // 随机的域名
        "ip":'@ip', // 随机的ip
        "email":'@email', // 随机的邮箱
    }
})