资讯专栏INFORMATION COLUMN

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

stackvoid / 1342人阅读

摘要:实际工作现状实际工作中前后端分离的情况下,前后端达成接口协议,前端往往需要根据接口文档数据。实现过程为了高效快捷的开发,我搭建了一个的,最主要的就是解决了以上提到的问题。以下截图分别为配置,请求接口,以及环境下接口返回结果。

实际工作现状

实际工作中前后端分离的情况下,前后端达成接口协议,前端往往需要根据接口文档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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/96260.html

相关文章

  • uni-app官方教程学习手记

    摘要:当时下载了一个,下载了官方提供的示例教程。关于项目目录开发规范一定要遵守,直接通过官网学习即可。最后就是发布安卓包和苹果包了。我将自己做的第一个新闻列表新闻详情程序打包,安装到了安卓手机上测试了下,效果非常棒。 本人微信公众号:前端修炼之路,欢迎关注 背景介绍 大概在今年的十月份左右,我了解到Dcloud推出了uni-app。当时下载了一个Hbuilder X,下载了官方提供的hell...

    bovenson 评论0 收藏0
  • 一张图教你快速玩转vue-cli3

    摘要:前言本文系统的梳理了搭建项目的常见用法,目的在于让你快速掌握独立搭建项目的能力。思维导图接下来,我们根据思维导图,一步步来解释和实现我们的目标。这确保了最终包里数量的最小化。但是如果其中一个依赖需要特殊的,默认情况下无法将其检测出来。 前言 本文系统的梳理了vue-cli3搭建项目的常见用法,目的在于让你快速掌握独立搭建vue项目的能力。你将会了解如下知识点: 如何安装项目插件 添加...

    chaosx110 评论0 收藏0
  • Vue-项目从本地搭建到线上部署(wǒ shì biaō tí dǎng)

    摘要:放置在目录下或通过绝对路径被引用。对于相关来说,我们推荐使用而不是直接链式指定。在不更改配置文件的情况下,前端页面迭代发布,不需要重启服务。 作者:gauseen 0. 关于 Vuejs 简介:Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式框架,易用、灵活、高效。 生态系统 项目 介绍 awesome-vue Vue.js 相关很棒的...

    Arno 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<