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

最新推荐文章于 2024-06-12 16:30:13 发布
最新推荐文章于 2024-06-12 16:30:13 发布
阅读量631 收藏
点赞数
文章标签： VUE MOCK 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangyanan609/article/details/81090093
版权

实际工作现状

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

梦人无语
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue3中如何使用mock--看完必会
蜗牛~~
06-29 1179
当项目前后端同时开发，后端来不及提供接口时，前端可通过mock来模拟后端返回数据，非强制性使用 ，详情参考。随机生成一个布尔值，值为 true 的概率是 1/2，值为 false 的概率同样是 1/2。// 这种默认调用mockJS.Random的image的第一种方法。Mock.Random 是一个工具类，用于生成各种随机数据。只是在属性值字符串中占个位置，并不出现在最终的属性值中。，取其返回值作为最终的属性值，函数的上下文为属性。占位符引用的是 Mock.Random 中的方法。
如何mock数据【Vue小技巧】
weixin_45732235的博客
10-14 232
mock 模拟接口
Vue3使用Mock
Qing_0124的博客
04-19 5495
1.安装mock和axios npm install --save-dev mockjs npm install --save axios 2.创建mock文件夹 3.配置main.js文件 import axios from 'axios' require("./mock/mockApi.js");//提前创建好的mock文件 const app = createApp(App) app.config.globalProperties.$axios = axios; 4.配置mock
vue3后台管理框架之将模拟Mock接口替换成真实接口
m0_52704461的博客
10-30 631
将模拟Mock接口替换成真实接口
前端数据模拟Mock.js
最新发布
m0_46266496的博客
06-12 468
新建mock-demo的项目，安装npm install mockjs。注意安装axios包 npm install axios。修改App.vue代码。修改App.vue代码。修改index.js。新建index.js。修改 main.js。
vue-cli3中使用mock（实际项目中快速搭建）
那朵花的博客
10-27 1678
整体项目结构如下：下载地址 1.安装axios npm install axios 在main.js中配置 import axios from 'axios'; Vue.prototype.axios = axios; 2.安装mockjs npm install mockjs --save-dev 3.安装mocker-api npm install mocker-api --save-dev 4.在项目根目录创建mock文件夹，配置请求的数据..
Vue 项目本地 Mock 数据
很酷的站长的博客
01-20 493
本小节我们将带大家学习如何在 Vue-Cli3 初始化的项目中创建 Mock 数据。在日常开发中，接口的联调是非常普遍的。然而，有些时候接口并不会及时提供，这时候就需要我们自己 Mock 数据来模拟接口的实现。
Vue如何使用mock模拟数据
我要成为一个前端大牛
03-16 353
vue使用mock生成数据，例子为登陆接口数据
详解vue-cli 本地开发mock数据使用方法
08-27
总的来说，Vue CLI 结合 Express 或 JSON Server 提供了便捷的本地 Mock 数据方案，帮助前端开发者在后端接口未完成时进行高效开发。理解并熟练运用这些工具，可以显著提高前端开发的效率和质量。
vue-cli3使用mock数据的方法分析
10-15
在现代Web开发中，前后端分离是一种常见的开发模式，其中前端开发者通常...希望本文所述的内容能够帮助到使用Vue.js进行程序设计的开发者，让大家在使用Vue CLI 3项目时能够更加高效地使用Mock数据进行前端开发和测试。
详解vue-cli项目中怎么使用mock数据
08-27
Vue CLI 项目中使用 Mock 数据的实现方法 在 Vue CLI 项目中，使用 Mock 数据可以模拟后端 API 的响应，方便前端开发和测试。在本文中，我们将介绍如何在 Vue CLI 项目中使用 Mock 数据。 Mock 数据的概念 Mock ...
vue-cli项目使用mock数据的方法（借助express）
10-17
现如今前后端分离开发越来越普遍，前端人员写好页面后可以自己模拟一些数据进行代码测试，这样就不必等后端接口，提高了我们开发效率。今天就来分析下前端常用的mock数据的方式是如何实现的,需要的朋友可以参考下
vue 中简单使用mock
热门推荐
逆风优雅的博客
02-20 1万+
首先，在vue项目中，安装依赖 # 使用axios发送ajax cnpm install axios --save # 使用mockjs产生随机数据 cnpm install mockjs --save-dev # 使用json5解决json文件,无法添加注释问题 cnpm install json5 --save-dev 二、在根目录下，新建一个mock文件 三、在vue.config.js文件中使用mock数据 四、配置mock中的index.js数据 const fs = re
在 vue 项目中 mock 的基本使用方法
m0_52775179的博客
07-25 1506
（'name|rule': value ） 属性名 name 、生成规则 rule、属性值 value。例如：'name|1-10':1 会产生一个1-10之间的整数，详细规则参见官方文档。rurl： 可选，表示需要拦截的 URL，可以是 URL 字符串或 URL 正则。template：可选，表示数据模板，可以是对象或字符串。数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值。function(options)：可选，表示用于生成响应数据的函数。
VUE 使用 mock
A_bad_horse的专栏
08-12 1358
vue使用mock
mockjs的基本使用和登录跳转到主页加折叠事件
qq_62881798的博客
09-29 998
Mock.js是一个模拟数据的生成器，用来帮助前端调试开发、进行前后端的原型分离以及用来提高自动化测试效率。数据类型丰富支持生成随机的文本、数字、布尔值、日期、邮箱、链接、图片、颜色等。拦截Ajax请求不需要修改既有代码，就可以拦截Ajax请求，返回模拟的响应数据。官网注：easy-mock，一个在线模拟后台的数据平台。
Mock 使用方式 + 在 Vue 项目中使用 Mock
一个努力学习的程序猿
08-09 1万+
在前后端开发过程中，后端进行接口开发，前端使用对应接口从数据库获取前端想要展现的数据。对于后端来讲，它们需要根据需求文档，确定要写的接口的功能。有时，虽然接口还没有写出来，但是相关接口文档已经写出来了。这时前端如果想要调用接口，但是接口还没有完成，前端开发人员也就只能含泪上班摸摸鱼了。 那在开发过程中，为了避免这样的情况发生，现在前端已经能够独立于后端进行开发，也就是前端开发人员可以自己根据接口文档去模拟假数据。这个问题的解决方案就是使用第三方库 mock.js。
在Vue中安装和使用 Mock 进行数据模拟 (图文教程）
大剑师兰特的GIS世界
06-09 5722
在做前后分离的项目时候，比如制作VUE项目，很多时候后端没有提供接口，前端人员可以自己通过mock来造一个接口，返回数据。
【Vue+Mock】使用Mock模拟数据
  ╭じò ぴé╮。Qi
08-14 3482
在前端采用Mock服务来模拟请求后台接口，按照接口文档的约定写入api、入参及出参等假数据，来模拟整个前后端联调的过程。前端发送请求后，在devServe.before中运行mock/index.js暴露的函数，捕捉到url一致的请求，直接返回mock设定的数据，有返回值就不会继续真实的请求，拦截成功之后，请求没有往后台去，而是在前端完成了虚拟请求。
vue3+ts使用mock
07-28
你可以使用Mock.js来在Vue 3 + TypeScript项目中进行模拟数据。 首先，你需要安装Mock.js。在你的项目中打开终端，并运行以下命令： ```shell npm install mockjs --save-dev ``` 安装完成后，你可以创建一个`mock`文件夹来存放模拟数据。在该文件夹下，创建一个名为`index.ts`的文件，并编写以下代码： ```typescript import Mock from 'mockjs'; Mock.mock('/api/data', 'get', { 'list|5': [{ 'id|+1': 1, 'name': '@cname', 'age|18-60': 1, 'email': '@email', }], }); export default Mock; ``` 上述代码会模拟一个GET请求`/api/data`，返回一个包含5个对象的数组。每个对象包含id、name、age和email属性。 接下来，在你的Vue组件中，你需要导入并启用Mock.js。可以在`main.ts`文件中添加以下代码： ```typescript import { createApp } from 'vue'; import App from './App.vue'; import Mock from './mock'; const app = createApp(App); Mock; // 启用Mock.js app.mount('#app'); ``` 现在，当你在Vue组件中发起GET请求`/api/data`时，Mock.js会拦截该请求并返回模拟数据。 请确保在生产环境中禁用Mock.js，以避免模拟数据影响正式运行的应用程序。 希望对你有所帮助！如有更多问题，请随时提问。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值