开发过程一般是前后端根据设计图,约定好每个页面的接口名、数据格式和字段之后再各自进行开发,然而实际工作中可能由于各种各样的原因,后端没人,前端先干。
如果测试数据直接写在页面上的话,看起来不美观,而且直接写测试数据,不写接口请求方法,等到后端接口写好之后,前端再删掉测试数据重新写请求接口的方法,费时费力。
不借用任何插件和工具,前端也可以自己设置模拟数据,灵活性比较高。
以抖音小程序开发为例,前端在编写api文件时,同时建立一个mock文件,api文件和mock文件中编写同样的方法,不同是api文件中的方法返回接口数据,mock文件中的方法返回测试数据。
例如:api文件中有一个getUserInfo的方法,请求获取用户数据的接口,返回接口数据。在mock中也写一个getUserInfo接口,返回前端需要的测试数据。
在系统运行的时候,app.js文件中引入mock文件。页面js文件正常编写请求接口的方法,得到的数据就是测试数据。
等到后端接口完毕时,直接修改app.js引入的mock文件为api文件,再次请求到的数据就是真实的接口数据了。