綜述:一個挺好用的模擬ajax請求的平臺,對於開發有極大的幫助作用
官方說明文檔:http://fmdocs.fastmock.site/book/
1.要解決的問題
fastmock可以讓你在沒有後端程序的情況下能真實地在線模擬ajax請求,你可以用fatmock實現項目初期純前端的效果演示,也可以用fastmock實現開發中的數據模擬從而實現前後端分離。在使用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
})
},
// 產品配置-費用類型配置
{
url: '/pms/productFeeDetail/queryByProductNo',
type: 'get',
on: true,
resp: Mock.mock({
'body': {
'currentPage': 1,
'isMore': 0,
'pageSize': 15,
'resultList|10': [
{
'feeTypeNo|+1': 1,
'feeTypeCode': /[A-Z]{4,8}/,
'feeTypeName': '@name',
'incomeType|1': ['1', '2'],
'feeType|1': ['C', 'D'],
'ratio|1': ['0.5', '0.25'],
'productChargeBasis|1': ['1', '2', '3'],
'fixedAmount|1-100': 5
}
],
'startIndex': 0,
'totalNum': 100,
'totalPage': 1
},
'reCode': '0000',
'reMsg': '成功',
'success': true
})
}
上面的代碼爲mockjs的事例代碼,更多mockjs相關資料參考鏈接mockjs文檔
爲此,我們將mock層獨立出來,通過中間服務的形式在前端和後端服務之前建立一道圍欄,使用fastmock,前端只需要修改自己的XHR請求地址,後端只需要在開發前和前端約定好接口文檔即可。等到後端服務開發完成,前端再將XHR請求地址替換回來進行聯調測試即可。
tip:當然,你也可以通過npm script不同命令加載不同配置文件的形式切換你的XHR地址,這裏不作詳細介紹。
2.fastmock的優勢
fastmock不用再去學習mock.js的語法了,直接將需要的數據結構形式,複製進入頁面即可,非常的方便,快捷;
3.fastmock劣勢
唯一的不足之處是怎樣實現增 刪 改的操作;目前還沒有發現相應的辦法?