推薦一個線上介面Mock工具fastmock
fastmock可以讓你在沒有後端程式的情況下能真實地線上模擬ajax請求,你可以用fatmock實現專案初期純前端的效果演示,也可以用fastmock實現開發中的資料模擬從而實現前後端分離。如下面的介面
- 模擬一個使用者列表https://www.fastmock.site/moc...
- 模擬各種特殊型別的資料https://www.fastmock.site/moc...
您可以直接在瀏覽器開啟上面的連結或者用ajax請求檢視返回的資料
在使用fastmock之前,你的團隊實現資料模擬可能是下面的方案中的一種或者多種
- 本地手寫資料模擬,在前端程式碼中產生一大堆的mock程式碼。
- 利用mockjs或者canjs的can-fixture實現ajax攔截,本地配置必要的json規則。
- 後端在Controller層造假資料返回給前端。
上面的方式中,不管哪一種方式,都會要求開發人員寫一些跟專案本無任何關聯的程式碼,第一個和第二個方式還會需要前端專案在本地引入不必要的js檔案。比如下面的mock資料
// 產品配置 { url: '/pms/product/list', on: true, type: 'get', resp: Mock.mock({ 'body': { 'currentPage': 1, 'isMore': 0, 'pageSize': 15, 'resultList|10': [ { 'productNo': '11111', 'productName|1': ['產品名稱1', '產品名稱2', '產品名稱3', '產品名稱4', '產品名稱5'], 'productType|1': ['1', '2', '3', '4', '5'], 'status|1': ['1', '2'], 'gmtCreate': '@DATETIME("yyyy-MM-dd HH:mm:ss")', 'gmtModified': '@now("yyyy-MM-dd HH:mm:ss")', 'createUserCode': '@name' } ], 'startIndex': 0, 'totalNum': 100, 'totalPage': 1 }, 'reCode': '0000', 'reMsg': '成功', 'success': true }) }, // 產品配置-貸款材料配置 { url: '/pms/cfgLoanDoc/list', on: true, resp: Mock.mock({ 'body': { 'currentPage': 1, 'isMore': 0, 'pageSize': 15, 'resultList|10': [ { 'loanDocCode|+1': 1, 'loanDocName': /[測試字型]{4,30}/ } ], 'startIndex': 0, 'totalNum': 100, 'totalPage': 1 }, 'reCode': '0000', 'reMsg': '成功', 'success': true }) }
上面的程式碼為mockjs的事例程式碼,更多mockjs相關資料參考連結mockjs文件
為此,我們將mock層獨立出來,通過中間服務的形式在前端和後端服務之前建立一道圍欄,使用fastmock,前端只需要修改自己的XHR請求地址,後端只需要在開發前和前端約定好介面文件即可。等到後端服務開發完成,前端再將XHR請求地址替換回來進行聯調測試即可。
tip:當然,你也可以通過npm script不同命令載入不同配置檔案的形式切換你的XHR地址,這裡不作詳細介紹。
還是不瞭解fastmock?讓我們跟著教程一探究竟吧瞭解並開始使用fastmock