大白话 Vue 中的keep - alive组件，它的作用是什么？在什么场景下使用？

大白话 Vue 中的keep - alive组件，它的作用是什么？在什么场景下使用？

什么是 keep-alive 组件

在 Vue 里，keep-alive 是一个内置组件，它就像是一个“保存盒”，能把组件实例保存起来，而不是每次切换组件时都销毁再重新创建。这就好比你有一堆玩具，每次不玩某个玩具时，不把它扔掉，而是放到一个盒子里存着，下次再玩的时候直接从盒子里拿出来接着玩，这样就节省了重新制造玩具的时间和精力。

keep-alive 的作用

  1. 减少组件创建和销毁的开销：组件的创建和销毁是需要消耗性能的，尤其是那些初始化过程比较复杂的组件。使用 keep-alive 可以避免重复创建和销毁这些组件，从而提升应用的性能。
  2. 保留组件的状态：当组件被 keep-alive 包裹后，它的状态会被保留下来。比如一个表单组件，用户在里面填了一些信息，切换到其他组件再切回来时，表单里的信息还在，不用重新填写。

适用场景

  1. 多标签页切换：在一个应用里有多个标签页，每个标签页对应一个组件，用户在不同标签页之间切换时，使用 keep-alive 可以保留每个标签页组件的状态。
  2. 列表页和详情页的切换：从列表页进入详情页，再返回列表页时，列表页的滚动位置、筛选条件等状态可以通过 keep-alive 保留下来。

代码示例及解释

基础使用
<template><!-- 这里使用 keep-alive 组件包裹了两个子组件 --><keep-alive><!-- 动态组件，根据 currentComponent 变量的值来决定显示哪个组件 --><component :is="currentComponent"></component></keep-alive><!-- 按钮，点击切换显示的组件 --><button @click="toggleComponent">切换组件</button>
</template><script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';export default {data() {return {// 初始显示的组件是 ComponentAcurrentComponent: 'ComponentA'};},components: {// 注册组件ComponentA,ComponentB},methods: {toggleComponent() {// 点击按钮时切换显示的组件this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';}}
};
</script>
代码解释
  • <keep-alive> 标签：把需要保存状态的组件包裹起来，这样在切换组件时，被包裹的组件不会被销毁，而是被缓存起来。
  • <component :is="currentComponent"></component>：这是 Vue 的动态组件，currentComponent 是一个变量，它的值决定了显示哪个组件。
  • toggleComponent 方法：点击按钮时，会改变 currentComponent 的值，从而切换显示的组件。
配合 include 和 exclude 使用
<template><!-- 使用 include 属性指定只缓存 ComponentA 组件 --><keep-alive include="ComponentA"><component :is="currentComponent"></component></keep-alive><button @click="toggleComponent">切换组件</button>
</template><script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';export default {data() {return {currentComponent: 'ComponentA'};},components: {ComponentA,ComponentB},methods: {toggleComponent() {this.currentComponent = this.currentComponent === 'ComponentA' ? 'ComponentB' : 'ComponentA';}}
};
</script>
代码解释
  • include 属性：include 属性可以指定只缓存哪些组件，只有组件名匹配 include 属性值的组件才会被缓存。这里只缓存 ComponentA 组件。
  • exclude 属性：和 include 相反，exclude 属性指定哪些组件不被缓存。
组件内的生命周期钩子
<script>
export default {data() {return {count: 0};},// 组件被激活时触发activated() {console.log('组件被激活');},// 组件被停用时触发deactivated() {console.log('组件被停用');}
};
</script>
代码解释
  • activated 钩子：当被 keep-alive 缓存的组件被激活时，会触发 activated 钩子，可以在这个钩子函数里做一些初始化操作，比如重新获取数据。
  • deactivated 钩子：当被 keep-alive 缓存的组件被停用时，会触发 deactivated 钩子，可以在这个钩子函数里做一些清理操作。

总之，keep-alive 组件在提升 Vue 应用性能和保留组件状态方面非常有用，合理使用它可以让你的应用更加流畅和易用。

如何在Vue中使用keep-alive组件？

在Vue里，keep-alive组件的作用是把组件实例缓存起来，这样在切换组件时，就不用反复销毁和重新创建组件实例，能够提升性能和用户体验。接下来我会详细介绍怎样在Vue里使用keep-alive组件，并且在每句代码上添加注释。

1. 创建一个简单的Vue项目

要是你还没有Vue项目，就可以借助Vue CLI来创建一个新的项目：

npm install -g @vue/cli
vue create my-keep-alive-project
cd my-keep-alive-project

2. 创建两个组件

在src/components目录下创建两个组件，分别是ComponentA.vue和ComponentB.vue。

ComponentA.vue
<template><!-- 组件A的模板部分 --><div><h1>这是组件A</h1><!-- 显示计数器的值 --><p>计数器: {{ count }}</p><!-- 点击按钮增加计数器的值 --><button @click="increment">增加</button></div>
</template><script>
export default {data() {return {// 初始化计数器为0count: 0};},methods: {increment() {// 点击按钮时计数器加1this.count++;}},// 组件被激活时触发activated() {console.log('组件A被激活');},// 组件被停用（缓存）时触发deactivated() {console.log('组件A被停用');}
};
</script>
ComponentB.vue
<template><!-- 组件B的模板部分 --><div><h1>这是组件B</h1><!-- 显示计数器的值 --><p>计数器: {{ count }}</p><!-- 点击按钮增加计数器的值 --><button @click="increment">增加</button></div>
</template><script>
export default {data() {return {// 初始化计数器为0count: 0};},methods: {increment() {// 点击按钮时计数器加1this.count++;}},// 组件被激活时触发activated() {console.log('组件B被激活');},// 组件被停用（缓存）时触发deactivated() {console.log('组件B被停用');}
};
</script>

3. 在App.vue中使用keep-alive组件

<template><div id="app"><!-- 导航按钮，点击切换组件 --><button @click="currentComponent = 'ComponentA'">切换到组件A</button><button @click="currentComponent = 'ComponentB'">切换到组件B</button><!-- 使用keep-alive组件来缓存组件实例 --><keep-alive><!-- 根据currentComponent的值动态渲染组件 --><component :is="currentComponent"></component></keep-alive></div>
</template><script>
// 引入组件A和组件B
import ComponentA from './components/ComponentA.vue';
import ComponentB from './components/ComponentB.vue';export default {components: {// 注册组件A和组件BComponentA,ComponentB},data() {return {// 初始显示组件AcurrentComponent: 'ComponentA'};}
};
</script><style>
#app {font-family: Avenir, Helvetica, Arial, sans-serif;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-align: center;color: #2c3e50;margin-top: 60px;
}
</style>

代码解释

  1. 组件创建：ComponentA.vue和ComponentB.vue这两个组件里都有一个计数器，并且有一个“增加”按钮，点击按钮就能让计数器的值增加。
  2. keep-alive组件使用：在App.vue里，借助<keep-alive>标签把<component>包裹起来，这样就能缓存组件实例。当在组件A和组件B之间进行切换时，组件实例不会被销毁，而是被缓存起来。
  3. activated和deactivated钩子：在ComponentA.vue和ComponentB.vue里，运用了activated和deactivated钩子函数。activated在组件被激活（显示）时触发，deactivated在组件被停用（隐藏）时触发。

运行项目

在终端中执行以下命令来运行项目：

npm run serve

之后在浏览器里访问http://localhost:8080，你就能看到两个按钮，点击按钮就能在组件A和组件B之间进行切换。当你切换组件时，计数器的值会被保留，这就表明组件实例被缓存了。

除了上述场景，还有哪些场景适合使用keep-alive组件？

keep - alive组件是Vue.js中的一个内置组件，它的主要作用是在组件切换时，保留组件的状态，避免重新渲染，从而提高性能和用户体验。以下是一些除了常见场景外，还适合使用keep - alive组件的场景及示例代码：

电商平台的商品详情页

  • 场景描述：当用户在电商平台中查看商品详情时，可能会频繁地在不同商品之间切换。如果不使用keep - alive组件，每次切换商品详情页都需要重新获取商品数据、渲染页面，这会导致一定的延迟，影响用户体验。使用keep - alive组件可以在用户切换商品时，保留之前商品详情页的状态，下次再回到该商品详情页时，无需重新加载数据和渲染，直接显示之前的状态，提高了页面的加载速度和响应性能。
  • 代码示例
<template><div><!-- 使用keep - alive组件包裹商品详情组件 --><keep - alive><!-- 商品详情组件，:key属性用于区分不同的商品，确保每个商品都有独立的缓存 --><product - detail :key="productId" :product="product"></product - detail></keep - alive></div>
</template><script>
import ProductDetail from '@/components/ProductDetail.vue'export default {components: {ProductDetail},data() {return {// 商品IDproductId: '',// 商品数据product: {}}},methods: {// 加载商品详情数据的方法loadProductDetail(productId) {// 这里可以通过API请求获取商品详情数据// 假设返回的商品数据格式为{id, name, description, etc.}this.productId = productIdthis.product = {id: productId,name: 'Product Name',description: 'Product Description'// 其他商品属性}}}
}
</script>

多标签页的后台管理系统

  • 场景描述：在后台管理系统中，用户通常会打开多个标签页来进行不同的操作，如查看订单、管理用户、编辑文章等。当用户在不同标签页之间切换时，使用keep - alive组件可以保留每个标签页的组件状态，避免重复加载和渲染。这样，用户再次回到某个标签页时，能够快速恢复到之前的操作状态，提高工作效率。
  • 代码示例
<template><div><!-- 导航栏，用于切换不同的标签页 --><ul><li v - for="(tab, index) in tabs" :key="index" @click="activeTab = index">{{ tab.title }}</li></ul><!-- 使用keep - alive组件包裹标签页内容 --><keep - alive><!-- 根据当前激活的标签页索引，渲染对应的组件 --><component :is="activeTabComponent"></component></keep - alive></div>
</template><script>
import OrderList from '@/components/OrderList.vue'
import UserManagement from '@/components/UserManagement.vue'
import ArticleEditor from '@/components/ArticleEditor.vue'export default {components: {OrderList,UserManagement,ArticleEditor},data() {return {// 标签页列表，包含每个标签页的标题和对应的组件名称tabs: [{ title: '订单列表', component: 'OrderList' },{ title: '用户管理', component: 'UserManagement' },{ title: '文章编辑', component: 'ArticleEditor' }],// 当前激活的标签页索引activeTab: 0}},computed: {// 根据当前激活的标签页索引，计算出要渲染的组件activeTabComponent() {return this.tabs[this.activeTab].component}}
}
</script>

向导式表单

  • 场景描述：在一些需要用户填写大量信息的向导式表单中，用户可能会在不同步骤之间来回切换。使用keep - alive组件可以保留每个步骤表单的输入状态，避免用户在返回上一步时丢失已输入的数据，提高用户填写表单的体验和效率。
  • 代码示例
<template><div><!-- 向导式表单导航栏，显示当前步骤和总步骤数 --><div>步骤 {{ currentStep + 1 }} / {{ steps.length }}</div><!-- 步骤切换按钮 --><button v - if="currentStep > 0" @click="prevStep">上一步</button><button v - if="currentStep < steps.length - 1" @click="nextStep">下一步</button><!-- 使用keep - alive组件包裹表单步骤组件 --><keep - alive><!-- 根据当前步骤索引，渲染对应的表单步骤组件 --><component :is="currentStepComponent"></component></keep - alive></div>
</template><script>
import Step1Form from '@/components/Step1Form.vue'
import Step2Form from '@/components/Step2Form.vue'
import Step3Form from '@/components/Step3Form.vue'export default {components: {Step1Form,Step2Form,Step3Form},data() {return {// 表单步骤列表，包含每个步骤对应的组件名称steps: ['Step1Form','Step2Form','Step3Form'],// 当前步骤索引currentStep: 0}},computed: {// 根据当前步骤索引，计算出要渲染的组件currentStepComponent() {return this.steps[this.currentStep]}},methods: {// 上一步方法，切换到上一个步骤prevStep() {if (this.currentStep > 0) {this.currentStep--}},// 下一步方法，切换到下一个步骤nextStep() {if (this.currentStep < this.steps.length - 1) {this.currentStep++}}}
}
</script>

带有历史记录的搜索页面

  • 场景描述：在搜索页面中，用户可能会进行多次搜索，并希望能够快速回到之前的搜索结果页面。使用keep - alive组件可以缓存搜索结果页面的状态，包括搜索条件、排序方式、当前页码等，当用户从历史记录中点击返回时，能够直接恢复到之前的搜索结果页面，而无需重新执行搜索操作，提高了搜索效率和用户体验。
  • 代码示例
<template><div><!-- 搜索框，用于输入搜索关键词 --><input type="text" v - model="searchKeyword" placeholder="请输入搜索关键词"><!-- 搜索按钮，点击触发搜索方法 --><button @click="search">搜索</button><!-- 历史记录列表，显示之前的搜索关键词 --><ul><li v - for="(keyword, index) in searchHistory" :key="index" @click="goBackToHistory(index)">{{ keyword }}</li></ul><!-- 使用keep - alive组件包裹搜索结果组件 --><keep - alive><!-- 搜索结果组件，传递搜索关键词和其他相关参数 --><search - result :keyword="searchKeyword" :otherParams="otherParams"></search - result></keep - alive></div>
</template><script>
import SearchResult from '@/components/SearchResult.vue'export default {components: {SearchResult},data() {return {// 搜索关键词searchKeyword: '',// 其他搜索参数，如排序方式、页码等otherParams: {sortBy: 'relevance',page: 1},// 搜索历史记录数组searchHistory: []}},methods: {// 搜索方法，执行搜索操作并将关键词添加到历史记录中search() {// 这里可以通过API请求进行搜索// 假设搜索结果为一个数组const searchResults = []// 将搜索关键词添加到历史记录中this.searchHistory.push(this.searchKeyword)},// 回到历史记录中的某个搜索结果页面的方法goBackToHistory(index) {// 将当前搜索关键词设置为历史记录中的关键词this.searchKeyword = this.searchHistory[index]// 可以根据需要设置其他参数，如恢复当时的排序方式和页码等this.otherParams.sortBy = 'relevance'this.otherParams.page = 1}}
}
</script>

在上述代码示例中，通过keep - alive组件包裹相应的组件，实现了在不同场景下保留组件状态的功能。这样可以避免组件的重复渲染和数据的重复加载，提高了应用程序的性能和用户体验。同时，通过合理地使用key属性和组件的切换逻辑，确保了每个组件都能正确地缓存和恢复状态。

在使用keep-alive时，可能会遇到哪些问题？

1. keep-alive 基本概念

keep-alive 是一种机制，在网络通信里，它能让客户端和服务器之间的连接在一次请求响应完成后不马上关闭，而是保持一段时间，这样后续的请求就能复用这个连接，减少建立新连接的开销。在前端开发里，Vue 框架中的 keep-alive 组件可用于缓存组件实例，避免重复创建和销毁组件，提升性能。

2. 使用 keep-alive 可能遇到的问题及解决办法

问题 1：缓存组件数据不更新
  • 问题描述：当使用 keep-alive 缓存组件后，组件里的数据不会随着路由切换或者外部数据变化而更新。
  • 解决办法：利用 activated 和 deactivated 生命周期钩子函数。activated 会在组件被激活时触发，deactivated 会在组件失活时触发。

以下是示例代码：

<template><div><!-- 使用 keep-alive 包裹路由视图 --><keep-alive><router-view></router-view></keep-alive></div>
</template><script>
export default {name: 'App',
};
</script>

<template><div><!-- 组件内容 --><p>{{ message }}</p></div>
</template><script>
export default {data() {return {message: '初始消息',};},// 组件被激活时触发activated() {// 在这里更新数据this.message = '更新后的消息';},// 组件失活时触发deactivated() {console.log('组件失活');},
};
</script>
问题 2：缓存组件太多，占用大量内存
  • 问题描述：要是缓存的组件过多，就会占用大量内存，影响应用性能。
  • 解决办法：使用 include 和 exclude 属性来控制哪些组件需要被缓存，或者使用 max 属性限制缓存组件的最大数量。

示例代码如下：

<template><div><!-- 使用 include 属性指定需要缓存的组件 --><keep-alive include="ComponentA,ComponentB"><router-view></router-view></keep-alive><!-- 或者使用 max 属性限制缓存组件的最大数量 --><keep-alive max="3"><router-view></router-view></keep-alive></div>
</template><script>
export default {name: 'App',
};
</script>
问题 3：缓存组件的滚动位置丢失
  • 问题描述：当切换路由时，缓存组件的滚动位置会丢失，每次返回组件时都会回到顶部。
  • 解决办法：在 activated 生命周期钩子函数里恢复滚动位置，在 deactivated 生命周期钩子函数里保存滚动位置。

示例代码：

<template><div ref="scrollContainer" style="height: 200px; overflow-y: auto;"><!-- 模拟长列表 --><p v-for="i in 100" :key="i">{{ i }}</p></div>
</template><script>
export default {data() {return {scrollTop: 0, // 用于保存滚动位置};},// 组件被激活时触发activated() {// 恢复滚动位置this.$refs.scrollContainer.scrollTop = this.scrollTop;},// 组件失活时触发deactivated() {// 保存滚动位置this.scrollTop = this.$refs.scrollContainer.scrollTop;},
};
</script>

通过上述这些解决办法，你就能在使用 keep-alive 时避免常见问题，提升应用的性能和用户体验。

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

如若内容造成侵权/违法违规/事实不符，请联系长河编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

cesium安装与配置（visual studio版）

cesium安装与配置（visual studio版）

文章目录 一、下载Cesium二、解压Cesium三、VS打开网站四、参考文献 如有错误&#xff0c;请指正&#xff01;&#xff01;&#xff01; 一、下载Cesium 登录官网&#xff0c;下载Cesium。 点击箭头所指&#xff0c;下载Cesium 二、解压Cesium 解压Cesium压缩包得到以下文件…
阅读更多...
Netty基础—3.基础网络协议二

Netty基础—3.基础网络协议二

大纲 1.网络基础的相关问题总结 2.七层模型和四层模型 3.物理层(网线 光缆 01电信号) 4.数据链路层(以太网协议 网卡mac地址) 5.网络层(IP协议 子网划分 路由器) 6.传输层(TCP和UDP协议 Socket 端口) 7.应用层(HTTP协议 SMTP协议) 8.浏览器请求一个域名会发生什…
阅读更多...
Linux：Ubuntu server 24.02 上搭建 ollama + dify

Linux：Ubuntu server 24.02 上搭建 ollama + dify

一、安装Ubuntu 具体的安装过程可以参见此链接&#xff1a;链接&#xff1a;Ubuntu Server 20.04详细安装教程&#xff0c;这里主要记录一下过程中遇到的问题。 安装时subnet如何填写 在Ubuntu中subnet填写255.255.255.0是错误的&#xff0c;其格式为 xx.xx.xx.xx/yy &#…
阅读更多...
算法练习——双指针算法(更新中)

算法练习——双指针算法(更新中)

一、介绍双指针算法 双指针&#xff08;或称为双索引&#xff09;算法是一种高效的算法技巧&#xff0c;常用于处理数组或链表等线性数据结构。它通过使用两个指针来遍历数据&#xff0c;从而减少时间复杂度&#xff0c;避免使用嵌套循环。双指针算法在解决诸如查找、排序、去重…
阅读更多...
stm32week6

stm32week6

stm32学习 三.通信 5.硬件读取I2C 硬件读取I2C的代码(main.c与软件读取相同)&#xff1a; #include "stm32f10x.h" // Device header #include "MPU6050_Reg.h"#define MPU6050_ADDRESS 0xD0 //MPU6050的I2C从机地址/*** 函 数&…
阅读更多...
qt+opengl 播放yuv视频

qt+opengl 播放yuv视频

一、实现效果 二、pro文件 Qt widgets opengl 三、主要代码 #include "glwidget.h"GLWidget::GLWidget(QWidget *parent) : QOpenGLWidget(parent) {connect(&m_timer, &QTimer::timeout, this,[&](){this->update();});m_timer.start(1000/33); }v…
阅读更多...
文本对抗样本系列的论文阅读笔记（整理合订）

文本对抗样本系列的论文阅读笔记（整理合订）

文本对抗样本系列的论文阅读笔记 以前调研文本对抗样本时的论文笔记梳理&#xff0c;论文都很经典&#xff0c;有现成的框架&#xff08;TextAttack&#xff09;可以直接用&#xff0c;论文中部分内容直接是截取自论文&#xff0c;所以存在中英混合笔记的情况。 BERT-Attack …
阅读更多...
相对与绝对路径的关系

相对与绝对路径的关系

首先&#xff0c;我们一起来了解相对路径和绝对路径的概念&#xff1a; 相对路径&#xff1a;相对于当前工作目录的路径&#xff0c;不以 / 开头&#xff0c;以一个 ""、./、../、。例如&#xff1a;nginx、./nginx 或 ../nginx绝对路径&#xff1a;从根目录 / 开始…
阅读更多...
java项目之基于ssm的在线学习系统（源码+文档）

java项目之基于ssm的在线学习系统（源码+文档）

项目简介 在线学习系统实现了以下功能&#xff1a; 该系统可以实现论坛管理&#xff0c;通知信息管理&#xff0c;学生管理&#xff0c;回答管理&#xff0c;教师管理&#xff0c;教案管理&#xff0c;公告信息管理&#xff0c;作业管理等功能。 &#x1f495;&#x1f495;作…
阅读更多...
位运算刷题+总结

位运算刷题+总结

文章目录 判定字符是否唯一题解代码 丢失的数字题解代码 两整数之和题解代码 只出现一次的数字 II题解代码 消失的两个数字题解代码 总结 判定字符是否唯一 题目链接 题解 1. 哈希表&#xff0c;创建26个空间大小的哈希表 2. 位图&#xff0c;小写字符只有26个&#xff0c;…
阅读更多...
Qt表格美化笔记

Qt表格美化笔记

介绍 表格是一种常见的数据管理界面形式&#xff0c;在大批量的数据交互情形下使用的比较多 表格 可以通过样式表设置线条以及边框的颜色 QTableWidget { gridline-color : rgb(55, 60, 62); border: 1px solid rgb(62,112,181);}表头 如果表头和第一行的分割线显示&#…
阅读更多...
【Godot4.2】Vector2向量插值的应用

【Godot4.2】Vector2向量插值的应用

求线段的等分点 extends Node2Dvar pos:Vector2 var split_num:int var p1 Vector2(200,200) var p2 Vector2(100,100)func _input(event: InputEvent) -> void:if event is InputEventMouseButton:if event.button_index MOUSE_BUTTON_WHEEL_DOWN:split_num clamp(spl…
阅读更多...
Git使用（二）--如何配置 GitHub 远程仓库及本地 Git 环境

Git使用（二）--如何配置 GitHub 远程仓库及本地 Git 环境

在日常的开发过程中&#xff0c;使用版本控制工具 Git 是一个非常重要的技能&#xff0c;特别是对于管理和协作开发。通过 GitHub&#xff0c;我们可以轻松地进行代码版本管理和共享。这篇博客将带您一步步学习如何配置 Git 环境并将本地仓库与 GitHub 远程仓库连接起来。 一、…
阅读更多...
【算法工具】HDL: 基于摘要统计数据的高维连锁不平衡分析软件

【算法工具】HDL: 基于摘要统计数据的高维连锁不平衡分析软件

## 前言 在基因组研究中&#xff0c;连锁不平衡(Linkage Disequilibrium, LD)分析是理解遗传变异之间关联的关键步骤。然而&#xff0c;当面对高维数据时&#xff0c;传统分析方法往往面临巨大计算挑战。今天为大家介绍一款强大的工具——HDL (High-Dimensional Linkage diseq…
阅读更多...
MongoDB副本集部署完整教程

MongoDB副本集部署完整教程

一般而言&#xff0c;副本集主要成员有三个&#xff1a;主节点&#xff0c;副本节点&#xff0c;仲裁节点 按照官方推荐方案&#xff0c;我们搭建一个三成员的副本集&#xff0c;这个副本集由一个主结点和两个副本结点组成。 这里采用三台虚拟机进行部署&#xff1a;node1(主节…
阅读更多...
springcloud gateway通过数据库获取路由信息

springcloud gateway通过数据库获取路由信息

在 Spring Cloud Gateway 中结合 MyBatis 动态从数据库加载路由配置&#xff0c;可以实现灵活的路由管理。以下是详细实现步骤&#xff1a; 1. 数据库表设计 创建路由配置表 gateway_route&#xff1a; CREATE TABLE gateway_route (id varchar(50) NOT NULL COMMENT 路由唯一…
阅读更多...
蓝桥杯嵌入式组第十二届省赛题目解析+STM32G431RBT6实现源码

蓝桥杯嵌入式组第十二届省赛题目解析+STM32G431RBT6实现源码

文章目录 1.题目解析1.1 分而治之&#xff0c;藕断丝连1.2 模块化思维导图1.3 模块解析1.3.1 KEY模块1.3.2 LED模块1.3.3 LCD模块1.3.4 TIM模块1.3.5 UART模块1.3.5.1 uart数据解析 2.源码3.第十二届题目 前言&#xff1a;STM32G431RBT6实现嵌入式组第十二届题目解析源码&#…
阅读更多...
Git 的基本概念和使用方式（附有思维导图）

Git 的基本概念和使用方式（附有思维导图）

一、Git 简介 Git 是一个开源的分布式版本控制系统&#xff0c;由 Linus Torvalds 在 2005 年为帮助管理 Linux 内核开发版本而开发 。与集中式版本控制系统&#xff08;如 SVN&#xff09;不同&#xff0c;在分布式系统中&#xff0c;每个开发者的本地机器都拥有一个完整的 G…
阅读更多...
【微服务】Nacos 配置动态刷新（简易版）（附配置）

【微服务】Nacos 配置动态刷新（简易版）（附配置）

文章目录 1、实现方法2、配置依赖 yaml3、验证效果 1、实现方法 环境&#xff1a;Nacos、Java、SpringBoot等 主要是在boostrap.yaml中的data-id属性下配置refresh:true来实现动态更新 2、配置依赖 yaml 具体的版本参考官方的说明&#xff1a;官方版本说明 <!--读取boo…
阅读更多...
mac 被禁用docker ui后，如何使用lima虚拟机启动docker

mac 被禁用docker ui后，如何使用lima虚拟机启动docker

本机macos 安装lima brew install lima创建配置 echo "\\ndynamic:\n big-sur:\n image: docker://docker:git\n linux:\n image: docker.io/limasoftware/ubuntu:20.04 \\n" > ~/.lima/default.yaml启动名叫default的虚拟机 limactl start default进…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023