Mock.js

1 Mock.js 簡介

1.1 什麼是 Mock.js?

Mock.js 是一款模擬數據生成器,旨在幫助前端攻城師獨立於後端進行開發,幫助編寫單元測試。

1.2 Mock.js安裝

在 CMD 輸入如下命令:

cnpm install mockjs 

2 語法規範

Mock.js 的語法規範包括兩部分:

  • 數據模板定義規範(Data Template Definition,DTD)

  • 數據佔位符定義規範(Data Placeholder Definition,DPD)

2.1 數據模板定義規範 DTD

  • 數據模板中的每個屬性由 3 部分構成:屬性名、生成規則、屬性值:'屬性名|生成規則' : value

  • 生成規則有七種格式:

    • 'name|min-max': value

    • 'name|count': value

    • 'name|min-max.dmin-dmax': value

    • 'name|min-max.dcount': value

    • 'name|count.dmin-dmax': value

    • 'name|count.dcount': value

    • 'name|+step': value
  • 生成規則的含義需要依賴屬性值的類型才能確定

  • 屬性值 中可以含有 @佔位符

  • 屬性值 還指定了最終值的初始值和類型

2.1.1 屬性值是字符串 String

  • 'name|min-max': string

    重複 string 生成一個字符串,重複次數大於 min,小於 max

  • 'name|count': string

    重複 string 生成一個字符串,重複 count 次

2.1.2 屬性值是數字 Number

  • 'name|+1': number

    屬性值自動+1

  • 'name|min-max': number

    生成一個介於 min-max 之間的整數

  • 'name|min-max.dmin-dmax': number

    生成一個整數部分介於 min-max 之間,小數部分保留 dmin-dmax 位的浮點數

2.1.3 屬性值是布爾 Boolean

  • 'name|1': boolean

    隨機生成一個 boolean 值,真或假的概率都爲 1/2

  • 'name|min-max': value

    隨機生成一個布爾值,值爲 value 的概率是 min/(min+max),值爲 !value 的概率是 max(min+max)

2.1.4 屬性值是對象 Object

  • 'name|count': object

    從 object 中取 count 個屬性

  • 'name|min-max': object

    從 obejct 中取 min-max 個屬性

2.1.5 屬性值是數組 Array

  • 'name|1': array

    從 array 中隨機取一個元素,作爲最終值

  • 'name|+1': array

    從 array 中順序取一個元素,作爲最終值

  • 'name|min-max': array

    通過重複 array 生成一個新數組,重複次數大於等於 min,小於等於 max

  • 'name|count': array

    通過重複 array 生成一個新數組,重複次數爲 count 次

2.1.6 屬性值是函數 Function

  • 'name':function

    執行函數 function,取其返回值作爲最終的屬性值,函數的上下文爲屬性 name 所在的對象

2.1.7 屬性值是正則表達式 RegExp

  • 'name': regexp

    根據正則表達式 regexp 反向生成可以匹配它的字符串

2.2 數據佔位符定義規範 DPD

  • 佔位符只是在屬性值字符串中佔個位置,並不出現在最終的屬性值中

  • 佔位符的格式爲:

    @佔位符
    @佔位符(參數 [, 參數])
  • 佔位符引用的是 Mock.Random 中的方法

  • 可以通過 Mock.Random.extend() 來擴展自定義佔位符

  • 佔位符也可以引用數據模板中的屬性

  • 佔位符會優先引用數據模板中的屬性

  • 佔位符支持相對路徑和絕對路徑

    2.2.1 基本方法

  • @string 字符串

  • integer 整數

  • date 日期

2.2.2 圖像方法

  • @image 圖片

2.2.3 文本方法

  • @title 標題

  • @cword(100) 文本內容,參數爲字數

2.2.4 名稱方法

  • @cname 中文名稱

  • @cfirst 中文姓氏

  • @Last 英文姓氏

2.2.5 網絡方法

  • @url url

  • @email 郵箱

2.2.6 地址方法

  • @region 區域方法

  • @county 省市縣

3 EasyMock

3.1 什麼是EasyMock?

Easy Mock 是杭州大搜車無線團隊出品的一個極其簡單、高效、可視化、並且能快速生成模擬數據的在線 mock 服務 。以項目管理的方式組織 Mock List,能幫助我們更好的管理 Mock 數據。

3.2 EasyMock基本入門

3.2.1 初始化操作

  • 登陸或註冊

    Mock.js

  • 創建項目

Mock.js

Mock.js

3.2.2 接口操作

  • 點擊項目,進入個人項目,對接口進行增刪改查

Mock.js

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章