博客 / 詳情

返回

Mock 語法講解

Mock 是生成隨機數據,攔截 Ajax 請求的 JavaScript 庫。

本文來介紹下 Mock 的常用語法。

模擬數據

生成隨機數據

Mock.Random.boolean()

生成一個隨機的布爾值。例如:

返回值為 truefalse

Mock.Random.integer(min, max)

生成一個隨機的整數,可以指定範圍。例如:

返回值為 010 之間的整數。

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

生成一個隨機的浮點數,可以指定範圍和精度。例如:

返回值為 0.00100.00000 之間的浮點數,精度為 25 位小數。

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 生成模擬數據教程
user avatar dm2box 頭像
1 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.