我们在做项目开发的过程中,因为是同步开发,所以前端会有等后端接口的情况。为了前后端并行开发,我们一般会要求后端开发人员先定义好接口文档。这样前端通过模拟数据,就能顺畅地进行前端业务逻辑的开发了。
这种模拟数据,就叫做mock数据。前端使用Mock数据进行开发,能极大的提高前端开发的效率。今天介绍两种常用的做法。
第一种,使用第三方可视化接口管理工具。
比如我公司用的就是YAPI,这样后端开发在写接口文档的时候,就自动把测试的接口也部署好了。
如果你使用这个,我大体有两个建议。
一、这种服务最好是部署到自己的服务器上。因为第三方的接口不稳定,在调试的时候偶尔挂掉会极大的影响工作效率。
二、要使用好这种第三方平台,一定要后端开发养成实时更新的习惯,否则会出现很多因为数据不实时,导致很多简单的但是需要沟通确认的问题。
很多公司使用后并没有感觉到效率提升,大概率是因为接口变动比较频繁引起的。
第二种,使用mock.js库。
mock.js是一个模拟数据的js库,官网地址:http://mockjs.com/。
前端开发人员自己模拟返回的数据。这个库有两个核心功能:生成随机数据,拦截ajax请求。
前端的请求会访问到前端自己写的方法里。这样的好处有很多,比如可以通过模拟各种随机数据,各种不同场景下程序是如何反应的。
对比起直接在前端业务层使用测试代码,这个js库会更方便,前端业务逻辑层上不需要做任何修改,就能自动切换mock和真实环境。
我们可以通过启动命令区分是否使用mock测试。比如:在vue项目的package.json里添加如下命令。
"serve:no-mock": "cross-env MOCK=none vue-cli-service serve",
使用这种方式的前提是前端了解后端的返回数据结构。如果是因为接口数据格式频繁变动导致的效率低下,那不是技术能解决的。
我发现很多人还是习惯在业务代码里写测试数据,这个习惯很不好,很容易因为忘记删除测试数据而出现各种问题。以上两种mock模拟后端接口返回的方式,选一个适合自己的即可。