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

前端-Vue2组件化编程

news 来源：原创 2025/9/16 7:49:47

什么是组件

组件的定义-实现应用中局部功能代码和资源的集合

非单文件组件

非单文件组件：
一个文件中包含有n个组件。

单文件组件：
一个文件中只包含有1个组件。

基本使用

介绍

Vue中使用组件的三大步骤：

一、定义组件(创建组件)

二、注册组件

三、使用组件(写组件标签)

一、如何定义一个组件？

使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；

区别如下：

1.el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个2.data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。

备注：使用template可以配置组件结构。

二、如何注册组件？

1.局部注册：靠new Vue的时候传入components选项

2.全局注册：靠Vue.component('组件名',组件)，那么全局的vm都能用到这个组件

三、编写组件标签：<school></school>

组件的语法

一、定义组件

定义组件时，使用 Vue.extend 方法创建组件构造器。

在构造器中，可以定义组件的 template（HTML）、data 和 methods 等选项。

示例代码：

const school = Vue.extend({template: `<div class="demo"><h2>学校名称：{{schoolName}}</h2><h2>学校地址：{{address}}</h2><button @click="showName">点我提示学校名</button>  </div>`,data() {return {schoolName: '尚硅谷',address: '北京昌平'};},methods: {showName() {alert(this.schoolName);}}
});

二、注册组件

注册组件有两种方式：

全局注册：使用 Vue.component 方法将组件构造器注册为全局组件。
局部注册：在 Vue 实例的 components 选项中注册组件构造器。

示例代码：

// 全局注册 hello 组件
Vue.component('hello', hello);

// 创建 Vue 实例，局部注册 school 和 student 组件
new Vue({el: '#root',data: {msg: '你好啊！'},components: {school,student}
});

三、使用组件

在 Vue 实例的模板中通过自定义标签使用注册的组件。

示例代码：

<div id="root"><hello></hello><hr><h1>{{msg}}</h1><hr><!-- 使用组件标签 --><school></school><hr><!-- 使用组件标签 --><student></student>
</div>

详细代码

这是上面讲解语法的详细代码

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>基本使用</title><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><div id="root"><hello></hello><hr><h1>{{msg}}</h1><hr><!-- 第三步：编写组件标签 --><school></school><hr><!-- 第三步：编写组件标签 --><student></student></div><div id="root2"><hello></hello></div></body><script type="text/javascript">Vue.config.productionTip = false//第一步：创建school组件const school = Vue.extend({template:`<div class="demo"><h2>学校名称：{{schoolName}}</h2><h2>学校地址：{{address}}</h2><button @click="showName">点我提示学校名</button>	</div>`,// el:'#root', //组件定义时，一定不要写el配置项，因为最终所有的组件都要被一个vm管理，由vm决定服务于哪个容器。data(){return {schoolName:'尚硅谷',address:'北京昌平'}},methods: {showName(){alert(this.schoolName)}},})//第一步：创建student组件const student = Vue.extend({template:`<div><h2>学生姓名：{{studentName}}</h2><h2>学生年龄：{{age}}</h2></div>`,data(){return {studentName:'张三',age:18}}})//第一步：创建hello组件const hello = Vue.extend({template:`<div>	<h2>你好啊！{{name}}</h2></div>`,data(){return {name:'Tom'}}})//第二步：全局注册组件Vue.component('hello',hello)//创建vmnew Vue({el:'#root',data:{msg:'你好啊！'},//第二步：注册组件（局部注册）components:{school,student}})new Vue({el:'#root2',})</script>
</html>

几个要注意的点

1.关于组件名:

一个单词组成：

第一种写法(首字母小写)：school

第二种写法(首字母大写)：School

多个单词组成：

第一种写法(kebab-case命名)：my-school

第二种写法(CamelCase命名)：MySchool (需要Vue脚手架支持)

备注：

(1).组件名尽可能回避HTML中已有的元素名称，例如：h2、H2都不行。

(2).可以使用name配置项指定组件在开发者工具中呈现的名字。也就是图中的这个

2.关于组件标签:

第一种写法：<school></school>

第二种写法：<school/>

备注：不用使用脚手架时，<school/>会导致后续组件不能渲染。

3.一个简写方式：

const school = Vue.extend(options) 可简写为：const school = options

实例

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>几个注意点</title><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><div id="root"><h1>{{msg}}</h1><school></school></div></body><script type="text/javascript">Vue.config.productionTip = false//定义组件const s = Vue.extend({name:'atguigu',template:`<div><h2>学校名称：{{name}}</h2>	<h2>学校地址：{{address}}</h2>	</div>`,data(){return {name:'尚硅谷',address:'北京'}}})new Vue({el:'#root',data:{msg:'欢迎学习Vue!'},components:{school:s}})</script>
</html>

组件的嵌套

语法

组件嵌套是 Vue.js 中一个非常重要的特性，允许你将组件嵌套在其他组件中，从而构建复杂的用户界面。以下是组件嵌套的语法总结，并结合您提供的示例代码进行详细说明。

组件嵌套的语法总结

定义组件：
- 使用 Vue.extend 创建组件构造器。
- 在构造器中定义组件的 template、data 和 methods 等选项。
注册组件：
- 在父组件的 components 选项中注册子组件。
- 子组件可以在父组件的 template 中通过自定义标签使用。
嵌套组件：
- 在父组件的 template 中使用子组件的标签。
- 子组件可以进一步嵌套其他组件，形成多层嵌套结构。

示例代码分析

定义组件

student 组件：

const student = Vue.extend({name: 'student',template: `<div><h2>学生姓名：{{name}}</h2><h2>学生年龄：{{age}}</h2></div>`,data() {return {name: '尚硅谷',age: 18};}
});

school 组件：

const school = Vue.extend({name: 'school',template: `<div><h2>学校名称：{{name}}</h2><h2>学校地址：{{address}}</h2><student></student> <!-- 嵌套 student 组件 --></div>`,data() {return {name: '尚硅谷',address: '北京'};},components: {student // 注册 student 组件}
});

hello 组件：

const hello = Vue.extend({template: `<h1>{{msg}}</h1>`,data() {return {msg: '欢迎来到尚硅谷学习！'};}
});

app 组件：

const app = Vue.extend({template: `<div><hello></hello> <!-- 嵌套 hello 组件 --><school></school> <!-- 嵌套 school 组件 --></div>`,components: {school,hello // 注册 school 和 hello 组件}
});

创建 Vue 实例

new Vue({template: '<app></app>', // 使用 app 组件作为根组件el: '#root',components: {app // 注册 app 组件}
});

组件嵌套的语法要点

定义组件：
- 使用 Vue.extend 创建组件构造器。
- 在构造器中定义组件的 template 和 data 方法。
注册组件：
- 在父组件的 components 选项中注册子组件。
- 子组件可以在父组件的 template 中通过自定义标签使用。
嵌套组件：
- 在父组件的 template 中使用子组件的标签。
- 子组件可以进一步嵌套其他组件，形成多层嵌套结构。

示例代码的执行流程

定义组件：
- 定义 student、school、hello 和 app 组件。
注册组件：
- 在 school 组件中注册 student 组件。
- 在 app 组件中注册 school 和 hello 组件。
- 在 Vue 实例中注册 app 组件。
使用组件：
- 在 school 组件的 template 中使用 <student> 标签。
- 在 app 组件的 template 中使用 <hello> 和 <school> 标签。
- 在 Vue 实例的 template 中使用 <app> 标签。

注意，我们一般会定义一个最高级的组件app，成为祖先组件，也是最高级的组件。一人之下。万人之上。在vm之下。

实例

体会一下组件的嵌套

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>组件的嵌套</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><div id="root"></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。//定义student组件const student = Vue.extend({name:'student',template:`<div><h2>学生姓名：{{name}}</h2>	<h2>学生年龄：{{age}}</h2>	</div>`,data(){return {name:'尚硅谷',age:18}}})//定义school组件const school = Vue.extend({name:'school',template:`<div><h2>学校名称：{{name}}</h2>	<h2>学校地址：{{address}}</h2>	<student></student></div>`,data(){return {name:'尚硅谷',address:'北京'}},//注册组件（局部）components:{student}})//定义hello组件const hello = Vue.extend({template:`<h1>{{msg}}</h1>`,data(){return {msg:'欢迎来到尚硅谷学习！'}}})//定义app组件const app = Vue.extend({template:`<div>	<hello></hello><school></school></div>`,components:{school,hello}})//创建vmnew Vue({template:'<app></app>',el:'#root',//注册组件（局部）components:{app}})</script>
</html>

最终的嵌套关系

VueComponent

关于VueComponent：

1.组件本质是一个名为VueComponent的构造函数，且不是程序员定义的，是Vue.extend生成的。

2.我们只需要写<school/>或<school></school>，Vue解析时会帮我们创建school组件的实例对象，即Vue帮我们执行的：new VueComponent(options)。

3.特别注意：每次调用Vue.extend，返回的都是一个全新的VueComponent！！！！

4.关于this指向：

(1).组件配置中：data函数、methods中的函数、watch中的函数、computed中的函数它们的this均是【VueComponent实例对象】。

(2).new Vue(options)配置中：data函数、methods中的函数、watch中的函数、computed中的函数 它们的this均是【Vue实例对象】。

5.VueComponent的实例对象，以后简称vc（也可称之为：组件实例对象）。

Vue的实例对象，以后简称vm。

单文件操作

如何分离组件

接下来我们沿用组件基本使用时候的完整代码里面的例子写的School组件，转成单文件操作。

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>组件的嵌套</title><!-- 引入Vue --><script type="text/javascript" src="../js/vue.js"></script></head><body><!-- 准备好一个容器--><div id="root"></div></body><script type="text/javascript">Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。//定义school组件const school = Vue.extend({name:'school',template:`<div><h2>学校名称：{{name}}</h2>	<h2>学校地址：{{address}}</h2>	</div>`,data(){return {name:'尚硅谷',address:'北京'}},})//创建vmnew Vue({template:'<app></app>',el:'#root',//注册组件（局部）components:{school }})</script>
</html>

我们先创建一个School.vue文件，写出他的结构。template，script，style。

<template></template><script></script><style scoped></style>

然后将School分别放进去，并把js暴露出去。

<template><div class="demo"><h2>学校名称：{{ name }}</h2><h2>学校地址：{{ address }}</h2><button @click="showX">点我输出x</button></div>
</template><script>
export default {name: "School",data() {return {name: "尚硅谷",address: "北京昌平",};},methods: {showName() {alert(this.name);},},
};
</script><style scoped>
.demo {background-color: orange;
}
</style>

这就是一个完整的vue2的组件。

以此类推，我们将Student组件也分离一下

<template><div><h2>学生姓名：{{ studentName }}</h2><h2>学生年龄：{{ age }}</h2></div>
</template><script>export default {name:'Student',data () {return {studentName:'张三',age:18}},methods: {}};
</script>

知识补充：export

这里涉及到一个新的知识点。也就是如何把交互代码暴露出去。

在 ES6 模块化中，export 用于导出模块中的函数、类或变量，以便其他模块可以导入和使用它们。以下是 export 的三种常见用法：

1. 命名导出（Named Export）

可以导出多个函数、类或变量，并给它们指定名称。这种方式允许你在导入时选择性地导入需要的成员。

// module.js
export function greet(name) {console.log(`Hello, ${name}!`);
}

export const PI = 3.14159;

export class Person {constructor(name) {this.name = name;}
}

// 使用
import { greet, PI, Person } from './module.js';
greet('World'); // 输出: Hello, World!
console.log(PI); // 输出: 3.14159
const person = new Person('Alice');

2. 默认导出（Default Export）（用的多！！！）

每个模块只能有一个默认导出。默认导出可以是函数、类或对象。

函数的默认导出

// module.js
export default function School() {return {name: "School",data() {return {name: "尚硅谷",address: "北京昌平",};},methods: {showName() {alert(this.name);},},};
}// 使用
import School from './module.js';
const school = School();
console.log(school.name); // 输出: School
school.methods.showName(); // 弹出: 尚硅谷

对象的默认导出

就是直接将这个组件当成一个对象输出，就可以省略一点

// module.js
export default {name: "School",data() {return {name: "尚硅谷",address: "北京昌平",};},methods: {showName() {alert(this.name);},},
};// 使用
import School from './module.js';
const school = School;
console.log(school.name); // 输出: School
school.methods.showName(); // 弹出: 尚硅谷

3. 批量导出（Bulk Export）

可以将其他模块的导出内容重新导出，或者将多个命名导出一次性导出。

// moduleA.js
export const a = 1;
export const b = 2;

// moduleB.js
export const c = 3;

// moduleC.js
export * from './moduleA.js'; // 批量导出 moduleA 的所有内容
export * from './moduleB.js'; // 批量导出 moduleB 的所有内容

// 使用
import { a, b, c } from './moduleC.js';
console.log(a, b, c); // 输出: 1 2 3

使用组件

前面我们创建了Student和School组件，接着我们需要用到这两个组件。这时候App.vue就派上用场了。之前说过他是一人之下万人之上，由他来使用我们前面分离出来的组件

创建App.vue

包括import引入，并使用

<template><div><School></School><Student></Student></div>
</template><script>
import School from "./School.vue";
import Student from "./Student.vue";
export default {name: "App",components: {School,Student,},
};
</script><style>
</style>

创建main.js

用app组件使用完前面分离的组件之后，毕竟他还在一人之下，也就是vm，所以我们需要创建一个Vue实例，来使用这个组件，这个实例就包含在main.js下面。

将app注册到main.js里面，并绑定id为root的容器。容器我们创建在哪呢？在index.html

import App from './App.vue'new Vue({el:'#root',// 可以写在index.html里面// template:`//     <App></App>// `,components: {App,}
})

创建index.html

我们创建一个id为root的容器，并使用app组件。然后引入vue和main

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="root"><App></App></div><script type="text/javascript" src="../js/vue.js"></script>  <script type="text/javascript" src="./main.js"></script></body>
</html>

前端-Vue2组件化编程

什么是组件组件的定义-实现应用中局部功能代码和资源的集合非单文件组件非单文件组件： 一个文件中包含有n个组件。单文件组件： 一个文件中只包含有1个组件。基本使用介绍 Vue中使用组件的三大步骤： 一、定义组件(创建组件) 二、…...

编程日记 2025/9/16 7:49:47

[leetcode]01背包问题

一.问题描述 01背包问题是一个经典的组合优化问题，属于动态规划算法的典型应用场景。其问题描述如下： 有一个容量为C的背包，以及 n 个物品，每个物品都有重量w[i] 和价值 v[i]。要求在有限的背包容量下选择一些物品放入背包&#…...

编程日记 2025/9/16 7:43:20

洛谷刷题Day1——P1706+P1157+P2089+P3654

目录 1. P1706 全排列问题题目描述输入格式输出格式输入输出样例 #1输入 #1输出 #1 说明/提示代码 2. P1157 组合的输出题目描述输入格式输出格式输入输出样例 #1输入 #1输出 #1 代码 3. P2089 烤鸡题目背景题目描述输入格式输出格式输入输出样例 #1输入 #1输出 #1 说明/提示代…...

编程日记 2025/9/16 7:48:05

游戏引擎学习第214天

总结并为当天的任务做好准备昨天，我们将所有调试控制代码迁移到使用新的调试接口中，但我们没有机会实际启用这些代码。我们做了很多准备工作，比如规划、将其做成宏、并将其放入调试流中，但实际上我们还没有办法进行测试。今天…...

编程日记 2025/9/15 7:09:32

算法题型讲解

一.双指针主要分为俩种类型： 1.左右指针：双指针指向开头，以一定标准移动或交换，对区域进行划分，或找到特殊点的位置 （如：快慢指针判断有无环，移动零） 2.对撞指针&am…...

编程日记 2025/9/11 22:44:56

Qt零散知识点

Qt零散知识点 Qt优点跨平台接口简单，易上手一定程度上简化了内存的回收 Qt创建新项目第一个窗口类默认的三个基类 QWidgetQMainWindowQDialog 其中QWidget是QMainWindow和QDialog的基类一个Qt项目默认创建的文件 main.cpp 入口函数pro文件：工…...

编程日记 2025/9/14 5:58:54

算法导论（递归回溯）——⼆叉树中的深搜

算法思路（129） 前序遍历遵循“根节点、左子树、右子树”的顺序遍历二叉树的所有节点，常用于解决子节点状态依赖于父节点状态的问题。算法思路： 在前序遍历的过程中，我们可以将信息从节点向左右子树传递&#xff0c…...

编程日记 2025/8/31 2:33:16

UE像素流发布linux并进行容器化部署

一、宿主机软硬件要求主要需要关注两部分：对像素流的支持、对linux容器的支持。 1、像素流要求： https://dev.epicgames.com/documentation/zh-cn/unreal-engine/unreal-engine-pixel-streaming-reference?application_version5.3 2、linux容器要求…...

编程日记 2025/9/7 18:32:51

arco-design-vue：给＜a-table＞组件每一行添加data-id属性，并根据id数组是否包含此行id进行样式处理

场景需求： 需要支持框选，框住的行需要更改背景色来标识选中了。如下图所示【shiftq】表示【加入】，【shiftw】表示【移除】拆分要实现的功能： 1.框选，选中行数据 2.选中行之后，当前行的样式要有所改变 …...

编程日记 2025/9/10 12:49:13

为什么ChatGPT选择SSE而非WebSocket？

为什么ChatGPT选择SSE而非WebSocket？ 一、ChatGPT回答问题的技术逻辑 ChatGPT的响应生成基于Transformer架构和自注意力机制，其核心是通过概率预测逐词生成文本。当用户输入问题后，模型会先解析上下文，再通过预训练的庞大语料库…...

编程日记 2025/9/10 12:18:26

【论文精读与实现】EDC²-RAG:基于动态聚类的文档压缩方法提升检索增强生成RAG性能

🧠 向所有学习者致敬！ “学习不是装满一桶水，而是点燃一把火。” —— 叶芝我的博客主页： https://lizheng.blog.csdn.net 🌐 欢迎点击加入AI人工智能社区！ 🚀 让我们一起努力，共创AI未来！ 🚀 1. 论文核心思想这篇由清华大学团队提出的EDC-RAG框架，针对当前…...

编程日记 2025/9/12 6:39:09

SAP S/4HANA Public Cloud的实施特点、项目阶段、资源和工具

1、SAP S/4HANA Public Cloud与OP、PCE部署的区别近年来，SAP大力推广S/4HANA Public Cloud版本，越来越多的顾问开始接触SAP Public Cloud项目。S/4HANA Public Cloud强调标准化和简化，适合快速实施的企业，在实施方法、技术特点以及项目管理方法上，都与OP版本、PCE版本都…...

编程日记 2025/9/11 0:56:30

Kafka的生产者和消费者的关系

Apache Kafka 是一个分布式流处理平台，生产者和消费者是 Kafka 中两个核心角色，它们之间存在着紧密的关系，以下从多个方面为你详细介绍： 工作模式生产者：负责将数据发送到 Kafka 的主题（Topic&#xff0…...

编程日记 2025/9/8 20:42:33

DAY01：【pytorch】张量

1、张量的简介 1.1 Variable Variable 是 torch.autograd 中的数据类型，主要用于封装 Tensor，进行自动求导 data：被包装的 Tensorgrad：data 的梯度grad_fn：创建 Tensor 的 Function，是自动求导的关键req…...

编程日记 2025/9/8 20:35:59

如何用VBA编辑器合并Word文档：详细教程

在实际办公中，我们经常需要将多个Word文档合并为一个。我将详细讲解如何通过VBA编辑器实现Word文档的自动合并。前提：先将主文档另存为“docm宏格式”，将要合并的所有文档放在同一个文件夹内。一、安装VBA编辑器 VBA编辑器是Word自带的工…...

编程日记 2025/9/11 10:42:22

智能体代理模式（Agent Agentic Patterns）深度解析

一、智能体代理模式的理论演进与核心定义 1.1 从自动化工具到认知代理的范式转变传统AI系统以规则驱动型工作流为核心，依赖预设程序执行确定性任务（如制造业机器人）。而智能体（Agent）通过大语言模型（…...

编程日记 2025/9/15 4:33:54

若依微服务集成Flowable仿钉钉工作流

项目简介本项目工作流模块集成在若依项目单独一个模块，可实现单独运行部署， 前端采用微前端，嵌入在若依的前端项目中。因博主是后端开发，对前端不是太属性，没将工作流模块前端代码移到若依前端。下面贴上代码工程结构…...

编程日记 2025/9/14 11:22:05

关于数据结构B树部分的知识点，解题过程以及方法思路

关键点数和节点数的关系...

编程日记 2025/9/8 10:11:21

TOGAF之架构标准规范-技术架构

TOGAF是工业级的企业架构标准规范，本文主要描述技术架构阶段。如上所示，技术架构（Technology Architecture）在TOGAF标准规范中处于D阶段技术架构阶段技术架构阶段的主要内容包括阶段目标、阶段输入、流程步骤、阶段输出、架构…...

编程日记 2025/9/9 13:52:36

经济金融优化：最优消费与投资分配的MATLAB实战

内容摘要本文聚焦经济金融领域的优化问题，详细介绍最优消费和最优投资分配的理论与实践。关键词：最优消费；最优投资分配；效用最大化；投资收益；MATLAB 一、引言在经济金融领域，个体和企业常…...

编程日记 2025/9/12 18:22:44

【Python语言基础】17、继承

文章目录 1. 继承1.1 为什么要用继承1.2 继承的基本语法1.3 方法重写1.4 多重继承 2. supper()2.1 作用2.2 基本语法2.3 注意事项2.4 super() 在多继承中的特点 1. 继承在 Python 里，继承是一种强大的编程概念，它允许一个类（子类&#xff0…...

编程日记 2025/9/14 23:09:49

基于CNN-GRU的深度Q网络（Deep Q-Network，DQN）求解移动机器人路径规划，MATLAB代码

一、深度Q网络（Deep Q-Network，DQN）介绍 1、背景与动机深度Q网络（DQN）是深度强化学习领域的里程碑算法，由DeepMind于2013年提出。它首次在 Atari 2600 游戏上实现了超越人类的表现，解决了传统…...

编程日记 2025/9/10 17:35:27

DAY06：【pytorch】图像增强

1、基本概念数据增强，又称数据增广、数据扩增，是对训练集进行变换，使训练集更丰富，从而让模型更具泛化能力 2、裁剪 — — Crop 2.1 transforms.CenterCrop 功能：从图像中心裁剪图片 size：所需裁剪图…...

编程日记 2025/9/12 3:13:35

K_KMS工具（适用windows和office）

目录前言一、下载二、运行前言 KMS工具（适用windows和office）。一、下载访问下载 💾下载👉工具下载地址：https://pan.quark.cn/s/bfdaa27ea823 二、运行 1、在下载目录中找到压缩包，并解压。 …...

编程日记 2025/8/17 19:41:56

Python Cookbook-5.12 检查序列的成员

任务你需要对一个列表执行很频繁的成员资格检査。而in操作符的 O(n)时间复杂度对性能的影响很大，你也不能将序列转化为一个字典或者集合，因为你还需要保留原序列的元素顺序。解决方案假设需要给列表添加一个在该列表中不存在的元素。一个可行的方法…...

编程日记 2025/9/13 18:26:40

移动端六大语言速记：第13部分 - 网络与通信

移动端六大语言速记：第13部分 - 网络与通信本文将对比Java、Kotlin、Flutter(Dart)、Python、ArkTS和Swift这六种移动端开发语言在网络与通信方面的特性，帮助开发者理解和掌握各语言的网络编程能力。 13. 网络与通信 13.1 HTTP请求各语言HTTP请求实…...

编程日记 2025/9/12 13:12:01

kafka生产者partition数量和消费者数量的关系

在 Kafka 中，生产者的分区（Partition）数量和消费者数量之间存在着密切的关系，这种关系对 Kafka 集群的性能、数据处理的并行性以及负载均衡等方面都有着重要影响，以下为你详细介绍： 核心原则 Kafka 中每个…...

编程日记 2025/9/14 17:07:57

数据库主从复制学习笔记

目录一、Binlog（Binary Log） 核心特性核心用途 Binlog 格式（3种类型） 二、主从复制核心原理主库（Master） 从库（Slave） 配置步骤（以 MySQL 为例） …...

编程日记 2025/9/14 21:49:38

使用xml模板导出excel

下面这种表格如何使用xml导出呢？ xml代码 <?xml version"1.0" encoding"UTF-8"?> <tables><styles><style id"h1" font.fontheightinpoints"14" font.fontname"黑体" alignment"c…...

编程日记 2025/9/12 6:12:26

深入解析栈式虚拟机与反向波兰表示法

1.1 什么是虚拟机？ 虚拟机（Virtual Machine, VM）是一种软件实现的计算机系统，提供与物理计算机相类似的环境，但在软件层面运行。虚拟机的存在简化了跨平台兼容性、资源管理以及安全隔离等问题。 1.2 栈式虚拟机的架构…...

编程日记 2025/9/13 18:35:14

软件验收测试方法有哪些?验收测试报告如何获取?

大数据互联网时代，各种软件产品为我们的生活和工作带来了极大的便利，企业为了更好的保障软件产品质量，软件测试工作不可或缺。软件验收测试作为软件测试过程中的最后一个测试工作，也被称之为交付测试。验收测试主要是测试软件系统…...

编程日记 2025/9/10 3:09:56

Flexoo 柔性薄膜加热片技术全解析：从原理到应用优势

FLEXOO柔性薄膜加热片通过创新技术实现高效加热。它的柔性设计能够适配不同形状的表面，满足多种设备的需求。PTC加热技术让加热片具备自我调节功能，自动调整热输出以提升安全性与能效。固定功率加热技术则确保热量稳定输出，适合需要持续加热的场景。你可以依赖它的节能环保特…...

编程日记 2025/9/8 10:07:10

DeepSeek与搜索引擎：AI生成内容如何突破“语义天花板”

一、搜索引擎的“内容饥饿症”与AI的“产能悖论” 2024年，全球每天新增470万篇网络文章，但搜索引擎的索引拒绝率高达68%。这一矛盾的根源在于：算法对“高质量原创”的定义已从“形式独特性”转向“认知增值性”。传统AI生成内容（…...

编程日记 2025/9/6 17:40:51

【1】k8s集群管理系列--包应用管理器之helm

一、helm概述 Helm核心是模板，即模板化K8s YAML文件。通过模板实现Chart高效复用，当部署多个应用时，可以将差异化的字段进行模板化，在部署时使用-f或者–set动态覆盖默认值，从而适配多个应用 helm工作流程&#xf…...

编程日记 2025/9/8 17:53:30

【零基础玩转多模态AI：Gemma3 27B开源视觉模型本地部署与远程访问】

💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！希望您在这里可以感受到一份轻松愉快的氛围，不仅可以获得有趣的内容和知识，也可以畅所欲言、分享您的想法和见解。推荐:kwan 的首页,持续学…...

编程日记 2025/9/10 22:13:46

安全岗の夺命连环问：（第壹篇）从XSS到0day的灵魂拷问

终极目录一、面试官の死亡凝视："给我手撕一个反射型XSS！" 1.1 菜鸟の陨落：那些年我们写过的致命代码 1.2 渗透艺术：如何用XSS实现CSRF联动攻击 1.3 防御矩阵：OWASP ESAPI的十八层净化二、血泪实战&am…...

编程日记 2025/9/16 5:25:59

IAP Firmware Upload Tools.exe IAP 网络固件升级教程

IAP是In Application Programming的简写，IAP升级可以被视为固件升级的一种形式,它是一种在应用程序运行过程中对固件进行更新的技术手段。允许MCU在运行过程中对MCU User Flash的部分区域进行烧写,目的是为了代替编程器对MCU烧录的依赖。主程序UI 软件按钮说明&a…...

编程日记 2025/9/3 22:26:49

Redis 7高性能缓存与分布式架构实战

大家好，我是袁庭新。很高兴向大家推荐我的新课《Redis 7高性能缓存与分布式架构实战》。这套课程是我与两位一线大厂的高级开发工程师朋友共同研发的，他们分别来自华为和美团，拥有丰富的实战经验。我将担任课程的主讲，为大家带来全…...

编程日记 2025/9/5 10:49:53

自动驾驶时间同步

主要包含两个大的概念：时间系统间的时间同步与传感器数据间的时间同步 1. 时间系统间的时间同步概念： 自动驾驶域控一般由多个芯片与多种类型的传感器组成，如：MCU SoC Camera Lidar Radar USS GNSS，其中 MCU…...

编程日记 2025/9/9 1:31:57

CISA关键措施要求解析:提升组织网络安全的实用指南

1. 引言在当今日益复杂的网络安全环境中,组织面临着前所未有的挑战。美国网络安全与基础设施安全局(CISA)提出的关键措施要求,为组织提供了一个全面的框架来加强其网络安全态势。本文将深入探讨这些措施,并提供实际的实施建议。 2. CISA关键措施概述 CISA关键措施包括以下几…...

编程日记 2025/9/15 20:56:03

java笔记03

基本数据类型数据值是存储在自己的空间中。特点：赋值给其他变量，也是赋的真实的值。引用数据类型数据值是存储在其他空间中，自己空间中存储的是地址值。特点：赋值给其他变量，赋的地址值。综合练习使用 ctrl…...

编程日记 2025/9/12 21:06:25

【HarmonyOS 5】鸿蒙的装饰器原理和自定义装饰器

【HarmonyOS 5】鸿蒙的装饰器原理和自定义装饰器一、鸿蒙中的装饰器是什么？ 在ArkTS中装饰器（Decorator）是一种特殊的声明，能够对类、方法、属性等进行标注和修改。因为ArkTS 是TypeScript 扩展而来的编程语言，Ty…...

编程日记 2025/9/6 17:07:43

【Java学习】AI时代下如何学习Java语言开发

学习 Java 语言开发时，合理借助 AI 工具可以提升效率、深化理解，以下是具体的学习策略和方法： 一、利用 AI 辅助基础学习 1. 智能文档解读与语法解析工具：ChatGPT、Bing Chat、Google Bard用法： 直接提问基础语法问…...

编程日记 2025/9/15 1:37:34

dd命令刻录CENT OS10 (.iso)光盘镜像文件到U盘

操作系统 | “扇区”、“簇”、“块”、“页”等概念_文件系统的簇和扇区-CSDN博客 Windows下面的DD工具_windows dd工具-CSDN博客如何用 ISO 镜像制作 U 盘安装盘（通用方法、无需 WinPE）_isou-CSDN博客 1 到CENT OS 网站download iso光盘镜像文件 ht…...

编程日记 2025/9/16 4:53:29