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

stackvoid 发布于2019-08-22 18:50 / 1247人阅读

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

实际工作现状

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

GPU云服务器云服务器阿里云购买服务器时的高效云盘怎么使用 js的mock数据云服务器的数据盘如何使用如何使用云服务器的数据库

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

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

uni-app官方教程学习手记

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

bovenson 2019-08-26 12:22 评论0 收藏0
一张图教你快速玩转vue-cli3

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

chaosx110 2019-08-26 10:12 评论0 收藏0
Vue-项目从本地搭建到线上部署（wǒ shì biaō tí dǎng）

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

Arno 2019-08-26 13:49 评论0 收藏0