首页 > 其他分享 >Vue3中Mock数据的简单方案

Vue3中Mock数据的简单方案

时间:2024-04-30 15:35:56浏览次数:24  
标签:方案 axios const 请求 res Mock Vue3 mock users

因为Vue3项目开发中需要用到Mock数据,所以这里记录一种快速Mock数据的方法。

一、安装

首先,你需要安装 axiosaxios-mock-adapter

npm install axios axios-mock-adapter --save

二、编写mock数据

为了保证项目的整洁,我们在项目根目录下的src目录下新建一个名为mock的文件夹。然后依次进行如下步骤:

(1)在mock文件夹下新建index.js文件,文件内容如下:

import MockAdapter from 'axios-mock-adapter'
import axios from 'axios'

// 创建一个 MockAdapter 实例
let mock = new MockAdapter(axios)

const initMock = () => {
  // mock模拟一个get方法的响应数据
  mock.onGet('/users').reply(200, { // 200 为状态码,后面对象为返回data
    users: [
      { id: 1, name: '李华' }
    ]
  })
  // mock模拟一个post方法的响应数据
  mock.onPost('/foo').reply(200, { // 200 为状态码,后面对象为返回data
    msg: 'success',
    desc: "恭喜,请求成功!"
  })

  // 模拟一个带参数请求的响应
  mock.onGet("/search", { params: { searchText: "张" } }).reply(200, {
    users: [{ id: 1, name: "张小花" }],
  });

  // 模拟一个错误响应
  mock.onPut('/api/users/1').networkError();

}

// 导出
export default initMock

(2)在main.js中引入使用,在main.js中加入如下代码:

// 导入mock数据
import initMock from './mock/index';
// 初始化mock数据函数方法
initMock()

三、使用mock数据

以下是使用mock数据的方法的vue页面代码,Mock.vue示例页面:

<template>
    <div>
        <div><b>axios-mock-adapter</b>数据模拟js库,请注意浏览器控制台输出</div>

        <button @click="funGetTest">get请求测试</button>
        <button @click="funParamsTest">get带参数请求测试</button>
        <button @click="funPostTest">post请求测试</button>
        <button @click="funPutTest">put请求测试(错误响应示例)</button>
    </div>
</template>

<script setup>
//引入axios
import axios from 'axios';

const funGetTest = () => {
    axios.get("/users").then((res) => {
        console.log("GET请求结果:", res);
    });
}

const funParamsTest = () => {
    axios.get("/search", {
        params: { searchText: "张" }
    }).then(res => {
        console.log("GET带参数请求结果:", res);
    });
}

const funPostTest = () => {
    axios.post("/foo").then(res => {
        console.log("POST请求结果:", res);
    });
}

const funPutTest = () => {
    axios.put("/api/users/1").then(res => {
        console.log("PUT请求结果:", res);
    });
}

</script>

<style scoped>
button {
    border: 1px solid #000;
    padding: 10px;
    margin: 10px;
    cursor: pointer;
}

button:hover {
    background-color: #3496eb;
    color: #ffffff;
}
</style>

上述方法示例展示了如何使用 axios-mock-adapter 来模拟不同的 HTTP 请求和响应,让你能够测试你的应用在各种情况下的行为,而不需要实际发送网络请求。

标签:方案,axios,const,请求,res,Mock,Vue3,mock,users
From: https://www.cnblogs.com/bokemoqi/p/18168099

相关文章

  • 如何防止源代码泄露?6种企业防泄密解决方案
    在数字化转型浪潮中,源代码成为企业宝贵的核心资产,其安全性直接关系到企业的生存和发展。源代码泄露不仅会导致商业秘密外泄,还可能造成严重的经济损失和品牌信誉下降。为此,采用高效的防泄密措施,如华企盾DSC数据防泄密系统,成为企业保护源代码不可或缺的策略。以下是结合华企盾DSC系......
  • 24.什么是跨域?解决方案有哪些?
    为什么会出现跨域问题存在浏览器同源策略,所以才会有跨域问题。那么浏览器是出于何种原因会有跨域的限制呢。其实不难想到,跨域限制主要的目的就是为了用户的上网安全。同源策略导致的跨域是浏览器单方面拒绝响应数据,服务器端是处理完毕并做出了响应的。什么是同源策略一个url由......
  • vue3 vant4 h5图片上传时压缩
    代码如下upload组件的afterRead方法:constafterRead=asyncfile=>{file.status="uploading";file.message="上传中...";const{data}=awaitupLoaderImg(file.file);//使用上传的方法。file.fileif(data){file.status="done&q......
  • yarn + vue3 + vite 创建项目
      yarncreatevite//通过yarn+vite创建项目填写的创建的项目名称,默认名称vite-project 选择框架,我们点击上下键,回车选择,我们这里选择vue 选择语言,我们点击上下键,回车选择,我们这里选择TypeScript,即ts,然后回车 创建成功,如下 按照提示,执行命令cdvite-pr......
  • 蓝鲸6.1 CMDB 事件推送的开源替代方案
    本文来自腾讯蓝鲸智云社区用户:木讷大叔爱运维背景在蓝鲸社区“社区问答”帖子中发现这么一个需求:究其原因,我在《不是CMDB筑高墙,运维需要一定的开发能力!》一文中已经介绍,在此我再简单重复下:蓝鲸5.1自带“事件推送”功能,当配置信息发生变化的时候,实时通知到关联的系统中;蓝......
  • Vue3+Ts i18n实现国际化
    1、下载依赖npminstallvue-i18n@nex2、在src目录下创建文件夹创建文件index.ts、zh/index.ts、en/index.ts //index.tsimport{createI18n}from'vue-i18n'importzhfrom'./zh/index'importenfrom'./en/index'constmessages={en,zh,}......
  • 多人同时导出 Excel 干崩服务器!新来的阿里大佬给出的解决方案太优雅了!
    来源:juejin.cn/post/7259249904777838629前言业务诉求:考虑到数据库数据日渐增多,导出会有全量数据的导出,多人同时导出可以会对服务性能造成影响,导出涉及到mysql查询的io操作,还涉及文件输入、输出流的io操作,所以对服务器的性能会影响的比较大;结合以上原因,对导出操作进行排队;刚开......
  • 科技型企业文档外发控制管理,最佳实践方案是什么?
    科技型企业是指那些产品的技术含量比较高,具有核心竞争力,能不断推出适销对路的新产品,并不断开拓市场的企业。这些企业通常拥有较高的科技人员和专业人员比例,其主营方向往往是业界认可的高新技术领域或方向。在组织特征上,除了航空航天、核能开发这类高技术大企业外,大多数科技型企业......
  • 还在为邮件大附件发送困扰?企业邮件大文件解决方案来了!
    邮箱是企业最基础也是最常用的信息传递和业务往来方式,一般而言,对于文字及图片的业务沟通,邮箱完全可以胜任,但当涉及附件,特别是超大的附件,如影视频资料、大的工程文件、应用程序等,此时,邮件的大文件就会是很大的困扰。通常来说,企业解决邮件大文件的方式一般如下:分批发送:如果文件不......
  • 保险公司数据中心同步数据方案,该怎么选才既合规又易于管理?
    保险公司数据中心是一种集中存储、处理和管理保险公司数据的设施。它由一系列硬件和软件组成,包括服务器、存储设备、网络设备等,以提供一个高效、安全和可靠的环境来处理和存储大量数据。 在保险公司的运营中,数据中心扮演着至关重要的角色。它支持保险公司的核心业务系统,如保单......