【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')        //"[email protected]"

@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、在代码中发起请求即可

三、小结

mock.js常用于生成随机数据和拦截Ajax请求的js库