当前位置: 首页 > news >正文

小白系列Vite-Vue3-TypeScript:008-安装配置mock

上一篇我们介绍了Vite+Vue3+TypeScript项目中axios的安装和配置,并手动封装了api。本篇我们来在上篇基础上介绍如何引入mock,并在本地模拟后台接口请求来达到本地测试的目的。

在现在前后端分离的开发模式中,前端页面很多渲染的数据都需要通过http请求异步从服务器获取,前端很多开发工作都要依赖于后端的接口。但是实际项目上往往前端和后台的开发并行,甚至前端都做了很多工作了,后台还没开始,这就没办法满足前端对后台接口的需求。所以前端需要一种方式可以来模拟数据请求,从而更多的掌握主动权独立开发项目,mockjs可以以无侵入的方式拦截 ajax 请求,通过模拟服务器端响应来返回数据,废话不所说,大家撸起来......

安装mockjs

项目中mockjs主要用途一般为模拟后台数据接口,所以安装为开发依赖就可以,生产环境下失效。

npm i mockjs vite-plugin-mock -D

创建文件

创建mock/index.ts

在src目录下新建mock文件夹,新建index.ts,代码如下

import { MockMethod } from "vite-plugin-mock"const mock: Array<MockMethod> = [{// 接口路径url: '/api/test',// 接口方法method: 'get',// 返回数据response: () => {return {status: 200,message: 'success',data: 'mock模拟数据请求成功!'}}}
]export default mock

创建api/index.ts

在src目录下新建api文件夹,新建index.ts,代码如下

import request from "@/utils/request";export const testApi = () => {return request.get("/api/test")
}

配置vite.config.ts

为了正常要使用mock,还需要在vite.config.ts文件对应位置对mock进行如下配置,在vite启动项目的同时启动mock服务。

//引入mock
import { viteMockServe } from "vite-plugin-mock";//启动mock服务
viteMockServe({supportTs: false,logger: false,mockPath: "./src/mock/"
})

页面测试

在src/views/index.vue文件添加如下代码进行接口测试

<div><h1>mock接口测试</h1><el-button size="small" @click="mockTest">testApi</el-button>
</div>
const mockTest = () => {testApi().then((datas) => {console.log(datas)})
}

测试效果

启动项目后,点击按钮,发现模拟接口返回数据正常

至此,mockjs安装和配置完成!

我相信,每天学习一点点,收获成长亿点点!

相关文章:

小白系列Vite-Vue3-TypeScript:008-安装配置mock

上一篇我们介绍了ViteVue3TypeScript项目中axios的安装和配置&#xff0c;并手动封装了api。本篇我们来在上篇基础上介绍如何引入mock&#xff0c;并在本地模拟后台接口请求来达到本地测试的目的。在现在前后端分离的开发模式中&#xff0c;前端页面很多渲染的数据都需要通过ht…...

OnGUI Box 控件||Unity 3D OnGUI 常用控件

OnGUI Box 控件Unity 3D Box 控件用于在屏幕上绘制一个图形化的盒子。Box 控件中既可以显示文本内容&#xff0c;也可以绘制图片&#xff0c;或两者同时存在。GUIContent 和 GUIStyle 对于 Box 控件同样适用&#xff0c;既可以用来修饰 Box 控件的文本颜色&#xff0c;也可以用…...

shiro721——CVE-2019-12422

这两个漏洞主要区别在于Shiro550使⽤已知密钥碰撞&#xff0c;后者Shiro721是使⽤ 登录后rememberMe {value}去爆破正确的key值 进⽽反序列化&#xff0c;对⽐Shiro550条件只要有 ⾜够密钥库 &#xff08;条件⽐较低&#xff09;、Shiro721需要登录&#xff08;要求⽐较⾼鸡肋 …...

爬虫JS逆向思路 - - 扣JS(data解密)

网络上几千块都学不到的JS逆向思路这里全都有&#x1f44f;&#x1f3fb;&#x1f44f;&#x1f3fb;&#x1f44f;&#x1f3fb; 本系列持续更新中&#xff0c;三连关注不迷路&#x1f44c;&#x1f3fb; 干货满满不看后悔&#x1f44d;&#x1f44d;&#x1f44d; ❌注意…...

Android 进阶——Framework 核心之Binder 相关预备理论(一)

文章大纲引言一、进程的内存空间和进程隔离二、Linux 系统内存的用户空间和内核空间1、用户空间&#xff08;User Space&#xff09;2、内核空间&#xff08;Kernel Space&#xff09;三、Linux IPC 原理1、内核态和用户态2、IPC 步骤四、内核模块和驱动五、Binder1、Binder IP…...

【23种设计模式】结构型模式详细介绍

前言 本文为 【23种设计模式】结构型模式 相关内容介绍&#xff0c;下边将对适配器模式&#xff0c;桥接模式&#xff0c;组合模式&#xff0c;装饰模式&#xff0c;外观模式&#xff0c;亨元模式&#xff0c;代理模式&#xff0c;具体包括它们的特点与实现等进行详尽介绍~ &a…...

接口自动化实战-postman

1.测试模型 单元测试并非测试工程师的本职工作&#xff0c;它属于开发工程师的工作&#xff0c;开发进行单元测试的情况我们不知道&#xff0c;为了确保系统尽可能没有Bug&#xff0c;于是接口测试在测试工程师这里就变得由为重要了。实际工作中为菱形模型。 接口测试能更早的…...

前端跨域方案简单总结

1、什么是跨域 【】跨域是一种浏览器同源安全策略&#xff0c;也即浏览器单方面限制脚本的跨域访问。很多人可能误认为资源跨域时无法请求&#xff0c;实质上请求是可以正常发起的&#xff08;指通常情况下&#xff0c;部分浏览器存在部分特例&#xff09;&#xff0c;后端也可…...

【HTML】HTML 表格 ② ( 表头单元格标签 | 表格标题标签 )

文章目录一、表头单元格标签二、表格标题标签一、表头单元格标签 表头单元格 可以在表格中 用作第一排 作为表格 的 表头 使用 , 表头单元格 中的 文本设置 可以与 普通单元格 中的文本设置 不同 ; 表头单元格 中的 文本 会 居中 , 并且 加粗 显示 ; 表头单元格 标签 如下 : &…...

常用的辅助类2(StringBuilder、StringBuffer、处理时间相关的类、对象比较器)

Java知识点总结&#xff1a;想看的可以从这里进入 目录7.7、字符串相关类7.8、时间处理7.8.1、JDK8前7.8.2、JDK8后1、时间日期类2、格式化日期3、其他7.9、对象比较器7.7、字符串相关类 String&#xff1a;JDK1.0出现&#xff0c;字符串类&#xff0c;被final修饰其值不可改。…...

anaconda下pytorchCPU GUP安装及问题记录

1 pytorch安装&#xff08;CPU版本&#xff09; pip3 install torch torchvision torchaudio -i https://pypi.tuna.tsinghua.edu.cn/simple2 torchvision、torchaudio、torchtext安装&#xff1a;解决ModuleNotFoundError: No module named ‘torchvision‘问题 &#xff08…...

香港中文大学MISC Lab GNN团队: 异质图神经网络研究进展从谱的角度看待(图)对比学习(图自监督学习)

简介 实验室简介 香港中文大学机器智能与社会计算实验室(MISC Lab, Machine Intelligence and Social Computing Lab) 由Prof. Irwin King 创建并不断发展, 在图学习,推荐系统,自然语言处理,机器学习等领域取得了卓越的研究成果。在图学习方面, MISC Lab关注异质图学习(Het…...

C#开发的OpenRA的Enumerable.Concat方法应用

C#开发的OpenRA的Enumerable.Concat方法应用 在OpenRA游戏里,可以让用户指定搜索目录,也可以搜索应用程序所在的目录。 还需要把这两个结果集连接到一起,那么它是怎么实现的呢? 它是采用了Enumerable.Concat方法,实现两个列表的结果集进行合并。 可以看一下这个函数的代码…...

前端知识点总结(自参)

BFC 块级格式化上下文。BFC元素不会影响到其它环境中的布局。 触发BFC的条件 根元素或其它包含它的元素浮动元素 (元素的 float 不是 none)绝对定位元素 (元素具有 position 为 absolute 或 fixed)内联块 (元素具有 display: inline-block)表格单元格 (元素具有 display: tabl…...

[ 靶场环境片 ] kali-linux采用Docker 搭建 pikachu(特别详细)

🍬 博主介绍 👨‍🎓 博主介绍:大家好,我是 _PowerShell ,很高兴认识大家~ ✨主攻领域:【渗透领域】【数据通信】 【通讯安全】 【web安全】【面试分析】 🎉点赞➕评论➕收藏 == 养成习惯(一键三连)😋 🎉欢迎关注💗一起学习👍一起讨论⭐️一起进步📝文末…...

阿里6面,成功唬住面试官拿了27K,软件测试面试也没有传说中那么难吧....

阿里的面试挺独特&#xff0c;每轮面试都没有 HR 约时间&#xff0c;一般是晚上 8 点左右面试官来一个电话&#xff0c;问是否能面试&#xff0c;能的话开始面&#xff0c;不能就约一个其它时间。 全程 6 面&#xff0c;前五面技术面&#xff0c;电话面试&#xff0c;最后一面…...

为什么静默安装未经过数字签名的驱动是不可行的?

我想&#xff0c;在 Windows XP 系统上&#xff0c;造成蓝屏的最主要原因是带有 Bug 的设备驱动程序。 请问在座的&#xff0c;谁赞成&#xff0c;谁反对。 因为驱动运行在内核模式&#xff0c;再也没有更高级别的组件对其进行行为监管&#xff0c;它可以做它想做的任何事情。…...

Caused by: java.sql.SQLException: ORA-28040: 没有匹配的验证协议

更改Oracle的配置文件&#xff1a;Oracle -> app -> ... ->...dbhome... -> admin重启Oracle:重启Oracle数据库的操作步骤1.查看监听器状态&#xff1a;lsnrctl status2.停止监听器&#xff1a;lsnrctl stop3.连接数据库&#xff1a;sqlplus / as sysdba4.停止数据…...

Dubbo3简单使用

Dubbo3简单使用 &#x1f449; 使用Spring Boot实现Dubbo3&#xff0c;请参见以下地址。 # Dubbo3官网地址 https://cn.dubbo.apache.org/zh/# 使用SpringBoot实现Dubbo3的地址 https://cn.dubbo.apache.org/zh/docs3-v2/java-sdk/quick-start/spring-boot/# 该项目的git地址…...

Redis未授权漏洞蜜罐模拟与捕获分析

1.概述 文章主要分析Redis未授权漏洞的原理及形成原因&#xff0c;使用vulhub靶场进行漏洞复现&#xff0c;在了解漏洞原理并复现的基础上使用golang编写蜜罐代码进行模拟&#xff0c;开放端口在网上捕获真实存在的恶意攻击行为&#xff0c;对恶意样本进行分析&#xff0c;总结…...

进程地址空间(比特课总结)

一、进程地址空间 1. 环境变量 1 &#xff09;⽤户级环境变量与系统级环境变量 全局属性&#xff1a;环境变量具有全局属性&#xff0c;会被⼦进程继承。例如当bash启动⼦进程时&#xff0c;环 境变量会⾃动传递给⼦进程。 本地变量限制&#xff1a;本地变量只在当前进程(ba…...

uniapp微信小程序视频实时流+pc端预览方案

方案类型技术实现是否免费优点缺点适用场景延迟范围开发复杂度​WebSocket图片帧​定时拍照Base64传输✅ 完全免费无需服务器 纯前端实现高延迟高流量 帧率极低个人demo测试 超低频监控500ms-2s⭐⭐​RTMP推流​TRTC/即构SDK推流❌ 付费方案 &#xff08;部分有免费额度&#x…...

是否存在路径(FIFOBB算法)

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

推荐 github 项目:GeminiImageApp(图片生成方向,可以做一定的素材)

推荐 github 项目:GeminiImageApp(图片生成方向&#xff0c;可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...

Qemu arm操作系统开发环境

使用qemu虚拟arm硬件比较合适。 步骤如下&#xff1a; 安装qemu apt install qemu-system安装aarch64-none-elf-gcc 需要手动下载&#xff0c;下载地址&#xff1a;https://developer.arm.com/-/media/Files/downloads/gnu/13.2.rel1/binrel/arm-gnu-toolchain-13.2.rel1-x…...

抽象类和接口(全)

一、抽象类 1.概念&#xff1a;如果⼀个类中没有包含⾜够的信息来描绘⼀个具体的对象&#xff0c;这样的类就是抽象类。 像是没有实际⼯作的⽅法,我们可以把它设计成⼀个抽象⽅法&#xff0c;包含抽象⽅法的类我们称为抽象类。 2.语法 在Java中&#xff0c;⼀个类如果被 abs…...

Python 高效图像帧提取与视频编码:实战指南

Python 高效图像帧提取与视频编码:实战指南 在音视频处理领域,图像帧提取与视频编码是基础但极具挑战性的任务。Python 结合强大的第三方库(如 OpenCV、FFmpeg、PyAV),可以高效处理视频流,实现快速帧提取、压缩编码等关键功能。本文将深入介绍如何优化这些流程,提高处理…...

游戏开发中常见的战斗数值英文缩写对照表

游戏开发中常见的战斗数值英文缩写对照表 基础属性&#xff08;Basic Attributes&#xff09; 缩写英文全称中文释义常见使用场景HPHit Points / Health Points生命值角色生存状态MPMana Points / Magic Points魔法值技能释放资源SPStamina Points体力值动作消耗资源APAction…...

LUA+Reids实现库存秒杀预扣减 记录流水 以及自己的思考

目录 lua脚本 记录流水 记录流水的作用 流水什么时候删除 我们在做库存扣减的时候&#xff0c;显示基于Lua脚本和Redis实现的预扣减 这样可以在秒杀扣减的时候保证操作的原子性和高效性 lua脚本 // ... 已有代码 ...Overridepublic InventoryResponse decrease(Inventor…...

aurora与pcie的数据高速传输

设备&#xff1a;zynq7100&#xff1b; 开发环境&#xff1a;window&#xff1b; vivado版本&#xff1a;2021.1&#xff1b; 引言 之前在前面两章已经介绍了aurora读写DDR,xdma读写ddr实验。这次我们做一个大工程&#xff0c;pc通过pcie传输给fpga&#xff0c;fpga再通过aur…...