Mock 语法讲解

左手的ㄟ右手 2024-03-23 12:24 61阅读 0赞

**[Mock][]** 是生成随机数据，拦截 Ajax 请求的 JavaScript 库。

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

### 模拟数据 ###

#### 生成随机数据 ####

`Mock.Random.boolean()`

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

返回值为 `true` 或 `false`。

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

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

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

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

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

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

`Mock.Random.string(length)`

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

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

`Mock.Random.date()`

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

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

`Mock.Random.time()`

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

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

`Mock.Random.datetime()`

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

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

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

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

返回值为图片的 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，** 并扩展了一些 Mock 没有的语法（如国内手机号 @phone）。小伙伴们可以去体验下。

### 知识扩展： ###

更多 Mock 相关知识可点击下方链接查看。

*  **[了解 Mock.js 的语法规范][Mock.js]**
 *  **[Mock.js 生成模拟数据教程][Mock.js 1]**

[Mock]: https://apifox.com/apiskills/what-is-mock/
[Apifox]: https://apifox.com/apiskills/mock-done/
[Mock.js]: https://apifox.com/apiskills/mock-js-syntax/
[Mock.js 1]: https://apifox.com/apiskills/use-mock-js/