Vue基础语法的进阶,事件处理器,自定义组件及组件通信

news2024/10/2 8:34:58

目录

一、事件处理器

1. 概述

2. 实例

二、语法整合

1. 作用

2. 实例

三、自定义组件

1. 概述

2. 实例

四、组件通信

( 1 )  讲述

( 2 )  父传子

( 3 )  子传父

学习后的收获


 

一、事件处理器

1. 概述

在Vue中,事件处理器是用来处理DOM事件的方法。它可以在Vue组件中定义和使用,用于响应用户的交互操作

事件处理器的作用是监听DOM事件,并在事件触发时执行相应的逻辑代码。通过事件处理器,可以实现用户与页面的交互,例如点击按钮、输入文本等操作。当事件被触发时,事件处理器会被调用,可以执行一些逻辑操作,比如更新数据、调用方法等。

事件处理器可以接收事件对象作为参数,可以通过参数来获取事件的相关信息,如鼠标位置、键盘按键等。

事件处理器的主要作用有以下几个方面:

  1. 监听DOM事件:通过事件处理器,可以监听各种DOM事件,如点击、鼠标移入移出、键盘输入等。当事件触发时,事件处理器会被调用。

  2. 响应用户交互:通过事件处理器,可以实现用户与页面的交互。比如,可以通过点击按钮触发事件处理器来执行一些逻辑操作,如提交表单、发送请求等。

  3. 更新数据:事件处理器可以修改Vue实例中的数据,从而更新页面的显示。例如,可以在点击按钮时,通过事件处理器修改数据的值,从而改变页面的状态。

  4. 调用方法:事件处理器可以调用Vue实例中定义的方法。这样可以实现更复杂的逻辑操作,如计算、数据处理等。

  5. 传递参数:事件处理器可以接收事件对象作为参数,也可以通过事件对象传递其他参数。这样可以在事件处理器中获取事件的相关信息,如鼠标位置、键盘按键等。

总而言之,事件处理器在Vue中起到了监听和响应用户交互操作的作用,使得页面具有更好的交互性和动态性。通过事件处理器,可以实现各种交互功能,并对页面进行动态更新和操作。

2. 实例

事件修饰符

在Vue中,事件处理器可以使用一些修饰符来改变其行为。以下是一些常用的事件修饰符:

1. `.stop`:阻止事件冒泡。使用该修饰符可以阻止事件向父元素传播。

2. `.prevent`:阻止默认事件。使用该修饰符可以阻止事件的默认行为。

3. `.capture`:使用事件捕获模式。默认情况下,事件是在冒泡阶段处理的,使用该修饰符可以改为在捕获阶段处理。

4. `.self`:只在事件触发的元素自身上触发事件处理器。如果事件是由子元素触发的,使用`.self`修饰符可以阻止事件处理器执行。

5. `.once`:只触发一次事件处理器。使用该修饰符可以确保事件处理器只执行一次。

6. `.passive`:提升滚动性能。如果事件处理器中没有调用preventDefault()阻止默认事件,可以使用`.passive`修饰符来告诉浏览器该事件处理器不会阻止默认事件,从而提升滚动的性能。

除了上述修饰符,Vue还提供了一些按键修饰符,用于处理特定的键盘事件。例如:

-   .enter :按下回车键触发事件处理器。
-   .tab :按下Tab键触发事件处理器。
-   .delete :按下删除键触发事件处理器。
-   .esc :按下Esc键触发事件处理器。
-   .space :按下空格键触发事件处理器。

这些修饰符可以通过在事件处理器的后面使用点号进行添加,例如:`@click.stop`、`@keydown.enter`等。

修饰符可以组合使用,例如:`@click.stop.prevent`可以同时阻止事件冒泡和默认行为。

需要注意的是,修饰符的顺序是有意义的。例如,`@click.stop.prevent`会同时阻止事件冒泡和默认行为,而`@click.prevent.stop`只会阻止默认行为,不会阻止事件冒泡。

创建 HTML 文件,进行事件处理器的实例验证

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件处理器</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
		<style>
			.red{
				width: 400px;
				height: 400px;
				background-color: aqua;
			}
			.orange{
				width: 300px;
				height: 300px;
				background-color: chartreuse;
			}
			.blue{
				width: 200px;
				height: 200px;
				background-color: cornflowerblue;
			}
			.black{
				width: 100px;
				height: 100px;
				background-color: darkorchid;
			}
		</style>
	</head>
	<body>
		<!-- 定义边界 -->
		<div id="app">
			<h1>事件处理器</h1>
			<div class="red" @click="red">
				<div class="orange" @click="orange">
					<div class="blue" @click.stop="blue">
						<div class="black" @click.stop="black"></div>
					</div>
				</div>
			</div>
			<p>提交答案</p>
			<!-- .once只可以按一次,拒绝手残 -->
			<button @click.once="dosub">提交</button>
		</div>
	</body>
	<script type="text/javascript">
		// 构建vue实例并绑定边界
		new Vue({
			el: '#app',
			data() {
				return {
					f200: 'f200'
				};
			},
			methods: {
				red() {
					alert("红色服装");
				},
				orange() {
					alert("橙色武装");
				},
				blue() {
					alert("蓝天白云");
				},
				black() {
					alert("直接黑化");
				},
				dosub(){
					alert("已做完,提交答案");
				}
			}
		})
	</script>
</html>

效果如图 : 

二、语法整合

1. 作用

在Vue中,整合所有语法是指将Vue的各种语法特性结合起来使用,以实现更复杂、更灵活的功能。通过整合各种语法特性,可以更好地利用Vue的强大功能,提高开发效率和代码质量。

以下是整合Vue语法特性的几个常见用途:

  1. 数据绑定和计算属性:Vue提供了数据绑定和计算属性的功能,可以将数据和页面元素进行双向绑定,实现数据的动态更新和页面的实时响应。通过整合数据绑定和计算属性,可以实现复杂的数据处理和页面展示逻辑。

  2. 条件渲染和列表渲染:Vue提供了条件渲染和列表渲染的功能,可以根据条件动态显示或隐藏页面元素,以及根据数据动态生成列表。通过整合条件渲染和列表渲染,可以实现根据不同条件展示不同的内容,以及根据数据动态渲染列表。

  3. 事件处理和方法调用:Vue提供了事件处理和方法调用的功能,可以监听DOM事件,并调用相应的方法进行处理。通过整合事件处理和方法调用,可以实现用户交互的响应和页面逻辑的处理。

  4. 生命周期钩子:Vue提供了一系列的生命周期钩子函数,可以在实例的不同生命周期阶段执行相应的操作。通过整合生命周期钩子函数,可以在实例创建、更新、销毁等不同阶段执行相应的逻辑。

  5. 组件化开发:Vue支持组件化开发,可以将页面拆分成多个组件,每个组件具有独立的功能和样式。通过整合组件化开发,可以实现代码的复用和模块化,提高开发效率和代码的可维护性。

通过整合Vue的各种语法特性,可以实现更复杂、更灵活的功能,提高开发效率和代码质量。同时,整合Vue的语法特性也可以使代码更易读、易维护,并提高代码的可复用性和可扩展性。

2. 实例

创建 HTML 文件,进行语法整合表单。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
		<title>表单</title>
	</head>
	<body>
		<div id="app">
					<h1>表单[综合案例]</h1>
					<label>账号:</label><input v-model="uname" /><br />
					<label>密码:</label><input v-model="upwd" type="password" /><br />
					<!-- 将用户的输入值转为 Number 类型 -->
					<label>等级:</label><input v-model.number="age" /><br />
					<label>性别:</label>
					<div v-for="s in sexs">
						<input type="radio"  v-model="sex" name="sex" :value="s.id" />{{s.name}}
					</div>
					<label>爱好:</label>
					<div v-for="h in hobby">
						<input type="checkbox" v-model="hobbies" v-bind:value="h.id" />{{h.name}}
					</div>
					<label>级别:</label>
					<select v-model="type" >
						<option v-for="t in types" v-bind:value="t.id">{{t.name}}</option>
					</select><br />
					<label>个性签名:</label>
					<textarea v-bind:value="mark"></textarea><br />
					确认<input type="checkbox" v-model="flag" />
					<input type="submit" v-bind:disabled="show" v-on:click="Submit" />
		</div>
	</body>
	<script type="text/javascript">
		new Vue({
			el: '#app',
			data() {
				return {
					uname: 'ikun',
					upwd: '123456',
					age: 10,
					sex: 1,
					sexs:[{
						id: 1,
						name: '男'
					},{
						id: 2,
						name: '女'
					},{
						id: 3,
						name: '人妖'
					}],
					hobby: [{
						id: 1,
						name: '打go'
					}, {
						id: 2,
						name: '永劫'
					}, {
						id: 3,
						name: '无畏'
					}],
					hobbies: [],
					types: [{
						id: 1,
						name: '基础'
					}, {
						id: 2,
						name: '大师'
					}, {
						id: 3,
						name: '超凡'
					}],
					type: null,
					mark: '网吧五坐,逐渐沉默',
					flag: false
				}
			},
			computed: {
				show: function() {
					return !this.flag;
				}
			},
			methods: {
				Submit: function() {
					console.log('Submit')
					var obj = {
						uname: this.uname,
						upwd: this.upwd,
						age:this.age,
						sex: this.sex,
						hobbies:this.hobbies,
						type: this.type,
						mark: this.mark,
					}
					console.log(obj);
				}
			}

		})
	</script>
</html>

验证效果如图 : 

三、自定义组件

1. 概述

在Vue中,自定义组件是指开发者根据业务需求自定义的可复用的组件。自定义组件可以包含HTML模板、CSS样式和JavaScript逻辑,用于封装一些特定功能的UI组件或业务组件。

自定义组件在Vue中有以下几个作用:

1. 提高代码的复用性:通过自定义组件,可以将一些常用的UI组件或业务组件封装起来,以便在不同的页面中复用。这样可以减少重复编写相似代码的工作量,提高开发效率。

2. 提高代码的可维护性:通过自定义组件,可以将复杂的页面拆分成多个小的组件,每个组件负责特定的功能。这样可以使代码结构更清晰,逻辑更明确,便于维护和修改。

3. 提高开发效率:通过自定义组件,可以将页面拆分成多个独立的组件,每个组件可以并行开发和测试。这样可以提高开发效率,缩短项目的开发周期。

4. 提供更好的可扩展性:通过自定义组件,可以将页面拆分成多个小的组件,每个组件负责特定的功能。这样可以使系统更易于扩展,当需要添加新的功能时,只需添加相应的组件,而不需要修改已有的代码。

5. 提高代码的可读性:通过自定义组件,可以将复杂的业务逻辑封装在组件内部,使代码更具可读性。开发者可以通过查看组件的模板、样式和逻辑,快速理解组件的功能和实现方式。

总的来说,自定义组件是Vue中非常重要的概念,它可以提高代码的复用性、可维护性和可扩展性,同时也提高了开发效率和代码的可读性。通过合理使用自定义组件,可以更好地组织和管理Vue项目的代码。

2. 实例

创建 HTML 文件,编写自定义组件的验证。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>自定义组件</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
			<div id="app">
				<h1>自定义组件</h1>
				<my-button ></my-button>
			</div>
		<script type="text/javascript">
			// 构建vue实例并绑定边界
			new Vue({
				el: '#app',
				components:{
					'my-button':{
						template:'<button @click="tan">按钮A</button>',
						methods:{
							tan(){
								alert("你小子,。。。。。(┬┬﹏┬┬)")
							}
						}
					}
				}
			})
		</script>
	</body>
</html>

效果如图 : 

四、组件通信

( 1 )  讲述

在Vue中,组件通信是指不同组件之间进行数据传递和交互的过程。Vue提供了多种方式来实现组件通信,包括父子组件通信、兄弟组件通信和跨级组件通信等。

  1. 父子组件通信:父组件通过props向子组件传递数据,子组件通过props接收父组件传递的数据。这种通信方式适用于父组件向子组件传递数据的场景。

  2. 子组件向父组件通信:子组件通过$emit方法触发一个自定义事件,父组件通过v-on指令监听并响应该事件。这种通信方式适用于子组件向父组件传递数据或触发某个事件的场景。

  3. 兄弟组件通信:可以通过一个共同的父组件来实现兄弟组件之间的通信。父组件作为中介,接收一个组件的数据并通过props传递给另一个组件。这种通信方式适用于兄弟组件之间需要共享数据的场景。

  4. 跨级组件通信:可以通过provide/inject来实现跨级组件之间的通信。父组件通过provide提供数据,子孙组件通过inject注入数据。这种通信方式适用于跨越多层级的组件之间需要共享数据的场景。

  5. 使用事件总线:可以创建一个全局的Vue实例作为事件总线,组件通过emit和on来触发和监听事件。这种通信方式适用于任意组件之间需要进行事件交互的场景。

  6. 使用Vuex进行状态管理:Vuex是Vue官方提供的状态管理库,可以将共享的状态保存在一个全局的store中,不同的组件可以通过store来读取和修改共享的状态。这种通信方式适用于组件之间需要共享状态的场景。

组件通信的作用主要有以下几点:

  1. 数据传递:通过组件通信,可以将数据从一个组件传递到另一个组件。比如,父组件可以向子组件传递数据,子组件可以通过props来接收父组件传递的数据。这样可以实现组件之间的数据共享和传递,方便进行组件间的数据交流和协作。

  2. 事件触发:通过组件通信,可以在一个组件中触发事件,并在其他组件中监听和响应该事件。比如,子组件可以通过$emit方法触发一个事件,父组件可以通过v-on指令监听并响应该事件。这样可以实现组件之间的交互和通信,方便进行组件间的事件处理和逻辑调用。

  3. 共享状态:通过组件通信,可以实现组件之间的状态共享。比如,使用Vuex进行状态管理,可以将状态保存在一个全局的store中,不同的组件可以通过store来读取和修改共享的状态。这样可以实现组件之间的状态同步和数据共享,方便进行组件间的状态管理和数据更新。

  4. 组件复用:通过组件通信,可以实现组件的复用。比如,可以将一些常用的UI组件封装成独立的组件,然后在不同的页面中复用这些组件。这样可以减少重复编写相似代码的工作量,提高开发效率和代码的复用性。

总的来说,组件通信是Vue中非常重要的概念,它可以实现组件之间的数据传递、事件触发、状态共享和组件复用等功能。通过合理使用组件通信,可以更好地组织和管理Vue项目的代码,提高开发效率和代码质量。

( 2 )  父传子

组件通信中父传子是Vue中常用的组件通信方式之一,它可以实现父组件向子组件传递数据、实现组件的复用和解耦、实现数据的传递和共享等功能。通过合理使用父传子,可以更好地组织和管理Vue项目的代码,提高开发效率和代码质量。

创建HTML文件,实现组件通信中父传子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件通信</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
			<div id="app">
				<h1>组件通信-父传子</h1>
				<my-button b="披坚执锐" o="8"></my-button>
			</div>
		<script type="text/javascript">
			// 构建vue实例并绑定边界
			new Vue({
				el: '#app',
				components:{
					'my-button':{
						props:['b','o'],
						template:'<button @click="tan">{{b}},{{o}} 战当先。。(❤️´艸`❤️)</button>',
						data:function(){
							return {o:1}
						},
						methods:{
							tan(){
								this.o++;
							}
						}
					}
				}
			})
		</script>
	</body>
</html>

代码实现效果如图

( 3 )  子传父

组件通信中子传父是Vue中常用的组件通信方式之一,它可以实现子组件向父组件传递数据、实现组件的解耦和复用、实现数据的传递和共享等功能。通过合理使用子传父,可以更好地组织和管理Vue项目的代码,提高开发效率和代码质量。

创建HTML文件,实现组件通信中子传父

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件通信</title>
		<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.js"></script>
	</head>
	<body>
		<!-- 定义边界 -->
			<div id="app">
				<h1>组件通信-子传父</h1>
				<my-button b="披坚执锐" @传值="getParam"></my-button>
			</div>
		<script type="text/javascript">
			// 构建vue实例并绑定边界
			new Vue({
				el: '#app',
				components:{
					'my-button':{
						props:['b'],
						template:'<button @click="tan">购买学习资料,{{o}}本。(❁´◡`❁)</button>',
						data:function(){
							return {o:0}
						},
						methods:{
							//在组件内部定义值
							tan(){
								this.o++;
								let name = '喜内';
								let bname = '我的合租姐姐';
								let price = 9.9;
								this.$emit('传值',name,bname,price)
							}
						}
					}
				},
				methods:{
					getParam(name,bname,price){
						console.log("作者:"+name+",书名:"+bname+",价格:"+price);
					}
				}
			})
		</script>
	</body>
</html>

代码实现效果如图 

学习后的收获

学习在Vue中事件处理器、自定义组件和组件通信可以带来以下收获:

  • 1. 更好的代码组织和可维护性:使用事件处理器和自定义组件可以将代码按照功能模块进行组织,使代码更加清晰和易于维护。组件通信可以帮助不同组件之间进行数据交流和协作,提高代码的可维护性。
  • 2. 提高代码复用性:自定义组件可以封装可复用的功能模块,方便在不同的地方进行使用。通过组件通信,不同组件之间可以共享数据和方法,进一步提高代码的复用性。
  • 3. 增强用户交互性:事件处理器和自定义组件可以实现丰富的用户交互功能,例如点击事件、输入事件等。通过组件通信,可以实现组件之间的状态同步和联动,提升用户体验。
  • 4. 提高开发效率:使用事件处理器和自定义组件可以减少重复代码的编写,提高开发效率。组件通信可以简化组件之间的数据传递和共享,减少开发工作量。
  • 5. 拓展Vue的功能:通过学习事件处理器和自定义组件,可以深入理解Vue的底层机制和原理,进一步发挥Vue的功能和特性。

总的来说,学习在Vue中事件处理器、自定义组件和组件通信可以提高代码的组织性、可维护性和复用性,增强用户交互性,提高开发效率,拓展Vue的功能。这些收获对于开发Vue项目和提升自身技术水平都具有重要意义。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1024748.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

ubuntu20.04 安装 pyconcorde

这个包似乎对网络环境要求挺高的&#xff0c;我们直接弄个 射线A型号 的飞机 直接使用 pip install pyconcorde 安装&#xff0c;发现在使用里面的包时会报奇怪的错误&#xff0c;于是决定寻找 github 上的 pyconcorde 源码&#xff0c;看文档进行安装 github 地址&#xff1…

msvcp140.dll重新安装的解决方法是什么?(最新方法)

msvcp140.dll 是 Microsoft Visual C Redistributable 的一个动态链接库文件&#xff0c;它包含了 C 运行时库的一些函数和类&#xff0c;对于许多应用程序和游戏来说都是必需的。如果您的系统中缺失了这个文件&#xff0c;可能会导致程序无法正常运行。下面我们将分享修复 msv…

【C++笔记】C++ list类模拟实现

【C笔记】C list类模拟实现 一、初始化和各种构造1.1、准备工作1.2、各种构造和析构 二、插入和删除2.1、插入2.2、删除 三、迭代器3.1、正向迭代器3.2、反向迭代器3.3、提供迭代器位置 四、其他一些接口4.1、链表的长度和判空4.2、返回链表的头尾结点 一、初始化和各种构造 C…

面试题 17.08. 马戏团人塔

题目链接 面试题 17.08. 马戏团人塔 mid 题目描述 有个马戏团正在设计叠罗汉的表演节目&#xff0c;一个人要站在另一人的肩膀上。出于实际和美观的考虑&#xff0c;在上面的人要比下面的人矮一点且轻一点。已知马戏团每个人的身高和体重&#xff0c;请编写代码计算叠罗汉最多…

Microsoft 网络监控

随着网络的发展和变得越来越复杂&#xff0c;公司比以往任何时候都更需要监控其网络基础设施&#xff0c;因为即使是轻微的系统中断也可能导致重大损失。网络监控工具提供实时数据和网络状态的图形概述。这使您能够准确地了解正在发生的事情&#xff0c;以便您知道需要更改的位…

进程间的通信方式

文章目录 1.简单介绍2.管道2.1管道的基础概念**管道读写规则**:**管道特点** 2.2匿名管道匿名管道父子进程间通信的经典案例&#xff1a; 2.3命名管道基本概念:命名管道的创建&#xff1a;命名管道的打开规则&#xff1a;匿名管道与普通管道的区别**例子&#xff1a;用命名管道…

基于SpringBoot+Vue的宠物领养饲养交流管理平台设计与实现

前言 &#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN特邀作者、博客专家、CSDN新星计划导师、全栈领域优质创作者&#xff0c;博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f447;&#x1f3fb;…

HTML实现移动端布局与页面自适应

我们所说的布局方式&#xff0c;这里我们通常指的是width和height在不同页面情况下面的改变。 常见页面的布局方式有 静态布局 &#xff08;px布局&#xff0c;就是固定其高宽&#xff0c;不论页面怎样放大缩小&#xff0c;其占领的依旧是&#xff0c;使用px固定了的高宽&…

这种方法可以解决开发中的重复“造轮子”

一、前言 开发中&#xff0c;一直听到有人讨论是否需要重复造轮子&#xff0c;我觉得有能力的人&#xff0c;轮子得造。但是往往开发周期短&#xff0c;用轮子所节省的时间去更好的理解业务&#xff0c;应用到业务中&#xff0c;也能清晰发现轮子的利弊&#xff0c;一定意义上解…

PyTorch深度学习(三)【Logistic Regression、处理多维特征的输入】

Logistic Regression 这个名字叫做回归&#xff0c;做的是分类。 线性和logistic的模型&#xff1a; 使用的损失函数&#xff1a;二分类交叉熵 &#xff08;这个也叫做BCELoss&#xff09; logistic要做的事&#xff1a; 代码&#xff1a; import torch# import torch.nn.fun…

Java基于SpringBoot的校园疫情防控系统

文章目录 第一章2.主要技术第三章第四章 系统设计4.1功能结构4.2 数据库设计4.2.1 数据库E/R图4.2.2 数据库表 第五章 系统功能实现5.1系统功能模块5.2后台功能模块5.2.1管理员功能 源码咨询 第一章 springboot校园疫情防控系统演示录像2022 一个好的系统能将校园疫情防控的管理…

VB求平均值

VB求平均值 Private Function pj(x() As Integer) As SingleDim m%, n%, i%, s%m LBound(x): n UBound(x)For i m To ns s x(i)Next ipj s / (n - m 1) End Function Private Sub Command1_Click()Dim a%(1 To 10), i%, aver!For i 1 To 10a(i) Int(Rnd() * 10) 随机…

IMX6ULL移植篇-Linux内核编译

一. Linux内核 Linux 官网为 https://www.kernel.org &#xff0c;所以你想获取最新的 Linux 版本就可以在这个网站上下载。 Linux-4.x 版本 的 Linux 和 5.x 版本没有本质上的区别&#xff0c; 5.x 更多的是加入了一些新的平台、新的外设驱动而已。 NXP 会从网址 …

提升科研可复现性:和鲸聚焦 AI for Science 全生命周期管理

今年三月&#xff0c;国家科技部会同自然科学基金委正式启动“人工智能驱动的科学研究&#xff08;AI for Science&#xff09;”专项部署工作。数据驱动的科学研究长期以来面临诸多困境&#xff0c;针对传统科研工作流中过度依赖人类专家经验与体力的局限性&#xff0c;AI4S 旨…

优化软件系统,解决死锁问题,提升稳定性与性能 redis排队下单

项目背景&#xff1a; 随着用户数量的不断增加&#xff0c;我们的速卖通小管家软件系统面临了一个日益严重的问题&#xff1a;在从存储区提供程序的数据读取器中进行读取时&#xff0c;频繁出现错误。系统报告了一个内部异常: 异常信息如下&#xff1a; 从存储区提供程序的数…

nvme各模块间的关系总结

目录&#xff1a;driver/host/nvme/makefile # SPDX-License-Identifier: GPL-2.0 ccflags-y -I$(src)obj-$(CONFIG_NVME_CORE) nvme-core.o obj-$(CONFIG_BLK_DEV_NVME) nvme.o obj-$(CONFIG_NVME_FABRICS) nvme-fabrics.o obj-$(CONFIG_NVME_RDMA) nvme-rdma.…

02、Servlet核心技术(下)

目录 1 ServletJDBC应用&#xff08;重点&#xff09; 2 重定向和转发&#xff08;重点&#xff09; 2.1 重定向的概述 2.2 转发的概述 3 Servlet线程安全&#xff08;重点&#xff09; 4 状态管理&#xff08;重点 &#xff09; 5 Cookie技术&#xff08;重点&#xf…

26 环形链表II

环形链表 II 题解1 哈希表题解2 双指针 给定一个链表的头节点 head &#xff0c;返回链表开始入环的第一个节点。 如果链表无环&#xff0c;则返回 null。 如果链表中有某个节点&#xff0c;可以通过连续跟踪 next 指针再次到达&#xff0c;则链表中存在环。 为了表示给定链表…

pgzrun 拼图游戏制作过程详解(10)

10. 拼图游戏继续升级——多关卡拼图 初始化列表Photos用来储存拼图文件名&#xff0c;Photo_ID用来统计当下是第几张拼图&#xff0c;Squares储存当下拼图的24张小拼图的文件名&#xff0c;Gird储存当下窗口上显示的24个小拼图及坐标。 Photos["girl_","boy_…

“顽固”——C语言用栈实现队列

解题图解&#xff1a; 1、 先用stack1存储push来的数据 2、每当要pop数据时&#xff0c;从stack2中取&#xff0c;如果 stack2为空&#xff0c;就先从stack1中“倒”数据到stack2。 这就是用栈实现队列的基本操作 这道题看起来比较容易&#xff0c;但是&#xff01;如果你用C语…