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

【Vue】自定义指令、插槽

news 来源：原创 2025/7/4 17:55:45

目录

自定义指令

是什么

作用

使用方法

定义

使用 

自定义指令配合绑定数据

语法

自定义指令的简写

语法

使用时机

插槽

什么是插槽

默认（匿名）插槽

​编辑插槽的默认值

具名插槽

使用方法

简写

使用示例 

作用域插槽

自定义指令

是什么

  • 内置指令：是vue3自带的，比如：v-model、v-for、v-if....我们可以直接使用。
  • 自定义指令：相对内置指令而言，我们自己编写的指令，当内置指令无法满足需求的时候，就可以自己编写的指令。

作用

封装一段公共的DOM操作的代码。

与ref属性操作DOM的区别：

  1. ref是作用在单个标签上的，代码无法复用
  2. 自定义指令可以把一段公共的DOM操作代码封装起来，进行复用

使用方法

定义

main.js -> app.directive('指令名',{

        mounted(el){

                //el就是指令所在的DOM元素

        }

})

示例：在main.js文件中

const app=createApp(App)app.directive('jujiao',{mounted(el){el.focus()}
})app.mount('#app')

使用 

<XXX v-指令名>

<template><input type="text" v-jujiao/>
</template>

自定义指令配合绑定数据

语法

1、在绑定指令时，可以通过“等号”的形式为指令绑定具体的参数值

<template><div v-color="colorStr">Hello World</div>
</template><script setup>import { ref } from 'vue'const colorStr = ref('blue')
</script>

2、通过binding.value可以拿到指令值，指令值修改会触发updated钩子

app.directive('color',{//mouted钩子只负责初次渲染，后续指令所在表达式的值变了，该函数不会执行，因此需要引入updated钩子mounted(el,binding){//el就是指令所在的DOM元素//binding：指令绑定的信息对象，通过binding.value获取表达式结果el.style.color=binding.value},updated(el,binding){el.style.color=binding.value}
})

自定义指令的简写

将上面提到指令的mounted()和updated()两个钩子进行合写，用一个函数来代替，并且这个函数会在mounted()和updated()时机都会执行。

语法

app.directive('color',(el,binding)=>{el.style.color=binding.value
})

使用时机

  1. 当自定义指令绑定数据，那么就可以简写（简写的本质=mounted()+updated()）
  2. 当自定义指令没有绑定数据，那么就采用非简写的方式。

插槽

什么是插槽

        本质就是一个占位符，今后可以给这个占位符传入想要的组件结构，从而大大提高组件的灵活性和可复用性。

默认（匿名）插槽

作用

让组件内部的一些结构支持自定义

语法

  1. 在使用组件的时候，把组件写成双标签
  2. 在双标签之间传入想展示的结构，从而替换占位的slot组件

子组件

<script setup></script>
<template><div class="dialog"><div class="dialog-header"><h3>友情提示</h3><span class="close">✖️</span></div><div class="dialog-content"><!-- 1. 在组件内标签不确定位置用 slot 组件 --><slot></slot></div><div class="dialog-footer"><button>取消</button><button>确认</button></div></div>
</template><style scoped>* {margin: 0;padding: 0;}.dialog {width: 470px;height: 230px;padding: 0 25px;background-color: #ffffff;margin: 40px auto;border-radius: 5px;}.dialog-header {height: 70px;line-height: 70px;font-size: 20px;border-bottom: 1px solid #ccc;position: relative;}.dialog-header .close {position: absolute;right: 0px;top: 0px;cursor: pointer;}.dialog-content {height: 80px;font-size: 18px;padding: 15px 0;}.dialog-footer {display: flex;justify-content: flex-end;}.dialog-footer button {width: 65px;height: 35px;background-color: #ffffff;border: 1px solid #e1e3e9;cursor: pointer;outline: none;margin-left: 10px;border-radius: 3px;}.dialog-footer button:last-child {background-color: #007acc;color: #fff;}
</style>

App.vue 

<template><!-- 在使用组件的时候，给组件传入想展示的结构，从而替换掉组件内的slot组件 --><MyDialog><span>你确定要进行删除操作吗？</span></MyDialog><MyDialog><span>你确定要退出本系统吗？</span></MyDialog>
</template><script setup>import MyDialog from './components/MyDialog.vue';
</script>

插槽的默认值

如果未传入内容，则显示slot标签内的内容 

<slot> 我是默认内容 </slot>

默认值的生效规则：

  1. 如果没传，就显示默认值，防止页面空白
  2. 如果传入了，就会用传入的，替换掉占位的slot，从而展示实际传入的标签结构

具名插槽

一个组件内有多处结构，需要外部传入标签，进行定制，默认插槽只能定制一处内容。这是给插槽添加name属性，进行区分，添加name属性的插槽就是具名插槽。

使用方法

<slot name="插槽名"> 默认的内容</slot>

<template v-slot:插槽名> 要展示的内容</template> 

简写

<template #插槽名> 要展示的内容</template>

使用示例 

根组件

<template><!-- 在使用组件的时候，给组件传入想展示的结构，从而替换掉组件内的slot组件 --><MyDialog><template v-slot:title><span>删除确认</span></template><template v-slot:content><span>你确定要进行删除操作吗？</span></template></MyDialog></template><script setup>import MyDialog from './components/MyDialog.vue';
</script>

子组件（插槽） 

<script setup></script>
<template><div class="dialog"><div class="dialog-header"><slot name="title"></slot><span class="close">✖️</span></div><div class="dialog-content"><!-- 1. 在组件内标签不确定位置用 slot 组件 --><slot name="content"></slot></div><div class="dialog-footer"><button>取消</button><button>确认</button></div></div>
</template><style scoped>* {margin: 0;padding: 0;}.dialog {width: 470px;height: 230px;padding: 0 25px;background-color: #ffffff;margin: 40px auto;border-radius: 5px;}.dialog-header {height: 70px;line-height: 70px;font-size: 20px;border-bottom: 1px solid #ccc;position: relative;}.dialog-header .close {position: absolute;right: 0px;top: 0px;cursor: pointer;}.dialog-content {height: 80px;font-size: 18px;padding: 15px 0;}.dialog-footer {display: flex;justify-content: flex-end;}.dialog-footer button {width: 65px;height: 35px;background-color: #ffffff;border: 1px solid #e1e3e9;cursor: pointer;outline: none;margin-left: 10px;border-radius: 3px;}.dialog-footer button:last-child {background-color: #007acc;color: #fff;}
</style>

作用域插槽

带数据的插槽，用slot占位的同时，还可以给slot绑定数据，也就是说数据来源于插槽，但是怎么展示这些数据由自定义结构决定。

接收插槽数据

这里的obj就代表对应slot标签绑定的所有数据的对象

<template v-slot:content="obj"><span>obj.a={{ obj.a }}</span>
</template>

上面是使用一个对象进行接收，我们也可以对接收的数据进行解构，直接获取指定的数据，如下：

<template v-slot:content="{a}"><span> a={{ a }}</span>
</template>

slot绑定数据

<div class="dialog-content"><slot name="content" a="123" b="456"></slot>
</div>

相关文章：

【Vue】自定义指令、插槽

目录 自定义指令 是什么 作用 使用方法 定义 使用 自定义指令配合绑定数据 语法 自定义指令的简写 语法 使用时机 插槽 什么是插槽 默认&#xff08;匿名&#xff09;插槽 ​编辑插槽的默认值 具名插槽 使用方法 简写 使用示例 作用域插槽 自定义指令 是什…...

编程日记 2025/7/4 17:55:45

AI - RAG中的状态化管理聊天记录

AI - RAG中的状态化管理聊天记录 大家好&#xff0c;今天我们来聊聊LangChain和LLM中一个重要的话题——状态化管理聊天记录。在使用大语言模型(LLM)的时候&#xff0c;聊天记录&#xff08;History&#xff09;和状态&#xff08;State&#xff09;管理是非常关键的。那我们先…...

编程日记 2025/7/5 7:57:54

微服务网关SpringCloudGateway、Kong比较

网关产品 1. Spring Cloud Gateway 基本信息 Spring Cloud Gateway是Spring Cloud生态系统中的一个组件&#xff0c;基于Spring 5、Project Reactor和Spring Boot 2构建。它旨在为微服务架构提供一种简单而有效的API网关解决方案。 功能特点 路由功能强大&#xff1a;使用Rou…...

编程日记 2025/7/4 7:32:37

MVC基础语法

文章目录 项目地址一、MVC的传值方式1.1 ViewBag和ViewData传值1.1.1 ViewBag1.1.2 ViewData 1.2 视图模型传值&#xff08;ViewModel&#xff09; 二、HttpConntext上下文三、中间件 项目地址 教程作者&#xff1a;誉尚学教育教程地址&#xff1a; https://www.bilibili.com…...

编程日记 2025/7/2 22:01:45

Web day09 会话技术 JWT令牌 Filter Interceptor

目录 会话技术&#xff1a; 1.Cookie&#xff1a; 2.Session&#xff1a; 3.令牌技术&#xff1a; JWT令牌&#xff1a; 生成JWT令牌&#xff1a; 校验JWT令牌&#xff08;解析生成的令牌&#xff09; 登陆时下发令牌&#xff1a; 过滤器Filter&#xff1a; 拦截器Inte…...

编程日记 2025/7/3 15:35:33

OpenCV相机标定与3D重建(14)用于组合两个旋转和平移（R|T）变换函数composeRT()的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 cv::composeRT 是 OpenCV 库中的一个函数&#xff0c;用于组合两个旋转和平移&#xff08;R|T&#xff09;变换。这个函数可以将两个连续的刚体变…...

编程日记 2025/7/1 18:31:52

leetcode33.搜索旋转排序数组

整数数组 nums 按升序排列&#xff0c;数组中的值 互不相同 。 在传递给函数之前&#xff0c;nums 在预先未知的某个下标 k&#xff08;0 < k < nums.length&#xff09;上进行了 旋转&#xff0c;使数组变为 [nums[k], nums[k1], ..., nums[n-1], nums[0], nums[1], ..…...

编程日记 2025/7/5 7:00:21

TMS Software：TMS BIZ产品——TMS XData

TMS XData 用于多层REST/JSON HTTP/HTTPS应用服务器开发和ORM远程处理的Delphi框架。 TMS扩展数据可同时用于以下框架&#xff1a; VCLWEBFMX TMS XData可同时用于以下操作系统/浏览器&#xff1a; TMS XData可同时用于以下IDE&#xff1a; 功能概述 基于REST/JSON架构风格的…...

编程日记 2025/6/28 18:15:37

leecode中的面试100题

isalnum函数用于检查一个字符是否为字母或数字。它的参数是一个int类型 isupper() 是大写 islower() 是小写 toupper() 变成大写 tolower() 变成小写 do while 首先不管怎么 先执行do一次 然后执行完了之后 在判断while如果符合while里面就继续执行do vector容器中insert…...

编程日记 2025/7/5 7:49:12

不同类型的集成技术——Bagging、Boosting、Stacking、Voting、Blending简述

目录 一、说明 二、堆叠 2.1 堆叠的工作原理&#xff1a; 2.2 例子&#xff1a; 2.3 堆叠的优点&#xff1a; 三、投票&#xff08;简单投票&#xff09; 3.1 例子&#xff1a; 3.2 投票的优点&#xff1a; 四、装袋和投票之间的区别 五、混合 6.1 混合的主要特征&#xff1a; …...

编程日记 2025/7/3 1:13:38

【从零开始入门unity游戏开发之——C#篇01】理论开篇

文章目录 前言前置条件什么是编程&#xff1f;什么是代码&#xff1f;什么是编程语言&#xff1f;常见的编程语言什么是C#&#xff1f;学习Unity为什么要先学习C#&#xff1f;选择适合自己的IDE集成开发环境VSCode安装和环境配置VSCode调试模式专栏推荐完结 前言 这个系列我想…...

编程日记 2025/6/30 16:11:49

TCP的“可靠性”（上）

目录 TCP的“可靠性”&#xff08;上&#xff09;确认应答&#xff08;可靠性传输的基础&#xff09;超时重传连接管理&#xff08;三次握手&#xff0c;四次挥手&#xff09; TCP的“可靠性”&#xff08;上&#xff09; 想必大家都或多或少的听说过TCP的特性&#xff1a;有连…...

编程日记 2025/7/3 6:24:35

Windows平台Unity3D下如何低延迟低资源占用播放RTMP或RTSP流？

技术探讨 自2017年我们发布跨平台的低延迟Unity下的RTSP|RTMP直播播放器后&#xff0c;Unity下的直播体验有了质的提升&#xff0c;特别是RTMP&#xff0c;从大家认知里面的几秒钟&#xff0c;直接缩减到100-300ms&#xff0c;满足了绝大多数场景下低延迟的技术诉求。今天就Un…...

编程日记 2025/7/1 20:32:34

burp的编解码，日志，比较器

声明&#xff01; 学习视频来自B站up主 **泷羽sec** 有兴趣的师傅可以关注一下&#xff0c;如涉及侵权马上删除文章&#xff0c;笔记只是方便各位师傅的学习和探讨&#xff0c;文章所提到的网站以及内容&#xff0c;只做学习交流&#xff0c;其他均与本人以及泷羽sec团队无关&a…...

编程日记 2025/6/30 20:39:37

Vercel部署前端部署

Vercel 部署 今天要讲的是如何对别人向自己的开源仓库提的PR进行自动代码审核 1. 注册并登录Vercel 访问 Vercel官网点击右上角的"Sign Up"选择使用GitHub、GitLab、Bitbucket或邮箱注册完成注册流程并登录 2. 连接代码仓库 在Vercel仪表板,点击"New Proje…...

编程日记 2025/7/2 7:54:45

Jenkins相关的Api接口调用详解

Jenkins API是Jenkins持续集成和持续部署（CI/CD）平台提供的一组接口，允许外部程序通过HTTP请求与Jenkins进行交互。以下是对Jenkins API使用的简介： 一、Jenkins API的主要功能 作业管理：通过API，可以创建、配置、删除以及查询作业（Job）。构建触发：可以远程触发新的构…...

编程日记 2025/6/30 6:17:34

HBU深度学习实验15-循环神经网络（2）

LSTM的记忆能力实验 飞桨AI Studio星河社区-人工智能学习与实训社区 (baidu.com) 长短期记忆网络&#xff08;Long Short-Term Memory Network&#xff0c;LSTM&#xff09;是一种可以有效缓解长程依赖问题的循环神经网络&#xff0e;LSTM 的特点是引入了一个新的内部状态&am…...

编程日记 2025/7/3 19:32:12

洛谷P1364 医院设置（c嘎嘎）

题目链接&#xff1a;P1364 医院设置 - 洛谷 | 计算机科学教育新生态 题目难度&#xff1a;普及/提高 数据规模与约定&#xff1a; 对于 100%100% 的数据&#xff0c;保证 1≤n≤1001≤n≤100&#xff0c;0≤u,v≤n0≤u,v≤n&#xff0c;1≤w≤1051≤w≤105。 解题思路&…...

编程日记 2025/7/4 4:47:22

Java死锁问题如何解决？

大家好&#xff0c;我是锋哥。今天分享关于【Java死锁问题如何解决&#xff1f;】面试题。希望对大家有帮助&#xff1b; Java死锁问题如何解决&#xff1f; 1000道 互联网大厂Java工程师 精选面试题-Java资源分享网 Java中的死锁&#xff08;Deadlock&#xff09;是一种并发…...

编程日记 2025/7/1 18:18:41

go锁与chan的性能对比

锁的作用chan 的作用golang的数据并不是并发安全的为什么锁的性能更加优秀?如何选择? 锁的作用 解决并发安全问题,流程控制等 chan 的作用 线程通信(数据传输), 并发安全,流程控制 golang的数据并不是并发安全的 golang的变量并不是并发安全的锁与chan都可以解决并发安全…...

编程日记 2025/7/3 5:37:53

最小二乘法拟合出二阶响应面近似模型

背景&#xff1a;根据样本试验数据拟合出二阶响应面近似模型&#xff08;正交二次型&#xff09;&#xff0c;并使用决定系数R和调整的决定系数R_adj来判断二阶响应面模型的拟合精度。 1、样本数据&#xff08;来源&#xff1a;硕士论文《航空发动机用W形金属密封环密封性能分析…...

编程日记 2025/7/1 8:19:58

Scala的隐式转换

package hfdobject Test37 { //复习隐式转换//隐式转换&#xff1a;编译器 偷偷地&#xff0c;自动的帮我们把一种数据类型转换为另外一种类型//列如&#xff1a;int -->double//它有失败的时候&#xff08;double -->int),有成功的时候//当它转换失败的时候&#xff0c;…...

编程日记 2025/7/1 19:46:38

vue中父组件接收子组件的多个参数的方法：$emit或事件总线

方法一&#xff1a;使用 $emit 方法 原理 子组件通过 $emit 方法向父组件发送事件&#xff0c;同时可以传递多个参数&#xff0c;父组件通过事件监听来接收这些参数。 示例 子组件代码 <template><div><button click"sendData">发送数据</…...

编程日记 2025/7/3 15:28:44

网络安全法-网络安全支持与促进

第二章 网络安全支持与促进 第十五条 国家建立和完善网络安全标准体系。国务院标准化行政主管部门和国务院其他有关部门根据各自的职责&#xff0c;组织制定并适时修订有关网络安全管理以及网络产品、服务和运行安全的国家标准、行业标准。 国家支持企业、研究机构、高等学…...

编程日记 2025/7/4 8:34:16

prometheusgrafana实现监控告警

Prometheus负责集群数据的监控和采集&#xff0c;然后传递给grafana进行可视化&#xff0c;集成睿象云可实现监控报警&#xff0c;为了方便操作&#xff0c;可以通过iframe嵌套grafana到指定的页面。 文章目录 1.Grafana集成Prometheus2.iframe内嵌grafana3.监控告警 1.Grafana…...

编程日记 2025/7/1 5:08:30

php:完整部署Grid++Report到php项目，并实现模板打印

一、下载Grid++Report软件 路径：开发者安装包下载 - 锐浪报表工具 二、 安装软件 1、对下载的压缩包运行内部的exe文件 2、选择语言 3、 完成安装引导 下一步即可 4、接收许可协议 点击“我接受” 5、选择安装路径 “浏览”选择安装路径，点击"安装" 6、完成…...

编程日记 2025/6/28 18:39:41

【数据结构】基数排序的原理及实现

&#x1f466;个人主页&#xff1a;Weraphael ✍&#x1f3fb;作者简介&#xff1a;目前正在准备26考研 ✈️专栏&#xff1a;数据结构 &#x1f40b; 希望大家多多支持&#xff0c;咱一起进步&#xff01;&#x1f601; 如果文章有啥瑕疵&#xff0c;希望大佬指点一二 如果文章…...

编程日记 2025/7/2 21:41:56

Unix/Linux 命令行重定向操作

2>/dev/null 是一个常见的 Unix/Linux 命令行重定向操作&#xff0c;用于将标准错误&#xff08;stderr&#xff09;输出重定向到 /dev/null&#xff0c;即丢弃错误信息而不显示。理解这个表达式需要了解几个概念&#xff1a;文件描述符、重定向和特殊文件 /dev/null。 ###…...

编程日记 2025/7/2 19:37:45

leetcode周赛-3379. 转换数组

给你一个整数数组 nums&#xff0c;它表示一个循环数组。请你遵循以下规则创建一个大小 相同 的新数组 result &#xff1a; 对于每个下标 i&#xff08;其中 0 < i < nums.length&#xff09;&#xff0c;独立执行以下操作&#xff1a; 如果 nums[i] > 0&#xff1…...

编程日记 2025/6/30 9:42:11

D89【python 接口自动化学习】- pytest基础用法

day89 pytest的setup&#xff0c;setdown详解 学习日期&#xff1a;20241205 学习目标&#xff1a;pytest基础用法 -- pytest的setup&#xff0c;setdown详解 学习笔记&#xff1a; setup、teardown详解 模块级 setup_module/teardown_module 开始于模块始末&#xff0c;生…...

编程日记 2025/7/2 16:38:44

【Appium】AttributeError: ‘NoneType‘ object has no attribute ‘to_capabilities‘

目录 1、报错内容 2、解决方案 &#xff08;1&#xff09;检查 &#xff08;2&#xff09;报错原因 &#xff08;3&#xff09;解决步骤 3、解决结果 1、报错内容 在PyCharm编写好脚本后&#xff0c;模拟器和appium也是连接成功的&#xff0c;但是运行脚本时报错&…...

编程日记 2025/6/30 12:10:22

【机器人】轨迹规划 之 spline 规划

在轨迹规划中&#xff0c;使用 spline &#xff08;通常是指通过样条曲线进行轨迹规划&#xff09;可以实现平滑、连续的路径。以下是使用样条&#xff08;如B样条、三次样条插值&#xff09;的具体方法和步骤&#xff0c;结合一个简单的例子说明&#xff1a; 示例场景&#xf…...

编程日记 2025/7/4 17:09:07

健康管理系统(Koa+Vue3)

系统界面(源码末尾获取) 系统技术 Vue3 Koa Nodejs Html Css Js ....... 系统介绍 系统比较简单,轻轻松松面对结业课堂作业.采用的是基于nodejs开发的Koa框架作为后端,采用Vue框架作为前端,完成快速开发和界面展示. 系统获取 啊啊啊宝/KoaVue3https://gitee.com/ah-ah-b…...

编程日记 2025/6/28 18:25:01

【MySQL 进阶之路】基础语法及优化技巧

MySQL DML 基础语法及优化技巧 一、DML&#xff08;数据操作语言&#xff09;概述 DML 是数据库操作语言的子集&#xff0c;用于数据的增、删、改、查四个基本操作。MySQL 中的 DML 操作通常是指以下四种基本操作&#xff1a; INSERT&#xff1a;插入数据SELECT&#xff1a;…...

编程日记 2025/7/1 23:52:08

2021 年“泰迪杯”数据分析技能赛B 题肥料登记数据分析

2021 年“泰迪杯”数据分析技能赛B 题肥料登记数据分析 完整代码请私聊 博主 一、背景 肥料是农业生产中一种重要的生产资料&#xff0c;其生产销售必须遵循《肥料登记管理办法》&#xff0c;依法在农业行政管理部门进行登记。各省、自治区、直辖市人民政府农业行政主管部门主…...

编程日记 2025/7/3 4:51:23

体验AI直播：感受科技的魅力

​ 在当今这个科技飞速发展的时代&#xff0c;各种创新技术层出不穷&#xff0c;不断刷新着我们的认知和体验。其中&#xff0c;无人直播作为一种新兴的直播形式&#xff0c;正以其独特的魅力吸引着人们的目光。当我们真正去体验无人直播时&#xff0c;才能更深刻地感受到科技…...

编程日记 2025/7/3 1:18:45

NLP-中文分词

中文分词 1、中文分词研究背景及意义 和大部分西方语言不同&#xff0c;书面汉语的词语之间没有明显的空格标记&#xff0c;句子是以字串的形式出现。因此对中文进行处理的第一步就是进行自动分词&#xff0c;即将字串转变成词串。 比如“中国建筑业呈现新格局”分词后的词串…...

编程日记 2025/6/28 19:51:22

oracle 架构详解

Oracle 数据库是一个复杂且强大的关系型数据库管理系统&#xff08;RDBMS&#xff09;&#xff0c;广泛应用于企业级应用中。了解 Oracle 的架构对于数据库管理员&#xff08;DBA&#xff09;、开发人员和架构师来说至关重要。以下是 Oracle 数据库架构的详细解析&#xff0c;涵…...

编程日记 2025/7/5 6:16:29

东方资产管理校招笔试测评题型题目深入解读

东方资管作为四大资产AMC公司之一&#xff0c;其薪资待遇还是不错的&#xff0c;现在为数不多还可以投递简历的金融央企。东方资产管理校招笔试一般在简历投递截止后的周末&#xff0c;总部和子公司、分公司需要分别做笔试。 东方资管笔试大概2h&#xff0c;线上双机位&#x…...

编程日记 2025/6/28 18:43:53

PDF处理的创新工具:福昕低代码平台尝鲜实现PDF2word功能

在当今数字化时代&#xff0c;PDF文件的处理和管理变得越来越重要。福昕低代码平台是新发布的一款创新的工具&#xff0c;旨在简化PDF处理和管理的流程。通过这个平台&#xff0c;用户可以通过简单的拖拽界面上的按钮&#xff0c;轻松完成对Cloud API的调用工作流&#xff0c;而…...

编程日记 2025/7/1 7:51:56

springboot系列--拦截器加载原理

一、拦截器加载原理 拦截器是在容器启动时&#xff0c;就创建并加载好&#xff0c;此时并未放入拦截器链中&#xff0c;只是放在一个拦截器集合当中&#xff0c;当一个请求进来之后&#xff0c;会通过匹配路径&#xff0c;查看是否有命中集合中的拦截器的拦截路径&#xff0c;如…...

编程日记 2025/6/29 23:30:47

当Nginx所在服务器的磁盘空间满了，会有什么影响及如何避免这种问题

大家好&#xff0c;我是G探险者&#xff01; 最近遇到一个问题是&#xff0c;nginx所在服务器磁盘满了&#xff0c;导致前端页面上的一个文件上传功能不好使了&#xff0c;搞得我排查半天&#xff0c;找不见原因&#xff0c;最后发现是nginx的磁盘满了导致&#xff0c;清理了里…...

编程日记 2025/7/2 7:00:05

光猫开DMZ教程

本教程以移动光猫未例&#xff0c;具体操作以实际光猫为准 1、登录移动光猫管理后台 打开浏览器&#xff0c;在浏览器地址栏输入移动光猫登录管理地址192.168.1.1或者tplogin.cn 按“回车键”打开登录页面&#xff0c;然后输入路由器管理密码登录。 移动光猫登录页面 超级密…...

编程日记 2025/7/2 17:17:21

WireShark速成

1.WireShark安装 官网&#xff1a; Wireshark Go Deep Kali Linux系统自带WireShark工具。 2.WireShark介绍 WireShark是一个网络包分析工具&#xff0c;该工具主要用于捕获网络数据包&#xff0c;并自动解析数据包&#xff0c;为用户显示数据包的详情信息&#xff0c;供…...

编程日记 2025/7/1 1:12:39

BFS入门

目录 定义二叉树层次遍历电梯问题倒可乐BFS基本思想算法 四方访问 定义 BFS 通常是指广度优先搜索&#xff08;Breadth - First Search&#xff09;&#xff0c;它是一种图形数据结构的遍历算法。从给定的起始顶点开始&#xff0c;首先访问起始顶点的所有邻接顶点&#xff0c;然…...

编程日记 2025/7/4 10:04:33

ElementUI：el-tabs 切换之前判断是否满足条件

<div class"table-card"><div class"card-steps-class"><el-tabsv-model"activeTabsIndex":before-leave"beforeHandleTabsClick"><el-tab-pane name"1" label"基础设置"><span slot&…...

编程日记 2025/7/3 18:05:42

mid360使用cartorapher进行3d建图导航

1. 添加urdf配置文件&#xff1a; 添加IMU配置关节点和laser关节点 <!-- imu livox --> <joint name"livox_frame_joint" type"fixed"> <parent link"base_link" /> <child link"livox_frame" /> <o…...

编程日记 2025/7/1 8:23:22

【CSS in Depth 2 精译_073】第 12 章 CSS 排版与间距概述 + 12.1 间距设置（中）：对 CSS 行高的深入思考

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第四部分 视觉增强技术 ✔️【第 12 章 CSS 排版与间距】 ✔️ 12.1 间距设置 12.1.1 使用 em 还是 px12.1.2 对行高的深入思考 ✔️12.1.3 行内元素的间距设置 文章目录 12.1.2 对行高的深入思考…...

编程日记 2025/7/1 21:03:23

JAVA设计模式-观察者模式

概述&#xff1a; 观察者模式通常由两个对象组成&#xff1a;观察者和被观察者。当被观察者状态发生改变时&#xff0c;它会通知所有的观察者对象&#xff0c;使他们能够及时做出响应&#xff0c;所以也被称作“发布-订阅模式”。 特点&#xff1a; 优点&#xff1a; 解耦且可…...

编程日记 2025/7/4 20:23:32

Java调用SSE流式接口，并流式返回给前端实现打字输出效果

目录 1.SSE概述 1.1 什么是是SSE2.2 与长链接(Long Polling)的区别 长链接(Long Polling)Server-Sent Events (SSE) 比较总结 2.通过okhttp调用SSE流式接口并流式返回给前端 环境要求使用okhttp相关依赖示例 3. 如果Spring Framework 低于5.0&#xff0c;可使用Servlet 3.0进行…...

编程日记 2025/7/2 1:26:54