vue - 前后端分离之 Mock.js 的使用

一、Mock.js 简介

Mock.js 是一款模拟数据生成器，旨在帮助前端攻城师独立于后端进行开发，帮助编写单元测试。前后端合作期间，后端人员只需提供接口文档，前端人员根据接口文档，编写mock即可。

二、Mock.js 功能

①基于数据模板生成数据

②基于HTML模板生成数据

③拦截并模拟ajax请求

三、Mock.js 规范

官方文档：http://mockjs.com/0.1/
官方Github：https://github.com/nuysoft/Mock/wiki

语法规范包括两部分：

（1）数据模板定义（Data Temaplte Definition，DTD）

//数据模板，由3部分构成
/*
* name：属性名
* rule ：生成规则
* vaule：属性值
*/
'name|rule':value
//注意: 属性名 和 生成规则 之间用 | 分隔

//生成规则 有 7 种格式，不同类型属性值有不同的效果，请看下方
'name|min-max': value
'name|count': value
'name|min-max.dmin-dmax': value
'name|min-max.dcount': value
'name|count.dmin-dmax': value
'name|count.dcount': value
'name|+step': value

//属性值是字符串 String
1. 'name|min-max': 'value' 通过重复 'value' 生成一个字符串，重复次数(x) min <= x <= max。
2. 'name|count': 'value' 通过重复 'value' 生成一个字符串，重复次数等于 count。

//属性值是数字 Number
1. 'name|+1': 100 属性值自动加 1，初始值为 100。
2. 'name|1-100': 100 生成一个大于等于 1、小于等于 100 的整数，属性值 100 只用来确定类型。
3. 'name|1-100.1-10': 100 生成一个浮点数，整数部分大于等于 1、小于等于 100，小数部分保留 1 到 10 位。

//属性值是布尔型 Boolean
1. 'name|1': true 随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率是 1/2。
2. 'name|min-max': true 随机生成一个布尔值，值为 true 的概率是 min / (min + max)，值为 false 的概率是 max / (min + max)。

//属性值是对象 Object
1. 'name|min-max': {} 从属性值 {} 中随机选取 min 到 max 个属性。
2. 'name|count': {} 从属性值 {} 中随机选取 count 个属性。

//属性值是数组 Array
1. 'name|1': [{}, {} ...] 从属性值 [{}, {} ...] 中随机选取 1 个元素，作为最终值。
2. 'name|min-max': [{}, {} ...] 通过重复属性值 [{}, {} ...] 生成一个新数组，重复次数大于等于 min，小于等于 max。

//属性值是数组 Function
1. 'name': function(){} 执行函数 function(){}，取其返回值作为最终的属性值，上下文为 'name' 所在的对象。

（2）数据占位符定义（Data Placeholder Definition，DPD）
占位符只是在属性值字符串中占个位置，并不出现在最终的属性值中。占位符的格式为：

@占位符
@占位符(参数 [, 参数])

注意：
1. 用 @ 来标识其后的字符串是 占位符。
2. 占位符 引用的是 Mock.Random 中的方法。
3. 通过 Mock.Random.extend() 来扩展自定义占位符。
4. 占位符 也可以引用 数据模板 中的属性。
5. 占位符 会优先引用 数据模板 中的属性。

四、Mock.Random工具类

// 常用基础数据模板
1、Boolean
    Random.boolean(min, max, cur)
    Random.boolean(1, 9, true) // 返回true的概率为90%

2、String
    Random.character(pool) // 返回随机的一个字符
    Random.string(pool, min, max) // 返回随机字符串
    Random.title(len) // 随机生成一句标题
    Random.ctitle(len) // 随机生成一句中文标题
    Random.url() // 瑞吉生成一个URL
    Random.area() // 随机生成一个（中国）大区
    Random.region() // 随机生成一个（中国）省（或直辖市、自治区、特别行政区）
    Random.id() // 随机生成一个 18 位身份证。

3、Number
    Random.natural(min, max) // 返回一个随机的自然数（大于等于 0 的整数）。
    Random.integer(min, max) // 返回一个随机的整数

    Random.float(min, max, dmin, dmax) // 返回一个随机的浮点数
    eg. Random.float(60, 100, 0, 2) // 返回：85.63

Array
    Random.range(start, stop, step) // 返回一个整形的数组
    eg. Random.range(1, 10, 2) // 返回 [1, 3, 5, 7, 9]

Date
    Random.date(format) // 返回一个随机的日期字符串(yyyy-MM-dd)
    Random.time(format) // 返回一个随机的时间字符串(HH:mm:ss)
    Random.datetime(format) // 返回一个随机的日期和时间字符串 (yyyy-MM-dd HH:mm:ss)
    Random.image(size, background, foreground, format, text) // 生成一个随机的图片地址 
    eg. Random.image() // 返回：http://dummyimage.com/125x125
    
//Random Helpers (Random 自带的快捷方法)
Random.capitalize(word) // 把字符串的第一个字母转换为大写。
Random.upper(str) // 把字符串转换为大写。
Random.lower(str) // 把字符串转换为小写。
Random.pick(arr) // 从数组中随机选取一个元素，并返回。
Random.shuffle(arr) // 打乱数组中元素的顺序，并返回。

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

五、Vue项目中使用

1、安装mock.js

npm install mockjs --save-dev

2、配置环境变量，仅开发环境才使用（看公司情况，小公司通常不需要进行配置）

（1）vue2

// config/dev.env.js 文件
module.exports = merge(prodEnv, {
	...,
    Mock: true
})

// config/prod.env.js 文件
module.exports = merge(prodEnv, {
	...,
    Mock: false
})

（2）vue3

//.env.development文件
Mock = true;

//.env.production文件
Mock = false;

3、mock创建
（1）基于数据模板生成数据

//./mock/mock
import Mock from "mockjs";

const getTriple = function () {
    const List = [];
    const num = 10;

    for (let i = 0; i < num; i++) {
        //  如果你一开始有点不太了解，可以写成固定的值，如： 'parent': '西安市',方便你查看效果然后逐步改
        List.push(
            Mock.mock(

                {
                    "entityX": {
                        "id": 0, // id每次循坏自增1
                        "title|1": [
                            "焊点类别",
                        ],
                        "label|1": ['人', '机', '物'],
                    },
                    "relation": {
                        "id": 1000,
                        "type|1": ["包含", "属于"]
                    },
                    "entityY": {
                        "id|1-100": 1, // id每次循坏自增1
                        "title|1": [
                            "重合焊点",
                            "非重合焊点",
                        ]
                    },
                })
        );
    }
    return {
        code: 200,
        text: "成功",
        data: List
    };
}


export default {
    // 模拟获取三元组
    getTriple,
};

（2）拦截并模拟ajax请求

//./mock/mock
import basrUrl from "@/config/basrUrl";
import Mock from 'mockjs'

Mock.mock(`${basrUrl.default}/welding/model/train`, 'post', {
    "code": 200,
    "text": "成功",
    "data": {
        "precision": 85,
        "contrast|1": ['精度更低', '精度更高', '精度不变']
    }
})

export default Mock

// 页面中调用接口
import {apiModelTraining} from "@/api/solderJointVisual";

// mock会拦截请求，并返回创建的数据
apiModelTraining(this.form).then((res) => {
	this.trainingResult = res.data;
});

（3）基于HTML模板生成数据（少用）

// 基于 HTML 模板生成模拟数据
Mock.tpl('this is {{title}}!')
// => {title: "title"}

// 基于 HTML 模板和数据模板生成模拟数据
Mock.tpl('this is {{title}}!', {
    title: '@TITLE'
})
// => {title: "Guhwbgehq Isuzssx Ywvwt Dkp"}

// 基于 HTML 模板生成模拟数据，传入了局部命令。
Mock.tpl('this is {{title}}!', {}, {
    title: function(){
        return 'my title'
    }
})
// => {title: "title"}

// 基于 HTML 模板生成模拟数据，传入了局部子模板。
Mock.tpl('{{> "sub-tpl"}}', {}, {}, {
    'sub-tpl': '{{title}}'
})
// => {title: "title"}

4、main.js 引入写好的mock