22、web前端開發之html5（三）

六. 離線存儲與緩存

在網絡環境不穩定或需要優化資源加載速度的場景下，離線存儲與緩存技術顯得尤為重要。HTML5引入了多種離線存儲和緩存機制，幫助開發者提升用戶體驗。本節將詳細介紹Application Cache、localStorage、sessionStorage以及IndexedDB等技術，幫助你理解如何在不同場景下選擇合適的存儲和緩存策略。

1、Application Cache

Application Cache（應用程序緩存）是HTML5引入的一項技術，允許開發者指定哪些資源需要緩存，以便在離線或網絡條件差的情況下，用戶仍能訪問和使用這些資源。

1.1. 工作原理
  • manifest文件：需要創建一個manifest文件，定義需要緩存的資源。
  • 緩存資源：瀏覽器會根據manifest文件下載并緩存指定的資源。
  • 離線訪問：當用戶離線時，瀏覽器會直接從緩存中加載這些資源，而不是嘗試從服務器下載。
1.2. manifest文件結構

一個典型的manifest文件由以下幾個部分組成：

CACHE MANIFEST  
# 版本號（可選）  
version 1.0  # CACHE: 需要緩存的資源  
CACHE:  
index.html  
styles.css  
scripts.js  
images/logo.png  # NETWORK: 需要從網絡加載的資源（可用通配符*表示所有資源）  
NETWORK:  
*  # FALLBACK: 網絡資源無法訪問時的回退資源  
FALLBACK:  
/images/offline.jpg
  • CACHE：明確列出需要緩存的資源文件。
  • NETWORK：指定哪些資源應該從網絡上加載（可以使用通配符*表示所有資源，除非在CACHE或FALLBACK中指定）。
  • FALLBACK：當網絡資源無法訪問時，提供替代的本地資源。
1.3. 使用Application Cache的步驟

  1. 創建manifest文件：
    在你的項目中創建一個cache.manifest文件，定義需要緩存的資源。

  2. 在HTML中引入manifest文件：
    在<html>標簽中添加manifest屬性，指向你的cache.manifest文件。

    <!DOCTYPE html>  
<html manifest="cache.manifest">

  3. 更新緩存：
    瀏覽器會在首次加載頁面時自動下載并緩存資源。對于已緩存的資源，瀏覽器會在頁面加載時優先使用緩存版本。

  4. 更新manifest文件：
    如果需要更新緩存內容，只需修改cache.manifest文件（例如增加一個版本號），然后重新加載頁面即可觸發緩存更新。

1.4. 離線檢測

Application Cache提供了事件來監控緩存的更新狀態。通過以下事件，可以實時了解緩存的更新進度和狀態：

// 監聽緩存的更新進度  
window.applicationCache.onprogress = function(e) {  console.log(`緩存進度：${e.loaded}/${e.total}`);  
};  // 監聽緩存下載完成  
window.applicationCache.ondownloading = function() {  console.log('緩存下載中...');  
};  // 監聽緩存更新完成  
window.applicationCache.onupdateready = function() {  window.applicationCache.swapCache();  console.log('緩存更新完成！');  
};  // 監聽緩存出錯  
window.applicationCache.onerror = function() {  console.error('緩存更新失敗！');  
};
1.5. 優點與局限
  • 優點：
    • 用戶可以在離線環境下訪問關鍵資源。
    • 提高了頁面加載速度，尤其是在網絡條件差的情況下。
  • 局限：
    • 如果manifest文件中的資源路徑發生變化，需要重新加載整個緩存。
    • 管理緩存的更新可能會比較麻煩，尤其是在大型應用中。
2、localStorage與sessionStorage

除了Application Cache，HTML5還引入了localStorage和sessionStorage，它們允許開發者在客戶端存儲非結構化的數據。

2.1. localStorage

localStorage是一種長期存儲機制，存儲的數據會在瀏覽器關閉后仍然保留，除非用戶主動清除。

  • 特點：

    • 數據持久保存，除非用戶手動清除。
    • 數據在同一網站的所有頁面中共享。
    • 大小限制通常為5MB左右。

  • 使用示例：

    // 存儲數據  
localStorage.setItem('username', 'alice');  // 讀取數據  
const username = localStorage.getItem('username');  
console.log(username); // 輸出：alice  // 刪除數據  
localStorage.removeItem('username');  // 清除所有數據  
localStorage.clear();
2.2. sessionStorage

sessionStorage與localStorage類似，但它的數據只會保留到當前會話結束（即瀏覽器關閉）。

  • 特點：

    • 數據只在當前會話中有效。
    • 數據在同一網站的所有頁面中共享。
    • 大小限制通常為5MB左右。

  • 使用示例：

    // 存儲數據  
sessionStorage.setItem('tempData', '12345');  // 讀取數據  
const tempData = sessionStorage.getItem('tempData');  
console.log(tempData); // 輸出：12345  // 刪除數據  
sessionStorage.removeItem('tempData');
2.3. 兩者的區別
特性localStoragesessionStorage
數據生命周期持久保存只在當前會話有效
作用域全局全局
容量限制通常為5MB通常為5MB
數據清除用戶手動清除瀏覽器關閉后自動清除
2.4. 使用場景
  • localStorage：
    • 用戶偏好設置（如主題顏色、字體大小）。
    • 長期有效的數據（如用戶憑證、游戲進度）。
  • sessionStorage：
    • 臨時數據（如購物車內容、表單填寫進度）。
    • 會話級別的信息（如用戶ID、臨時憑證）。
3、IndexedDB

IndexedDB是一種客戶端存儲技術，允許開發者在瀏覽器中存儲和管理結構化的數據（如文檔、元數據等）。它支持大容量數據存儲和事務操作，適合復雜的數據管理需求。

3.1. 核心概念
  • 數據庫：IndexedDB以數據庫為單位存儲數據，每個數據庫可以包含多個對象存儲空間。
  • 對象存儲空間：類似于表格，存儲一組結構類似的數據。
  • 索引：用于加速數據查詢，類似于數據庫中的索引。
  • 事務：支持事務操作，確保數據的完整性。
3.2. 使用步驟

  1. 創建或打開數據庫：

    const request = window.indexedDB.open('myDatabase', 1);

  2. 處理數據庫創建事件：

    request.onupgradeneeded = function(event) {  const db = event.target.result;  // 創建對象存儲空間  const objectStore = db.createObjectStore('users', { keyPath: 'id' });  // 創建索引  objectStore.createIndex('nameIndex', 'name', { unique: false });  
};

  3. 存儲數據：

    const transaction = db.transaction(['users'], 'readwrite');  
const objectStore = transaction.objectStore('users');  const request = objectStore.add({  id: 1,  name: 'alice',  email: 'alice@example.com'  
});  request.onsuccess = function() {  console.log('數據存儲成功！');  
};

  4. 讀取數據：

    const transaction = db.transaction(['users'], 'readonly');  
const objectStore = transaction.objectStore('users');  const request = objectStore.get(1);  
request.onsuccess = function() {  const user = request.result;  console.log(user); // 輸出：{ id: 1, name: 'alice', email: 'alice@example.com' }  
};

  5. 關閉數據庫：

    db.close();
4、Service Worker

Service Worker是一種腳本，運行在瀏覽器的后臺，允許開發者代理網絡請求、實現離線緩存，以及提高網頁性能。

4.1. 核心功能
  • 離線緩存：通過攔截網絡請求，實現資源的緩存和離線訪問。
  • 網絡代理：可以修改請求和響應，實現自定義的緩存策略。
  • 推送通知：支持推送通知，提升用戶體驗。
4.2. 使用示例

  1. 注冊Service Worker：

    if ('serviceWorker' in navigator) {  navigator.serviceWorker  .register('/sw.js')  .then(function(registration) {  console.log('Service Worker注冊成功！');  })  .catch(function(err) {  console.error('Service Worker注冊失敗：', err);  });  
}

  2. 實現緩存邏輯（在sw.js中）：

    const CACHE_NAME = 'my-cache-v1';  
const ASSETS = [  '/',  '/index.html',  '/styles.css',  '/scripts.js',  '/images/logo.png'  
];  self.addEventListener('install', function(event) {  event.waitUntil(  caches.open(CACHE_NAME)  .then(function(cache) {  return cache.addAll(ASSETS);  })  );  
});  self.addEventListener('fetch', function(event) {  event.respondWith(  caches.match(event.request)  .then(function(response) {  if (response) {  return response;  }  return fetch(event.request);  })  );  
});
5、緩存策略

在現代Web開發中，緩存策略扮演著至關重要的角色。它不僅可以顯著提升網頁的加載速度，還能優化用戶體驗，尤其是在網絡條件較差或需要離線訪問的場景下。然而，緩存策略的選擇和實施并非一刀切，每種技術都有其特定的應用場景和優缺點。通過合理的緩存策略，可以在性能、用戶體驗和開發效率之間取得平衡。本節將詳細介紹如何選擇合適的緩存技術、管理緩存的生命周期、避免緩存污染以及如何在開發與生產環境中分離緩存策略。

5.1 選擇合適的緩存技術

選擇合適的緩存技術是實現高效緩存策略的第一步。根據項目需求、數據規模和性能要求，我們可以選擇不同的緩存技術。以下是幾種常見的緩存技術及其適用場景：

1. Application Cache

Application Cache（應用程序緩存）是一種通過manifest文件管理資源緩存的技術，適用于需要離線訪問完整頁面的場景。它允許開發者指定哪些資源需要緩存，以便在離線或網絡條件差的情況下，用戶仍能訪問和使用這些資源。

適用場景：

  • 需要離線訪問的完整網頁。
  • 希望通過預加載資源提升首次加載速度的應用。
  • 在網絡不穩定的環境中，確保關鍵資源可用的場景。

示例：一個需要在離線環境中訪問的移動應用，可以通過Application Cache緩存所有必要的HTML、CSS、JavaScript和圖像文件。

2. localStorage與sessionStorage

localStorage和sessionStorage是HTML5引入的一種輕量級存儲技術，適用于小規模的數據存儲。它們允許開發者在客戶端存儲非結構化的數據，以提升數據的讀寫效率。

適用場景：

  • 存儲用戶偏好設置，如主題顏色、字體大小等。
  • 存儲臨時數據，如購物車內容、表單填寫進度等。
  • 存儲需要持久化的數據，如用戶憑證（Token）、游戲進度等。

優點：

  • 數據持久保存（localStorage）或僅在當前會話有效（sessionStorage）。
  • 便于通過JavaScript操作，API簡單易用。
  • 支持較大的存儲空間（通常為5MB左右）。

示例：在電商網站中，可以通過localStorage存儲用戶的購物車內容，確保即使在用戶關閉瀏覽器后，購物車數據仍然保留。

3. IndexedDB

IndexedDB是一種客戶端存儲技術，允許開發者在瀏覽器中存儲和管理結構化的數據。它支持大容量數據存儲和事務操作，適用于需要復雜數據管理的應用場景。

適用場景：

  • 需要存儲大量結構化數據的應用，如電子商務平臺的產品數據庫。
  • 需要高效查詢和管理數據的場景，如搜索引擎的本地緩存。
  • 需要在離線環境中訪問復雜數據的應用，如移動端的CRM系統。

優點：

  • 支持大容量數據存儲（通常為數百MB）。
  • 支持事務操作，確保數據的完整性。
  • 支持索引，提升數據查詢的效率。

示例：在一個在線音樂播放器中，可以通過IndexedDB存儲用戶的音樂庫，包括歌曲元數據、專輯封面等信息，以便在離線環境下訪問。

4. Service Worker

Service Worker是一種腳本，運行在瀏覽器的后臺，允許開發者代理網絡請求、實現離線緩存，以及提高網頁性能。Service Worker的功能遠超傳統的緩存技術，適用于需要復雜網絡請求代理和離線支持的應用。

適用場景：

  • 需要實現離線訪問的現代Web應用，如Progressive Web Apps（PWA）。
  • 需要代理和攔截網絡請求的場景，如自定義緩存策略、數據壓縮等。
  • 需要推送通知的應用，如新聞客戶端、社交媒體應用等。

優點：

  • 提供靈活的緩存控制，允許開發者自定義緩存邏輯。
  • 支持推送通知，提升用戶體驗。
  • 能夠代理和修改網絡請求，適用于需要自定義請求處理的場景。

示例：在一個新聞客戶端中，可以通過Service Worker緩存常訪問的文章和資源，實現離線閱讀功能，并在后臺推送最新新聞通知。

5.2 管理緩存的生命周期

緩存的有效性和性能在很大程度上依賴于緩存的生命周期管理。合理的緩存生命周期管理可以避免緩存過期、數據不一致等問題，確保應用始終擁有最新且有效的數據。

1. 為緩存設置合理的過期時間

每個緩存條目都應該有一個合理的過期時間，確保緩存不會永久有效。過期時間的長短取決于數據的更新頻率和業務需求。

示例：在電商網站中，用戶的購物車數據可以設置為30天過期，而商品價格信息可能需要更短的緩存時間（如15分鐘），以確保及時更新。

2. 提供清理緩存的接口

在數據更新時，需要及時清理相關的緩存條目，確保應用使用最新的數據。可以通過以下方式提供緩存清理接口：

  • 手動清理：在管理后臺提供清理緩存的按鈕，允許管理員手動清理特定或所有緩存。
  • 自動清理：在數據更新時，自動觸發緩存清理邏輯。
  • 版本控制：通過版本號或哈希值來管理緩存，確保更新時自動識別和清理舊緩存。

示例：在社交媒體平臺中，當用戶更新個人資料時，后臺系統自動清理與該用戶相關的緩存，確保前端獲取最新的用戶信息。

3. 監控緩存的使用情況

通過監控工具監控緩存的使用情況，了解緩存的命中率、存儲空間的使用情況等指標，及時優化緩存策略。

示例：使用Google Analytics或類似的監控工具，跟蹤用戶訪問的資源，分析緩存命中率，以優化緩存策略，確保高頻訪問的資源得到充分緩存。

5.3 避免緩存污染

緩存污染是指不同資源被錯誤地緩存或讀取，導致數據不一致或錯誤。為了避免緩存污染，需要采取以下措施：

1. 確保不同的資源有不同的緩存版本

每個資源都應該有唯一的標識符，如URL、版本號或哈希值，確保不同的資源不會被錯誤地緩存或讀取。

示例：在網頁中，JavaScript文件和CSS文件可以通過添加版本號或哈希值作為查詢參數，確保每次更新時，瀏覽器下載最新的文件。

<script src="script.js?v=1.0.0"></script>  
<link rel="stylesheet" href="style.css?v=1.0.0">

九. Web Workers（多線程）

1. 背景
  • 單線程限制：JavaScript在主線程執行，繁重任務會阻塞UI。
  • Web Workers：在后臺運行JavaScript，避免阻塞。
2. 使用方法
  1. 創建Worker：new Worker('worker.js')
  2. 通信：通過postMessage發送消息。
  3. 處理消息：onmessage事件監聽。
3. 示例
<!-- 主線程 -->  
<script>  
const worker = new Worker('worker.js');  
worker.onmessage = function(event) {  console.log('收到從Worker的消息:', event.data);  
};  
worker.postMessage('開始計算');  
</script>  <!-- worker.js -->  
self.onmessage = function(event) {  const result = performExpensiveTask(event.data);  self.postMessage(result);  
};

十、表單增強

隨著Web開發的不斷進步，HTML5引入了許多新的表單輸入類型和驗證功能，大大增強了表單的功能性和用戶體驗。通過這些增強功能，開發者可以創建更加智能、用戶友好的表單，減少前端驗證的需求，同時提高數據的準確性。以下是詳細的講解。

1、新增輸入類型

HTML5新增了多種輸入類型，使得表單字段能夠更精確地匹配用戶輸入的數據類型，從而提高表單的整體體驗和數據的準確性。

1.1 Email 輸入類型

  • 類型：email

  • 功能：用于輸入電子郵件地址。

  • 優勢：

    • 自動驗證郵箱格式。
    • 在支持的設備上會顯示郵箱鍵盤（如移動設備）。

  • 示例：

    <input type="email" name="email" required placeholder="輸入郵箱">

1.2 URL 輸入類型

  • 類型：url

  • 功能：用于輸入網頁地址。

  • 優勢：

    • 自動驗證URL格式。
    • 在支持的設備上會顯示URL鍵盤。

  • 示例：

    <input type="url" name="website" placeholder="輸入網站地址">

1.3 電話號碼輸入類型

  • 類型：tel

  • 功能：用于輸入電話號碼。

  • 優勢：

    • 在移動設備上會自動顯示電話鍵盤。
    • 可以配合pattern屬性進行自定義驗證。

  • 示例：

    <input type="tel" name="phone" pattern="[0-9]{11}" placeholder="輸入電話號碼">

1.4 數字輸入類型

  • 類型：number

  • 功能：用于輸入數字。

  • 優勢：

    • 只允許輸入數字。
    • 可以通過min和max屬性限制輸入范圍。

  • 示例：

    <input type="number" name="age" min="18" max="100" placeholder="輸入年齡">

1.5 滑塊輸入類型

  • 類型：range

  • 功能：用于輸入一個范圍內的值。

  • 優勢：

    • 提供滑塊選擇，用戶友好。
    • 可以通過min、max和step屬性控制范圍和步長。

  • 示例：

    <input type="range" name="rating" min="1" max="10" step="1">

1.6 日期和時間輸入類型

  • 類型：date、datetime、month、time、week

  • 功能：

    • date：選擇日期（年、月、日）。
    • datetime：選擇日期和時間。
    • month：選擇月份和年份。
    • time：選擇時間（小時、分鐘）。
    • week：選擇周和年份。

  • 優勢：

    • 提供標準的日期時間選擇界面。
    • 自動驗證格式。

  • 示例：

    <input type="date" name="birthday" required>  
<input type="time" name="appointment_time">
2、表單驗證

表單驗證是確保用戶輸入數據符合預期格式和要求的關鍵步驟。HTML5提供了內置的驗證功能，減少了對JavaScript的依賴。

2.1 必填字段（required）

  • 屬性：required

  • 功能：指定該字段必須填寫，否則無法提交表單。

  • 示例：

    <input type="email" name="email" required>
2.2 正則表達式驗證（pattern）

  • 屬性：pattern

  • 功能：通過正則表達式驗證輸入內容。

  • 示例：

    <input type="tel" name="phone" pattern="[0-9]{11}" placeholder="輸入11位電話號碼">
2.3 輸入長度限制（maxlength 和 minlength）

  • 屬性：

    • maxlength：指定輸入的最大字符數。
    • minlength：指定輸入的最小字符數。

  • 示例：

    <input type="text" name="username" maxlength="20" minlength="4" placeholder="輸入4-20個字符">
2.4 占位符提示（placeholder）

  • 屬性：placeholder

  • 功能：在輸入字段為空時顯示提示文本。

  • 示例：

    <input type="email" name="email" placeholder="例如：user@example.com">
3、綜合示例

以下是一個綜合了多種輸入類型和驗證功能的表單示例：

<form>  <div>  <label for="username">用戶名：</label>  <input type="text" id="username" name="username"   maxlength="20" minlength="4" required placeholder="輸入4-20個字符">  </div>  <div>  <label for="email">郵箱：</label>  <input type="email" id="email" name="email" required placeholder="輸入郵箱地址">  </div>  <div>  <label for="phone">電話：</label>  <input type="tel" id="phone" name="phone" pattern="[0-9]{11}" placeholder="輸入11位電話號碼">  </div>  <div>  <label for="age">年齡：</label>  <input type="number" id="age" name="age" min="18" max="100" placeholder="輸入年齡">  </div>  <div>  <label for="rating">評分：</label>  <input type="range" id="rating" name="rating" min="1" max="10" step="1">  </div>  <div>  <label for="birthday">生日：</label>  <input type="date" id="birthday" name="birthday" required>  </div>  <button type="submit">提交</button>  
</form>
4、最佳實踐
  1. 結合輸入類型和驗證：根據需要選擇合適的輸入類型，并配合required、pattern等屬性進行驗證。
  2. 提供反饋：使用瀏覽器的內置驗證功能，同時可以通過JavaScript提供更詳細的錯誤反饋。
  3. 響應式設計：確保表單在不同設備上的顯示效果一致。
  4. 測試：在不同瀏覽器和設備上測試表單的兼容性和驗證效果。

十一. 響應式設計

1. viewport元標簽
<meta name="viewport" content="width=device-width, initial-scale=1.0">

2. 媒體查詢

@media (max-width: 600px) {  body {  font-size: 14px;  }  
}
3. 彈性盒布局（Flexbox）
.container {  display: flex;  flex-wrap: wrap;  justify-content: space-between;  
}  
.item {  flex: 1;  width: 300px;  
}

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/bicheng/74773.shtml
繁體地址，請注明出處：http://hk.pswp.cn/bicheng/74773.shtml
英文地址，請注明出處：http://en.pswp.cn/bicheng/74773.shtml

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

相關文章

用HTML和CSS生成炫光動畫卡片

用HTML和CSS生成炫光動畫卡片

這個效果結合了漸變、旋轉和懸浮效果的炫酷動畫示例&#xff0c;使用HTML和CSS實現。 一、效果 二、實現 代碼如下&#xff1a; <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport&quo…
閱讀更多...
【嵌入式學習2】數組

【嵌入式學習2】數組

目錄 ## 數組概念 ## 數組使用 ## 數組初始化 ## 數組名 ## 數組長度 ## 數組相關題目 1、找最大值 2、逆置 ## 數組和指針 指針加整數的含義 ## 指針數組 ## 數組名做函數參數 ## 函數參數傳遞數組 1、在函數內部 2. 在函數外部 ## 多維數組 使用下標訪問 #…
閱讀更多...
C++中的判斷與循環

C++中的判斷與循環

一.if判斷語句 1.程序中的判斷&#xff1a; if (要執行的判斷&#xff0c;最后的返回值要是bool型的數據) {如果為真&#xff0c;要執行的代碼段; } #include"iostream" using namespace std;int main() {int ans;cin >> ans;if (ans > 1000) {cout <…
閱讀更多...
前端開發中生成網站的favicon.ico文件的軟件推薦及使用方法

前端開發中生成網站的favicon.ico文件的軟件推薦及使用方法

日常網站開發中&#xff0c;我們經常需要生成網站的favicon.ico文件&#xff0c;今天我在這里來推薦幾個編輯.ico(也可將圖片格式轉化為.ico)圖片&#xff0c;而且免費的那軟件&#xff1a; GIMP&#xff1a;一個功能強大的開源圖像編輯軟件&#xff0c;支持多種文件格式&#…
閱讀更多...
淺談WebSocket-FLV

淺談WebSocket-FLV

FLV是一種視頻數據封裝格式&#xff0c;這種封裝被標準通信協議HTTP-FLV和RTMP協議應用。 而WebSocket-FLV是一種非標的FLV封裝數據從后端發送到前端的一種方式。 在WebSocket的url請求中&#xff0c;包含了需要請求設備的視頻相關信息&#xff0c;在視頻數據到達時&#xff0c…
閱讀更多...
基于ADMM無窮范數檢測算法的MIMO通信系統信號檢測MATLAB仿真,對比ML,MMSE,ZF以及LAMA

基于ADMM無窮范數檢測算法的MIMO通信系統信號檢測MATLAB仿真,對比ML,MMSE,ZF以及LAMA

目錄 1.算法運行效果圖預覽 2.算法運行軟件版本 3.部分核心程序 4.算法理論概述 4.1 ADMM算法 4.2 最大似然ML檢測算法 4.3 最小均方誤差&#xff08;MMSE&#xff09;檢測算法 4.4 迫零&#xff08;ZF&#xff09;檢測算法 4.5 OCD_MMSE 檢測算法 4.6 LAMA檢測算法 …
閱讀更多...
cocos creator 筆記-路邊花草

cocos creator 筆記-路邊花草

版本&#xff1a;3.8.5 實現目標&#xff1a;給3d道路生成路邊景觀花草 在場景下創建一個節點&#xff0c;我這里種植兩種花草模型&#xff0c;蘭花和菊花&#xff0c;所以分別在節點下另創建兩個節點&#xff0c;為了靜態合批。 1.將花草模型分別拖入場景中&#xff0c;制作…
閱讀更多...
R語言——循環

R語言——循環

參考資料&#xff1a;學習R 在R中有三種循環&#xff1a;repeat、while和for。雖然向量化意味著我們可能并不需要大量使用它們&#xff0c;但在需要重復執行代碼時&#xff0c;它們是非常有用的。 1、重復循環 R中最容易掌握的循環是repeat。它所做的事情就是反復地執行代碼&a…
閱讀更多...
springboot使用阿里限流框架-sentinel

springboot使用阿里限流框架-sentinel

當前項目源碼 控制臺下載 啟動bin中的看板服務&#xff1a;賬號密碼:sentinel/sentinel 官方文檔地址 項目引入依賴 <!-- sentinel注解支持 --> <dependency><groupId>com.alibaba.csp</groupId><artifactId>sentinel-annotation-aspectj<…
閱讀更多...
CSS3學習教程，從入門到精通，CSS3 元素的浮動與定位語法知識點及案例代碼（17）

CSS3學習教程，從入門到精通，CSS3 元素的浮動與定位語法知識點及案例代碼（17）

CSS3 元素的浮動與定位語法知識點及案例代碼 一、CSS3 浮動&#xff08;float&#xff09; 知識點 1. **定義** &#xff1a;浮動使元素向左或向右移動&#xff0c;直到它的外邊緣碰到包含框或另一個浮動元素的邊框為止。浮動主要用于布局&#xff0c;如實現圖文繞排等效果。…
閱讀更多...
數據結構：漢諾塔問題的遞歸求解和分析

數據結構：漢諾塔問題的遞歸求解和分析

遞歸方法求解該類問題&#xff0c;是一種簡單的思維方法&#xff0c;通常比使用迭代方法更簡單。但是&#xff0c;遞歸方法也有劣勢。此處以典型的漢諾塔問題&#xff08;Tower of Hanoi&#xff09;為例給予說明。 漢諾塔是根據一個傳說形成的數學問題&#xff0c;最早是由法國…
閱讀更多...
3.27學習總結 算法題

3.27學習總結 算法題

自己用c語言做的&#xff0c;不盡如意 后面看了題解&#xff0c;用的是c&#xff0c;其中string 變量和字符串拼接感覺比c方便好多&#xff0c;可以用更少的代碼實現更好的效果&#xff0c;打算之后去學習c&#xff0c;用c寫算法。 遞歸&#xff0c;不斷輸入字符&#xff0c;…
閱讀更多...
vue 圖片放大到全局

vue 圖片放大到全局

背景&#xff1a; 在vue項目中&#xff0c;el-image組件圖片組件用于展示圖片&#xff0c;組件自帶的屬性preview-teleported&#xff0c;設置為true可以控制圖片放大到全局 實現效果&#xff1a; 核心代碼&#xff1a; //圖片地址&#xff1a;BASEUrl /file/ item.file //這…
閱讀更多...
【商城實戰(75)】數據分析指標體系搭建：從0到1的技術指南

【商城實戰(75)】數據分析指標體系搭建：從0到1的技術指南

【商城實戰】專欄重磅來襲&#xff01;這是一份專為開發者與電商從業者打造的超詳細指南。從項目基礎搭建&#xff0c;運用 uniapp、Element Plus、SpringBoot 搭建商城框架&#xff0c;到用戶、商品、訂單等核心模塊開發&#xff0c;再到性能優化、安全加固、多端適配&#xf…
閱讀更多...
seatunnel配置mysql2hive

seatunnel配置mysql2hive

SeaTunnel安裝教程 # 執行流程 # 下載&#xff0c;解壓 # https://mirrors.aliyun.com/apache/seatunnel/2.3.8/?spma2c6h.25603864.0.0.2e2d3f665eBj1E # https://blog.csdn.net/taogumo/article/details/143608532 tar -zxvf apache-seatunnel-2.3.8-bin.tar.gz -C /opt/mo…
閱讀更多...
SSH項目負載均衡中的Session一致性解決方案?

SSH項目負載均衡中的Session一致性解決方案?

SSH項目負載均衡中的Session一致性解決方案? 1. 粘性會話&#xff08;Session Sticky&#xff09;?2. Session復制&#xff08;集群同步&#xff09;?3. 集中式Session存儲?4. 客戶端存儲&#xff08;Cookie加密&#xff09;?方案選型建議?注意事項? 1. 粘性會話&#x…
閱讀更多...
MySQL 表連接（內連接與外連接）

MySQL 表連接（內連接與外連接）

&#x1f3dd;?專欄&#xff1a;Mysql_貓咪-9527的博客-CSDN博客 &#x1f305;主頁&#xff1a;貓咪-9527-CSDN博客 “欲窮千里目&#xff0c;更上一層樓。會當凌絕頂&#xff0c;一覽眾山小。” 目錄 1、表連接的核心概念 1.1 為什么需要表連接&#xff1f; 2、內連接&a…
閱讀更多...
解鎖Spring Boot異步編程：讓你的應用“飛“起來！

解鎖Spring Boot異步編程：讓你的應用“飛“起來！

引言&#xff1a;從點餐說起 &#x1f354; 想象你在快餐店點餐&#xff1a; 同步模式&#xff1a;排隊等餐&#xff0c;隊伍越來越長&#xff08;就像卡死的服務器&#xff09;異步模式&#xff1a;拿號后去旁邊坐著等&#xff08;服務員喊號通知你&#xff09; 今天我們就…
閱讀更多...
做一個有天有地的css及html畫的旋轉陰陽魚

做一個有天有地的css及html畫的旋轉陰陽魚

<!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>天地陰陽</title><style>/* 重置默認樣…
閱讀更多...
ngx_http_core_main_conf_t

ngx_http_core_main_conf_t

定義在 src\http\ngx_http_core_module.h typedef struct {ngx_array_t servers; /* ngx_http_core_srv_conf_t */ngx_http_phase_engine_t phase_engine;ngx_hash_t headers_in_hash;ngx_hash_t variables_hash;…
閱讀更多...
最新文章

Copyright @ 2022~2023