【Mock.js】详解

在前后端同时开发的时候，后端接口数据没有出来时，前端可以使用mock假数据模拟开发。

一、基础语法

1、数据模板定义

属性值	方法
String	1、'name\|min-max': string 2、'name\|count': string	1、通过重复 `string` 生成一个字符串，重复次数大于等于 `min`，小于等于 `max`。 2、通过重复 `string` 生成一个字符串，重复次数等于 `count`。
Number	1、'name\|+1': number 2、'name\|min-max': number 3、'name\|min-max.dmin-dmax': number	1、属性值自动加 1，初始值为 `number`。 2、生成一个大于等于 `min`、小于等于 `max` 的整数，属性值 `number` 只是用来确定类型。 3、生成一个浮点数，整数部分大于等于 `min`、小于等于 `max`，小数部分保留 `dmin` 到 `dmax` 位。
Boolean	1、'name\|1': boolean 2、'name\|min-max': value	1、随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。 2、随机生成一个布尔值，值为 `value` 的概率是 `min / (min + max)`，值为 `!value` 的概率是 `max / (min + max)`。
Object	1、'name\|count': object 2、'name\|min-max': object	1、从属性值 `object` 中随机选取 `count` 个属性。 2、从属性值 `object` 中随机选取 `min` 到 `max` 个属性。
Array	1、'name\|1': array 2、'name\|+1': array 3、'name\|min-max': array 4、'name\|count': array	1、从属性值 `array` 中随机选取 1 个元素，作为最终值。 2、从属性值 `array` 中顺序选取 1 个元素，作为最终值。 3、通过重复属性值 `array` 生成一个新数组，重复次数大于等于 `min`，小于等于 `max`。 4、通过重复属性值 `array` 生成一个新数组，重复次数为 `count`。
Function	1、'name': function	1、执行函数 `function`，取其返回值作为最终的属性值，函数的上下文为属性 `'name'` 所在的对象。
RegExp	1、'name': regexp	1、根据正则表达式 `regexp` 反向生成可以匹配它的字符串。用于生成自定义格式的字符串。

2、占位符

@boolean：生成 true 或 false

@natural：生成自然数例如：Mock.mock('@natural(60,100)') //83

@integer：生成整数例如：Mock.mock('@natural(-100,100)') //-83

@float：生成浮点数例如：Mock.mock('@float') //-841542171458324.6

@character：生成字符例如： Mock.mock(Mock.mock('@float')) //'Y'

@string：生成字符串例如： Mock.mock('@string') //"$vi0&Rp"

@range()：生成数组例如： Mock.mock('@range(10)') //[0,1,2,3,4,5,6,7,8,9]

@date：生成日期例如：Mock.mock('@date("yyyy-MM-dd")') //"2008-03-30"

@time：生成时间例如：Mock.mock('@time') //"15:39:04"

@datetime：生成日期时间例如：Mock.mock('@datetime') //"1996-10-24 19:38:15"

@now：生成现在日期时间例如：Mock.mock('@now') //"2023-08-31 11:47:28"

Random.now('year')
Random.now('month')
Random.now('week')
Random.now('day')
Random.now('hour')
Random.now('minute')
Random.now('second')//"2023-01-01 00:00:00"
//"2023-08-01 00:00:00"
//"2023-08-27 00:00:00"
//"2023-08-31 00:00:00"
//"2023-08-31 11:00:00"
//"2023-08-31 11:48:00"
//"2023-08-31 11:48:42"

@cparagraph：生成中文文本例如：Mock.mock('@cparagraph(1, 3)') //"政例难林经它近育去程如必委意队别究。主法据较半切层候则得响半它位任还。三影认证及老号要美院经往该果等四矿九。"

@ctitle：生成中文标题例如：Mock.mock('ctitle') //"料边流亲京广"

@cname：生成中文姓名例如：Mock.mock('ctitle') //"许明"

@url：生成 URL 例如：Mock.mock('@url') //"http://oqhg.li/ams"

@email：生成邮箱例如： Mock.mock('@email') //"q.daxyoght@hnha.net.cn"

@ip：生成 IP地址例如： Mock.mock('@ip') //"198.210.202.239"

@province：生成省份例如： Mock.mock('@province') //"海南省"

@id：生成ID 例如： Mock.mock('@id') //"140000197005122457"

3、生成随机数据

Mock.Random对象包含了Mock.js中的所有随机数据生成方法。下面是一些常用的方法：

Mock.Random.boolean()：生成一个随机的布尔值。
Mock.Random.integer(min, max)：生成一个随机的整数，可以指定范围。
Mock.Random.float(min, max, dmin, dmax)：生成一个随机的浮点数，可以指定范围和精度。
Mock.Random.string(length)：生成一个随机的字符串，可以指定长度。
Mock.Random.name(middle?)：生成一个随机的常见英文姓名。
Mock.Random.cname()：生成一个随机的常见中文姓名。
Mock.Random.date()：生成一个随机的日期。
Mock.Random.time()：生成一个随机的时间。
Mock.Random.datetime()：生成一个随机的日期时间。
Mock.Random.image(size, background, foreground, format, text)：生成一个随机的图片，可以指定大小、背景色、前景色、格式和文字。

二、在Vue中怎么使用

1、安装mockjs和axios：在项目根目录下打开终端，运行以下命令：

npm install mockjs axios --save-dev

2、创建mock数据：在项目根目录下创建一个mock文件夹，并在其中创建一个mock.js文件，用于编写模拟数据

import Mock from 'mockjs';Mock.mock('/api/user', 'get', {code: 200,message: 'success',data: {id: 1,name: 'John'}
});

3、main.js中引入mock数据：在src文件夹下的main.js中引入mock数据，并在Vue实例创建之前拦截请求。可以通过以下代码实现：

import Vue from 'vue';
import axios from 'axios';
import './mock/mock'; // 引入mock数据Vue.config.productionTip = false;axios.interceptors.request.use(config => {// 在发送请求之前做些什么return config;},error => {// 对请求错误做些什么return Promise.reject(error);}
);new Vue({render: h => h(App),
}).$mount('#app');

4、在代码中发起请求即可