Mock.js 实例：快速入门

Mock.js 是常用的生成随机数据，拦截 Ajax 请求的 JavaScript 库。在开始前大家可以看看：了解 Mock.js 的语法规范

本文来介绍下 Mock.js 的用法。如果你觉得 Mock.js 的语法过于繁琐，你也可以通过 Apifox 来 Mock 数据，Apifox 中集成了 Mock.js ，让你的数据模拟变得更加简单。

安装

npm install mockjs --save

基础用法

随机生成一个用户信息:

name 是随机的中文名。
age 是 15～25 的随机数。
city 是随机的城市。

const Mock = require('mockjs')
const user = {
  'name': Mock.Random.cname(),
  'age': Mock.Random.integer(15, 25),
  'city': Mock.Random.county(true)
}
// 输出结果
console.log(JSON.stringify(user, null, 4))

可能的输出的结果：

{
    "name": "卢超",
    "age": 15,
    "city": "吉林省 辽源市 东丰县"
}

随机生成一个用户信息数组。数组长度是 1～10 的随机数。

const Mock = require('mockjs')
const list = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
        'id|+1': 1, // id 从 1 开始自增。
        'name': '@cname',
        'age|15-25': 1, 
        'city': '@county(true)'
    }]
})
// 输出结果
console.log(JSON.stringify(list, null, 4))

可能的输出的结果：

{
    "list": [
        {
            "id": 1,
            "name": "沈秀兰",
            "age": 20,
            "city": "山东省 聊城市 高唐县"
        },
        {
            "id": 2,
            "name": "邓静",
            "age": 24,
            "city": "山西省 阳泉市 矿区"
        },
        {
            "id": 3,
            "name": "杨涛",
            "age": 25,
            "city": "吉林省 通化市 通化县"
        }
    ]
}

下面来具体介绍下 Mock.js 的 API。

模拟数据

生成随机数据

`Mock.Random.boolean()`

生成一个随机的布尔值。例如：

Mock.Random.boolean()

返回值为 true 或 false。

`Mock.Random.integer(min, max)`

生成一个随机的整数，可以指定范围。例如：

Mock.Random.integer(0, 10)

返回值为 0 到 10 之间的整数。

`Mock.Random.float(min, max, dmin, dmax)`

生成一个随机的浮点数，可以指定范围和精度。例如：

Mock.Random.float(0, 100, 2, 5)

返回值为 0.00 到 100.00000 之间的浮点数，精度为 2 到 5 位小数。

`Mock.Random.string(length)`

生成一个随机的字符串，可以指定长度。例如：

Mock.Random.string(10)

返回值为长度为 10 的随机字符串。

`Mock.Random.name(middle?)`

生成一个随机的生成一个常见的英文姓名。例如：

Random.name()
// => "Larry Wilson"
Random.name(true)
// => "Helen Carol Martinez"

`Mock.Random.cname()`

生成一个随机的生成一个常见的中文姓名。例如：

Random.cname()
// => "袁军"

`Mock.Random.date()`

生成一个随机的日期。例如：

Mock.Random.date()

返回值为随机日期的字符串表示，例如 "2024-07-03"。

`Mock.Random.time()`

生成一个随机的时间。例如：

Mock.Random.time()

返回值为随机时间的字符串表示，例如 "05:38:02"。

`Mock.Random.datetime()`

生成一个随机的日期时间。例如：

Mock.Random.datetime()

返回值为随机日期时间的字符串表示。

`Mock.Random.image(size, background, foreground, format, text)`

生成一个随机的图片，可以指定大小、背景色、前景色、格式和文字。例如：

Mock.Random.image('200x100', '#50B347', '#FFF', 'png', 'Hello, Mock.js!')

返回值为图片的 Base64 编码字符串。

生成数据模板指定的数据

Mock.mock(template) 根据数据模板生成模拟数据。数据模版可以生成复杂的数据结构。

数据模版的语法如下：

属性名和属性值之间用 : 分隔。
属性与属性之间用 , 分隔。
属性值是字符串类型，可以使用 @ 来表示占位符。
属性值是对象类型，可以使用 name|rule 来表示生成规则。

示例：

const Mock = require('mockjs')

const data = Mock.mock({
  'list|1-10': [{
    'id|+1': 1, // 从 1 开始，每次加 1
    'name': '@cname', // 随机中文名字
    'age|18-60': 1, // 18 到 60 岁之间的整数
    'gender|1': ['男', '女'], // 男或女
    'email': '@email' // 随机电子邮件地址
  }]
})

console.log(data)

输出：

{
  "list": [
    {
      "id": 1,
      "name": "林志玲",
      "age": 32,
      "gender": "女",
      "email": "kbsc@pmpuaaq.pk"
    },
    {
      "id": 2,
      "name": "周杰伦",
      "age": 55,
      "gender": "男",
      "email": "whq@zjfwq.uz"
    },
    ...
  ]
}

模拟接口

Mock.mock(url, template) 根据接口地址和数据模板模拟接口请求。
Mock.mock(method, url, template) 根据请求方法、接口地址和数据模板模拟接口请求。
Mock.setup({timeout: 400}) 指定被拦截的 Ajax 请求的响应时间。设置400，表示 400 毫秒后才会返回响应内容；也可以是横杠 '-' 风格的字符串，例如 '200-600'，表示响应时间介于 200 和 600 毫秒之间。

以上是 Mock 中常用的语法，更多语法请查阅官方文档。想进阶成为一位 Mock 高手？Apifox 是一个强大的接口文档管理工具，用 Apifox 可以让 Mock 变得更容易。Apifox 语法完全兼容 Mock.js， 并扩展了一些 Mock.js 没有的语法（如国内手机号 @phone）。

通过 Apifox 进行 Mock 测试/数据

Apifox 具有出色的 Mock 功能，不仅兼容 Mock.js 语法，同时提供 Nunjucks 和自定义脚本支持，满足不同场景需求，为前端接口调试提供了高效便捷的解决方案。

其简单易用的操作界面使得定义字段名和字段类型成为轻松之举，Apifox 可以智能生成符合数据结构的 JSON 数据，为接口调试提供了直观可观的支持。

立即体验 Apifox

在面对处理数百、上千甚至上万条列表数据的挑战时，Apifox 以其卓越性能脱颖而出，无需手动逐一编写，仅通过简单的 for 循环即可轻松完成重复操作，为开发者提供了高效的工作流程。

针对分页数据的需求，Apifox 更是提供了强大的模拟功能，用户可自定义总记录数和每页容量，实现灵活而精准的数据模拟。

而 Apifox 的 Mock 功能远不仅止于此，其还支持模拟延迟、加载状态以及错误状态，使其成为一款集 Mock、测试、接口管理于一身的多功能神器。现在就赶紧体验吧，让你的开发工作更加轻松愉悦！

立即体验 Apifox

扩展：如何使用 Apifox 的 Mock 功能来模拟常见业务数据

知识扩展：