VUE下如何高效快捷的使用MOCK数据

梦人无语

实际工作现状

实际工作中前后端分离的情况下,前后端达成接口协议,前端往往需要根据接口文档mock数据。这些数据基本都是静态数据,有的可能是写死在代码中,等到后端开启服务调试再替换这部分mock数据,有的可能是读取静态json、js等文件获取mock数据,实现页面效果,但是实际调用接口和读取文件获取mock数据,两种方式是存在差异的,正式与后端对接接口时又需要调整代码。那我就想能不能直接在dev环境下直接调用接口的时候就调取到mock数据,而在不修改任何代码的情况下直接build,打包出来的页面请求的就是正式接口呢。

实现过程

为了高效快捷的开发,我搭建了一个VUE+MOCK的DEMO,最主要的就是解决了以上提到的问题。

这边提供一下我的思路:把所有接口写入配置文件。在dev模式下,node启动webpack时,通过webpack读取到接口配置,并做好接口代理。然后通过node的环境变量来识别环境。若是dev环境把所有接口的HOST换成本地HOST,这样请求接口直接进入接口代理,通过代理获取mock数据。若是pro环境则直接请求配置文件中的正式接口。

以下截图分别为mock配置,请求接口,以及dev环境下接口返回结果。

另外此demo还配置了一键启用,自由切换是否mock数据,以及对未启用mock数据直接调试接口自动做了跨域代理,方便大家在实际开发中更好更快的开发。

图片描述
图片描述
图片描述


具体代码实现,大家可以看看我的demo,也希望大家给出一些改进建议,希望可以多多交流学习。
demo地址:FastDev-VUE

阅读 3.4k

to be a better man

33 声望
2 粉丝
0 条评论
你知道吗?

to be a better man

33 声望
2 粉丝
宣传栏