vite-plugin-mock前端自行模拟接口返回数据的插件

vite-plugin-mock前端自行模拟接口返回数据的插件

  • 安装
  • 导入、配置(vite.config.js)
  • 使用
    • 目录结构
    • /mock/user.js
    • 具体在页面请求中的使用
  • 注意事项

中文文档:[https://gitcode.com/vbenjs/vite-plugin-mock/blob/main/README.zh_CN.md)
参考其他博主文档:
【博主:火山犬】三分钟教你怎么用vite-plugin-mock和mockjs
【博主:木子静静】vue3:vite-plugin-mock插件的使用过程
【博主:木子静静】vue3:vite-plugin-mock插件的使用过程
【博主:wade3po】vite-plugin-mock使用
【博主:哥很冷漠】在vite(vue)项目中使用mockjs

以下是我自己的简单应用记录:

安装

npm i  mockjs -S
npm i vite-plugin-mock -D

导入、配置(vite.config.js)

import { fileURLToPath, URL } from 'node:url'
import { defineConfig, loadEnv } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'// https://vitejs.dev/config/
export default defineConfig(({ command, mode }) => {// 根据当前工作目录中的 `mode` 加载 .env 文件// 设置第三个参数为 '' 来加载所有环境变量,而不管是否有 `VITE_` 前缀。const env = loadEnv(mode, process.cwd(), '')return {// vite 配置// base:'./',define: {__APP_ENV__: JSON.stringify(env.APP_ENV),},plugins: [vue(),viteMockServe({mockPath: 'mock',localEnabled: true, // 开发打包开关 true时打开mock  false关闭mockprodEnabled: false, //生产环境下为false,这样就不会被打包到生产包中}),],resolve: {alias: {'@': fileURLToPath(new URL('./src', import.meta.url))}},server:{proxy: {'/api': {target: 'http://locallhost:8080',changeOrigin: true,rewrite: (path) => path.replace(/^\/api/, '')}}}}
})

使用

目录结构

在这里插入图片描述
注意:这里,mock文件夹的创建位置及文件名需要和前面vite.config.js里的mockPath配置的一致,mock底下的文件名没有特殊要求

/mock/user.js

这里你可以自己根据自己需要划分的api模块进行文件命名,没有具体要求。不划分模块,全写一起也是可以的

function createUserList(){return [{userId:1,avatar:"",username:"admin",password:'123456',desc:'平台管理员',roles:['平台管理员'],routes:['home'],token:"Admin Token"},{userId:2,avatar:"",username:"system",password:'123456',desc:'系统管理员',roles:['系统管理员'],routes:['system'],token:"System Token"}]
}export default [// 用户登录接口{url:'/api/user/login',method:'post',response:(({body})=>{const {username,password} = bodyconst checkUser = createUserList().find((item)=>{return item.username === username && item.password === password})if(!checkUser){return {code:201,data:{message:'账号或密码不正确'}}}let {token} = checkUserreturn {code:200,data:{token}}})},//获取用户信息{url:'/api/user/userInfo',method:'post',response:(({body})=>{const {token} = bodyconst checkUser = createUserList().find((item)=>{return item.token === token })if(!checkUser){return {code:201,data:{message:'token失效'}}}return {code:200,data:{checkUser}}})}
]

具体在页面请求中的使用

<template><h1>vite-plugin-mock插件</h1><p>模拟请求到的数据:</p><p>token:</p><p>{{ token }}</p><p>userInfo:</p><p>{{ userInfo }}</p>
</template><script setup>
import { ref } from 'vue'
import axios from 'axios';
let token = ref(null);
let userInfo = ref(null);axios.post('/api/user/login',{username:'admin',password:'123456'}).then(({data: {data}}) => {console.log(data,'token---------------');if(data && data.token) {token = data.token;axios.post('/api/user/userInfo',{token:token}).then(({data:{data}}) => {console.log(data,'userInfo---------------');userInfo = data;})}
})
</script>

注意事项

注意不要把mock打包进生产包里了,具体看vite.config.js里的配置
我觉得这个只适合在项目前期,项目开发环境还没有健全,没办法调测试接口进行开发的时候用;当项目开发环境健全的时候,我们直接调开发环境接口进行开发,这个mock可以直接不要

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/350574.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

紫光展锐5G处理器T750__国产手机芯片5G方案

展锐T750核心板采用6nm EUV制程工艺&#xff0c;CPU架构采用了八核设计&#xff0c;其中包括两个主频为2.0GHz的Arm Cortex-A76性能核心和六个主频为1.8GHz的A55小核。这种组合使得T750具备卓越的处理能力&#xff0c;并能在节能的同时提供出色的性能表现。该核心模块还搭载了M…

Java17 --- RabbitMQ之插件使用

目录 一、Federation插件 1.1、运行两个rabbitmq实例 1.2、启用插件 1.3、在下游端点添加上游端点 1.4、创建策略 1.6、测试 二、联邦队列 2.1、创建策略 2.2、创建交换机与队列 2.2.1、创建52000的队列与交换机 2.2.2、创建62000的队列 三、Shovel 3.1、启…

探索uni-app x:下一代跨平台应用开发引擎

摘要 随着移动互联网的快速发展&#xff0c;跨平台应用开发的需求日益旺盛。传统的原生开发虽然性能卓越&#xff0c;但开发周期长、维护成本高。而Web应用开发虽然开发效率高&#xff0c;但性能往往不尽如人意。在这样的背景下&#xff0c;uni-app x应运而生&#xff0c;作为…

Qt项目天气预报(2) - 重写事件函数

鼠标右键实现退出界面 知识点QMenu: QMenu 弹出对话框 --> 相对QMessageBox 更加轻量点 QMenu是Qt库中用于创建弹出式菜单的类&#xff0c;它通常出现在应用程序的顶部菜单栏、按钮的右键菜单或自定义上下文菜单中。以下是关于QMenu的详细介绍&#xff1a; 1. 类的基本特…

【多线程】如何使用jconsole工具查看Java线程的详细信息?

&#x1f970;&#x1f970;&#x1f970;来都来了&#xff0c;不妨点个关注叭&#xff01; &#x1f449;博客主页&#xff1a;欢迎各位大佬!&#x1f448; 文章目录 1. 先运行java程序&#xff01;2. 在jdk目录下的bin文件夹中找到jconsole.exe3. 新建连接4. 观察线程状态5. …

金融数据中心布线运维管理解决方案

金融行业的核心业务&#xff0c;如交易、支付、结算等&#xff0c;对网络的依赖程度极高。布线作为网络基础设施的重要组成部分&#xff0c;其稳定性和可靠性直接关系到业务的连续运行。因此&#xff0c;良好的布线管理能够确保网络系统的稳定运行&#xff0c;减少因网络故障导…

训练营第三十八天 | 309.最佳买卖股票时机含冷冻期动态规划系列七总结714.买卖股票的最佳时机含手续费股票问题总结篇!

309.最佳买卖股票时机含冷冻期 力扣题目链接(opens new window) 给定一个整数数组&#xff0c;其中第 i 个元素代表了第 i 天的股票价格 。 设计一个算法计算出最大利润。在满足以下约束条件下&#xff0c;你可以尽可能地完成更多的交易&#xff08;多次买卖一支股票&#x…

Navicat和SQLynx产品功能比较一(整体比较)

Navicat和SQLynx都是数据库管理工具&#xff0c;在过去的二十年中&#xff0c;国内用户主要是使用Navicat偏多&#xff0c;一般是个人简单开发需要&#xff0c;数据量一般不大&#xff0c;开发相对简单。SQLynx是最近几年的数据库管理工具&#xff0c;Web开发&#xff0c;桌面版…

Ollama在MacOS、Linux本地部署千问大模型及实现WEB UI访问

一、前言 阿里通义千问发布了Qwen2&#xff0c;提供了0.5B&#xff5e;72B的量级模型&#xff0c;在​​Ollama官网​​可以搜索qwen2查看&#xff0c;本文提供了Ollama的下载&#xff08;在线/离线安装&#xff09;、Ollama运行模型、使用WebUI连接模型以及页面简单配置。 …

计算机网络(4) 最长前缀匹配(路由转发表)

一.路由转发 网络数据包IP段只包含源地址与目的地址&#xff0c;经过数据链路层包装与物理层信号形式转换&#xff0c;最终经由不同的链路节点到达目的地址。这个过程是一步一步&#xff08;hop by hop&#xff09;进行的&#xff0c;路过一个路由节点则称为一跳。每个路由节点…

Java中ArrayList(顺序表)的自我实现(如果想知道Java中怎么自我实现ArrayList,那么只看这一篇就足够了!)

前言&#xff1a;在 Java 编程中&#xff0c;ArrayList 是一种非常常用的数据结构&#xff0c;它提供了动态数组的实现方式&#xff0c;可以方便地存储和操作数据。相比于传统的数组&#xff0c;ArrayList 具有更多的灵活性和便利性&#xff0c;可以根据需要动态地调整大小&…

温泉镇旅游微信小程序的设计与实现(论文+源码)_kaic

摘要 旅游业随着经济的快速发展呈现出一派欣欣向荣的景象&#xff0c;尤其是近两年来&#xff0c;各个行业运用科技以及因特网来促进旅游迅速发展&#xff0c;逐渐都显示出了的问题&#xff0c;特别突出的是在线上推广&#xff0c;其缺点也是特别明显。尽管在新冠肺炎的冲击下&…

后端中缓存的作用以及基于Spring框架演示实现缓存

缓存的作用及演示 现在我们使用的程序都是通过去数据库里拿数据然后展示的 长期对数据库进行数据访问 这样数据库的压力会越来越大 数据库扛不住了 创建了一个新的区域 程序访问去缓存 缓存区数据库 缓存里放数据 有效降低数据访问的压力 我们首先进行一个演示 为了演示…

基于System-Verilog的FPGA设计与仿真

一、System-Verilog System Verilog的发展 SystemVerilog 的出现是为了因应日益复杂的数位电路设计和验证需求。虽然Verilog HDL 在早期的数位电路设计中得到了广泛应用&#xff0c;但随着技术的发展和电路复杂度的增加&#xff0c;Verilog HDL 在某些方面已经显得有些不足以满…

甘肃这款饼子很火 你是否有吃过呢

白吉饼那独特的外形&#xff0c;圆圆的十分可爱。&#x1f44f;它的表皮酥脆&#xff0c;内里绵软&#xff0c;麦香四溢。&#x1f60b;拿在手里沉甸甸的&#xff0c;就知道用料十足。 无论是直接吃&#xff0c;感受那纯粹的面香&#xff0c;还是夹上腊汁肉&#xff0c;变成美味…

智慧监狱技术解决方案

1. **建设背景**&#xff1a;介绍了智慧监狱建设的战略部署&#xff0c;包括司法部提出的“数字法治、智慧司法”信息化体系建设&#xff0c;以及智慧监狱建设的总体目标、重点任务和实施步骤。 2. **建设需求**&#xff1a;分析了当前监狱系统存在的问题&#xff0c;如子系统…

Python 小市值股票模型代码及回测分析

目录 一、模型介绍 二、代码详解 2.1 初始化函数 2.2 股票筛选过滤函数 2.3 止损函数 2.4 开盘时运行函数 2.5 调仓函数 三、回测结果分析 3.1 收益净值图与概述 3.2 模型收益概览 3.3 年度收益图 3.4 月度收益的时间序列 3.5 月度收益热力图 3.6 月度收益频次分…

手机上安装AI模型是一种什么体验?

昨天参加微软的AI DAY活动&#xff0c;看到微软的技术大佬分享了一个场景&#xff0c;就是坐飞机从上海到北京&#xff0c;机长广播因为天气原因&#xff0c;飞机需要盲降&#xff0c;他说当时听到盲降第一反应感觉有点恐慌&#xff0c;但是因为飞机上受限于网络环境&#xff0…

玄机平台应急响应—MySQL应急

前言 这个是比较简单的&#xff0c;其实和MySQL没啥太大的关系&#xff0c;没涉及太多MySQL的知识。看一下它的flag要求吧。 flag1 它说黑客写入的shell&#xff0c;那我们就去它的网站目录去看看&#xff0c;果然有一个叫sh.php的文件。 flag1{ccfda79e-7aa1-4275-bc26-a61…

C++ 18 之 函数的重载

c18函数的重载.cpp #include <iostream> #include <string.h> using namespace std;void fun4(int a) {cout << "int a: "<< a << endl; } void fun4(double a) {cout << "double a: " << a << endl; }v…