---

前言

初学前端做项目时，总要使用各大教学机构的后端接口，一方面，接口有时不稳定，另一方面，接口固定，不能根据自己需求改数据格式，影响前端开发练习，Mock.js提供了拦截axios请求，生成随机数据的功能，可以帮助我们更好地独立开发前端。

---

Mock.js学习笔记

一、Mock.js简介

在开发前端时，后端可能还没有接口，我们可以根据后端的响应 mock 假数据

//安装
npm i mockjs

快速体验

//引入mock方法
import {mock} from "mockjs"

let data = mock({
    "data":"@cname()",
    "age":"@integer(1,100)",
    "addr":"@city(true)",
    "email":"@email(qq.com)",
})
console.log(data)
//生成随机数据{data:'xxx',age:xxx,addr:'xxx',email:'xxx'}

二、数据模板定义规范

数据模板中每个属性由3个部分构成：属性名、生成规则、属性值

"属性名|生成规则":属性值
//生成规则有七种
"name|count":value
"name|min-max":value
"name|count.dcount":value        //只适用于数字类型的属性值
"name|count.dmin-dmax":value     //只适用于数字类型的属性值
"name|min-max.dcount":value      //只适用于数字类型的属性值
"name|min-max.dmin-dmax":value   //只适用于数字类型的属性值
"name|+step":value

值是字符串

let data = mock(
    {
    	"str1|3":"a",      //重复后面字符串3次
        "str2|1-5":"b",    //重复后面字符串1-5次（随机）
	}
)

值是数字

let data = mock({
    //将数组中内容重复10次
    "array1|10":[                  
        {
            "number1|3":1,          //直接生成3
            "number2|1-100":1,      //1-100随机数字
            "number3|2.2":1,        //整数部分为2，小数部分保留2位
            "number4|2.1-5":1,      //整数部分为2，小数部分保留1-5位
            "number5|1-5.2":1,      //整数部分为1-5，小数部分保留2位
            "number6|1-5.1-5":1,    //整数部分为1-5，小数部分保留1-5位
            "number7|+2":3,         //在第一次的基础上每次+2
        }
    ]
})

值是布尔值

let data = mock(
    {
    	"boolean1|1":true,      //值为true的概率是2分之1
    	"boolean2|1-5":true,      //这里生成true的概率为 1/(1+5)=1/6，生成false的概率为5/6
	}
)

值是对象

let data = mock(
    {
    	"obj1|2":{'prop1':'属性1','prop2':'属性2','prop3':'属性3'}, //从对象中随机选取2个属性
        "obj2|1-3":{'prop1':'属性1','prop2':'属性2','prop3':'属性3'} //从对象中随机选取1-3个属性
	}
)

值是数组

let data = mock(
    {
    	"name1|1":[1,2,3,4],//从数组中随机选取1个元素(特殊)
        "array1|2":[1,2,3,4],//将数组中内容重复2次
        "array2|1-3":[1,2,3,4],//将数组中内容重复1-3次
        "array3|+2":[1,2,3,4],//第一次选取数组中第一个元素，之后每次从数组中顺序选取1个元素，每次间隔2，+n代表间隔n
	}
)

值是函数

let data = mock(
    {
    	"name1":() => 10,     //函数返回值作为属性值   
	}
)

值是正则表达式

//根据正则表达式反向生成可以匹配它的字符串。用于生成自定义格式的字符串
let data = mock(
    {
    	"name1":/[a-z][A-Z][0-9]/,   
        "手机号":/^1[3-9]\d{9}$/,
	}
)

三、数据占位符

占位符只在属性值字符串中占个位置，并不出现在最终的属性值中

@占位符
@占位符(参数)

占位符引用 Mock.Random 中的方法，如：

• MockjsRandomBasic，基础
• MockjsRandomDate，时间相关
• MockjsRandomImage，图片相关
• MockjsRandomColor，颜色相关
• MockjsRandomAddress，地址相关
• MockjsRandomHelper，工具相关
• MockjsRandomMiscellaneous，id相关
• MockjsRandomName，姓名相关
• MockjsRandomText，文本相关
• MockjsRandomWeb，网址、协议、域名、IP、邮箱

可以在 mockjs/index.d.js 文件查询（部分拼写错误）

@ 占位符，必须使用 Mock.mock() 方法去生成数据，Mock.Random 则直接生成，没有限制，但 Mock.Random 的执行时机早于 Mock.mock() ，所以如果在需要生成多条数据的模板中生成数据时一定要注意不要使用 Mock.Random，要使用占位符@

常用方法

integer(min?: N, max?: N): N;

float(min?: N, max?: N, dmin?: N, dmax?: N): N;

let data = mock(
    {
        "数字":"@integer(1,5)",
        "小数":"@float(1,5,1,5)",
	}
)

date(format?: S): S;

time(format?: S): S;

datetime(format?: S): S;

now(format?: S): S;

let data = mock(
    {
        "日期1":"@date",           //年-月-日
        "日期2":"@time",           //时:分:秒
        "日期3":"@datetime",       //年-月-日 时:分:秒
        "日期4":"@now",            //当前时间：年-月-日 时:分:秒
	}
)

image(size?: S, background?: S, foreground?: S, format?: RandomImageFormatString | S, text?: S);

//图片来源：https://www.dummyimage.com/
//参数：大小、背景色、文本色、后缀、文本
let data = mock(
    {
        "img1":"@image",                                          //默认随机生成不同尺寸占位图
    	"img2":"@image('250x150','fff','000','png','hello')",
        "img3":Random.image('250x150','fff','000','png','hello'), //两种写法，mock()中推荐占位符
	}
)

color(): S;

hex(): S;

rgb(): S;

rgba(): S;

hsl(): S;

let data = mock(
    {
        "颜色1":"@color",   //默认hex格式颜色，十六进制值  
    	"颜色2":"@hex",    
        "颜色3":"@rgb",       
        "颜色4":"@rgba", 
        "颜色5":"@hsl", 
	}
)

cparagraph(min?: N, max?: N): S;

csentence(min?: N, max?: N): S;

ctitle(min?: N, max?: N): S;

let data = mock(
    {
        "中文段落":"@cparagraph(2,5)",     //2-5句
    	"中文句子":"@csentence(10,20)",    //10-20字
        "中文标题":"@ctitle(5,10)",        //5-10字
	}//英文去掉c
)

cname(): S;

let data = mock(
    {
        "中文姓名":"@cname",
	}//英文去掉c
)

url(protocol?: S, host?: S): S;

protocol(): RandomWebProtocol;

domain(): S;

email(domain?: S): S;

ip(): S;

let data = mock(
    {
        "网址":"@url",
        "协议":"@protocol"
        "域名":"@domain",
        "邮箱":"@email('qq.com')",
        "ip":"@ip",
	}
)

region(): S;

province(): S;

city(prefix?: B): S;

county(prefix?: B): S;

zip(): S;

let data = mock(
    {
      	"地区": '@region',
      	"省份": '@province',
      	"城市": '@city(true)',  //默认false，传入true会生成完整省、市
      	"区县": '@county',      //默认false，传入true会生成完整省、市、县
      	"邮编": '@zip',
    },
)

id();

guid();

let data = mock(
    {
      	"身份证号":'@id',
        "guid":'@guid',
    },
)

扩展占位符

//扩展自己的Random方法
Random.extend({
    "abc":function(){
        return this.pick([1,2,3,4])
    }
})
let data = mock(
    {
      	"扩展占位符":'@abc',
    },
)

生成列表数量为变量时如何写

//Mock.mock(template)，template为对象，数据条数为变量即需要使用变量给template做键名。使用变量给对象做键名，必须使用中括号来设置
let len = 10
let template = {}
let templatelist = {
  name: '@cname',
}
template['array|' + len] = [templatelist]
let data = mock(template)

四、拦截 axios 请求（核心）

Mock.js 通过覆盖和拦截原生的XMLHttpRequest对象，实现了对Ajax请求的代理。当应用发起API请求时，Mock.js会根据预定义的规则匹配URL和请求类型，然后返回模拟数据，而不会真正发送请求到服务器。

//完整匹配
mock(完整url,data)
//method
mock(完整url,method,data)
//正则
mock(/.*?\/部分url/,method,data)
//函数模式，可以在函数体中代理增删改查，需要用到options中的信息
mock(完整url,method,function(options){
    console.log(options)//{url,type,body}
    return data//data中一般不包含数据模板，如果包含需要套一层mock()
})

//完整匹配示例
import { mock } from 'mockjs'
import axios from 'axios'
mock('假接口', {
  code: 200,
  msg: 'success',
  data: {
    id: '@guid',
    name: '@cname',
    age: '@integer(18, 30)',
  },
})
async function getInfo() {
  try {
    let res = await axios.get('假接口')
    console.log(res)
  } catch (err) {
    console.log('获取用户信息失败', err)
  }
}
getInfo()

五、实际项目使用

/*
目录结构:
src
	api
		index.js
		users.js
	mock
		index.js
		users.js
	main.js
	App.vue
*/
//main.js中引入mock拦截
import "@/mock/index.js"
//注释掉则使用真正后端接口，不注释则使用mock

---

总结

Mock.js 是一款用于生成随机数据的前端工具库，常用于模拟后端接口返回的数据，便于前端开发和测试。它支持多种数据格式，包括字符串、数字、布尔值、对象、数组等，并能通过模板语法自定义数据结构。