【前端隱蔽 Bug 深度剖析：SVG 組件復用中的 ID 沖突陷阱】

前端隱蔽 Bug 深度剖析：SVG 組件復用中的 ID 沖突陷阱

創建時間: 2025/6/20
類型: 🔍 Bug 深度分析
難度: ????? 高級
關鍵詞: SVG、ID 沖突、Vue 組件、隱蔽 Bug、技術分析

📖 引言

在前端開發的世界里，有一類 Bug 特別令人頭疼：它們不會拋出錯誤，不會在控制臺留下痕跡，但會在特定條件下導致詭異的視覺異常。今天要分享的就是這樣一個經典案例——SVG 組件復用中的 ID 沖突問題。

這個問題的發現源于一次代碼審查。在審查一個數據可視化項目時，測試工程師報告了一個奇怪的現象：同一個無數據提示組件，在不同頁面區域的顯示效果竟然不一致，而且這種不一致性還會隨著頁面狀態的變化而動態改變。

更讓人困惑的是，這個問題具有極強的"傳染性"——一個組件的顯示狀態會神秘地影響到另一個看似完全獨立的組件。這種現象完全違背了組件化開發的基本原則，引發了我們對問題根因的深度探索。

🎯 問題現象：詭異的組件相互影響

測試環境發現

在項目的集成測試階段，QA 工程師在測試數據可視化大屏時發現了一個令人困惑的現象：

測試場景：一個包含多個圖表區域的儀表板頁面，每個圖表區域在無數據時會顯示統一的 NoData 組件。

異常表現：

  • 當頁面左側圖表區域顯示 NoData 組件時，右側圖表區域的 NoData 組件顯示完整
  • 當左側圖表加載出數據（NoData 消失）后，右側的 NoData 組件顯示變得不完整
  • 這種現象在不同的圖表組合中重復出現

現象分析

讓我們把這個詭異的現象進行詳細分解：

條件 A：當頁面中第一個 NoData 組件顯示時

  • 所有其他 NoData 組件顯示正常
  • SVG 圖標的漸變、陰影、濾鏡效果都完整呈現

條件 B：當第一個 NoData 組件消失后

  • 剩余的 NoData 組件顯示異常
  • SVG 圖標失去漸變效果，陰影消失，顏色變淡

條件 C：動態切換過程中

  • 組件的顯示效果會實時發生變化
  • 后渲染的組件總是依賴于先渲染組件的"存在狀態"

問題的特殊性

這個問題有幾個讓人頭疼的特征：

  1. 無錯誤信息：瀏覽器控制臺完全沒有任何報錯或警告
  2. 狀態依賴性：問題的出現依賴于其他組件的渲染狀態
  3. 視覺異常：問題表現為純視覺效果的差異，不影響功能
  4. 違反直覺：打破了組件獨立性的基本認知

🤔 錯誤的分析思路：經驗主義的陷阱

第一次分析：CSS 樣式問題假設

錯誤假設：認為是 CSS 樣式的級聯效應或全局樣式污染導致的問題

分析思路：

  • 檢查是否存在全局 CSS 規則沖突
  • 懷疑是組件樣式的 scoped 隔離失效
  • 認為可能是 z-index 或布局重排導致的視覺差異

嘗試的解決方案：

<!-- 錯誤的解決思路 -->
<div class="no-data-container"><div class="no-data-wrapper" style="position: relative; z-index: 999;"><NoData /></div>
</div>

為什么錯誤：

  • 把表面現象當成了根本原因
  • 沒有深入分析技術實現細節
  • 基于經驗做出了錯誤的技術判斷

第二次分析：組件生命周期問題假設

錯誤假設：認為是 Vue 組件的生命周期或響應式系統導致的渲染時序問題

分析思路：

  • 懷疑是組件掛載順序的影響
  • 認為可能是 nextTick 時機的問題
  • 以為是響應式數據更新導致的重渲染異常

嘗試的解決方案：

// 錯誤的解決思路
nextTick(() => {// 強制重新渲染this.$forceUpdate();
});

為什么錯誤：

  • 仍然停留在框架層面的思考
  • 沒有深入到 HTML/SVG 規范層面
  • 忽略了問題的跨組件影響特征

錯誤分析的共同特點

  1. 表面化思維：只關注現象，不深入本質
  2. 經驗主義：過度依賴以往的問題解決經驗
  3. 框架局限：思維被限制在特定技術棧內
  4. 忽略線索：沒有重視問題的關鍵特征

💡 突破性的思維轉折：深入技術本質

關鍵線索的發現

在經歷了多次錯誤分析后，一個偶然的發現改變了整個分析方向：

發現過程：在使用瀏覽器開發者工具檢查 DOM 結構時，注意到多個 NoData 組件的 SVG 內容中存在大量相同的 ID 屬性。

關鍵觀察：

<!-- 第一個組件 -->
<svg><defs><linearGradient id="paint0_linear_903_51509">...</linearGradient><filter id="filter0_i_903_51509">...</filter></defs>
</svg><!-- 第二個組件 -->
<svg><defs><linearGradient id="paint0_linear_903_51509">...</linearGradient><filter id="filter0_i_903_51509">...</filter></defs>
</svg>

思維模式的轉變

從這個發現開始，分析思路發生了本質性的轉變：

之前的思路：現象 → 框架經驗 → 表面解決方案

轉變后的思路：現象 → 技術規范 → 根本原因 → 針對性解決

這種轉變的關鍵在于：從依賴經驗轉向依據標準，從關注表象轉向探索本質。

🔍 深入源碼：發現真相

NoData 組件的實現分析

<!-- NoData.vue -->
<template><div class="no-data-wrap"><div class="content"><div class="no-data-icon" v-html="noDataSvg"></div><span class="desc">暫無數據</span></div></div>
</template><script setup>
import { ref } from 'vue';
import noDataSvgRaw from './assets/no-data.svg?raw';const noDataSvg = ref(noDataSvgRaw);
</script>

關鍵技術實現分析

  1. SVG 內容獲取：使用 ?raw 后綴直接獲取 SVG 文件的字符串內容
  2. DOM 插入方式：使用 v-html 將 SVG 字符串直接插入到 DOM 中
  3. 多實例場景：頁面中可能同時存在多個 NoData 組件實例

SVG 文件內容深度分析

<svg width="162" height="215" viewBox="0 0 162 215" fill="none"><defs><!-- 25 個漸變定義，每個都有固定的 ID --><linearGradient id="paint0_linear_903_51509">...</linearGradient><linearGradient id="paint1_linear_903_51509">...</linearGradient><!-- ... 更多漸變定義 --><!-- 濾鏡定義 --><filter id="filter0_i_903_51509">...</filter></defs><!-- 使用定義的 ID 進行引用 --><rect fill="url(#paint0_linear_903_51509)" filter="url(#filter0_i_903_51509)"/><path fill="url(#paint1_linear_903_51509)"/><!-- 更多使用這些 ID 的圖形元素 -->
</svg>

關鍵發現：

  • SVG 文件包含 25+ 個具有固定 ID 的定義元素
  • 每個圖形元素都通過 url(#id) 語法引用這些定義
  • 當多個組件同時存在時，會產生重復的 ID

🎯 問題根因：HTML ID 唯一性原則的違反

技術原理深度解析

HTML 標準規定：在同一個 HTML 文檔中，每個 id 屬性的值必須是全局唯一的。

W3C 規范原文：

“The id attribute specifies a unique id for an HTML element (the value must be unique within the HTML document).”

問題的執行機制

1. 頁面初始化├── 第一個 NoData 組件渲染├── SVG 內容通過 v-html 插入 DOM├── ID "paint0_linear_903_51509" 被瀏覽器注冊 ?├── 漸變定義生效└── 組件顯示正常 ?2. 第二個 NoData 組件渲染├── 相同的 SVG 內容插入 DOM├── 嘗試注冊相同的 ID "paint0_linear_903_51509"├── 瀏覽器檢測到重復 ID，忽略后續定義 ?├── 但圖形元素仍然嘗試引用 url(#paint0_linear_903_51509)├── 引用指向第一個定義，可能顯示正常 ??└── 實際上已經違反了 HTML 規范 ?3. 第一個組件消失（關鍵時刻）├── 包含原始 ID 定義的 DOM 節點被移除├── ID "paint0_linear_903_51509" 在文檔中不再存在 ?├── 第二個組件中的 url(#paint0_linear_903_51509) 引用失效├── 漸變效果消失，濾鏡失效└── 組件顯示異常 ?

瀏覽器行為分析

不同瀏覽器對重復 ID 的處理略有差異：

Chrome/Edge 行為：

  • document.getElementById() 總是返回第一個匹配的元素
  • CSS 選擇器 #id 只會選中第一個元素
  • SVG 引用 url(#id) 指向第一個定義

Firefox 行為：

  • 基本與 Chrome 一致
  • 在開發者工具中會顯示重復 ID 的警告

Safari 行為：

  • 行為基本一致
  • 對 SVG 引用的處理可能略有差異

問題驗證實驗

// 驗證重復 ID 的行為
console.log('所有具有相同 ID 的元素：');
console.log(document.querySelectorAll('[id="paint0_linear_903_51509"]'));console.log('getElementById 返回的元素：');
console.log(document.getElementById('paint0_linear_903_51509'));// 結果：querySelectorAll 可能返回多個元素，但 getElementById 只返回第一個

🛠? 解決方案：唯一 ID 生成策略

核心解決思路

為每個 NoData 組件實例生成唯一的 ID 前綴，確保 SVG 內部所有 ID 的全局唯一性。

技術實現方案

<template><div class="no-data-wrap"><div class="content"><div class="no-data-icon" v-html="uniqueNoDataSvg"></div><span class="desc">暫無數據</span></div></div>
</template><script setup>
import { ref, computed } from 'vue';
import noDataSvgRaw from './assets/no-data.svg?raw';// 生成唯一 ID 的函數
const generateUniqueId = () => {return `nodata_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
};// 為當前組件實例生成唯一 ID 前綴
const instanceId = ref(generateUniqueId());// 計算屬性：處理 SVG 內容，替換所有 ID 為唯一 ID
const uniqueNoDataSvg = computed(() => {let svgContent = noDataSvgRaw;// 提取所有的 ID 定義const idMatches = svgContent.match(/id="([^"]+)"/g);if (idMatches) {idMatches.forEach((match) => {const originalId = match.match(/id="([^"]+)"/)[1];const newId = `${instanceId.value}_${originalId}`;// 替換 ID 定義svgContent = svgContent.replace(new RegExp(`id="${originalId}"`, 'g'), `id="${newId}"`);// 替換所有 url() 引用svgContent = svgContent.replace(new RegExp(`url\\(#${originalId}\\)`, 'g'), `url(#${newId})`);// 替換 xlink:href 引用（如果存在）svgContent = svgContent.replace(new RegExp(`xlink:href="#${originalId}"`, 'g'),`xlink:href="#${newId}"`);});}return svgContent;
});
</script>

解決效果對比

修復前的 SVG：

<!-- 多個實例使用相同的 ID -->
<linearGradient id="paint0_linear_903_51509">
<filter id="filter0_i_903_51509">
<rect fill="url(#paint0_linear_903_51509)" filter="url(#filter0_i_903_51509)"/>

修復后的 SVG：

<!-- 每個實例使用唯一的 ID -->
<linearGradient id="nodata_1750403628466_k8w2qm9xz_paint0_linear_903_51509">
<filter id="nodata_1750403628466_k8w2qm9xz_filter0_i_903_51509">
<rect fill="url(#nodata_1750403628466_k8w2qm9xz_paint0_linear_903_51509)"filter="url(#nodata_1750403628466_k8w2qm9xz_filter0_i_903_51509)"/>

🌟 技術啟示與深度思考

1. 隱蔽 Bug 的識別模式

這類問題有一些共同特征，可以幫助我們快速識別：

表現特征：

  • 無控制臺錯誤，但有視覺異常
  • 問題的出現依賴于特定的組件組合或狀態
  • 組件間存在看似不合理的相互影響
  • 問題在不同環境或瀏覽器中表現可能不同

識別方法：

  • 關注 DOM 結構中的重復元素或屬性
  • 檢查全局唯一性約束的違反
  • 分析組件間的隱式依賴關系

2. 技術規范的重要性

這個案例深刻說明了遵循技術規范的重要性：

HTML 規范的約束：

  • ID 的全局唯一性不僅是建議，更是強制要求
  • 違反規范可能不會立即報錯，但會導致不可預期的行為
  • 現代前端框架無法完全屏蔽底層規范的約束

開發實踐啟示：

  • 在使用任何技術時，都要深入理解其底層規范
  • 不能僅僅依賴框架的抽象，要了解實際的實現機制
  • 組件化開發不等于可以忽略 HTML/CSS 的基本規則

3. 問題分析方法論

正確的技術問題分析流程
  1. 現象記錄：詳細記錄問題的表現和觸發條件
  2. 線索收集：收集所有可能相關的技術信息
  3. 規范查證：查閱相關的技術標準和規范文檔
  4. 原理分析：基于技術原理進行邏輯推理
  5. 假設驗證：通過實驗驗證分析結果
  6. 方案設計：針對根本原因設計解決方案
  7. 效果確認：驗證解決方案的有效性
避免的錯誤模式
  • 經驗主義陷阱：過度依賴以往經驗，忽略新問題的特殊性
  • 框架思維局限：只在特定技術棧內思考，不考慮底層原理
  • 表面化處理：只解決現象，不深入根本原因
  • 孤立化分析：忽略系統性和關聯性

4. 代碼質量保證

預防性措施

代碼審查重點：

// 審查清單
const codeReviewChecklist = {HTML_ID_唯一性: '檢查是否存在重復的 ID',SVG_使用方式: '確認 SVG 的引入和使用方式',組件復用場景: '分析組件在多實例場景下的行為',全局狀態影響: '評估組件間的潛在相互影響'
};

自動化檢測：

// 開發環境中的 ID 重復檢測
const detectDuplicateIds = () => {const ids = {};const duplicates = [];document.querySelectorAll('[id]').forEach((element) => {const id = element.id;if (ids[id]) {duplicates.push(id);} else {ids[id] = true;}});if (duplicates.length > 0) {console.error('檢測到重復的 ID:', duplicates);// 可以集成到 CI/CD 流程中}return duplicates;
};// 在開發環境中定期檢測
if (process.env.NODE_ENV === 'development') {setInterval(detectDuplicateIds, 5000);
}

🔬 深度思考：為什么這個問題如此有價值？

1. 技術復合性

這個問題涉及多個技術層面的知識：

HTML 層面：

  • DOM 結構和 ID 唯一性約束
  • 元素查找和引用機制

SVG 層面：

  • SVG 的定義和引用機制
  • 漸變、濾鏡等高級特性的工作原理

Vue 層面：

  • 組件生命周期和渲染機制
  • v-html 指令的工作原理

瀏覽器層面：

  • 不同瀏覽器對規范的實現差異
  • 渲染引擎的優化策略

2. 調試技巧展示

這個案例展示了多種高級調試技巧：

靜態分析：

  • 代碼結構分析
  • 依賴關系梳理
  • 規范文檔查閱

動態調試：

  • DOM 結構實時檢查
  • 瀏覽器行為實驗
  • 性能和渲染分析

系統性思維：

  • 跨組件影響分析
  • 全局狀態考慮
  • 邊界條件測試

3. 解決方案設計哲學

這個解決方案體現了優秀設計的幾個特征：

根本性：解決問題的根本原因，而不是表面現象 通用性：可以應用到所有類似的場景 優雅性：代碼實現簡潔，邏輯清晰 可維護性：易于理解和修改

📚 擴展學習與應用

相關技術深度學習

  1. HTML 規范深入

    • W3C HTML 標準文檔
    • DOM 操作最佳實踐
    • 瀏覽器兼容性處理

  2. SVG 技術進階

    • SVG 優化技巧
    • 復雜圖形的實現方法
    • SVG 動畫和交互

  3. Vue 組件設計

    • 組件復用策略
    • 狀態管理最佳實踐
    • 性能優化技巧

類似問題的識別和預防

CSS 類名沖突：

/* 可能的問題 */
.button {color: red;
}
.button {color: blue;
} /* 后者覆蓋前者 *//* 解決方案 */
.component-a__button {color: red;
}
.component-b__button {color: blue;
}

事件監聽器沖突：

// 可能的問題
document.addEventListener('click', handler1);
document.addEventListener('click', handler2); // 兩個處理器都會執行// 解決方案
const createNamespacedHandler = (namespace) => {return (event) => {if (event.target.dataset.namespace === namespace) {// 處理邏輯}};
};

全局變量沖突：

// 可能的問題
window.config = { theme: 'dark' };
window.config = { language: 'en' }; // 覆蓋了前面的配置// 解決方案
window.APP = window.APP || {};
window.APP.moduleA = { theme: 'dark' };
window.APP.moduleB = { language: 'en' };

🏆 總結與反思

關鍵收獲

  1. 技術深度的重要性：表面的問題往往有更深層的技術根因
  2. 規范遵循的必要性：違反基礎規范會導致不可預期的問題
  3. 系統性思維的價值：組件化不等于組件間完全獨立
  4. 調試方法論的建立：正確的分析方法比快速的解決方案更重要

技術價值

  • 問題診斷能力：提升了復雜前端問題的診斷和分析能力
  • 技術深度理解：加深了對 HTML、SVG、Vue 等技術的理解
  • 解決方案設計：學會了如何設計根本性的解決方案
  • 預防機制建立：建立了相關問題的識別和預防機制

方法論啟示

深入理解技術本質，建立系統性思維，遵循技術規范，才能寫出真正健壯的代碼。

這個案例提醒我們：

  • 不要被框架的抽象所迷惑：始終要理解底層的工作原理
  • 重視看似簡單的基礎知識：HTML、CSS 的基礎規則在復雜應用中仍然重要
  • 建立全局視角：組件化開發中仍需考慮全局的一致性和規范性
  • 培養系統性思維：問題往往不是孤立的，要考慮系統間的相互影響

持續改進

這個案例的價值不僅在于解決了一個具體問題，更在于：

  1. 建立了問題分析的標準流程
  2. 形成了可復用的技術解決方案
  3. 提供了團隊知識分享的素材
  4. 創建了預防類似問題的檢查清單

通過這樣的深度技術分析，我們不僅解決了當前的問題，更重要的是提升了整個團隊的技術水平和問題解決能力。

文章價值: 這篇文章通過一個真實的技術問題，展示了從現象分析到根本解決的完整過程，對提升前端開發者的技術深度和問題分析能力具有重要價值。

適用讀者: 中高級前端開發者、技術架構師、對深度技術分析感興趣的開發者

技術領域: HTML/DOM 規范、SVG 技術、Vue.js 組件開發、前端調試技巧

學習價值: 技術問題分析方法論、深度調試技巧、組件設計最佳實踐

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

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

相關文章

IDEA 中 Tomcat 部署 Java Web 項目（Maven 多模塊 非 Maven 通用版）

IDEA 中 Tomcat 部署 Java Web 項目（Maven 多模塊 非 Maven 通用版）

引言 Java Web 開發中&#xff0c;Tomcat 是最常用的 Servlet 容器&#xff0c;而項目類型通常分為 Maven 管理&#xff08;依賴自動處理、多模塊聚合&#xff09; 和 非 Maven 純手工管理&#xff08;手動引入 jar 包、配置項目結構&#xff09;。本文覆蓋 兩種項目類型 的 T…
閱讀更多...
當建筑學會“行走”：MiC建筑如何重塑醫療空間

當建筑學會“行走”：MiC建筑如何重塑醫療空間

當塔吊林立的工地被智能化工廠取代&#xff0c;當混凝土現澆的轟鳴被精密模塊的無聲拼接覆蓋&#xff0c;建筑行業正經歷著自鋼筋混凝土革命以來最深刻的范式轉移。模塊化集成建筑&#xff08;MiC&#xff09;技術&#xff0c;這場以“制造組裝”為核心的新型工業化浪潮&#x…
閱讀更多...
計算機網絡八股第二期

計算機網絡八股第二期

計算機網絡八股第二期 1.講一講從輸入網址到網頁顯示之間發生了什么&#xff08;從網絡的角度&#xff09; 想想一下你從網店買一本書&#xff0c;從輸入網址到網頁顯示其實和你從網店買一本書差不多&#xff0c;網店發給你的是實體而網絡傳輸的是文字&#xff0c;圖片等等資…
閱讀更多...
FPGA基礎 -- Verilog 的值變轉儲文件（VCD：Value Change Dump）

FPGA基礎 -- Verilog 的值變轉儲文件（VCD：Value Change Dump）

Verilog 的“值變轉儲文件&#xff08;VCD&#xff1a;Value Change Dump&#xff09;”&#xff0c;這是一項在仿真調試中至關重要的技術&#xff0c;可以幫助你“看見”RTL中每個信號隨時間的變化過程。 一、什么是 Verilog 的值變轉儲文件&#xff08;VCD&#xff09; VCD …
閱讀更多...
流水燈芯片74HC138 → 74HC164 → 74HC595核心功能、引腳作用及芯片定位

流水燈芯片74HC138 → 74HC164 → 74HC595核心功能、引腳作用及芯片定位

一、74HC138&#xff1a;精準的“8選1開關” 核心作用 用3根控制線&#xff08;A0-A2&#xff09;實現8路嚴格單選&#xff0c;同一時刻僅1路輸出低電平&#xff08;其他7路高電平&#xff09;。 &#x1f4cc; 本質&#xff1a;二進制地址譯碼器&#xff0c;不是數據寄存器。…
閱讀更多...
鴻蒙Next倉頡語言開發實戰教程：懶加載

鴻蒙Next倉頡語言開發實戰教程：懶加載

今天要分享的是倉頡開發語言中的懶加載。 先和初學者朋友們解釋一下什么是懶加載。懶加載在代碼中叫做LazyForEach&#xff0c;看到名字你一定能猜到它和ForEach的功能類似。只不過和ForEach的一次性加載所有數據不同&#xff0c;懶加載會根據屏幕可使區域按需加載數據&#x…
閱讀更多...
Linux 內核同步管理全解：原理 + 實戰 + 考點

Linux 內核同步管理全解：原理 + 實戰 + 考點

&#x1f525; 推薦&#xff1a;《Yocto項目實戰教程&#xff1a;高效定制嵌入式Linux系統》 京東正版促銷&#xff0c;歡迎支持原創&#xff01; 鏈接&#xff1a;https://item.jd.com/15020438.html 一、為什么需要同步機制&#xff1f; Linux 是一個支持 多核并發 搶占式調…
閱讀更多...
效果成本雙突破！快手提出端到端生成式推薦系統OneRec！

效果成本雙突破！快手提出端到端生成式推薦系統OneRec！

近日&#xff0c;快手推薦模型團隊提出了一個端到端生成式推薦系統OneRec&#xff0c;該系統采用Encoder-Decoder架構&#xff0c;引入了基于獎勵機制的偏好對齊方法&#xff0c;借助強化學習增強模型效果&#xff0c;可在獎勵模型引導下直接生成契合用戶偏好的視頻內容。通過極…
閱讀更多...
flex布局 項目屬性

flex布局 項目屬性

<!DOCTYPE html> <html> <head> <meta charset"utf-8"> <title>flex布局 項目屬性</title> <link href"css/k.css" rel"stylesheet" /> </head> <bod…
閱讀更多...
SpringBoot擴展——應用Web Service！

SpringBoot擴展——應用Web Service！

應用Web Service Web Service是一個SOA&#xff08;面向服務的編程&#xff09;架構&#xff0c;這種架構不依賴于語言&#xff0c;不依賴于平臺&#xff0c;可以在不同的語言之間相互調用&#xff0c;通過Internet實現基于HTTP的網絡應用間的交互調用。Web Service是一個可以…
閱讀更多...
EasyExcel學習筆記

EasyExcel學習筆記

EasyExcel學習 一、EasyExcel簡介 一、EasyExcel是什么 EasyExcel是一個基于Java的簡單、省內存的讀寫Excel的阿里開源項目。在盡可能節約內存的情況下支持讀寫百M的Excel。 官網&#xff1a;https://easyexcel.opensource.alibaba.com/ 學習Easyexcel前需要了解導入和導出…
閱讀更多...
day4課程

day4課程

1整體認識和路由配置 2二級分類面包屑導航實現 3基礎商品列表渲染 4列表篩選功能實現 5列表無限加載功能實現 6定制路由滾動行為 7詳情頁整體認識和路由配置 8詳情頁基礎數據渲染 9詳情頁基礎組件封裝和數據渲染 10適配不同title和數據列表 11小圖切換大圖 12滑塊跟隨鼠標移動 …
閱讀更多...
kubeadm worker節點加入master失敗

kubeadm worker節點加入master失敗

文章目錄 1、操作2、問題現象3、問題原因4、問題解決4.1、重新生成token4.2、重新生成hash值 5、驗證 1、操作 執行以下命令&#xff0c;讓worker節點加入到master節點 kubeadm join 103.123.222.241:6443 --token vxe3v1.wzpnks8v1vbbtsu0 --discovery-token-ca-cert-hash s…
閱讀更多...
二十二、【用戶管理與權限 - 篇四】后端權限定義：模型與 API 實現

二十二、【用戶管理與權限 - 篇四】后端權限定義：模型與 API 實現

【用戶管理與權限 - 篇四】后端權限定義：模型與 API 實現 前言準備工作第一部分：設計并創建 `Permission` 模型第二部分：更新 `Role` 模型以關聯 `Permission`第三部分：生成并應用數據庫遷移第四部分：創建 Serializers第五部分：創建 ViewSets第六部分：注冊 API 路由第七…
閱讀更多...
猜數字小游戲微信流量主小程序開源

猜數字小游戲微信流量主小程序開源

這個智力小游戲采用了數字華容道的玩法&#xff0c;玩家需要通過移動數字方塊&#xff0c;將數字按順序排列完成游戲。代碼嚴格遵循微信小程序的目錄結構&#xff0c;包含以下部分&#xff1a; 完整的小程序配置文件&#xff08;app.js、app.json、app.wxss&#xff09; 游戲頁…
閱讀更多...
探秘阿里云EBS存儲：云計算的存儲基石

探秘阿里云EBS存儲：云計算的存儲基石

一、引言 在云計算時代&#xff0c;數據如同企業的生命線&#xff0c;數據存儲的重要性不言而喻。隨著企業數字化轉型的加速&#xff0c;海量數據的存儲與高效管理成為亟待解決的問題。云存儲以其卓越的靈活性、可擴展性和成本效益&#xff0c;逐漸成為眾多企業的首選方案。在…
閱讀更多...
音視頻之H.264的可伸縮編碼SVC

音視頻之H.264的可伸縮編碼SVC

系列文章&#xff1a; 1、音視頻之視頻壓縮技術及數字視頻綜述 2、音視頻之視頻壓縮編碼的基本原理 3、音視頻之H.264/AVC編碼器原理 4、音視頻之H.264的句法和語義 5、音視頻之H.264/AVC解碼器的原理和實現 6、音視頻之H.264視頻編碼傳輸及其在移動通信中的應用 7、音視…
閱讀更多...
Anaconda安裝env,yml一直卡在Solving environment:不動

Anaconda安裝env,yml一直卡在Solving environment:不動

如果在使用conda env creat -f env.yml時候&#xff0c;anaconda一直卡住&#xff0c;如下 可以嘗試下面操作。 conda config --set solver libmamba # 使用libmamba引擎&#xff08;Conda≥22.11&#xff09; conda env create -f env.yaml # 重新嘗試
閱讀更多...
榕壹云婚戀相親系統：ThinkPHP+UniApp打造高效婚配平臺

榕壹云婚戀相親系統：ThinkPHP+UniApp打造高效婚配平臺

引言 在數字化浪潮下，婚戀相親行業正加速向線上遷移。榕壹云公司基于市場需求與技術積累，開發一款功能完備、技術開源的婚戀相親小程序系統，為單身人士提供高效、安全的婚戀平臺。本文將圍繞系統背景、客戶定位、核心技術、功能模塊及優勢場景展開詳細解析，助力開發者與技…
閱讀更多...
查詢docker-compose 部署的milvus 請求日志

查詢docker-compose 部署的milvus 請求日志

在 Docker Compose 部署的 Milvus 中，日志默認存儲在各個服務的容器內。以下是定位和查詢日志的方法： 1. 查看實時日志 使用 docker-compose logs 命令查看實時日志： bash # 查看所有服務的日志 docker-compose logs -f# 僅查看 Milvus 服務日志（服務名以 docker-compos…
閱讀更多...
最新文章

Copyright @ 2022~2023