Mock.js 语法讲解,一文搞懂

Mock 语法讲解,学习如何轻松创建模拟数据,提高你的工作效率。

用 Apifox,节省研发团队的每一分钟

Mock.js 语法讲解,一文搞懂

免费使用 Apifox

相关推荐

最新文章

API

一体化协作平台

API 设计

API 文档

API 调试

自动化测试

API Mock

API Hub

立即体验 Apifox
目录

Mock 是生成随机数据,拦截 Ajax 请求的 JavaScript 库。

本文来介绍下 Mock 的常用语法。

模拟数据

生成随机数据

Mock.Random.boolean()

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

Mock.Random.boolean()

返回值为 truefalse

Mock.Random.integer(min, max)

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

Mock.Random.integer(0, 10)

返回值为 010 之间的整数。

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

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

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

返回值为 0.00100.00000 之间的浮点数,精度为 25 位小数。

Mock.Random.string(length)

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

Mock.Random.string(10)

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

Mock.Random.date()

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

Mock.Random.date()

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

Mock.Random.time()

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

Mock.Random.time()

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

Mock.Random.datetime()

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

Mock.Random.datetime()

返回值为随机日期时间的字符串表示,例如 "2007-06-29T22:03:06.140Z"

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 中常用的语法,更多语法请查阅官方文档。想进阶成为一位 Mock 高手?Apifox 是一个强大的接口文档管理工具,用 Apifox 可以让 Mock 变得更容易。Apifox 语法完全兼容 Mock.js, 并扩展了一些 Mock 没有的语法(如国内手机号 @phone)。

通过 Apifox 进行 Mock 测试/数据

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


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

Apifox 进行 Mock 测试/数据
Apifox 进行 Mock 测试/数据

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

apifox mock 列表数据

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

Apifox Mock 分页数据

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

Apifox 接口调试工具
扩展:如何使用 Apifox 的 Mock 功能来模拟常见业务数据

知识扩展: