Mock安装使用

在做开发时，当后端的接口还未完成，前端为了不影响工作效率，可以手动模拟后端接口，常见的方式如下：

1. 我们可以使用 json 文件来模拟后台数据，但比较局限，无法模拟数据的增删改查

2. 使用 json-server 模拟，但不能随机生成所需数据

3. 使用 mockjs 模拟后端接口，可随机生成所需数据，可模拟对数据的增删改查✅

1. mock 的优点

1. 前后端分离

2. 可随机生成大量的数据

3. 用法简单

4. 数据类型丰富

5. 可扩展数据类型

6. 在已有接口文档的情况下，我们可以直接按照接口文档来开发，将相应的字段写好，在接口完成之后，只需要改变URL地址即可。

2. 安装

Mock.js 的官网地址

（1）安装

npm install mockjs

(2) 页面导入

import Mock from 'mockjs'

3. Mock.Random

页面导入 Mock 后，我们就可以使用它的 Random 属性，该属性是一个工具类，用于生成各种随机数据。

Mock.Random 提供的完整方法（占位符）如下：

使用示例：

const Random = Mock.Random
// 1. 随机布尔值
console.log('随机布尔值', Random.boolean());

// 2. 随机一个整数 - Random.integer(min, max)
console.log('随机整数', Random.integer());
console.log('随机整数', Random.integer(9,90));

// 3. 随机一个字符 - Random.character(pool?)
console.log('随机字符 英文大小写/数字/特殊字符', Random.character());
console.log('随机字符', Random.character('ab139$'));

// 4. 返回一个整型数组 - Random.range(起始值?, 终止值, 步长 = 1)
console.log('数字数组', Random.range(4));
console.log('数字数组', Random.range(4,9));
console.log('数字数组', Random.range(12,23,2));

// 5. 日期 - Random.date/time/datetime(日期格式)
console.log('随机年月日', Random.date());
console.log('随机时分秒', Random.time());
console.log('随机年月日 时分秒', Random.datetime());
console.log('随机年月日 时分秒', Random.date('yyyy-M-d hh:mm:ss'));

console.log('当前时间带格式', Random.now('yyyy-MM-dd'));

// 6. 随机图片 - Random.image(尺寸, 背景色, 文字颜色, 图片类型, 文本)
// Random.dataImage(尺寸, 内容)
this.randomSrc1 = Random.image('100x100', '#f00', '#0f0', 'png', '李白')
this.randomSrc2 = Random.dataImage('100x100', '张飞')

// 7. 随机颜色 - Random.hex/rgb/rgba/hsl()
console.log('随机颜色', Random.hex());
console.log('随机颜色', Random.rgb());
console.log('随机颜色', Random.hsl());

// 8. 文本
// Random.cparagraph(min, max)  段落 - 语句长度设置
this.paragraph = Random.cparagraph()
// this.paragraph = Random.cparagraph(5) // 固定句号5个
// this.paragraph = Random.cparagraph(5, 10)// 句号个数 5-10个

// Random.ctitle(min, max) 标题 - 长度设置
this.title = Random.ctitle(3,6)

// Random.csentence(min, max) 句子 - 字符默认12-18个

// Random.cword(汉字池, min, max) 
console.log(Random.cword('男女'));

// 9. 名字 - Random.clast/cfirst/cname()
console.log('随即姓名', Random.cname());

// 10. web相关
// - Random.url(协议?, 源?)
console.log('随机网址', Random.url('https', 'qq.com'));
// - Random.email( domain? )
console.log('随机QQ邮箱', Random.email('qq.com'));
console.log('随机网易邮箱', Random.email('163.com'));
// - Random.ip() ipv4
console.log('随机IP', Random.ip());

// 11. 地址
// - Random.region() 随机大区（华东/南/西/北/中）
// - Random.province()/city/county(true - 是否将前面的内容显示出来)
console.log('随机省', Random.province());
console.log('随机市', Random.city());
console.log('随机县', Random.county(true));

// 12. 简化JS操作的方法
// - Random.capitalize(word)  首字母大写
console.log(Random.capitalize('hello'));

// - Random.pick(arr) 数组随机取值
console.log(Random.pick([true, 'hello', 12, 23, 'world']));

// - Random.shuffle() 打乱数组
console.log('数组乱序', Random.shuffle([1,2,3,4,5]));

// 13. 随机身份ID
// - Random.guid()  返回uuid
console.log('随机用户id', Random.guid());

// - Random.id()  随机身份证号
console.log('随机身份证号', Random.id());

// - Random.increment('步长')
console.log('规律id', Random.increment());
console.log('规律id', Random.increment());
console.log('规律id', Random.increment());
console.log('规律id', Random.increment(10));
console.log('规律id', Random.increment(20));

4. Mock.mock 方法?

是根据数据模板生成模拟数据的方法，也是使用 Mock 最常用的方法，基本语法为：Mock.mock( template )，表示根据数据模板生成模拟数据。

Mock.Random 的方法在数据模板中称为『占位符』，书写格式为 @占位符(参数 [, 参数]) 。

示例：

var Random = Mock.Random;
Random.email()
// => "n.clark@miller.io"

// 改为模板语法，忽略小括号
Mock.mock('@email')
// => "y.lee@lewis.org"

// 如果要传参数，注意参数不带引号
Mock.mock('@email(qq.com)')
// => 'a.yyc@qq.com

// 传递对象形式的参数
Mock.mock( { email: '@email' } )
// => { email: "v.lewis@hall.gov" }

演示结果仅为参考，因为是随机值，所以你们在使用上方代码时输出结果可能不一样，但是形式是一样的。

一般来说后台返回的都是对象数据，这里我们生成一个用户对象的随机数据：

// 以对象作为参数，属性值是占位符
let user = Mock.mock({
    name: '@cname',
    age: '@integer(10,90)',
    sex: '@cword(男女)',
    address: '@county(true)',
    school: '@ctitle(4)' + '职业技术学院',
    // 占位符中可以嵌套占位符
    avatar: '@dataImage(100x100, @clast)',
    // Mock.mock 可以解析正则，随机出一个符合正则条件的内容
    tel: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
})

4.1 设定条件

我们可以在属性名后面加上|来添加数据设定，最简单的是加一个数字，示例：

let {num, str, arr, names, obj} = Mock.mock({
    // |数字  number 表示赋值
    'num|6': 90,
    // 将字符串重复N次
    'str|4': 'hello ',
    // 如果是个数组，表示将数组项重复N次
    'arr|3': ['a', 'b'],
    // 随机10个姓名
    'names|10': ['@cname'],
    // 对象类型，表示从对象中随机取N个属性
    'obj|2': {
        min: 9,
        max: 10,
        num: 99,
        count: 20
    }
})
console.log(num, str, arr, names, obj);

4.2 限定范围

let { n, txt, list, car } = Mock.mock({
    // 数字范围
    'n|3-9': 0,
    // 生成一个浮点数，整数部分大于等于 1、小于等于 100，小数部分保留 1 到 10 位。
    'number1|1-100.1-10': 1,
    // 字符串重复的次数范围
    'txt|2-6': 'ha ',
    // 数组重重复的次数范围
    'list|2-6': ['@character'],
    // 对象表示随机取几个属性
    'car|1-3': {
        name: '迈巴赫',
        price: '2000',
        weight: '7T',
        length: '2.7m',
        width: '1.8m',
        speed: '170KM/h'
    }
})
console.log(n, txt, list, car);

4.3 方法属性

我们可以直接将属性定义为函数，Mock.mock 会将该函数的返回值作为属性值，但是在函数内不能使用占位符。

// ...
data(){
    return {
        username: '李白'
    }
}
// ...
mounted(){
    let person = Mock.mock({
        username: '@cname',
        // 将属性值改为函数形式，优点在于可以使用 实例的数据属性
        img(){
            return Mock.Random.dataImage('100x100', this.username)
        }
    })
    console.log(person);
}