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

Vue（二）：计算属性与 watch 监听器

news 文章来源：https://blog.csdn.net/weixin_74895237/article/details/135300628 2024/9/21 16:23:44

03. Vue 指令拓展

3.1 指令修饰符

可以通过 . 来指明一些指令的后缀，不同的后缀中封装了不同的操作，可以帮助我们简化代码，比如之前使用过的监听 enter 键的弹起，我们需要操作事件对象，来检测用户使用了哪个键，但是 Vue 替我们封装了直接检测回车的方式，@keyup.enter 就是在我们上面的 v-on 语句后面再加一个 . 修饰。

下面来给出具体的代码的示例

  <div id="app"><h3>@keyup.enter  →  监听键盘回车事件</h3><input @keyup.enter="fn"  v-model="username" type="text"></div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {username: ''},methods: {fn(e) {if (e.key === "Enter") {alert('回车');}}}})</script>

这样就是实现了搜索框监听回车的操作

其他常用的修饰符比如 v-model.trim 去除空格，也就是绑定完后获取到的内容是去除空格的，v-model.number 会尝试将获取的信息转换为数组，如果无法转化为数字的，比如我们输入 abc 就会保留原本的字符串的形式

<div id="app"><h3>v-model修饰符 .trim .number</h3>姓名：<input v-model.trim="username" type="text"><br>年纪：<input v-model.number="age" type="text"><br>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {username: '',age: '',},       })</script>

效果：

具体修改后的属性内容可以通过前面提到的 Vue 调试工具查看

另外的还有 @EVENT.stop 阻止事件冒泡和 @EVENT.prevent 阻止默认行为，比如表单的提交或者超链接的跳转行为

    <!-- 阻止事件冒泡  -->
<h3>@事件名.stop     →  阻止冒泡</h3>
<div @click="fatherFn" class="father">
<div @click.stop="sonFn" class="son">儿子</div><!-- 阻止默认行为  -->
<h3>@事件名.prevent  →  阻止默认行为</h3>
<a @click.prevent href="http://www.baidu.com">阻止默认行为</a>

3.2 v-bind 指令对于样式控制的增强

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

我们之前要控制 DOM 元素的样式是通过 ClassList.add( ) 等方式实现对 DOM 元素类的操控，那通过 Vue 我么可以怎么实现呢？

语法：:class="对象/数组"

对象：通过布尔值来判断是否将这个类名加到盒子上

适用于一个类名来回切换的情况，比如 TAB 栏高亮

<div class="box" :class="{ 类名1: 布尔值, 类名2: 布尔值}"></div>

数组：数组中的所有类都会加到盒子上，本质是一个 list 列表

适用于批量添加或者删除类的情况

<div class="box" :class="[ ‘类名1’, ‘类名2’, ‘类名3’]"></div>

来看一个实例

<div id="app"><div class="box" :class="{pink: true, big: true}">黑马程序员</div><div class="box" :class="['pink']">黑马程序员</div></div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {}})
</script>

3.3 v-model 作用于其他的表单元素

常见的表单元素都可以通过 v-model 去关联，来快速的获取和设定表单元素的值，这里直接给出例子

<!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><style>textarea {display: block;width: 240px;height: 100px;margin: 10px 0;}</style>
</head>
<body><div id="app"><h3>小黑学习网</h3>姓名：<input type="text" v-model="username"> <br><br>是否单身：<input type="checkbox" v-model="isSingle"> <br><br><!-- 前置理解：1. name:  给单选框加上 name 属性 可以分组 → 同一组互相会互斥2. value: 给单选框加上 value 属性，用于提交给后台的数据结合 Vue 使用 → v-model-->性别: <input type="radio" v-model="gender" value="男">男<input type="radio" v-model="gender" value="女">女<br><br><!-- 前置理解：1. option 需要设置 value 值，提交给后台2. select 的 value 值，关联了选中的 option 的 value 值结合 Vue 使用 → v-model-->所在城市:<select v-model="location"><option>北京</option><option>上海</option><option>成都</option><option>南京</option></select><br><br>自我描述：<textarea v-model="text"></textarea> <button>立即注册</button></div><script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {username: '',isSingle: true,gender: '男',location: '上海',text: ''}})</script>
</body>
</html>

需要注意的是 v-model 会为单选框加上 name 属性，将其绑定为一组

04. 计算属性

4.1 基本使用

基于现有的数据，计算出来的新的属性，依赖数据的变化，自动重新计算

语法：声明在 computer 中，一个计算属性对应一个函数

使用起来和普通属性相同，比如插值表达式 {{ 计算属性 }}

<div id="app"><h3>小黑的礼物清单</h3><table><tr><th>名字</th><th>数量</th></tr><tr v-for="(item, index) in list" :key="item.id"><td>{{ item.name }}</td><td>{{ item.num }}个</td></tr></table><!-- 目标：统计求和，求得礼物总数 --><p>礼物总数：{{totalCount}} 个</p></div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {// 现有的数据list: [{ id: 1, name: '篮球', num: 1 },{ id: 2, name: '玩具', num: 2 },{ id: 3, name: '铅笔', num: 5 },]},computed: {totalCount() {   // 求和return this.list.reduce((sum, item) => sum + item.num, 0);}}})</script>

4.2 计算属性 VS Method

computed 计算属性：封装了对一段数据的处理求得一个结果，其具有缓存特性，即对计算出来的结果进行缓存，再次使用的时候就直接读取缓存，当其依赖项变化的时候会重新计算并且读取缓存。

methods 方法：如果把计算逻辑写在 methods 中，每次调用都需要重新计算，可以想象对性能有怎样的损耗

<div id="app"><h3>小黑的礼物清单🛒<span>{{ totalCountFn() }}</span></h3><h3>小黑的礼物清单🛒<span>{{ totalCountFn() }}</span></h3><h3>小黑的礼物清单🛒<span>{{ totalCountFn() }}</span></h3><h3>小黑的礼物清单🛒<span>{{ totalCountFn() }}</span></h3><table><tr><th>名字</th><th>数量</th></tr><tr v-for="(item, index) in list" :key="item.id"><td>{{ item.name }}</td><td>{{ item.num }}个</td></tr></table><p>礼物总数：{{ totalCountFn() }} 个</p></div>

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><script>const app = new Vue({el: '#app',data: {// 现有的数据list: [{ id: 1, name: '篮球', num: 3 },{ id: 2, name: '玩具', num: 2 },{ id: 3, name: '铅笔', num: 5 },]},methods: {totalCountFn () {console.log('methods方法执行了')let total = this.list.reduce((sum, item) => sum + item.num, 0)return total}},computed: {// 计算属性：有缓存的，一旦计算出来结果，就会立刻缓存// 下一次读取 → 直接读缓存就行 → 性能特别高// totalCount () {//   console.log('计算属性执行了')//   let total = this.list.reduce((sum, item) => sum + item.num, 0)//   return total// }}})</script>

上面每个 10 的计算都需要再次调用函数，所以对于这种情况应该使用 computed

4.3 完整写法

既然上面一直说这个 computed 里面的内容是属性，属性是可读写的，那计算属性是否是可读写的，应该如何写呢？

如果我们希望这个计算属性的改变会影响绑定的这一段数据，就需要自己编写逻辑去实现。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

这时候就需要完整的配置对象了，其中的 get() 方法是我们读的操作，set 是写的操作，通过在内部去书写方法就可以实现对读写的配置。

<div id="app">姓：<input type="text" v-model="firstName"> +名：<input type="text" v-model="lastName"> =<span>{{ fullName }}</span><br><br><button @click="changeName">改名卡</button></div>

<script>const app = new Vue({el: '#app',data: {firstName: '刘',lastName: '备',},methods: {changeName () {this.fullName = '黄忠'}},computed: {fullName: {// (1) 当fullName计算属性，被获取求值时，执行get（有缓存，优先读缓存）//     会将返回值作为，求值的结果get () {return this.firstName + this.lastName},// (2) 当fullName计算属性，被修改赋值时，执行set//     修改的值，传递给set方法的形参set (value) {// console.log(value.slice(0, 1))          // console.log(value.slice(1))         this.firstName = value.slice(0, 1)this.lastName = value.slice(1)}}}})</script>

当我们进行修改的时候，等号后面的值会作为 value 传给 set 函数，上面实现了通过修改姓名来修改绑定的名和姓的操作。

05. watch 监听器

5.1 基本使用

watch 监听器的可以实现对数据变化的监听，比如网页翻译的场景，我们在左边的框中输入需要翻译的文字后没有做任何操作但是右边的翻译的内容改变了，这就是因为监听了我们的输入操作。

语法：

const app = new Vue({data: {message: 'Hello'},watch: {// 监听 message 属性的变化message(newValue, oldValue) {console.log(`message 从 ${oldValue} 变为 ${newValue}`);// 在这里执行其他操作...}}
});

里面接收两个属性 newValue 和 oldValue 来存储更改前和更改后的值

watch 中可以监听多个属性

const app = new Vue({data: {firstName: 'John',lastName: 'Doe',fullName: ''},watch: {// 监听 firstName 和 lastName 两个属性的变化firstName(newFirstName, oldFirstName) {this.fullName = newFirstName + ' ' + this.lastName;// 在这里执行其他操作...},lastName(newLastName, oldLastName) {this.fullName = this.firstName + ' ' + newLastName;// 在这里执行其他操作...}}
});

5.2 完整写法

可以在watch选项中添加配置项，这些配置项包括handler和deep。

handler是一个函数，用于处理属性值变化时的逻辑。它接收两个参数，新值和旧值。
deep是一个布尔值，用于表示是否深度监听对象内部值的变化，默认为false。

这里就需要写成配置对象，而不是上面的单个函数的形式，上面的函数写在对象的 handler() 函数中

const app = new Vue({el: '#app',data: {message: 'Hello',count: 0,user: {name: 'John',age: 30}},watch: {message: {handler(newValue, oldValue) {console.log(`message 从 ${oldValue} 变为 ${newValue}`);// 在这里执行其他操作...},deep: true // 深度监听，如果message是对象，则也监听对象内部值的变化},count(newValue, oldValue) {console.log(`count 从 ${oldValue} 变为 ${newValue}`);// 在这里执行其他操作...},'user.name'(newValue, oldValue) { // 监听嵌套属性console.log(`用户姓名从 ${oldValue} 变为 ${newValue}`);// 在这里执行其他操作...}},methods: {increment() {this.count++;},changeUserName() {this.user.name = 'Alice'; // 改变嵌套属性，触发监听}}
});

Vue（二）：计算属性与 watch 监听器

03. Vue 指令拓展 3.1 指令修饰符可以通过 . 来指明一些指令的后缀，不同的后缀中封装了不同的操作，可以帮助我们简化代码，比如之前使用过的监听 enter 键的弹起，我们需要操作事件对象，来检测用户使用了哪个键&#…...

编程日记 2024/1/1 6:21:34

25、WEB攻防——通用漏洞SQL读写注入MYSQLMSSQLPostgreSQL

文章目录 Mysql-root高权限读写注入PostgreSQL——dba高权限读写注入Mssql-sa高权限读写注入 Access无高权限注入点——只能猜解，而且是暴力猜解； MYSQL，PostgreSQL，MSSQL(SQL server)高权限注入点——可升级读写（文件…...

编程日记 2024/1/1 6:19:32

【第5期】前端Vue使用Proxy+Vuex(store、mutations、actions)跨域调通本地后端接口

本期简介本期要点本地开发前后端如何跨域调用全局请求、响应处理拦截器处理封装HTTP请求模块编写API请求映射到后端API数据的状态管理一、本地开发前后端如何跨域调用众所周知，只要前端和后端的域名或端口不一样，就存在跨域访问，例如&…...

编程日记 2024/1/1 6:18:31

在Visual Studio（VS）编译器中，Release和Debug区别

一、优化级别 1、Debug（调试） 在Debug模式下，编译器不会对代码进行优化，而是专注于生成易于调试的代码。这使得开发者可以在调试过程中更直观地跟踪变量的值和程序的执行流程。 2、Release（发布） 在Relea…...

编程日记 2024/1/1 6:17:30

子网划分问题(实战超详解)_主机分配地址

文章目录: 子网划分的核心思想第一步,考虑借几位作为子网号第二步,确定子网的网络地址第三步,明确网络地址,广播地址,可用IP地址范围一些可能出现的疑问实战题目一子网划分的核心思想网络号不变,借用主机号来产生新的网络划分前的网络:网络号主机号划分后的网络:原网…...

编程日记 2024/1/1 6:16:29

【QT】单例模式，Q_GLOBAL_STATIC 宏的使用和使用静态成员函数，eg：{简单的日志记录器}

简单的日志记录器为例。创建一个Logger类，该类负责记录应用程序的日志消息使用 Q_GLOBAL_STATIC 宏解析：Q_GLOBAL_STATIC 是一个 Qt 宏，用于创建全局静态实例。它确保在需要时只创建一次实例，而不管该实例是在哪个线程中创建…...

编程日记 2024/1/1 6:15:29

利用小红书笔记详情API：构建高效的内容创作与运营体系

随着社交媒体的兴起，小红书作为国内知名的内容分享平台，吸引了大量用户和内容创作者。为了更好地获取小红书上的优质内容，许多企业和开发者选择使用小红书笔记详情API。本文将探讨如何利用该API构建高效的内容创作与运营体系。一、小红书笔记…...

编程日记 2024/1/1 6:14:28

【K8S 二进制部署】部署单Master Kurbernetes集群

目录一、基本架构和系统初始化 1、集群架构： 2、操作系统初始化配置： 2.1、关闭防火墙和安全机制： 2.2、关闭swap 2.3、根据规划设置主机名 2.4、三台主机全部互相映射 2.5、调整内核参数 3、时间同步（所有节点时间必须同…...

编程日记 2024/1/1 6:13:25

vue中常见的指令

简单介绍一下常见的vue中用到的指令 v-on 指定当前的事件，语法糖为，如例子所示，指定按钮的事件为addCounter，点击会使变量counter 1 <!DOCTYPE html> <html><head><meta charset"utf-8" />…...

编程日记 2024/1/1 6:12:24

单片机原理及应用：开关控制LED多种点亮模式

从这篇文章开始，我们不再只研究单一的外设工作，而是将LED、数码管、开关、按键搭配在一起研究，这篇文章主要介绍LED和开关能擦出怎样的火花，同时也介绍一些函数封装的知识。由于开关有闭合与打开两种状态，LED有左移流…...

编程日记 2024/1/1 6:09:22

你真的了解UVM sequence的运行机制吗

1. 前言 UVM在sequence里提供了很多的callback方法给用户，从而更灵活地完成各种复杂场景的交互和控制执行顺序。我们可能在很多情况下只使用了body()方法，本文将介绍sequence里常见的callback方法，以及在不同场景下，它们的是否被…...

编程日记 2024/1/1 6:06:19

Bug升级记

2023.12.28 （1) 小程序session_key泄露隐患核心：session_key这个字段及对应值不应该传到小程序客户端等服务器外的环境错误操作：直接在小程序调用https://api.weixin.qq.com/sns/jscode2session并将session_key作为参数进行明文传输正确操…...

编程日记 2024/1/1 6:01:15

爬虫详细教程第1天

爬虫详细教程第一天 1.爬虫概述1.1什么是爬虫？1.2爬虫工具——Python1.3爬虫合法吗？1.4爬虫的矛与盾1.4.1反爬机制1.4.2反爬策略1.4.3robots.txt协议 2.爬虫使用的软件2.1使用的开发工具: 3.第一个爬虫4.web请求4.1讲解一下web请求的全部过程4.2页面渲染…...

编程日记 2024/1/1 6:00:14

[Linux] MySQL数据库的备份与恢复

一、数据库备份的分类和备份策略 1.1 数据库备份的分类 1）物理备份物理备份：对数据库操作系统的物理文件（如数据文件、日志文件等）的备份。物理备份方法： 冷备份(脱机备份) ：是在关闭数据库的时候进…...

编程日记 2024/1/1 5:58:12

Django3.0升级到4.1，Python3.8升级到3.11.6问题大汇总报错1：ERROR: Could not build wheels for cffi, uWSGI, which is required to install pyproject.toml-based projects ERROR: Could not build wheels for cffi, uWSGI, which is required to install pyproject.tom…...

编程日记 2024/1/1 5:51:07

2023-12-30 AIGC-LangChain介绍

摘要: 2023-12-30 AIGC-LangChain介绍 LangChain介绍 1. https://youtu.be/Ix9WIZpArm0?t353 2. https://www.freecodecamp.org/news/langchain-how-to-create-custom-knowledge-chatbots/ 3. https://www.pinecone.io/learn/langchain-conversational-memory/ 4. https://de…...

编程日记 2024/1/1 5:50:06

pytorch01：概念、张量操作、线性回归与逻辑回归

目录一、pytorch介绍1.1pytorch简介1.2发展历史1.3pytorch优点二、张量简介与创建2.1什么是张量？2.2Tensor与Variable2.3张量的创建2.3.1 直接创建torch.tensor()2.3.2 从numpy创建tensor 2.4根据数值创建2.4.1 torch.zeros()2.4.2 torch.zeros_like()2.4.3 torch…...

编程日记 2024/1/1 5:49:05

storyBook play学习

场景在官方给出的案例中， Page.stories.js import { within, userEvent } from storybook/testing-library import MyPage from ./Page.vueexport default {title: Example/Page,component: MyPage,parameters: {// More on how to position stories at: https:/…...

编程日记 2024/1/1 5:45:01

Android Matrix画布Canvas旋转Rotate，Kotlin

Android Matrix画布Canvas旋转Rotate，Kotlin private fun f1() {val originBmp BitmapFactory.decodeResource(resources, R.mipmap.pic).copy(Bitmap.Config.ARGB_8888, true)val newBmp Bitmap.createBitmap(originBmp.width, originBmp.height, Bitmap.Config.…...

编程日记 2024/1/1 5:44:00

私有部署ELK，搭建自己的日志中心（三）-- Logstash的安装与使用

一、部署ELK 上文把采集端filebeat如何使用介绍完，现在随着数据的链路，继续~~ 同样，使用docker-compose部署： version: "3" services:elasticsearch:container_name: elasticsearchimage: elastic/elasticsearch:7.9…...

编程日记 2024/1/1 5:41:58

2023就这样过去了，2024会更好吗？

2023年，不是很好 2023年是疫情后的第一年，疫情过去了，大家都有大多的希望，希望经济可以恢复，希望信心可以恢复，但是整体都是远远低于预期的。年初的一片热潮，年中的一片哀嚎，年底基…...

编程日记 2024/1/1 5:39:56

SpringBoot加载配置的6种方式

从配置文件中获取属性应该是SpringBoot开发中最为常用的功能之一，简单回顾一下这六种的使用方式： 说明Environment对象Environment是springboot核心的环境配置接口，它提供了简单的方法来访问应用程序属性，包括系统属性、操作系统…...

编程日记 2024/1/1 5:38:55

大语言模型（LLM）训练平台与工具

LLM 是利用深度学习和大数据训练的人工智能系统，专门设计来理解、生成和回应自然语言。大模型训练平台和工具提供了强大且灵活的基础设施，使得开发和训练复杂的语言模型变得可行且高效。平台和工具提供了先进的算法、预训练模型和优化技术&#xff0c…...

编程日记 2024/1/1 5:35:52

docker配置buildx插件

一、介绍 Docker buildx是docker的一个插件支持Moby BuildKit的所有特性可以跨CPU架构编译镜像可以在多节点编译镜像二、前提使用 buildx 作为 docker CLI 插件需要使用 Docker 19.03 或更新版本。三、配置步骤 1）客户端：在客户端的配置文…...

编程日记 2024/1/1 5:33:49

mysql 空间函数

ST_GeomFromText：将文本表示的几何对象转换为几何对象。 SELECT ST_GeomFromText(POINT(1 1)); ST_AsText：将几何对象转换为文本表示。 SELECT ST_AsText(ST_GeomFromText(POINT(1 1))); ST_Contains：判断一个几何对象是否包含另一个几何对象…...

编程日记 2024/1/1 5:31:48

vscode调试反汇编c/c++ 查看汇编代码gdb/lldb

先看下流程！ 先看下流程！ 有问题请留言！ 文章目录必备F5开启调试左侧侧边栏->确保打开回调栈右键函数栈->查看反汇编方法二：手动输入命令查看必备使用c/c 插件，这应该是必备的。 F5开启调试左侧侧边栏-&…...

编程日记 2024/1/1 5:27:44

总结项目中oauth2模块的配置流程及实际业务oauth2认证记录（Spring Security）

文章目录简单示例添加oauth2的依赖配置认证服务器配置资源服务器配置安全使用http或者curl命令测试实际业务中工具类（记录）：认证服务器资源服务器、配置安全用户验证登录控制层配置文件application.yml 项目中用过的spring security&#x…...

编程日记 2024/1/1 5:26:43

传感器原理与应用复习

测量与误差传感器原理与应用复习—测量概述与测量误差传感器特性与应变式传感器传感器原理与应用复习–传感器基本特性与应变式传感器电感式传感器传感器原理与应用复习–电感式传感器电容式与电压式传感器传感器原理与应用复习–电容式与压电式传感器电磁式与…...

编程日记 2024/1/1 5:25:41

蓝桥杯python比赛历届真题99道经典练习题（8-12）

【程序8】题目：输出9*9口诀。 1.程序分析：分行与列考虑，共9行9列，i控制行，j控制列。 2.程序源代码： #include "stdio.h" main() {int i,j,result;printf("\n");for (i=1;i<10;i++){ for(j=1;j<10;j++){result=i*j;printf("%d*%d=%-3…...

编程日记 2024/1/1 5:24:40

八个理由：从java8升级到Java17

目录前言 1. 局部变量类型推断 2.switch表达式 3.文本块 4.Records 5.模式匹配instanceof 6. 密封类 7. HttpClient 8.性能和内存管理能力提高前言从Java 8 到 Java 20，Java 已经走过了漫长的道路，自 Java 8 以来，Java 生态系统…...

编程日记 2024/1/1 5:21:38

使用poi将pptx文件转为图片详解

目录项目需求后端接口实现 1、引入poi依赖 2、代码编写 1、controller 2、service层测试出现的bug 小结项目需求前端需要上传pptx文件，后端保存为图片，并将图片地址保存数据库，最后大屏展示时显示之前上传的pptx的图片。需求看上…...

编程日记 2024/1/1 5:20:37

【微服务】springboot整合skywalking使用详解

目录一、前言二、SkyWalking介绍 2.1 SkyWalking是什么 2.2 SkyWalking核心功能 2.3 SkyWalking整体架构 2.4 SkyWalking主要工作流程三、为什么选择SkyWalking 3.1 业务背景 3.2 常见监控工具对比 3.3 为什么选择SkyWalking 3.3.1 代码侵入性极低 3.3.2 功能丰…...

编程日记 2024/1/1 5:19:36

electron——查看electron的版本(代码片段)

electron——查看electron的版本(代码片段)1.使用命令行： npm ls electron 操作如下： 2.在软件内使用代码，如下： console.log(process) console.log(process.versions.electron) process 里包含很多信息： process详…...

编程日记 2024/1/1 5:14:32

【Electron】富文本编辑器之文本粘贴

由于这个问题导致，从其他地方复制来的内容粘贴发送之后都会多一个换行在发送的时候如果直接，发送innerHTML 就可以解决 Electron h5 Andriod 都没问题，但是公司的 IOS 端不支持，且不提供支持（做不了。&#xff…...

编程日记 2024/1/1 5:13:30

【哈希数组】697. 数组的度

697. 数组的度解题思路首先创建一个IndexMap 键表示元素值表示一个列表List list存储该元素在数组的所有索引之后再次创建一个map1 针对上面的List 键表示列表的长度值表示索引的差值遍历indexmap 将所有的list的长度和索引的差值存储遍历map1 找到最大的key 那么这个Ke…...

编程日记 2024/1/1 5:11:29

GO语言工具函数库--Lancet

支持300常用功能的开源GO语言工具函数库–Lancet lancet（柳叶刀）是一个全面、高效、可复用的go语言工具函数库。lancet受到了java apache common包和lodash.js的启发。特性全面、高效、可复用300常用go工具函数，支持string、slice、dateti…...

编程日记 2024/1/1 5:10:28

25、商城系统（七）：商城项目基础功能pom.xml（重要），mybatis分页插件

截止这一章，我们就不把重心放在前端，后台的基础代码，因为后面都是业务层面的crud。前端直接替换这两个文件夹即可，后台代码也直接复制：一、重新更新一下所有的pom.xml 这个地方我踩了好多坑，最后得到一个完整的pom.xml，建议大家直接用我的pom.xml替换即可。 1.comm…...

编程日记 2024/1/1 5:07:25

【Docker-Dev】Mac M2 搭建docker mysql

Mac M2 搭建Mysql 1、前言2、前置说明-Docker的代理访问3、前置说明-Mysql的镜像访问3.1、提取信息3.1.1、开启Mysql的实例3.1.2、Dokcer连接Mysql3.1.3、官方简易版的docker-compose3.1.4、如何登录mysql bash3.1.5、自定义my.cnf文件3.1.6、如何知道其他自定义配置项 4、M2安…...

编程日记 2024/1/1 5:06:24

idea中终端Terminal页面输入命令git log后如何退出

1、idea中Terminal输入命令git log后如何退出？ 2、解决输入q键会自动退出git log命令...

编程日记 2024/1/1 5:05:22

程序员必备IDEA插件，什么是是IDE？

IDEA是一款功能强大的集成开发环境（IDE）插件，它可以帮助开发人员更加高效地编写、调试和部署软件应用程序。我们在编写完接口代码后需要进行接口调试等操作，一般需要打开额外的调试工具。今天就给大家介绍一款IDEA插件&#xff…...

编程日记 2024/1/1 5:03:20

SkyWalking UI 修改发布Nginx

文章目录 SkyWalking UI修改图标修改路由发布到Nginx添加认证修改路由模式vite.config.ts添加baseNginx配置 SkyWalking UI skywalking-booster-ui下载地址修改图标替换 logo.svg 修改路由 router - data - index.ts 发布到Nginx 添加认证 # 安装 yum install -y h…...

编程日记 2024/1/1 5:02:19

移动硬盘打不开怎么办?没有比这更好的办法了

移动硬盘打不开是常见故障，可能的原因有很多，例如硬盘驱动器故障、文件系统损坏、分区表错误等。本文将详细分析这些原因，并提供相应的解决方法，帮助您解决移动硬盘打不开的问题。当移动硬盘打不开时，为了保留其中的文…...

编程日记 2024/1/1 5:01:18

[场景实现]：多选框与树形结构递归

一、场景描述实现一个分配权限的页面，最左侧是大的权限模块的名称，左右侧是控制其是否勾选的多选框。中间部分是一级权限模块下的子权限名称及多选框。请求此权限模块数据的接口返回的是树形结构对象数组。主要属性为menuName表示权限名&#xff0…...

编程日记 2024/1/1 5:00:17

从0到1浅析Redis服务器反弹Shell那些事

文章目录前言Redis服务1.1 特点与应用1.2 安装与使用1.3 语法和配置1.4 未授权访问反弹Shell2.1 Web服务写入Webshell2.2 Linux定时任务反弹shell2.3 /etc/profile.d->反弹shell2.4 写入ssh公钥登录服务器2.5 利用Redis主从复制RCE2.6 SSRF漏洞组合拳->RCE 总结前言 …...

编程日记 2024/1/1 4:58:15

JavaScript中alert、confrim、prompt的使用及区别【精选】

Hi i,m JinXiang ⭐ 前言 ⭐ 本篇文章主要介绍JavaScript中alert、confrim、prompt的区别及使用以及部分理论知识 🍉欢迎点赞 👍 收藏 ⭐留言评论 📝私信必回哟😁 🍉博主收将持续更新学习记录获，友友们有任…...

编程日记 2024/1/1 4:56:13

Docker Compose容器编排实战

介绍 Docker Compose 是 Docker 官方提供的一种工具，用于定义和运行多个 Docker 容器的应用。它使用简单的 YAML 文件（通常称为 docker-compose.yml）来配置应用的服务，并使用单个命令即可创建、启动和停止整个应用。官方文档&am…...

编程日记 2024/1/1 4:55:12

科技创新实验室数据管理优选：高效企业网盘推荐

科技创新实验室建设是国家加强科技创新基本能力建设的重要措施，企业网盘等高效办公工具的应用是保证科技创新实验室正常运行、提高科研项目团队合作效率的重要手段。本文将介绍企业网盘Zoho WorkDrive提供的解决方案： 行业痛点1：分散的数据…...

编程日记 2024/1/1 4:54:11

记录一次云服务器使用docker搭建kafka的过程

创建网络一定要将zookeeper注册中心与kafka建在一个network中，不然在springboot 集成 kakfa的demo测试代码中进行消息发送时会超时，报错： E x c e p t i o n t h r o w n w h e n s e n d i n g a m e s s a g e w i t h k e y ‘ n u l l…...

编程日记 2024/1/1 4:53:10

微信小程序与vue区别

微信小程序和Vue是两个完全不同的东西，虽然它们都是前端技术，但是有以下几点区别： 技术栈不同： 微信小程序使用WXML、WXSS和JavaScript进行开发，而Vue使用HTML、CSS和JavaScript进行开发。微信小程序是一种基于微信平台…...

编程日记 2024/1/1 4:52:09

GIT提交、回滚等基本操作记录

1、add文件时warning: LF will be replaced by CRLF in .idea/workspace.xml. 原因：windows中的换行符为 CRLF， 而在Linux下的换行符为LF，所以在执行add . 时会出现以下提示解决：git config core.autocrlf false 2、GIT命令&…...

编程日记 2024/1/1 4:49:07