mock.js 使用说明（简单而有效）

邢帥兵_

2440人浏览 · 2022-10-24 19:38:29

邢帥兵_ · 2022-10-24 19:38:29 发布

一、Mock.js 初入门径

1．什么是mock.js?

Mock.js （官网http://mockjs.com/）是一款模拟数据生成器，旨在帮助前端攻城狮独立

于后端进行开发，帮助编写单元测试。提供了以下模拟功能：

1,根据数据模板生成模拟数据

2,模拟 Ajax 请求，生成并返回模拟数据

3,基于 HTML 模板生成模拟数据

Mock.js 具有以下特点：

1.前后端分离,让前端攻城师独立于后端进行开发。

2.增加单元测试的真实性

3.通过随机数据，模拟各种场景。

4.开发无侵入

5.不需要修改既有代码，就可以拦截 Ajax 请求，返回模拟的响应数据。

6.用法简单

7.符合直觉的接口

8.数据类型丰富

9.支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。

10.方便扩展

11.支持支持扩展更多数据类型，支持自定义函数和正则。

在进行前后端分离式的开发中，前端负责制作页面和显示数据，后端负责提供数据，前端通过后端提供的RESTFul规范的接口来获取 JSON 格式的数据：

在这里插入图片描述

对于前端开发人员来说，必须要从服务器获取数据，所以就只能等待后端开发好接口之后，前端才可以获取数据，这会影响前端开发的效果。

聪明的前端开发人员就会想：如果前端可以自己模拟出数据，那么在开发时就不需要服务器提供的数据了。于是就出现了mockjs

2． Mock.js安装

1）使用CDN

2）使用本地文件

下载Mock.js: https://github.com/nuysoft/Mock

导入到本地页面使用：
在这里插入图片描述

引入：

<script src="js/mock-min.js"></script>

3，mockjs语法

“id”:“@id”
“star|1-2”:“⭐” 字符串重复1-2次
“price|100-200.2-3”小数点2-3位
“data | 10"”;[{name:“名称”)]数组的内容重复10遍
“live | 1”:true,随机返回true,false
“tel”:/13\d{9}/ 手机号码
“des”:function(){ return this.start+this.price}
“name”:”@cname" 表示中文名称
“address”:“@country(true)” 地址
“description”:“@cparagraph(1，3）”随机段落2-3行
“pic”:@datalmage(200x100）;图示”

在这里插入图片描述

4． Mock.js入门案例

3.1．模拟数据

代码展示：

// 导入mock
import Mock from 'mockjs';

// 拦截ajax，生成伪数据，拦截地址“ http://abc.com/v5/list ”
// Mock.mock("http://abc.com/v5/list",{
// 	name:"mumu",
// 	age:18
// })
Mock.mock(/\/v5\/user/, {
	code: 0,
	msg: "成功",
	"data|10": [{
		"id|+1": 1024,
		"name": "@cnam",
		"age|1-100": 1,
		"proce|25-50.2-5": 1,
		"score|1-5": "☆",
		"title": "@ctitle(8,14)",
		"description": "@cparagraph",
		"isLog|1": true,
		"friend|2-10": ["小红", "小绿", "小蓝"],
		"des|2": {
			"eye": 1,
			"hand": 2,
			"job": "terracher"
		},
		"tel": /1\d{10}/,
		"email": /[a-z]{2,6}@(126|163|qq)\.(com|cn|net)/,
		"canMerry": function() {
			if (this.age > 22) {
				return true;
			} else {
				return false
			}
		},
		"day": "@date('yyyy-MM-dd')",
		"time": "@time('HH:mm:ss')",
		"add": "'@county(true)",
		"avatar": "@dataImage('200x100','')"
	}]

})


Mock.mock("/\/v5\/list/", {
	name: "mumu",
	age: 18
})

Mock.mock("/\/v5\/jok/", function(option) {
	return {
		code: 0,
		msg: "参数成功",
		data: {
			title: "信息标题",
			content: "内容",
			...JSON.parse(option.body)
		}
	}
})


Mock.mock(/\/api\/app\/v3\/category/, {
	"message": "success",
	"code": 200,
	"data": {
		"top": [{
			"cat_id": 0,
			"cat_name": "\u63a8\u8350\u5206\u7c7b"
		}, {
			"cat_id": 1,
			"cat_name": "\u6587\u5316\u7eb8"
		}, {
			"cat_id": 2,
			"cat_name": "\u5305\u88c5\u7eb8"
		}, {
			"cat_id": 3,
			"cat_name": "\u827a\u672f\u7eb8"
		}, {
			"cat_id": 4,
			"cat_name": "\u5de5\u4e1a\u7528\u7eb8"
		}, {
			"cat_id": 7,
			"cat_name": "\u767d\u5361\u7eb8"
		}, {
			"cat_id": 11,
			"cat_name": "\u590d\u5370\u7eb8"
		}, {
			"cat_id": 12,
			"cat_name": "\u65b0\u95fb\u7eb8"
		}, {
			"cat_id": 14,
			"cat_name": "\u9ed1\u5361\u7eb8"
		}, {
			"cat_id": 15,
			"cat_name": "\u53cc\u80f6\u7eb8"
		}, {
			"cat_id": 6,
			"cat_name": "\u74e6\u695e\u7eb8"
		}, {
			"cat_id": 94,
			"cat_name": "\u519c\u526f\u4ea7\u54c1"
		}, {
			"cat_id": 86,
			"cat_name": "\u65e0\u78b3\u7eb8"
		}, {
			"cat_id": 89,
			"cat_name": "\u4e0d\u5e72\u80f6"
		}, {
			"cat_id": 91,
			"cat_name": "\u677f\u7247"
		}],
		"recommend": {
			"categorys": [{
				"cat_id": 35,
				"cat_name": "\u8f7b\u6d82\u7eb8",
				"logo": "https:\/\/cdn.toodudu.com\/159514020603cf70ec9a2f3f952f2e18.jpg"
			}, {
				"cat_id": 38,
				"cat_name": "\u65b0\u95fb\u7eb8",
				"logo": "https:\/\/cdn.toodudu.com\/f45dbe288b1cc478fe507ad054317267.jpg"
			}, {
				"cat_id": 51,
				"cat_name": "\u767d\u5e95\u94dc\u7248\u5361\u7eb8",
				"logo": "https:\/\/cdn.toodudu.com\/169ef046e96665819ba91d9aee18f701.jpg"
			}, {
				"cat_id": 52,
				"cat_name": "\u7070\u5e95\u94dc\u7248\u5361\u7eb8",
				"logo": "https:\/\/cdn.toodudu.com\/16178dcc248c8098d7d460654f900ba5.jpg"
			}, {
				"cat_id": 1,
				"cat_name": "\u6587\u5316\u7eb8",
				"logo": "https:\/\/cdn.toodudu.com\/a5d9f2db2abed10a1306bc7495601801.jpg"
			}, {
				"cat_id": 2,
				"cat_name": "\u5305\u88c5\u7eb8",
				"logo": "https:\/\/cdn.toodudu.com\/bad951f04bbdd4c9b0f4bffa298b9042.jpg"
			}, {
				"cat_id": 3,
				"cat_name": "\u827a\u672f\u7eb8",
				"logo": "https:\/\/cdn.toodudu.com\/36e7ec095717b72014cfd53752baa01d.jpg"
			}, {
				"cat_id": 4,
				"cat_name": "\u5de5\u4e1a\u7528\u7eb8",
				"logo": "https:\/\/cdn.zdoodoo.com\/aab27872e1e188d2fe070d2a40051c9a.alicdn"
			}, {
				"cat_id": 7,
				"cat_name": "\u767d\u5361\u7eb8",
				"logo": "https:\/\/cdn.toodudu.com\/3c294fc36b3e2e794d765da2ee60f6d1.jpg"
			}, {
				"cat_id": 11,
				"cat_name": "\u590d\u5370\u7eb8",
				"logo": "https:\/\/cdn.zdoodoo.com\/e3deb62e3f2c77c9e531c435cf075db4.jpg"
			}, {
				"cat_id": 12,
				"cat_name": "\u65b0\u95fb\u7eb8",
				"logo": "https:\/\/cdn.zdoodoo.com\/40b89317a8230db4e582541649b4c93d.jpg"
			}, {
				"cat_id": 14,
				"cat_name": "\u9ed1\u5361\u7eb8",
				"logo": "https:\/\/cdn.toodudu.com\/cf609a216df70af19f6247d518d0b5a7.jpg"
			}, {
				"cat_id": 15,
				"cat_name": "\u53cc\u80f6\u7eb8",
				"logo": "https:\/\/cdn.toodudu.com\/08a4f33d564cb2727a834f3f807a4706.jpg"
			}, {
				"cat_id": 6,
				"cat_name": "\u74e6\u695e\u7eb8",
				"logo": "https:\/\/cdn.toodudu.com\/5443180758be1cb65077ae9aff595796.jpg"
			}, {
				"cat_id": 69,
				"cat_name": "\u9759\u7535\u590d\u5370\u7eb8",
				"logo": "https:\/\/cdn.toodudu.com\/26bbb6338c0ed7ab3ed22781707e9827.jpg"
			}, {
				"cat_id": 70,
				"cat_name": "\u7eb8\u7bb1",
				"logo": "https:\/\/cdn.zdoodoo.com\/64dcc60944cbc3bc6af538aa1eeb2835.alicdn"
			}, {
				"cat_id": 71,
				"cat_name": "\u7070\u5e95\u767d\u677f\u7eb8",
				"logo": "https:\/\/cdn.toodudu.com\/58f3efbe6b60b7e8cdc67c08503d489a.jpg"
			}, {
				"cat_id": 72,
				"cat_name": "\u7bb1\u677f\u7eb8",
				"logo": "https:\/\/cdn.toodudu.com\/beeaf57e831a5dde998341e2493cd31a.jpg"
			}, {
				"cat_id": 36,
				"cat_name": "\u94dc\u7248\u7eb8",
				"logo": "https:\/\/cdn.toodudu.com\/44cf483c3ebb41c8bc859be63f515cb3.jpg"
			}, {
				"cat_id": 42,
				"cat_name": "\u725b\u76ae\u5361\u7eb8",
				"logo": "https:\/\/cdn.toodudu.com\/b9fb9f5c0697168123e454400419f822.jpg"
			}, {
				"cat_id": 43,
				"cat_name": "\u7bb1\u677f\u7eb8",
				"logo": "https:\/\/cdn.toodudu.com\/39aec0797e9ff59dbbe024df2133cb04.jpg"
			}, {
				"cat_id": 45,
				"cat_name": "\u74e6\u695e\u7eb8\u677f",
				"logo": "https:\/\/cdn.toodudu.com\/dae179c37ce76eb89eb4bf913cca3898.jpg"
			}, {
				"cat_id": 66,
				"cat_name": "\u80f6\u7248\u7eb8",
				"logo": "https:\/\/cdn.toodudu.com\/a5e9549092026564e7958231727e0a74.jpg"
			}],
			"brands": [{
				"brand_id": 13,
				"brand_name": "\u4f73\u76ca\u7eb8\u4e1a",
				"brand_logo": "https:\/\/cdn.toodudu.com\/13d295fdff8f0a5078ee97e10b6f702c.jpg"
			}, {
				"brand_id": 2,
				"brand_name": "\u535a\u5927\u7eb8\u4e1a",
				"brand_logo": "https:\/\/cdn.toodudu.com\/2d4b1900354a879d459cab54cd7ff5cc.jpg"
			}, {
				"brand_id": 7,
				"brand_name": "\u53cb\u987a\u7eb8\u4e1a",
				"brand_logo": "https:\/\/cdn.toodudu.com\/979753d9e2229c5146ba8c74efc095fc.jpg"
			}, {
				"brand_id": 9,
				"brand_name": "\u6d2a\u56fe",
				"brand_logo": "https:\/\/cdn.toodudu.com\/45c561db526f3dc8b9aadeb94bf35965.jpg"
			}, {
				"brand_id": 19,
				"brand_name": "\u6c38\u6052\u7eb8\u4e1a",
				"brand_logo": ""
			}, {
				"brand_id": 22,
				"brand_name": "\u6c5f\u95e8\u661f\u8f89\u9020\u7eb8",
				"brand_logo": "https:\/\/cdn.toodudu.com\/ee42e315348da804381125c5eb5b0cb2.png"
			}, {
				"brand_id": 137,
				"brand_name": "\u6c5f\u82cf\u76db\u5b9d\u4ed1\u7eb8\u4e1a",
				"brand_logo": ""
			}, {
				"brand_id": 138,
				"brand_name": "\u9e3f\u5a1c\u7eb8\u4e1a",
				"brand_logo": ""
			}]
		},
		"banner": [{
			"id": 239,
			"cateid": 71,
			"image": "https:\/\/cdn.zdoodoo.com\/2020\/04\/24\/FwQyo3sKuwEnb2lkJ8s26O5vLRr8bIXHbICtiNtt.jpeg",
			"title": null,
			"url": "",
			"web_url": "",
			"app_path": "",
			"web_path": "",
			"mini_url": "",
			"theme_color": "rgb(118, 198, 241)"
		}]
	}
}, )

效果展示

在这里插入图片描述

2048 AI社区

有“AI”的1024 = 2048，欢迎大家加入2048 AI社区

更多推荐

一文学会zabbix

2048 AI社区

AI一周事件（2026年01月21日-01月27日）

2026年初，全球AI领域迎来多项重要进展。百度发布原生全模态大模型"文心5.0"(2.4万亿参数)，阿里推出旗舰推理模型"Qwen3-Max-Thinking"，月之暗面开源多模态模型"Kimi K2.5"，显示大模型向多模态融合和推理能力演进。欧盟启动首个AI合规沙盒，DeepMind提出AI+物理建模新方法。算力方面，微软发布3nm