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

Vue学习计划-Vue2--Vue核心(六)过滤器和自定义指令

1. 过滤器

  1. 定义:对要显示的数据进行特定格式转换再显示(适用于一些简单逻辑的处理)
  2. 语法:
    1. 注册过滤器:Vue.filter(name, callback)new Vue{filters:{}}
    2. 使用过滤器:{{ xx | 过滤器名 }}v-bind:属性 = "xxx | 过滤器名"
  3. 备注:
    1. 过滤器也可以接受额外参数、多个过滤器也可以串联
    2. 并没有改变原本的数据,是产生新的对应的数据

示例:(局部过滤器)

	<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./vue.js"></script></head><body><div id="app"><!-- 计算属性 --><h3>计算属性:</h3><p>{{ nameUpper }}</p><hr><h3>过滤器:</h3><!-- 过滤器 --><p>{{ name | nameSliceFilter | nameUpperFilter }}</p><p>{{ name | nameUpperFilter }}</p><hr><!-- 过滤器传参数 --><!-- <p>{{ longName | nameSliceFilter2(9, '测试传值') }}</p> --><p>{{ longName | nameSliceFilter2(9) }}</p><p>{{ longName | nameSliceFilter2() }}</p><hr><!-- 属性过滤器 --><p :name="name | nameSliceFilter | nameUpperFilter">属性过滤器文本</p></div><script>const vm = new Vue({el: '#app',data:{name: 'abcdefg',longName: 'abcdefghigklmn'},// 计算属性computed:{nameSlice(){return this.name.slice(0,3)},nameUpper(){return this.nameSlice.toUpperCase()}},// 过滤器filters:{nameSliceFilter(val){// console.log(val);return val.slice(0,3)},nameUpperFilter(val){return val.toUpperCase()},// 过滤器传值// 可以传值,传多少个参数,就接收多少参数,但是第一个参数永远是原本数据// nameSliceFilter2(val,length, text){//     console.log(val, length,text);// }// nameSliceFilter2(val, length){nameSliceFilter2(val, length = 3){console.log(val, length);return val.slice(0, length)}}})</script></body></html>

示例:(全局过滤器)

	<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./vue.js"></script></head><body><div id="app"><p>{{ name | nameSliceFilter }}</p><p>{{ longName | nameUpperFilter }}</p></div><div id="root"><p>{{ rootName | nameSliceFilter }}</p></div><script>// 必须要把全局筛选器提前配置好Vue.filter('nameSliceFilter',(val)=>{return val.slice(0,3) })// app 实例挂载new Vue({el: '#app',data:{name: 'abcdefg',longName: 'abcdefghigklmn'},// 过滤器filters:{// vue实例内的筛选器优先级更高// nameSliceFilter(val){//     return val.slice(0,4)// },nameUpperFilter(val){return val.toUpperCase()}}})// root实例挂载new Vue({el: '#root',data:{rootName: '这是rootName的值'},})</script></body></html>

2. 内置指令

  1. v-bind, v-on,v-show

  2. v-text指令:

    1. 作用:向其所在的节点中渲染文本内容
    2. 与差值语法的区别:v-text会替换掉节点中的内容,{{ xx }} 不会

    示例:

    <body><div id="app"><!-- 通常 {{ }} 表较多, 更灵活 --><p>{{ name }}</p><p v-text="name"></p><hr><p>你好, {{ name }}</p><p v-text="name">你好,</p><hr><p>{{ str }}</p><p v-text="str"></p></div><script>new Vue({el: "#app",data:{name: "小红",str: '<h3>这是个标题</h3>'}})</script>
    </body>
    
  3. v-html指令:

    1. 作用:向指定节点中渲染包含html结构的内容
    2. 与插值语法的区别:
      1. v-html会替换掉节点中所有的内容,{{ xx }}不会
      2. v-html可以识别html结构
    3. 严重注意:v-html有安全问题:
      1. 在网站上动态渲染任意HTML是非常危险的,容易收到XSS攻击
      2. 一定要在可信的内容上使用v-html,永不要在用户提交的内容上

    示例:

        <body><div id="app"><p>{{ str }}</p><p v-text="str"></p><p v-html="str"></p></div><script>new Vue({el: "#app",data:{str: '<h3>这是个标题</h3>'}})</script></body>
    
  4. v-cloak指令(没有值):

    1. 本质是一个特殊属性,Vue实例创建完毕并接管容器后,会删掉v-cloak属性
    2. 使用css配合v-cloak可以解决网速慢时页面展示出 {{ xx }} 的问题
	<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./vue.js"></script><style>[v-cloak]{display: none;}</style></head><body><div id="app"><p v-cloak>{{ name }}</p></div><script>const vm = new Vue({// el: "#app",data:{name: '小红'}})setTimeout(() => {vm.$mount("#app")}, 5000);</script></body></html>
  1. v-once指令:

    1. v-once所在的节点初次动态渲染后,就视为静态内容了
    2. 以后数据的改变不会引起v-once所在结构的更新,可以用于优化性能

    示例:

    <body><div id="app"><!-- 需求: 显示初始值,也显示修改后的值 --><p v-once>初始的n值是:{{ n }}</p><p>当前的n值是:{{ n }}</p><button @click="n++">添加</button></div><script>new Vue({el: "#app",data:{n: 8}})</script>
    </body>
    
  2. v-pre指令:

    1. 跳过其所在节点的编译过程
    2. 可利用它跳过:没有使用指令语法、没有使用插值语法的节点,会加快编译

    示例:

    <body><div id="app"><p v-pre>当前的n值是:</p><p>{{ n }}</p><button @click="n++" >添加</button></div><script>new Vue({el: "#app",data:{n: 8}})</script>
    </body>
    
  3. Vue模板语法有2大类:

    1. 插值语法:
      • 功能: 用于解析标签体内容
      • 写法: {{ xx }}, xx是js表达式,且可以直接读取到data中的所有属性
    2. 指令语法:
      • 功能:用于解析标签(包括:标签属性,标签体内容,绑定事件…)
      • 举例:v-bind:href= ‘xxx’ 或简写 :href= ‘xxx’ xxx同样要写表达式,且可以直接读取到data中的属性
      • 备注:Vue中有很多的指令,且形式都是:v-???,此处我们只拿v-bind举个例子

3. 自定义指令:

  1. 本质:是一个函数,不靠返回值获取值,靠操作收到的参数去获取值
  2. 作用: 操作DOM元素: 例如v-bind,v-show,v-if等都是对DOM元素进行操作
  3. 两种方式:
    1. 函数式:写法简单,不能操作一些细节
    directives:{// big函数何时会被调用?//  1. 指令与元素成功绑定时,(初始时)//  2. 指令所在的模板被重新解析时big(element, binding){// element:指令所绑定的元素,可以用来直接操作 DOM// binding:一个对象,包含很多属性//    value: 指令的绑定值//    name: 指令名,不包括 v- 前缀//    expression:字符串形式的指令表达式console.log(element, binding);element.innerHTML = binding.value * 10}
    }
    
    1. 对象式: 详细的表明执行到某一特定时期,调用特定函数
     directives:{fbind:{//  指令与元素成功绑定时,(初始时)bind(element, binding){// console.log('1',element, binding);element.value = binding.value},// 指令所在的元素被插入页面时inserted(element, binding){// console.log(2,element, binding);element.focus()},// 指令所在的模板被重新解析时update(element, binding){// console.log(3,element, binding)element.value = binding.value}}}
    
    1. 定义语法:
      1. 局部指令:
      new Vue({
      directives:{指令名: 配置对象}
      })
      或
      new Vue({
      directives:{指令名: 回调函数}
      })
      
      1. 全局指令:
      Vue.directive(指令名, 配置对象)
      或
      Vue.directive(指令名, 回调函数)
      
  4. 配置对象中常用的3个回调:
    1. bind: 指令与元素成功绑定时调用
    2. inserted: 指令所在元素被插入页面时调用
    3. update: 指令所在模板结构被重新解析时调用
  5. 备注:
    1. 指令定义时不加v-, 但使用时要加v-
    2. 指令中的this指向的是window
    3. 指令名如果是多个单词,要使用kebab-case命名方式,不要用camelCase命名

示例:(局部指令–对象式)

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./vue.js"></script></head><body><!-- 需求1:写一个v-big指令,和v-text功能类似,但会把绑定的数值放大10倍 --><!-- 需求2:写一个v-fbind指令,和v-bind功能类似,但可以让其所绑定的input元素自动获取焦点 --><div id="app"><button @click="n++">操作</button><hr><input type="text" v-fbind="n"/></div><script>const vm = new Vue({el: '#app',data:{n: 1},directives:{// 函数式:// big函数何时会被调用?//  1. 指令与元素成功绑定时,(初始时)//  2. 指令所在的模板被重新解析时// fbind(element, binding){//    element.value = binding.value//    element.focus()// }// 对象式:fbind:{//  指令与元素成功绑定时,(初始时)bind(element, binding){// console.log('1',element, binding);element.value = binding.value},// 指令所在的元素被插入页面时inserted(element, binding){// console.log(2,element, binding);element.focus()},// 指令所在的模板被重新解析时update(element, binding){// console.log(3,element, binding)element.value = binding.value}}}})</script></body></html>

示例:(局部指令–函数式)

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./vue.js"></script></head><body><!-- 需求1:写一个v-big指令,和v-text功能类似,但会把绑定的数值放大10倍 --><!-- 需求2:写一个v-fbind指令,和v-bind功能类似,但可以让其所绑定的input元素自动获取焦点 --><div id="app"><p>{{ name }}</p><h3>当前的n值是:<span v-text="n"></span></h3><h3>放大10倍后的n值是:<span v-big="n"></span></h3><button @click="n++">操作</button></div><script>const vm = new Vue({el: '#app',data:{name: '小红',n: 1},directives:{// big函数何时会被调用?// 1. 指令与元素成功绑定时,(初始时)// 2. 指令所在的模板被重新解析时big(element, binding){// console.log(element, binding);console.log('big');element.innerHTML = binding.value * 10}}})</script></body></html>

示例:(全局指令)

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><script src="./vue.js"></script></head><body><div id="app"><h3>当前的n值是:<span v-text="n"></span></h3><!-- <h3>放大10倍后的n值是:<span v-big-number="n"></span></h3> --><h3>放大10倍后的n值是:<span v-big="n"></span></h3><button @click="n++">操作</button></div><hr><div id="root"><h3>当前的n值是:<span v-text="n"></span></h3><h3>放大10倍后的n值是:<span v-big="n"></span></h3><button @click="n++">操作</button></div><script>Vue.directive('big',(element, binding)=>{element.innerHTML = binding.value * 20})new Vue({el: '#app',data:{n: 1},directives:{// 多个单词的话,推荐使用kebab-case命名// 'big-number'(element, binding){//   // console.log(element, binding);//   console.log('big', this) // this指向window//   element.innerHTML = binding.value * 30// },// 优先级更高big(element, binding){// console.log(element, binding);console.log('big', this) // this指向windowelement.innerHTML = binding.value * 10}}})new Vue({el: '#root',data:{n: 1},})</script></body></html>

相关文章:

Vue学习计划-Vue2--Vue核心(六)过滤器和自定义指令

1. 过滤器 定义&#xff1a;对要显示的数据进行特定格式转换再显示&#xff08;适用于一些简单逻辑的处理&#xff09;语法&#xff1a; 注册过滤器&#xff1a;Vue.filter(name, callback) 或 new Vue{filters:{}}使用过滤器&#xff1a;{{ xx | 过滤器名 }} 或 v-bind:属性 …...

Codeforces Round 913 (Div. 3) (A-G)

后天就是 I C P C ICPC ICPC杭州站了&#xff0c;今天把之前做的 d i v 3 div3 div3题补一下&#xff0c;打完这场杭州站这赛季除了 E C F i n a l EC\,\,Final ECFinal就结束了&#xff0c;以后应该要多打 c f cf cf比赛练习保持手感&#xff0c;争取下赛季冲一下金牌。 感觉这…...

CSS——sticky定位

1. 大白话解释sticky定位 粘性定位通俗来说&#xff0c;它就是相对定位relative和固定定位fixed的结合体&#xff0c;它的触发过程分为三个阶段 在最近可滚动容器没有触发滑动之前&#xff0c;sticky盒子的表现为相对定位relative【第一阶段】&#xff0c; 但当最近可滚动容…...

Redis hash表源码解析

1、 整体数据结构 链式hash解决hash冲突、采用渐进式hash来完成扩容过程。 /** 哈希表节点*/ typedef struct dictEntry {// 键void *key;// 值union {void *val;uint64_t u64;int64_t s64;} v;// 指向下个哈希表节点&#xff0c;形成链表struct dictEntry *next;} dictEntry;…...

dll动态链接库【C#】

1说明&#xff1a; 在C#中&#xff0c;dll是添加 【类库】生成的。 2添加C#的dll&#xff1a; &#xff08;1&#xff09;在VS中新建一个Windows应用程序项目&#xff0c;并命名为TransferDll。 &#xff08;2&#xff09;打开Windows窗体设计器&#xff0c;从工具箱中为窗体…...

Linux 系统设置cpu频率

source_code: https://github.com/emagii/cpufrequtils cpufreq-set - A small tool which allows to modify cpufreq settings.&#xff08;修改内存频率的工具&#xff09; cpufreq-set allows you to modify cpufreq settings without having to type e.g. “/sys/devices…...

git基本概念

一、版本控制概念 1.1 什么是版本控制 1.1.1 手动管理文件版本 1.1.2 版本控制软件 概念&#xff1a;版本控制软件是一个用来记录文件发生的变化&#xff0c;以便将来查阅特定版本修订情况的系统&#xff0c;有时也叫“版本控制系统”。通俗的理解就是把手工管理文件版本的方…...

多个HTML属性

在HTML中&#xff0c;属性用于提供有关HTML元素的附加信息。在这篇文章中你将学习多个HTML属性&#xff0c;它们可以增强网站的视觉吸引力。 接下来开始吧&#xff01;&#x1f680; Accept 属性 您可以将accept属性与<input>元素&#xff08;仅用于文件类型&#xff…...

基于运算放大器的电压采集电路

一、运算放大器 运放推导的两个重要概念&#xff1a;虚短、虚断。 1、差分放大器 以差分放大器为例进行推导分析。 虚断–运放的"-“端、”“端的引脚电流接近为0&#xff1b; 根据基尔霍夫电流定律可知&#xff1a;iR1iRF&#xff0c;iR2iR3&#xff1b; iR1(Ui1-(V-…...

数字图像处理(实践篇) 十六 基于分水岭算法的图像分割

目录 一 分水岭算法 二 利用OpenCV实现分水岭算法的过程 三 实践 一 分水岭算法 基于任何灰度图像都可以视为地形表面&#xff0c;其中高强度表示山峰和山丘&#xff0c;而低强度表示山谷。首先&#xff0c;开始用不同颜色的水&#xff08;标签&#xff09;填充每个孤立的山…...

快速学习PyQt5的高级自定义控件

Pyqt5相关文章: 快速掌握Pyqt5的三种主窗口 快速掌握Pyqt5的2种弹簧 快速掌握Pyqt5的5种布局 快速弄懂Pyqt5的5种项目视图&#xff08;Item View&#xff09; 快速弄懂Pyqt5的4种项目部件&#xff08;Item Widget&#xff09; 快速掌握Pyqt5的6种按钮 快速掌握Pyqt5的10种容器&…...

Python中读写(解析)JSON文件的深入探究

目录 一、引言 二、如何读取JSON文件 三、如何写入JSON文件 四、如何解析JSON字符串 五、错误处理和异常处理 六、使用第三方库提高效率 七、总结 一、引言 在Python中&#xff0c;我们经常使用JSON&#xff08;JavaScript Object Notation&#xff09;格式来存储和传输…...

我获取股票和期货数据的常用函数

记录一下获取数据所使用的函数&#xff0c;以防止遗忘和方便查找。 # 获取掘金的数据 # 需要打开并登陆掘金终端 def get_data_juejin(symbol"bu2112",start"2021-8-1",end"2021-8-30 23:00:00",frequency"1800s",fields"eob,sy…...

高并发场景下的httpClient使用优化技巧

1. 背景 我们有个业务&#xff0c;会调用其他部门提供的一个基于http的服务&#xff0c;日调用量在千万级别。使用了httpclient来完成业务。之前因为qps上不去&#xff0c;就看了一下业务代码&#xff0c;并做了一些优化&#xff0c;记录在这里。 先对比前后&#xff1a;优化…...

用php上传图片到阿里云oss

如果你想自动创建目录并将文件上传到新的目录下&#xff0c;你可以使用阿里云 OSS 的 createObject 方法来实现。下面是更新后的示例代码&#xff1a; php <?php require_once __DIR__ . /vendor/autoload.php; // 引入 SDKuse OSS\OssClient; use OSS\Core\OssException;…...

服务器适合哪些使用场景_Maizyun

服务器适合哪些使用场景 在当今的数字化时代&#xff0c;服务器作为互联网基础设施的核心组件&#xff0c;被广泛应用于各种场景。本文将探讨服务器适合哪些使用场景。 一、Web服务器 Web服务器是服务器中最常见的一种&#xff0c;用于托管和运行网站。它负责处理来自客户端…...

发布“最强”AI大模型,股价大涨,吊打GPT4的谷歌股票值得投资吗?

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 谷歌在AI领域的最新进展&#xff0c;引发投资者关注 在谷歌-C(GOOGL)谷歌-A&#xff08;GOOG&#xff09;昨日发布了最新的AI大模型Gemini后&#xff0c;其股价就出现了大幅上涨&#xff0c;更是引发了投资者的密切关注&a…...

年度工作总结怎么写?掌握这些年终总结万能公式,让你的报告出彩无比!

光阴似箭&#xff0c;日月如梭&#xff0c;时间总是不疾不徐地向前奔去&#xff0c;转眼就来到了2023年的最后一个月&#xff0c;12月一到&#xff0c;上班族和打工人又要开始忙活工作总结的事情~ 工作总结&#xff0c;不仅是一年工作的回顾&#xff0c;更是未来规划的起点。你…...

常用Nmap脚本

端口扫描类脚本 Nmap是一款非常流行的端口扫描工具&#xff0c;它可以帮助渗透测试工程师识别目标网络上开放的端口&#xff0c;并提供有关这些端口的详细信息。Nmap还提供了一系列基于脚本的功能&#xff0c;这些脚本可以扩展Nmap的功能&#xff0c;使其能够更深入地探测目标网…...

在pom.xml中添加maven依赖,但是类里面import导入的时候报错

问题&#xff1a; Error:(27, 8) java: 类TestKuDo是公共的, 应在名为 TestKuDo.java 的文件中声明 Error:(7, 23) java: 程序包org.apache.kudu不存在 Error:(8, 23) java: 程序包org.apache.kudu不存在 Error:(9, 23) java: 程序包org.apache.kudu不存在 Error:(10, 30) jav…...

【NEON】学习资料汇总

一、资料链接 Guide &#xff1a; http://www.heenes.de/ro/material/arm/DEN0018A_neon_programmers_guide_en.pdf csdn博文1&#xff0c;基础案例&#xff1a; https://blog.csdn.net/kakasxin/article/details/103912832? csdn博文2&#xff0c;内部函数&#xff1a; ht…...

java中ReentrantLock的实现原理是什么?

ReentrantLock 的实现原理主要涉及到两个关键概念&#xff1a;同步器&#xff08;Sync&#xff09;和 AQS&#xff08;AbstractQueuedSynchronizer&#xff0c;抽象队列同步器&#xff09;。 ReentrantLock 使用 AQS 来实现可重入锁的机制。AQS 是 Java 并发包中的一个抽象基类…...

C语言精选——选择题Day40

第一题 1. int a[10] {2,3,5}, 请问a[3]及a[3]之后的数值是&#xff08;&#xff09; A&#xff1a;不确定的数据 B&#xff1a;5 C&#xff1a;0 D&#xff1a;0xf f f f f f f f 答案及解析 C 数组的不完全初始化&#xff0c;会自动把没初始化的部分初始化为0&#xff1b; 第…...

大屏适配方案一scale()

背景 在做大屏可视化项目的时候&#xff0c;一般设计稿会设计成1920 * 1080&#xff0c;但是页面写死1920 * 1080在2k、4k等分辨率的屏幕下是不适配的。 方案一&#xff1a;css3的缩放属性transform以及scale() 在做项目之前我们需要搞清楚客户的数据可视化平台需要在什么屏幕…...

WordPress免费插件大全清单【2023最新】

WordPress已经成为全球范围内最受欢迎的网站建设平台之一。要让您的WordPress网站更具功能性、效率性&#xff0c;并提供卓越的用户体验&#xff0c;插件的选择与使用变得至关重要。 WordPress插件的作用 我们先理解一下插件在WordPress生态系统中的作用。插件是一种能够为Wo…...

支付宝小程序接口传参会默认排序

一&#xff1a;问题 描述&#xff1a;最近项目中的接口都加了签名&#xff0c;在同步到支付宝小程序上时&#xff0c;发现有些接口报错&#xff0c;经过排查&#xff0c;导致报错的原因是因为传参顺序被支付宝小程序默认排序了&#xff0c;比如&#xff1a; 设置的原始参数&a…...

Numpy数组的运算(第7讲)

Numpy数组的运算(第7讲)         🍹博主 侯小啾 感谢您的支持与信赖。☀️ 🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ…...

node后端接口无法插入数据为emoji的表情的问题

原因 emoji的表情一般是这样的\xF0\x9F\x98\x80或者是\xF0\x9F\x98 &#xff0c;事实上 一般数据库的utf8的编码类型都是能保存\xF0\x9F\x98 但是不能保存\xF0\x9F\x98\x80这种样的emoji&#xff0c;要将数据库编码格式为utf8mb4 也就是utf8的超集 另外&#xff0c;除了 数据库…...

Conda常用命令总结

使用conda或anaconda的小伙伴们都知道&#xff0c;图形界面时不靠谱的&#xff0c;而在命令行下&#xff0c;所有的操作就会稳定很多&#xff0c;且极少出现问题。因此&#xff0c;熟记conda的命令行就变得十分有用。但对于我这样近50岁依旧奋斗在代码第一线的大龄程序员而已&a…...

Oracle数据库如何实现自增-序列Sequence介绍(适合小白)

Oracle数据库中的Sequence是一种特殊的数据库对象&#xff0c;可以生成一组等间隔的数值&#xff0c;常用于为表中的行自动生成序列号。也常用于主键自增的情况。 下面我将以小白的视角带大家介绍下Oracle数据库序列Sequence&#xff1a; 一、创建简单序列 创建简单序列语法…...

ke14--10章-2JDBC例子

驱动forName,创建连接对象getConnection要三个参数,执行String sql "INSERT INTO等",创建执行SQL语句的PreparedStatement对象进行setString,然后执行preStmt.executeUpdate(); 为什么要preStmt conn.prepareStatement(sql);conn DriverManager.getConnection(url…...

04数据平台Flume

Flume 功能 Flume主要作用&#xff0c;就是实时读取服务器本地磁盘数据&#xff0c;将数据写入到 HDFS。 Flume是 Cloudera提供的高可用&#xff0c;高可靠性&#xff0c;分布式的海量日志采集、聚合和传输的系统工具。 Flume 架构 Flume组成架构如下图所示&#xff1a; A…...

Redis--13--缓存一致性问题

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 缓存一致性问题1、先更新缓存&#xff0c;再更新DB方案二&#xff1a;先更新DB&#xff0c;再更新缓存方案三&#xff1a;先删缓存&#xff0c;再写数据库推荐1&…...

12.7作业

1. #include "mywidget.h"MyWidget::MyWidget(QWidget *parent): QWidget(parent) {//***********窗口相关设置***********//设置窗体大小this->resize(540,410);this->setFixedSize(540,410);//取消菜单栏this->setWindowFlag(Qt::FramelessWindowHint);/…...

ssl什么是公钥和私钥?

公钥&#xff08;Public Key&#xff09;与私钥&#xff08;Private Key&#xff09;是通过加密算法得到的一个密钥对&#xff08;即一个公钥和一个私钥&#xff0c;也就是非对称加密方式&#xff09;。公钥可对会话进行加密、验证数字签名&#xff0c;只有使用对应的私钥才能解…...

github首次将文件合到远端分支,发现名字不是master,而是main

其中&#xff0c;暂存区和本地仓库的信息都存储在.git目录中 在自己的github上实践 1、刚开始&#xff0c;git clone gitgithub.com:lingze8678/my_github.git到本地 2、在克隆后的代码中加入一个pdf文件 3、在git bash中操作&#xff08;当项目中有文件更改和删除&#xff…...

RTX 40 系彻底摆烂,NVIDIA 让三年老卡焕发第二春

AMD 前段时间发布的 RX 6750GRE 12/10G 两块新卡属实给了市场一波小小震撼。 有同学要说了&#xff0c;这不就是两年前的 RX 6700 系换皮嘛&#xff0c;典型的旧饭重恰它凭啥能火&#xff1f; 无他&#xff0c;性能合格&#xff0c;价格实惠&#xff0c;主打一个高性价比。 别…...

ELK技术栈介绍及简单使用实例

1. ELK技术栈介绍 引言 在当今数据驱动的世界里&#xff0c;有效地管理和分析大量日志数据变得至关重要。这里我们将深入探讨ELK技术栈&#xff0c;这是一种流行的日志管理解决方案&#xff0c;它结合了三个开源项目&#xff1a;Elasticsearch、Logstash和Kibana。ELK技术栈因…...

基于Java健身房课程管理系统

基于Java健身房课程管理系统 功能需求 1、课程信息管理&#xff1a;系统需要能够记录和管理所有课程的详细信息&#xff0c;包括课程名称、教练信息、课程时间、课程地点、课程容量等。管理员和教练可以添加、编辑和删除课程信息。 2、会员信息管理&#xff1a;系统需要能够…...

DAPP开发【02】Remix使用

系列文章目录 系列文章在DAPP开发专栏 文章目录 系列文章目录使用部署测试网上本地项目连接remix本地项目连接remix 使用 创建一个新的工作空间 部署测试网上 利用metaMask连接测试网络 添加成功&#xff0c;添加时需要签名 即可进行编译 即可部署 本地项目连接remix 方…...

大华DSS S2-045 OGNL表达式注入漏洞复现

0x01 产品简介 大华DSS安防监控系统平台是一款集视频、报警、存储、管理于一体的综合安防解决方案。该平台支持多种接入方式,包括网络视频、模拟视频、数字视频、IP电话、对讲机等。此外,该平台还支持多种报警方式,包括移动侦测、区域入侵、越线报警、人员聚集等。 0x02 漏…...

大数据之HBase(二)

Master详细架构 位置&#xff1a;namenode实现类&#xff1a;HMaster组成 负载均衡器&#xff1a;通过meta了解region的分配&#xff0c;通过zk了解rs的启动情况&#xff0c;5分钟调控一次分配平衡元数据表管理器&#xff1a;管理自己的预写日志&#xff0c;如果宕机&#xff…...

前后端数据传输格式(下)

作者简介&#xff1a;大家好&#xff0c;我是smart哥&#xff0c;前中兴通讯、美团架构师&#xff0c;现某互联网公司CTO 联系qq&#xff1a;184480602&#xff0c;加我进群&#xff0c;大家一起学习&#xff0c;一起进步&#xff0c;一起对抗互联网寒冬 上篇主要复习了HTTP以及…...

mysql pxc高可用离线部署(三)

pxc学习流程 mysql pxc高可用 单主机 多主机部署&#xff08;一&#xff09; mysql pxc 高可用多主机离线部署&#xff08;二&#xff09; mysql pxc高可用离线部署&#xff08;三&#xff09; mysql pxc高可用 跨主机部署pxc 本文使用docker进行安装&#xff0c;主机间通过…...

XXL-JOB 日志表和日志文件自动清理

&#x1f680; 作者主页&#xff1a; 有来技术 &#x1f525; 开源项目&#xff1a; youlai-mall &#x1f343; vue3-element-admin &#x1f343; youlai-boot &#x1f33a; 仓库主页&#xff1a; Gitee &#x1f4ab; Github &#x1f4ab; GitCode &#x1f496; 欢迎点赞…...

常用sql记录

备份一张表 PostgreSQL CREATE TABLE new_table AS SELECT * FROM old_table;-- 下面这个比上面好&#xff0c;这个复制表结构时&#xff0c;会把默认值、约束、注释都复制 CREATE TABLE new_table (LIKE old_table INCLUDING ALL) WITHOUT OIDS; INSERT INTO new_table SELE…...

设备温度和振动综合监测:温振一体式传感器的优点和应用

随着工业设备的复杂性和自动化程度的提高&#xff0c;对设备状态监测的需求也日益增加。温振一体式传感器作为一种集振动和温度监测于一体的传感器&#xff0c;具备多项优势&#xff0c;因此在工业设备状态监测领域得到广泛应用。 温振一体式传感器基于振动传感器和温度传感器的…...

彻底解决ModuleNotFoundError: No module named ‘exceptions‘【Bug完美解决】

文章目录 项目场景:问题描述原因分析:解决方案:此Bug解决方案总结心得项目场景: 根据本文可找到bug原因并彻底解决**ModuleNotFoundError: No module named ‘exceptions‘**Bug 报错: E:\Anconda\python.exe c:\Users\24190\PycharmProjects\pythonProject4py尝试 gong…...

yarn和npm的区别

2023-12-8 yarn和npm的区别 是常用的包管理工具&#xff0c;用于node.js项目中安装、管理、和更新依赖项 有以下几个区别&#xff1a; 性能和速度&#xff1a;在包的安装和下载方面&#xff0c;yarn比npm更快速&#xff0c;yarn通过并行下载和缓存等优化策略&#xff0c;可以…...

设计图中时序图

设计图中的时序图通常用于展示两个或多个对象之间的交互和消息传递的顺序。它是一种用于描述软件或系统中的并发性和时序行为的工具。 以下是一个简单的时序图的示例&#xff1a; 首先&#xff0c;在时序图中创建两个对象&#xff0c;例如"对象A"和"对象B&quo…...