假如想直接进入实战请猛戳这里fastmock线上地点www.fastmock.site
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