什么是 mockjs
mockjs 是一个可以模拟数据的 JavaScript 库，它可以帮助前端开发人员在开发过程中快速生成随机的测试数据，从而提高开发效率。mockjs 支持各种数据类型，包括数字、字符串、布尔值、数组和对象等。
安装及使用
使用 npm 可以很方便地安装 mockjs：
npm install mockjs --save-dev
然后在项目中引入 mockjs：
import Mock from 'mockjs';
接下来就可以使用 mockjs 的 API 来生成模拟数据了。
常用 API
Mock.mock()
Mock.mock() 方法用于生成模拟数据。它接受两个参数：模板和数据源，其中模板是一个字符串，用于定义所需数据的格式。
以下是一个示例：
Mock.mock({
'name': '@name',
'age|1-100': 100,
'email': '@email',
});这个模板将生成一个对象，其中包含三个属性：name、age 和 email。其中 name 和 email 属性是字符串，分别使用了 @name 和 @email 表示。
age 属性是一个整数，取值范围为 1 到 100，使用 'age|1-100' 表示。
Mock.Random
Mock.Random 是 mockjs 的随机数据生成器，支持各种数据类型的随机生成，包括字符串、数字、布尔值、数组和对象等。
以下是一些常用的 Mock.Random API：
- Mock.Random.string(len)：生成指定长度（len）的随机字符串。
- Mock.Random.boolean()：生成随机布尔值。
- Mock.Random.integer(min, max)：生成指定范围内的随机整数。
- Mock.Random.date(format)：生成符合指定格式的随机日期。
- Mock.Random.image(size, background, foreground, format, text)：生成随机图片，可以指定图片尺寸、背景颜色、前景颜色、格式和文字等。
Mock.mockjax()
Mock.mockjax() 方法用于拦截 Ajax 请求并返回模拟数据。它的参数与 jQuery $.ajax() 方法相同。
以下是一个示例：
-- -------------------- ---- -------
--------------
---- -------------
----- ------
------------- -----
------------- -
----------- -
-
-------- --
------- --------
------------ ----
-------- ---------
--
--
--
---这个示例将拦截 /api/users 的 GET 请求，并返回一个包含 10 个用户信息的数组。
示例代码
以下是一个使用 mockjs 模拟数据的示例：
-- -------------------- ---- -------
------ ---- ---- ---------
-- ----
----- -------- - -
----------- -
-
-------- --
------- --------
------------ ----
-------- ---------
--
--
--
-- ------
----- ---- - --------------------
-- ----
------------------输出结果：
-- -------------------- ---- -------
-
-------- -
-
----- --
------- -----
------ ---
-------- ----------------------
--
-
----- --
------- -----
------ ---
-------- ------------------
--
-- ---
-
-总结
mockjs 是一个非常实用的前端开发工具，在实际开发中可以帮助我们快速生成随机的测试数据，提高开发效率。本文介绍了 mockjs 的基本使用方法和常用 API，并给出了示例代码。希望本文对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/53970