在很早以前公司里面就接入了rap在線管理接口文檔平臺，通過圖形化書寫接口文檔，給前端同事使用。但是之前也僅僅是用于寫接口文檔，從來沒有研究過它還有其他用途。最近與自己合作的一個前端同事說，你為啥不利用好rap來寫接口文檔，它會自動生成mock數(shù)據(jù)，我們就不用將rap默認生成的數(shù)據(jù)修改后，再本地測試一下。弄完之后再與你們聯(lián)調。今兒就花了2個小時左右研究一下rap，順藤摸瓜出來mock。下面簡單介紹一下，mock以及如何在rap中使用mock，生成比較好的模擬數(shù)據(jù)，提高前后端協(xié)作效率。
mock.js[1]
mock.js隨機生成數(shù)據(jù)，讓前端開發(fā)人員在開發(fā)階段時獨立于后端，使用mockjs可以自測代碼。
語法規(guī)范
- 數(shù)據(jù)模板定義規(guī)范(DTD:Data Template Definition)
- 數(shù)據(jù)占位符規(guī)范(DPD: Data Placeholder definition)
數(shù)據(jù)模板定義規(guī)范
格式
'name|rule':value (屬性名|生成規(guī)則:屬性值)，其中生成規(guī)則是可選的
生成規(guī)則
-
7種生成規(guī)則
'name|min-max':value'name|count':value'name|min-max.dmin-dmax':value'name|+step':value'name|min-max.dcount':value'name|count.dmin-dmax':value'name|count.dcount':value
-
生成規(guī)則的含義依賴屬性值的類型才能確認，這一點特別重要。也是mock的關鍵所在。
比如：-
'name|min-max':string: 通過重復[min,max]次string生成新字符串。 -
'name|min-max':number: 生成一個number，返回在[min,max]。
-
屬性值
- 屬性值可含@（占位符）
- 指定最終的值和類型
- 屬性值類型
- String
- Number
- Boolean
- Object
- Array
- Function
- RegExp
- Path
學過js看著十分簡單，只是多了RegExp 和 Path，其他簡直一模一樣。
數(shù)據(jù)占位符定義規(guī)范DPD
占位符
1.占位符只是在屬性字符串中占個位置，并不出現(xiàn)在最終的屬性值中
2.格式：@占位符或者@占位符(參數(shù)[,參數(shù)])
3.占位符
- 用@標識后面的字符串是占位符
- 引用的是
Mock.Random中的方法 - 擴展定義占位符：
Mock.Random.extend() - 引用數(shù)據(jù)模板中的屬性
- 支持相對路徑和絕對路徑
4.數(shù)據(jù)占位符類型
數(shù)據(jù)占位符一共有如下幾種類型：
- Basic
- Date
- Image
- Color
- Text
- Name
- Web
- Address
- Helper
- Miscellaneous
具體mock語法示例，請參考mock示例[2]，里面詳細的介紹了各個類型使用方法。
rap寫接口文檔中運用mock[3]
什么是rap
RAP是前后端溝通橋梁的通信接口，是一個圖形化的接口文檔管理的軟件。它可以自動生成mock數(shù)據(jù)，在開發(fā)時候前端同事可以不依賴于后端的數(shù)據(jù)，而是根據(jù)mock規(guī)則自動生成的模擬數(shù)據(jù)進行測試。
怎么在rap中是使用mock
有很多資料，且是圖文并茂寫博文[4][5]。總結起來，在rap中運用mock方法如下：
- 左邊變量寫
name|rule，此處相當于就是mock中的'name|rule'; - 右邊備注寫
@mock=value。其語法規(guī)則mock一樣。
