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

Naiveui将message挂载到axios拦截器

最近在做项目,需要将后端的请求结果打印出来

但是想着,要是这样一个一个手动引入naiveui的msg,那不得累死

于是灵机一动,想着既然所有接口要通过拦截器,为什么不将msg写在拦截器呢

一、定义一个消息挂载文件

// TheMessage.vue   为与src/component下的单例组件

<template><div></div>
</template>
<script lang="ts" setup>
import { useMessage } from 'naive-ui'
window.$message = useMessage()
</script>

二、全局挂载

// App.vue

<template><n-config-provider :theme="naiveTheme"><n-modal-provider><n-message-provider><router-view /><TheMessage></TheMessage></n-message-provider></n-modal-provider></n-config-provider>
</template><script setup lang="ts">
import { NConfigProvider } from 'naive-ui'
import { naiveTheme } from 'vue-dark-switch'
</script><style scoped></style>

这里,这里你在哪里要用到msg,就把他使用<n-message-provider>包裹住,我这里<router-view />手动用了,所以新组件和<router-view />都包起来

三、使用

// request.ts  axios拦截器定义的地方

// 重写响应拦截器规则instance.interceptors.response.use((response: any) => {// 对响应数据做点什么console.log('对响应数据做点什么呢?', response.data.msg)if (response.data.code !== 200) {window.$message.error(response.data.msg)} else {window.$message.success(response.data.msg)}return response},(error: any) => {// 对响应错误做点什么console.log('对响应错误做点什么呢?', error)return Promise.reject(error)},)

作者是vite+ts的项目架构,亲测可用,只是TS会报警告而已,没关系

相关文章:

Naiveui将message挂载到axios拦截器

最近在做项目&#xff0c;需要将后端的请求结果打印出来 但是想着&#xff0c;要是这样一个一个手动引入naiveui的msg&#xff0c;那不得累死 于是灵机一动&#xff0c;想着既然所有接口要通过拦截器&#xff0c;为什么不将msg写在拦截器呢 一、定义一个消息挂载文件 // The…...

MySQL、Oracle查看字节和字符长度个数的函数

目录 0. 总结1. MySQL1.1. 造数据1.2. 查看字符/字节个数 2. Oracle2.1. 造数据2.2. 查看字符/字节个数 0. 总结 databasecharbyteMySQLchar_length()length()Oraclelength()lengthB() 1. MySQL 1.1. 造数据 sql drop table if exists demo; create table demo (id …...

第五篇:3.4 用户归因和受众(User attribution and audience) - IAB/MRC及《增强现实广告效果测量指南1.0》

翻译计划 第一篇概述—IAB与MRC及《增强现实广告效果测量指南》之目录、适用范围及术语第二篇广告效果测量定义和其他矩阵之- 3.1 广告印象&#xff08;AD Impression&#xff09;第三篇广告效果测量定义和其他矩阵之- 3.2 可见性 &#xff08;Viewability&#xff09;第四篇广…...

ES6: class类

类 class 面相对象class关键字创建类关于类的继承 面相对象 一切皆对象。 举例&#xff1a; 操作浏览器要使用window对象&#xff1b;操作网页要使用document对象&#xff1b;操作控制台要使用console对象&#xff1b; ES6中增加了类的概念&#xff0c;其实ES5中已经可以实现类…...

[中级]软考_软件设计_计算机组成与体系结构_08_输入输出技术

输入输出技术 前言控制方式考点往年真题 前言 输入输出技术就是IO技术 控制方式 程序控制(查询)方式&#xff1a;分为无条件传送和程序查询方式两种。 方法简单&#xff0c;硬件开销小&#xff0c;但I/O能力不高&#xff0c;严重影响CPU的利用率。 程序中断方式&#xff1…...

2024-04-04 问AI: 在深度学习中,微调是什么?

文心一言 在深度学习中&#xff0c;微调&#xff08;Fine-tuning&#xff09;是一种训练策略&#xff0c;特别针对预训练模型进行。预训练模型通常是在大规模无标注数据上通过自监督学习得到的&#xff0c;它们已经具备了对一般自然语言结构或视觉特征的良好理解能力。微调则是…...

db2数据仓库集群的搭建

db2数据仓库集群的搭建 DB2 集群的搭建通常涉及到多个环节&#xff0c;包括网络配置、DB2 软件安装、集群配置和数据库创建等。以下是搭建DB2集群的基本步骤&#xff0c;并不是实际的命令和配置&#xff0c;因为每个环境的具体配置可能会有所不同。 1、网络配置&#xff1a;确…...

Linux ARM平台开发系列讲解(u-boot篇) 5.1 u-boot的启动流程分析(ARMv8-a)

1. 概述 对于嵌入式来说,bootload对于开发人员来说并不陌生,但是在不同芯片架构中,bootload程序所做的一些操作是有所不同的,比如常见的STM32 Cotex-M和RK3568 之间的启动流程所做的操作是有所不同的。本小节就来概述一下U-boot的启动流程: 注意:本章节中的源码我大多数…...

ST表(数据结构中的问题)

RMQ问题 RMQ问题指对于数值&#xff0c;每次给一个区间[l,r]&#xff0c;要求返回区间区间的最大值或最小值 也就是说&#xff0c;RMQ就是求区间最值的问题 对于RMQ问题&#xff0c;容易想到一种O&#xff08;n&#xff09;的方法&#xff0c;就是用i直接遍历[l,r]区间&…...

一、OpenCV(C#版本)环境搭建

一、Visual Studio 创建新项目 二、选择Windows窗体应用&#xff08;.NET Framework&#xff09; 直接搜索模板&#xff1a;Windows窗体应用(.NET Framework) 记得是C#哈&#xff0c;别整成VB(Visual Basic)了 PS&#xff1a;若搜索搜不到&#xff0c;直接点击安装多个工具和…...

ubuntu远程服务部署,Docker,蓝牙无线局域网,SSH,VNC,xfce4,NextTerminal,宝塔,NPS/NPC,gost,openwrt

SSH服务 apt update apt upgrade -y apt install -y openssh-server/etc/ssh/sshd_config PermitRootLogin yesDocker curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun apt install -y docker-compose宝塔 wget -O install.sh https://download.bt.cn…...

kettle安装与部署使用教程

kettle 官网下载与部署使用 文章目录 kettle 官网下载与部署使用1. 前言&#xff1a;2. 访问官方网站&#xff1a;3. Download Pentaho3.1 官网首页**滑动到最底**&#xff0c;寻找下载链接&#xff1a;3.2 跳转到下载界面后&#xff0c;选择 Pentaho Community Edition (CE)3.…...

【C语言】编译和链接

1. 翻译环境和运行环境 在ANSI C的任何⼀种实现中&#xff0c;存在两个不同的环境。 第1种是翻译环境&#xff0c;在这个环境中源代码被转换为可执⾏的机器指令&#xff08;⼆进制指令&#xff09;。 第2种是执⾏环境&#xff0c;它⽤于实际执⾏代码。 2. 编译环境 那翻译环境…...

Python学习: 错误和异常

Python 语法错误 解析错误(Parsing Error)通常指的是程序无法正确地解析(识别、分析)所给定的代码,通常是由于代码中存在语法错误或者其他无法理解的结构导致的。这可能是由于缺少括号、缩进错误、未关闭的引号或其他括号等问题造成的。 语法错误(Syntax Error)是指程序…...

WebGIS 之 vue3+vite+ceisum

1.项目搭建node版本在16以上 1.1创建项目 npm create vite 项目名 1.2选择框架 vuejavaScript 1.3进入项目安装依赖 cd 项目名 npm install 1.4安装cesium依赖 pnpm i cesium vite-plugin-cesium 1.5修改vite.config.js文件 import { defineConfig } from vite import vue fr…...

## CSDN创作活动:AI技术创业有哪些机会?

AI技术创业有哪些机会&#xff1f; 人工智能&#xff08;AI&#xff09;技术作为当今科技创新的前沿领域&#xff0c;为创业者提供了广阔的机会和挑战。随着AI技术的快速发展和应用领域的不断拓展&#xff0c;未来AI技术方面会有哪些创业机会呢&#xff1f; 方向一&#xff1…...

中医肝胆笔记

目录 肝胆的经络足厥阴肝经足少阳胆经 疏肝健脾的药舒肝益脾颗粒&#xff1a;逍遥丸&#xff1a;疏肝颗粒 -> 疏肝理气的力度大-> 肝郁的程度深&#xff0c;逍遥丸没用的是时候用这个加味逍遥丸 -> 清热的力度最大->适用 肝郁火大&#xff0c;舌苔黄丹栀逍遥丸->…...

理解Go语言中break语句是如何工作的

break语句常用来中断循环。当循环与switch或select一起使用时&#xff0c;开发者经常执行了错误的break语句。 让我们来看下面的示例。我们在for循环里使用了switch,如果循环索引值是2&#xff0c;那么我们想中断循环&#xff1a; package mainimport ("fmt" )func …...

11. 瀑布流布局

<!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-width, initial-scale1.0" /><title>11.瀑布流布局</title><style>#cont…...

Flutter-发布插件到pub上传不上问题

问题1&#xff1a; 尝试指令&#xff1a; flutter packages pub publish --serverhttps://pub.dartlang.org问题2&#xff1a; 问题1解决后&#xff0c;进入验证身份&#xff0c;点击终端显示的链接&#xff0c;跳转到google验证&#xff0c;记得这里要科*学上网&#xff0c;点…...

Windows 2008虚拟机安装、安装VM Tools、快照和链接克隆、添加硬盘修改格式为GPT

一、安装vmware workstation软件 VMware workstation的安装介质&#xff0c;获取路径&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1AUAw_--yjZAUPbsR7StOJQ 提取码&#xff1a;umz1 所在目录&#xff1a;\vmware\VMware workstation 15.1.0 1.找到百度网盘中vmwa…...

c++的学习之路:12、vector(1)

这章主要是根据cplusplus中的文档进行使用Vector&#xff0c;文章末附上测试代码。 目录 一、什么是vector 二、vector的简单使用 三、代码 一、什么是vector 下图是cplusplus的简介&#xff0c;上面一共有六点&#xff0c;如下&#xff1a; 1、vector是表示可变大小数组…...

2024.2.17力扣每日一题——N叉树的层序遍历

2024.2.17 题目来源我的题解方法一 广度优先搜索&#xff08;队列实现&#xff09; 题目来源 力扣每日一题&#xff1b;题序&#xff1a;429 我的题解 方法一 广度优先搜索&#xff08;队列实现&#xff09; 和二叉树的层序遍历相同&#xff0c;只是在添加子节点的细节有所不…...

滑动窗口(尺取法/Python)

滑动窗口&#xff08;尺取法&#xff09; 算法含义&#xff1a; 在解决关于区间特性的题目时保存搜索区间左右端点&#xff0c;然后根据实际要求不断更新左右端点位置的算法 时间复杂度&#xff1a; O ( n ) O(n) O(n) 空间复杂度&#xff1a; O ( 1 ) O(1) O(1) 在历年真题…...

【打印SQL执行日志】⭐️Mybatis-Plus通过配置在控制台打印执行日志

目录 前言 一、Mybatis-Plus 开启日志的方式 二、测试 三、日志分析 章末 前言 小伙伴们大家好&#xff0c;相信大家平时在处理问题时都有各自的方式&#xff0c;最常用以及最好用的感觉还是断点调试&#xff0c;但是涉及到操作数据库的执行时&#xff0c;默认的话在控制台…...

Vue后台管理系统常用组件的优缺点分析

以下是Vue后台管理系统常用组件的优缺点分析&#xff1a; Element UI 优点&#xff1a; 丰富的组件库&#xff1a;Element UI 提供了大量的组件&#xff0c;包括表单、表格、弹窗、导航等&#xff0c;可以满足各种后台管理系统的需求。易于使用&#xff1a;Element UI 的组件…...

栈的应用——用栈实现算数混合运算表达式的计算

1、单目运算符双目运算符 算数运算符分为单目运算符和双目运算符等 单目运算符只需要一个操作数,双目运算符需要两个操作数 双目运算符最常见:常见的算术运算符:*/,比较运算符:<>=等等以下是一些单目运算符:正号 (+): 用于表示正数或给数值一个正号。例如:+5 仍然…...

动态规划—机器人移动问题(Java)

&#x1f600;前言 机器人移动问题是一个经典的动态规划应用场景&#xff0c;它涉及到在给定范围内的位置上进行移动&#xff0c;并计算到达目标位置的方法数。本文将介绍三种解决这一问题的方法&#xff1a;暴力递归、缓存法和动态规划。通过比较不同方法的优缺点&#xff0c;…...

第十一届蓝桥杯物联网试题(省赛)

对于通信方面&#xff0c;还是终端A、B都保持接收状态&#xff0c;当要发送的数组不为空再发送数据&#xff0c;发送完后立即清除&#xff0c;接收数据的数组不为空则处理&#xff0c;处理完后立即清除&#xff0c;分工明确 继电器不亮一般可能是电压不够 将数据加空格再加\r…...

【Python基础教程】5. 数

&#x1f388;个人主页&#xff1a;豌豆射手^ &#x1f389;欢迎 &#x1f44d;点赞✍评论⭐收藏 &#x1f917;收录专栏&#xff1a;python基础教程 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共同学习、…...

男男sm怎么做视频网站/百度移动应用

数据库故障的种类事务内部的故障事务内部故障是指事务运行没有达到预期的终点&#xff08;COMMIT或者显式的ROLLBACK)&#xff0c;未能成功地提交事务&#xff0c;使数据库处于不正确状态。事务内部故障有的可以通过事务程序本身发现&#xff0c;是可预期的故障&#xff0c;但更…...

企业网站seo成功案例/网络热词2022

&#xfeff;&#xfeff;Lua初识之表达式-五 运算符 &#xff08;1&#xff09;算术运算符&#xff1a; 二元运算符&#xff1a; 、- 、 *、 /、^。 (加减乘除幂) 一元运算符&#xff1a; - &#xff08;负数&#xff09; &#xff08;2&#xff09;关系运算符&#xff1a;…...

网站常用素材/手机如何制作网站教程

在drawable 里面 建立一个 xml 直接复制 看效果 自己调试就可以android:bottom"0.5dp"android:left"0.5dp"android:right"0.5dp"android:top"0dp" />android:bottom"0.5dp"android:left"0.5dp"android:right&q…...

专业返利网站开发/全媒体广告代理

Hbase采用Java实现&#xff0c;原生客户端也是Java实现&#xff0c;其他语言需要通过thritf接口服务间接访问Hbase的数据。 Hbase作为大数据存储数据库&#xff0c;其写能力非常强&#xff0c;加上Hbase本身就脱胎于Hadoop故和Hadoop的兼容性极好&#xff0c;非常适合于存储半规…...

编程做网站容易还是做软件/长沙seo推广公司

今天修改了/etc/rsyslog.conf中的内容后&#xff0c;想着要通过systemctl restart rsyslog重启服务&#xff0c;但是执行完命令后&#xff0c;总感觉/etc/rsyslog.conf中修改的内容没有生效。于是乎就去看了下/var/log/messages下的日志文件&#xff0c;发现有这样一行提示&…...

摄影网站采用照片做宣传 版权费是多少/北京seo课程

github有哪些东西&#xff1f;其实是很多东西。我不认为你必须使用它&#xff0c;但是它的确汇集了世界上的优秀程序员和工程师&#xff0c;汇集了有开源精神和情怀的一帮人&#xff0c;汇集了各种开源技术&#xff01; 你是否需要GitHub&#xff1f; 要了解Github&#xff0c;…...