3、Mock.js 随机占位符

随机占位符

1.了解了 Mock.js 提供的随机占位符功能；

2.通过 '@占位符' 这种方式来随机产生各种不同的数据；

3.有两种方式可以输出这种随机占位符，具体如下：

//第一种输入占位符的方式
console.log(Mock.Random.cname());
//第二种输入占位符的方式
console.log(Mock.mock('@cname'));

PS：如果在输出列表里，直接写 '@cname' 更加的方便快捷；

4.下表中，将所有的占位符的名称，罗列出来，我们挑最常用的演示；

//随机中文人名，不带 c 就是英文
console.log(Mock.mock('@cname'));
//随机 ID
console.log(Mock.mock('@id'));
//随机中文标题，不带 c 就是英文
console.log(Mock.mock('@ctitle'));
//随机颜色，十六进制
console.log(Mock.mock('@color'));
//随机图片，给你一个图片地址
console.log(Mock.mock('@image'));
//随机 ip 地址
console.log(Mock.mock('@ip'));
//随机 url 地址
console.log(Mock.mock('@url'));
//随机字符串
console.log(Mock.mock('@string'));
//随机数值
console.log(Mock.mock('@integer'));
//随机日期
console.log(Mock.mock('@datetime'));

5. 如果没有我们想要的数据格式进行填充，可以使用扩展功能自己扩展；

//自行扩展，各种商店名称
Mock.Random.extend({
    cstore() {
        return this.pick([
            '宠物店',
            '美容店',
            '小吃店',
            '数码店',
            '快餐店'
        ]);
    }
});
//扩展调用
console.log(Mock.mock('@cstore'));

练习代码：

const Mock = require('mockjs');

// console.log(Mock.Random.cname());
// console.log(Mock.mock('@cname'));

console.log(Mock.mock('@id'));
console.log(Mock.mock('@ctitle'));
console.log(Mock.mock('@ip'));
console.log(Mock.mock('@image'));
console.log(Mock.mock('@url'));

console.log(Mock.mock('@color'));
console.log(Mock.mock('@integer'));
console.log(Mock.mock('@datetime'));
console.log(Mock.mock('@string'));

//自行扩展占位符
Mock.Random.extend({
    cstore() {
        return this.pick([
            '宠物店',
            '美容店',
            '小吃店',
            '数码店',
            '快餐店'
        ]);
    }
});

console.log(Mock.mock('@cstore'));