大白話 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.pswp.cn/news/897679.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/897679.shtml
英文地址，請注明出處：http://en.pswp.cn/news/897679.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

考研復試c語言常見問答題匯總2

考研復試c語言常見問答題匯總2

11. 關鍵字和一般標識符有什么不同&#xff1f; C語言中關鍵字與一般標識符區別&#xff1a; 定義&#xff1a;關鍵字是C語言預定義的特殊單詞&#xff08;如int、for&#xff09;&#xff0c;有固定含義&#xff1b;標識符是自定義的名稱&#xff08;如變量名、函數名&#xf…
閱讀更多...
Scala編程_實現Rational的基本操作

Scala編程_實現Rational的基本操作

在Scala中實現一個簡單的有理數&#xff08;Rational&#xff09;類&#xff0c;并對其進行加法、比較等基本操作. 有理數的定義 有理數是可以表示為兩個整數的比值的數&#xff0c;通常形式為 n / d&#xff0c;其中 n 是分子&#xff0c;d 是分母。為了確保我們的有理數始終…
閱讀更多...
若依框架-給sys_user表添加新字段并獲取當前登錄用戶的該字段值

若依框架-給sys_user表添加新字段并獲取當前登錄用戶的該字段值

目錄 添加字段 修改SysUser類 修改SysUserMapper.xml 修改user.js 前端獲取字段值 添加字段 若依框架的sys_user表是沒有age字段的&#xff0c;但由于業務需求&#xff0c;我需要新添加一個age字段&#xff1a; 修改SysUser類 添加age字段后&#xff0c;要在SysUser類 …
閱讀更多...
霍夫變換法是基于傳統視覺特征的道路車道線檢測算法中的一種經典方法

霍夫變換法是基于傳統視覺特征的道路車道線檢測算法中的一種經典方法

霍夫變換法是基于傳統視覺特征的道路車道線檢測算法中的一種經典方法&#xff0c;以下是對它的詳細介紹&#xff1a; 基本原理 霍夫變換的基本思想是將圖像空間中的點映射到參數空間中&#xff0c;通過在參數空間中尋找峰值來確定圖像中特定形狀的參數。在車道線檢測中&#…
閱讀更多...
【論文筆記】Best Practices and Lessons Learned on Synthetic Data for Language Models

【論文筆記】Best Practices and Lessons Learned on Synthetic Data for Language Models

論文信息 論文標題&#xff1a;Best Practices and Lessons Learned on Synthetic Data for Language Models 作者信息&#xff1a; Ruibo Liu, Jerry Wei, Fangyu Liu, Chenglei Si, Yanzhe Zhang, Jinmeng Rao, Steven Zheng, Daiyi Peng, Diyi Yang, Denny Zhou1 and Andre…
閱讀更多...
Android調試工具之ADB

Android調試工具之ADB

Android Debug Bridge ADB介紹**一、ADB下載****二、ADB安裝****三、ADB基礎使用命令** ADB介紹 ADB&#xff08;Android Debug Bridge&#xff09;是Android開發與調試的必備工具&#xff0c;掌握它能極大提升開發效率。 一、ADB下載 Windows版本&#xff1a;https://dl.goo…
閱讀更多...
第三篇《RMAN 備份與恢復指南：保障數據庫安全》（RMAN）

第三篇《RMAN 備份與恢復指南：保障數據庫安全》（RMAN）

《Oracle 數據遷移與備份系列》 第三篇&#xff1a;《RMAN 備份與恢復指南&#xff1a;保障數據庫安全》&#xff08;RMAN&#xff09; 1.概述 RMAN&#xff08;Recovery Manager&#xff09; 是 Oracle 數據庫內置的專用備份與恢復工具&#xff0c;提供高效、安全的物理級數…
閱讀更多...
【測試框架篇】單元測試框架pytest（4）：assert斷言詳解

【測試框架篇】單元測試框架pytest（4）：assert斷言詳解

一、前言 用例三要素之一就是對預期結果的斷言。 何為斷言&#xff1f;簡單來說就是實際結果和期望結果去對比&#xff0c;符合預期就測試pass&#xff0c;不符合預期那就測試 failed。斷言內容就是你要的預期結果。斷言包含對接口響應內容做斷言、也包含對落DB的數據做斷言。…
閱讀更多...
什么是大模型微調?

什么是大模型微調?

在大模型&#xff08;如GPT、BERT、LLaMA等&#xff09;廣泛應用的今天&#xff0c;“微調”&#xff08;Fine-Tuning&#xff09;已成為釋放模型潛力的關鍵技術。它通過針對特定任務調整預訓練模型&#xff0c;使其從“通才”變為“專才”。本文將從概念、原理到實踐&#xff…
閱讀更多...
C# Channel

C# Channel

核心概念創建Channel無界通道有界通道FullMode選項 生產者-消費者模式生產者寫入數據消費者讀取數據 完整示例高級配置優化選項&#xff1a;取消操作&#xff1a;通過 CancellationToken 取消讀寫。 錯誤處理適用場景Channel的類型創建Channel寫入和讀取消息使用場景示例代碼注…
閱讀更多...
基于Spring Boot的牙科診所管理系統的設計與實現（LW+源碼+講解）

基于Spring Boot的牙科診所管理系統的設計與實現（LW+源碼+講解）

專注于大學生項目實戰開發,講解,畢業答疑輔導&#xff0c;歡迎高校老師/同行前輩交流合作?。 技術范圍&#xff1a;SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬蟲、數據可視化、安卓app、大數據、物聯網、機器學習等設計與開發。 主要內容&#xff1a;…
閱讀更多...
upload-labs-靶場（1-19關）通關攻略

upload-labs-靶場（1-19關）通關攻略

文件上傳漏洞是指由于程序員再開發時&#xff0c;未對用戶上傳的文件進行嚴格的驗證和過濾&#xff0c;而導致用戶可以上傳可執行的動態腳本文件 Pass-01&#xff08;前端驗證繞過&#xff09; 上傳111.php文件&#xff0c;發現彈窗顯示不允許&#xff0c;并給出白名單文件類…
閱讀更多...
使用 pytesseract 進行 OCR 識別：以固定區域經緯度提取為例

使用 pytesseract 進行 OCR 識別：以固定區域經緯度提取為例

引言 在智能交通、地圖定位等應用場景中&#xff0c;經常會遇到需要從圖像中提取經緯度信息的需求。本篇文章將介紹如何利用 Python 的 pytesseract 庫結合 PIL 對圖像進行預處理&#xff0c;通過固定區域裁剪&#xff0c;來有效地識別出圖像上顯示的經緯度信息。 1. OCR 與 …
閱讀更多...
docker安裝和卸載

docker安裝和卸載

服務器系統&#xff1a;Ubuntu Server 18.04.2 64bit 1 安裝docker&#xff1a; 1.1 在線安裝 1.# yum install docker 1.2 離線安裝 https://download.csdn.net/download/qq_27106141/90477700 1.# docker-18.03.1-ce.tgz 1.2.1 解壓 tar -xzvf docker-18.03.1-ce.tgz 1.2.2…
閱讀更多...
機器人交互系統 部署構建

機器人交互系統 部署構建

環境要求 Ubuntu 20.04 或更高版本ROS Noetic 或兼容版本Python 3.8 安裝步驟 1. 安裝ROS環境&#xff08;如未安裝&#xff09; sudo apt update sudo apt install ros-noetic-desktop-full source /opt/ros/noetic/setup.bash2. 創建工作空間并克隆代碼 mkdir -p ~/code…
閱讀更多...
【Go每日一練】構建一個簡單的用戶信息管理系統

【Go每日一練】構建一個簡單的用戶信息管理系統

&#x1f47b;創作者&#xff1a;丶重明 &#x1f47b;創作時間&#xff1a;2025年3月7日 &#x1f47b;擅長領域&#xff1a;運維 目錄 1.&#x1f636;?&#x1f32b;?題目&#xff1a;簡單的用戶信息管理系統2.&#x1f636;?&#x1f32b;?代碼開發3.&#x1f636;?&a…
閱讀更多...
全員DeepSeek時代，前端能做些什么？

全員DeepSeek時代，前端能做些什么？

全員DeepSeek時代&#xff0c;前端能做些什么&#xff1f; 前些天發現了一個巨牛的人工智能學習網站&#xff0c;通俗易懂&#xff0c;風趣幽默&#xff0c;可以分享一下給大家。點擊跳轉到網站。 https://www.captainbed.cn/ccc #mermaid-svg-VNyL95jkz9jEXgUq {font-family:&…
閱讀更多...
Machine Learning: 十大基本機器學習算法

Machine Learning: 十大基本機器學習算法

機器學習算法分類&#xff1a;監督學習、無監督學習、強化學習 基本的機器學習算法&#xff1a; 線性回歸、支持向量機(SVM)、最近鄰居(KNN)、邏輯回歸、決策樹、k平均、隨機森林、樸素貝葉斯、降維、梯度增強。 機器學習算法大致可以分為三類&#xff1a; 監督學習算法 (Sup…
閱讀更多...
【Linux docker 容器】關于想要讓虛擬機在開機時候也docker自己啟動，容器也自己啟動，省去要自己開docker和容器

【Linux docker 容器】關于想要讓虛擬機在開機時候也docker自己啟動，容器也自己啟動，省去要自己開docker和容器

確認 Docker 服務狀態&#xff1a; 首先&#xff0c;你需要確保 Docker 服務已經在虛擬機上安裝并正確配置。你可以使用如下命令來檢查 Docker 服務的狀態&#xff1a; systemctl status docker.service 如果服務沒有運行&#xff0c;你可以使用以下命令啟動它&#xff1a; s…
閱讀更多...
前端系統測試（單元、集成、數據|性能|回歸）

前端系統測試（單元、集成、數據|性能|回歸）

有關前端測試的面試題 系統測試 首先，功能測試部分。根據資料，單元測試是驗證最小可測試單元的正確性，比如函數或組件。都提到了單元測試的重要性，強調其在開發早期發現問題，并通過自動化提高效率。需要整合我搜索到的資料中的觀點，比如單元測試的方法（接口測試、路徑覆…
閱讀更多...
最新文章

Copyright @ 2022~2023