共计 1458 个字符，预计需要花费 4 分钟才能阅读完成。
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
