微前端的需求有哪些？微前端的原理是怎么樣的？為什么這么設計，及微前端的應用場景是什么？對有些客戶，前端的重要性高于后端

微前端（Micro Frontends）是將前端應用拆分成多個獨立、可部署的部分，每個部分可以由不同的團隊獨立開發、測試、部署和維護。這種架構類似于微服務在后端的應用，是為了應對復雜前端應用的維護和擴展問題而提出的。

來龍去脈

背景

隨著前端技術的發展，前端應用變得越來越復雜和龐大。單體前端應用（Monolith Frontend）在開發和維護過程中面臨以下問題：

  • 開發效率低：多個團隊在同一個代碼庫中工作，容易產生沖突。
  • 部署風險高：每次部署都需要部署整個應用，任何部分的錯誤都會影響整個系統。
  • 技術債務：隨著時間推移，不同部分可能采用不同的技術棧，難以統一和升級。
  • 可維護性差：代碼庫龐大，難以理解和維護。

微前端的出現

為了解決上述問題，微前端架構應運而生。微前端借鑒了微服務的思想，將一個大應用拆分為若干小的前端應用，每個應用可以獨立開發、部署和運行。這些小應用通過某種方式集成在一起，形成最終的用戶界面。

微前端的原理

微前端的核心思想是將前端應用拆分為多個獨立的模塊，這些模塊可以獨立開發、測試、部署和運行。具體原理包括以下幾個方面：

  1. 獨立開發和部署：每個微前端模塊可以由不同的團隊獨立開發和部署，模塊之間通過明確的接口進行通信。
  2. 獨立運行環境：每個模塊可以有自己的運行環境和技術棧，互不干擾。
  3. 模塊加載和渲染：通過主應用（或稱為殼應用）動態加載和渲染各個微前端模塊，可以使用iframe、JavaScript動態加載等技術。
  4. 通信機制：通過事件總線、全局狀態管理、URL路由等方式實現模塊之間的通信和數據共享。

設計原因

微前端的設計主要是為了應對以下問題：

  • 團隊獨立性：不同團隊可以獨立開發和部署自己的模塊，減少團隊之間的依賴和沖突。
  • 技術多樣性：不同模塊可以使用不同的技術棧，允許團隊選擇最適合的技術。
  • 增量升級：可以逐步遷移和升級模塊，而不需要一次性重構整個應用。
  • 降低風險：每個模塊的發布和更新都是獨立的，降低了全局部署的風險。

應用場景

微前端適用于以下場景：

  1. 大型企業應用：適用于需要多個團隊協作的大型企業級應用。
  2. 需要頻繁更新的應用：適用于需要頻繁發布和更新的應用，可以降低發布風險。
  3. 多技術棧共存的應用：適用于需要同時使用多種前端技術的應用。
  4. 漸進式遷移：適用于需要逐步從老舊系統遷移到新系統的場景。

當然，關于微前端，還有很多內容可以深入探討。以下是一些更詳細的方面：

微前端的架構模式

微前端架構有多種實現方式，每種方式都有其優缺點，適用于不同的場景。

1. 基于iframe的架構

通過iframe將不同的微前端應用嵌入到主應用中。每個iframe加載一個獨立的前端應用。

  • 優點：

    • 隔離性強：iframe天生具有隔離性，可以有效避免樣式和腳本的沖突。
    • 獨立性高：每個iframe可以獨立開發、部署和運行。

  • 缺點：

    • 性能問題：iframe的加載和渲染性能較差，影響用戶體驗。
    • 通信復雜：iframe之間的通信較為復雜，需要使用postMessage等機制。

2. 基于JavaScript的動態加載

通過JavaScript動態加載微前端模塊，通常使用模塊聯邦（Module Federation）等技術。

  • 優點：

    • 性能較好：可以優化加載和渲染，提高性能。
    • 靈活性高：可以根據需要動態加載和卸載模塊。

  • 缺點：

    • 隔離性較弱：需要額外處理樣式和腳本的沖突問題。
    • 復雜度高：需要處理模塊加載、依賴管理等問題。

3. 基于Web Components

使用Web Components（如Custom Elements、Shadow DOM）將每個微前端模塊封裝成獨立的組件。

  • 優點：

    • 標準化：基于Web標準的組件，具有良好的兼容性和可維護性。
    • 隔離性好：Shadow DOM提供了樣式隔離，避免樣式沖突。

  • 缺點：

    • 學習成本：需要學習和掌握Web Components相關技術。
    • 瀏覽器兼容性：需要考慮對舊版瀏覽器的支持。

4. 基于Server-Side Includes (SSI)

通過服務端模板引擎在服務器端組合不同的微前端模塊，生成完整的頁面。

  • 優點：

    • 性能好：在服務器端完成組合，減少客戶端的加載時間。
    • 安全性高：避免了客戶端的跨域問題。

  • 缺點：

    • 靈活性差：需要在服務器端進行配置和管理，靈活性較低。
    • 開發復雜：需要處理服務端和客戶端的協同問題。

微前端的技術棧

微前端并不限制使用特定的技術棧，可以根據實際需求選擇合適的技術。常見的技術棧包括：

  • JavaScript框架：React、Vue、Angular、Svelte等。
  • 模塊打包工具：Webpack、Rollup、Parcel等。
  • 狀態管理：Redux、MobX、Vuex等。
  • 路由管理：React Router、Vue Router等。
  • 通信機制：Event Bus、Custom Events、Shared State等。

微前端的實施步驟

實施微前端架構通常需要以下幾個步驟：

  1. 需求分析：確定應用的需求和微前端的適用性。
  2. 架構設計：選擇合適的微前端架構模式和技術棧。
  3. 模塊劃分：將應用劃分為若干獨立的模塊，每個模塊有明確的功能邊界。
  4. 開發和測試：獨立開發和測試每個模塊，確保模塊的獨立性和穩定性。
  5. 集成和部署：通過主應用集成各個模塊，并進行統一的部署和運維。

微前端的挑戰

盡管微前端有很多優點，但在實際應用中也面臨一些挑戰：

  • 性能優化：需要優化模塊的加載和渲染，避免影響用戶體驗。
  • 通信和狀態管理：需要設計高效的模塊間通信機制和全局狀態管理方案。
  • 樣式和資源管理：需要處理模塊間的樣式沖突和資源共享問題。
  • 安全性：需要確保不同模塊間的隔離性，避免安全漏洞。
  • 運維和監控：需要建立完善的運維和監控體系，保障系統的穩定性和可靠性。

當然，讓我們深入探討微前端的更多細節，包括實際的實施經驗、最佳實踐，以及一些具體的工具和框架。

微前端的最佳實踐

1. 明確的模塊邊界

確保每個微前端模塊有明確的功能邊界和責任劃分。模塊之間的依賴和通信需要通過明確的接口和協議來實現。

  • 功能劃分：根據業務功能、頁面結構或用戶角色劃分模塊。
  • 接口設計：設計清晰的API接口，確保模塊之間的低耦合。

2. 獨立開發和部署

每個微前端模塊應獨立開發、測試和部署，確保模塊的獨立性和可維護性。

  • 獨立代碼庫：每個模塊使用獨立的代碼庫和版本控制。
  • 獨立CI/CD：每個模塊有獨立的持續集成和持續部署流程。

3. 高效的模塊加載

優化模塊的加載和渲染，確保用戶體驗。

  • 懶加載：根據需要動態加載模塊，減少初始加載時間。
  • 緩存策略：利用瀏覽器緩存和CDN優化資源加載。
  • 預加載：根據用戶行為預加載即將使用的模塊。

4. 統一的狀態管理

設計統一的狀態管理方案，確保各個模塊之間的數據一致性。

  • 全局狀態管理：使用Redux、MobX等全局狀態管理庫。
  • 模塊間通信：通過事件總線、消息隊列等方式實現模塊間的通信。

5. 樣式隔離

確保各個模塊的樣式互不干擾，避免樣式沖突。

  • CSS Modules：使用CSS Modules實現樣式的局部作用域。
  • Shadow DOM：使用Web Components的Shadow DOM實現樣式隔離。
  • 命名規范：制定統一的樣式命名規范，避免全局樣式污染。

6. 安全性

確保模塊之間的隔離性，避免安全漏洞。

  • 內容安全策略（CSP）：使用CSP策略限制模塊的資源加載和執行。
  • 跨域資源共享（CORS）：配置CORS策略，確保資源的安全加載。
  • 身份認證和授權：設計統一的認證和授權機制，確保用戶數據的安全性。

7. 運維和監控

建立完善的運維和監控體系，保障系統的穩定性和可靠性。

  • 日志記錄：記錄各個模塊的運行日志，便于問題排查。
  • 性能監控：監控模塊的加載和運行性能，及時發現和優化性能瓶頸。
  • 錯誤處理：設計統一的錯誤處理機制，及時捕獲和處理運行時錯誤。

微前端的工具和框架

1. Single-SPA

Single-SPA 是一個用于構建微前端架構的框架，支持多個框架并存（如React、Vue、Angular等），通過注冊應用和路由，實現多個微前端應用的加載和渲染。

  • 優點：靈活性高，支持多種前端框架，易于集成。
  • 缺點：需要一定的學習成本，配置較為復雜。

2. qiankun

qiankun 是基于Single-SPA的微前端框架，由阿里巴巴開發。它提供了更加開箱即用的API和工具，簡化了微前端的實現。

  • 優點：易用性高，提供了豐富的功能和文檔。
  • 缺點：與Single-SPA類似，仍需要一定的學習和配置。

3. Module Federation

Module Federation 是Webpack 5引入的一種模塊加載技術，允許在應用之間動態加載代碼，實現微前端模塊的共享和加載。

  • 優點：與Webpack無縫集成，高性能，靈活性強。
  • 缺點：與Webpack的依賴較強，學習曲線較陡。

4. Bit

Bit 是一個組件驅動的開發平臺，支持將前端組件獨立化，實現微前端的組件化開發。

  • 優點：組件化強，易于復用和分享。
  • 缺點：需要適應組件驅動的開發模式。

當然，我們繼續深入探討微前端的更多細節和工具。

5. Piral

Piral 是一個用于構建微前端架構的框架，專注于提供一個靈活和可擴展的解決方案。Piral允許開發者創建一個門戶應用（piral instance），其中可以嵌入多個微前端模塊（pilet）。

  • 優點：

    • 強大的插件系統，提供許多開箱即用的功能。
    • 靈活性高，支持多種前端技術棧。
    • 良好的文檔和社區支持。

  • 缺點：

    • 學習曲線較陡，特別是對于新手。
    • 生態系統相對較小，需要社區的持續發展。

6. Open Components

Open Components 是一種微服務風格的微前端架構，專注于組件的發布和消費。它允許開發者創建獨立的組件服務，并通過HTTP API進行消費。

  • 優點：

    • 組件化強，易于獨立開發和部署。
    • 支持多種語言和框架，靈活性高。

  • 缺點：

    • 依賴服務端的支持，前后端協同工作。
    • 需要額外的運維和部署管理。

微前端的實施案例

1. 大型電商平臺

在大型電商平臺中，通常有多個團隊負責不同的功能模塊，如首頁、商品詳情頁、購物車、用戶中心等。通過微前端架構，每個團隊可以獨立開發和部署自己的模塊，提升開發效率和部署靈活性。

  • 實施方式：可以采用Single-SPA或qiankun等框架，結合模塊聯邦技術，實現動態加載和渲染。
  • 挑戰：需要處理模塊間的通信和狀態管理，確保用戶體驗一致性。

2. 企業級管理系統

在企業級管理系統中，通常涉及多個子系統，如人力資源管理、財務管理、供應鏈管理等。通過微前端架構，可以將這些子系統拆分為獨立的微前端模塊，便于獨立開發和維護。

  • 實施方式：可以采用iframe或Web Components等技術，實現模塊的嵌入和隔離。
  • 挑戰：需要考慮樣式隔離和性能優化，確保系統的穩定性和可維護性。

3. 多品牌網站

在多品牌網站中，不同品牌可能有不同的前端需求和設計風格。通過微前端架構，可以為每個品牌創建獨立的前端模塊，并通過主應用進行統一管理和集成。

  • 實施方式：可以采用Piral或Open Components等框架，實現模塊化和組件化開發。
  • 挑戰：需要確保品牌間的樣式和功能一致性，避免用戶體驗的割裂。

微前端的未來趨勢

1. 標準化和規范化

隨著微前端架構的普及，行業內將逐步形成一套標準化和規范化的解決方案，減少開發者的學習和實施成本。

  • 標準化協議：制定統一的模塊通信和加載協議，確保模塊的互操作性。
  • 最佳實踐：總結和推廣微前端的最佳實踐，提升開發和運維效率。

2. 工具和框架的成熟

現有的微前端工具和框架將不斷發展和完善，提供更多開箱即用的功能和更好的開發體驗。

  • 集成開發環境：提供一體化的開發、測試和部署工具，簡化微前端的實施流程。
  • 性能優化：通過更好的模塊加載和渲染技術，提升微前端應用的性能。

3. 生態系統的擴展

微前端的生態系統將不斷擴展，涵蓋更多的前端技術和應用場景。

  • 多技術棧支持：支持更多的前端框架和技術，滿足不同團隊的需求。
  • 跨平臺應用：擴展到移動端、桌面端等更多平臺，實現全方位的應用支持。

4. 自動化和智能化

通過自動化和智能化技術，進一步提升微前端的開發和運維效率。

  • 自動化測試：提供自動化的測試工具和框架，確保模塊的穩定性和可靠性。
  • 智能化運維：通過智能化的運維和監控工具，及時發現和處理系統問題，保障系統的平穩運行。

微前端的具體實現

讓我們更詳細地探討一些常見的微前端實現技術和步驟。

1. Single-SPA 實現示例

Single-SPA 是一個流行的微前端框架，支持將多個前端框架集成到一個應用中。以下是一個簡單的使用 Single-SPA 的示例：

步驟 1：安裝 Single-SPA

首先，安裝 Single-SPA CLI 工具：

npm install -g create-single-spa
步驟 2：創建主應用和微前端應用

使用 CLI 工具創建主應用：

npx create-single-spa

根據提示選擇創建一個 root-config 項目。然后，創建微前端應用（例如 React 應用）：

npx create-single-spa --moduleType app-parcel --template react
步驟 3：配置主應用

在主應用的 single-spa-config.js 文件中，注冊微前端應用：

import { registerApplication, start } from "single-spa";registerApplication('react-app',() => import('react-app'),location => location.pathname.startsWith('/react-app')
);start();
步驟 4：運行和測試

啟動主應用和微前端應用，并在瀏覽器中訪問相應路徑，驗證微前端應用的加載和渲染。

2. qiankun 實現示例

qiankun 是基于 Single-SPA 的微前端框架，簡化了微前端的實現。以下是一個使用 qiankun 的示例：

步驟 1：安裝 qiankun

在主應用中安裝 qiankun：

npm install qiankun
步驟 2：配置主應用

在主應用的入口文件中配置 qiankun：

import { registerMicroApps, start } from 'qiankun';// 注冊微前端應用
registerMicroApps([{name: 'react-app',entry: '//localhost:7100',container: '#container',activeRule: '/react-app',},// 其他微前端應用
]);// 啟動 qiankun
start();
步驟 3：配置微前端應用

在微前端應用中，導出生命周期函數：

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';function render() {ReactDOM.render(<App />, document.getElementById('root'));
}if (!window.__POWERED_BY_QIANKUN__) {render();
}export async function bootstrap() {console.log('React app bootstraped');
}export async function mount() {render();
}export async function unmount() {ReactDOM.unmountComponentAtNode(document.getElementById('root'));
}
步驟 4：運行和測試

啟動主應用和微前端應用，并在瀏覽器中訪問相應路徑，驗證微前端應用的加載和渲染。

微前端的通信機制

在微前端架構中，各個模塊需要進行通信以保持數據一致性和交互性。常見的通信機制包括：

1. 事件總線

使用事件總線（Event Bus）在不同模塊之間傳遞消息。可以使用庫如 mitt 或者 eventemitter3：

// eventBus.js
import mitt from 'mitt';
const eventBus = mitt();
export default eventBus;// 在模塊中使用
import eventBus from './eventBus';// 發送事件
eventBus.emit('eventName', eventData);// 監聽事件
eventBus.on('eventName', (eventData) => {// 處理事件
});

2. 全局狀態管理

使用全局狀態管理工具（如 Redux 或 MobX）在不同模塊之間共享狀態：

// store.js
import { createStore } from 'redux';const initialState = {data: null,
};function reducer(state = initialState, action) {switch (action.type) {case 'SET_DATA':return { ...state, data: action.payload };default:return state;}
}const store = createStore(reducer);
export default store;// 在模塊中使用
import store from './store';// 獲取狀態
const state = store.getState();// 訂閱狀態變化
store.subscribe(() => {const state = store.getState();// 更新視圖
});// 分發動作
store.dispatch({ type: ''SSET_DATA', payload: newData });### 3. **自定義事件**利用瀏覽器提供的自定義事件機制，各個模塊可以通過 `CustomEvent` 進行通信：```javascript
// 發送事件
const event = new CustomEvent('eventName', { detail: eventData });
window.dispatchEvent(event);// 監聽事件
window.addEventListener('eventName', (event) => {const eventData = event.detail;// 處理事件
});

4. 共享服務

通過共享服務（Shared Service），模塊之間可以共享公共邏輯和數據。這種方式通常在微前端架構中使用服務提供者模式（Service Provider Pattern）實現：

// sharedService.js
class SharedService {constructor() {this.data = null;this.subscribers = [];}setData(data) {this.data = data;this.notifySubscribers();}getData() {return this.data;}subscribe(callback) {this.subscribers.push(callback);}notifySubscribers() {this.subscribers.forEach(callback => callback(this.data));}
}const sharedService = new SharedService();
export default sharedService;// 在模塊中使用
import sharedService from './sharedService';// 設置數據
sharedService.setData(newData);// 獲取數據
const data = sharedService.getData();// 訂閱數據變化
sharedService.subscribe((data) => {// 處理數據變化
});

微前端的性能優化

在微前端架構中，性能優化是一個重要的課題，以下是一些常見的優化策略：

1. 按需加載和懶加載

通過按需加載和懶加載技術，減少初始加載時間，提高用戶體驗：

// React 示例
const LazyComponent = React.lazy(() => import('./LazyComponent'));function App() {return (<React.Suspense fallback={<div>Loading...</div>}><LazyComponent /></React.Suspense>);
}

2. 代碼拆分

利用 Webpack 等構建工具的代碼拆分功能，將應用拆分為多個小的包，按需加載：

// webpack.config.js
module.exports = {optimization: {splitChunks: {chunks: 'all',},},
};

3. 緩存策略

利用瀏覽器緩存和 CDN 緩存策略，減少資源的重復加載：

<!-- HTML 示例 -->
<link rel="stylesheet" href="styles.css" integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxr+la69aL5/2eV8tqk5sIhoxl8n5Ue" crossorigin="anonymous">

4. 性能監控

通過性能監控工具，如 Lighthouse、Web Vitals 等，持續監控和優化應用的性能：

import { getCLS, getFID, getLCP } from 'web-vitals';getCLS(console.log);
getFID(console.log);
getLCP(console.log);

微前端的安全性

微前端架構中的安全性同樣不容忽視，以下是一些常見的安全措施：

1. 內容安全策略（CSP）

通過配置內容安全策略，限制資源的加載來源，防止 XSS 攻擊：

<!-- HTML 示例 -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' https://example.com; script-src 'self' https://example.com;">

2. 跨域資源共享（CORS）

配置 CORS 策略，確保資源加載的安全性：

// Node.js 示例
const express = require('express');
const cors = require('cors');
const app = express();app.use(cors({origin: 'https://example.com',methods: 'GET,POST',
}));app.listen(3000);

3. 身份認證和授權

通過統一的身份認證和授權機制，確保用戶數據的安全性：

// 使用 JWT 進行身份認證
const jwt = require('jsonwebtoken');
const token = jwt.sign({ userId: 123 }, 'secret-key', { expiresIn: '1h' });// 驗證 JWT
jwt.verify(token, 'secret-key', (err, decoded) => {if (err) {// 認證失敗} else {// 認證成功}
});

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

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

相關文章

【吳恩達機器學習-week2】可選實驗：使用 Scikit-Learn 進行線性回歸

【吳恩達機器學習-week2】可選實驗：使用 Scikit-Learn 進行線性回歸

支持我的工作 &#x1f389; &#x1f4c3;親愛的朋友們&#xff0c;感謝你們一直以來對我的關注和支持&#xff01; &#x1f4aa;&#x1f3fb; 為了提供更優質的內容和更有趣的創作&#xff0c;我付出了大量的時間和精力。如果你覺得我的內容對你有幫助或帶來了歡樂&#xf…
閱讀更多...
庫表設計（基礎）-實體與設計關系

庫表設計（基礎）-實體與設計關系

實體關系分析 1 實體關系是指系統事務之間的聯系。 2 實體關系需要雙向分析。 3 實體關系決定表關系。 實體關系的種類 1 一對一 2 一對多 3 多對多 舉例&#xff1a; 上面關系如下&#xff1a; 班級和學生 &#xff1a; 1:N 學生和課程&#xff1a;N : N 學生和學籍檔案&a…
閱讀更多...
MISRA C 和MISRA C++：汽車軟件安全的守護者

MISRA C 和MISRA C++：汽車軟件安全的守護者

一、MISRA C與C語言 自1972年Dennis MacAlistair Ritchie在美國貝爾實驗室創造C語言以來&#xff0c;它已成為當今最流行的編程語言之一。C語言以其使用的靈活性、功能的豐富性而廣受歡迎&#xff0c;但同時也因其寬松的語法和不嚴格的數據類型給開發的產品帶來了安全隱患。 …
閱讀更多...
如何批量給文件名添加編號？這個方法速度快！操作簡單！

如何批量給文件名添加編號？這個方法速度快！操作簡單！

如何批量給文件名添加編號&#xff1f;這個方法速度快&#xff01;操作簡單&#xff01;批量給文件重命名&#xff0c;這個是在工作中和生活中經常要用到的一個小技巧&#xff0c;許多人還不知道怎么操作&#xff0c;當然如果要按一定的格式和規律重命名大量的文件&#xff0c;…
閱讀更多...
Linux內核 -- 多核通信之RPMSG驅動使用

Linux內核 -- 多核通信之RPMSG驅動使用

Linux Kernel RPMsg 驅動注冊流程的高級用法與注意事項 在Linux Kernel中&#xff0c;RPMsg&#xff08;Remote Processor Messaging&#xff09;是一種用于不同處理器之間通信的機制&#xff0c;通常用于多核系統中的通信&#xff0c;如主處理器和協處理器之間的消息傳遞。了…
閱讀更多...
巴西電子游戲PWA借助海外快手kwai社交廣告出海趨勢解讀

巴西電子游戲PWA借助海外快手kwai社交廣告出海趨勢解讀

巴西電子游戲PWA借助海外快手kwai社交廣告出海趨勢解讀 在數字化時代的浪潮中&#xff0c;電子游戲行業蓬勃發展&#xff0c;而廣告投放策略也隨之日新月異。特別是在巴西這樣一個充滿活力的市場&#xff0c;電子游戲的普及與流行程度不容小覷。在這樣的背景下&#xff0c;在數…
閱讀更多...
java數據結構集合復習之ArrayList與順序表

java數據結構集合復習之ArrayList與順序表

前言: 這是我最一年學習java的一部分的回顧總結 1.List 1.1什么是List? 在框架集合中,List是一個接口,繼承自Collection。 Collection也是一個接口&#xff0c;該接口中規范了后序容器中常用的一些方法&#xff0c;具體如下所示 --------boolean add(E e)尾插 evoid a…
閱讀更多...
[pwn]靜態編譯

[pwn]靜態編譯

靜態編譯 1. 棧足夠大的情況下 程序在ida打開后&#xff0c;左側的函數欄目沒有紅色&#xff08;系統調用的函數&#xff09;&#xff0c;而只有一些靜態函數&#xff0c;通常這類文件的大小會必普通的pwn題程序要大得多。 這種靜態編譯的題沒有調用庫函數&#xff0c;也就沒…
閱讀更多...
百度云智能媒體內容分析一體機（MCA）建設

百度云智能媒體內容分析一體機（MCA）建設

導讀 &#xff1a;本文主要介紹了百度智能云MCA產品的概念和應用。 媒體信息海量且復雜&#xff0c;采用人工的方式對視頻進行分析處理&#xff0c;面臨著效率低、成本高的困難。于是&#xff0c;MCA應運而生。它基于百度自研的視覺AI、ASR、NLP技術&#xff0c;為用戶提供音視…
閱讀更多...
Vue 性能革命：揭秘前端優化的終極技巧；Vue優化技巧，解決Vue項目卡頓問題

Vue 性能革命：揭秘前端優化的終極技巧；Vue優化技巧，解決Vue項目卡頓問題

目錄 Vue優化路徑 一、使用key 二、使用凍結對象 三、使用函數式組件 四、使用計算屬性 五、使用非實時綁定的表單項 六、保持對象引用穩定 6.1、保持對象引用穩定定義 6.2、保持對象引用穩定與不穩定的例子 6.3、vue2判斷數據是否變化是通過hasChanged函數實現的 ①…
閱讀更多...
2024年【四川省安全員B證】考試及四川省安全員B證考試題

2024年【四川省安全員B證】考試及四川省安全員B證考試題

題庫來源&#xff1a;安全生產模擬考試一點通公眾號小程序 2024年【四川省安全員B證】考試及四川省安全員B證考試題&#xff0c;包含四川省安全員B證考試答案和解析及四川省安全員B證考試題練習。安全生產模擬考試一點通結合國家四川省安全員B證考試最新大綱及四川省安全員B證…
閱讀更多...
golang項目中gorm框架的配置和具體使用

golang項目中gorm框架的配置和具體使用

最近在改造golang項目&#xff0c;從postgre數據庫遷移到達夢數據庫&#xff0c;我還想在改造后的項目使用 gorm 操作數據庫&#xff0c;保持較小的改動。查找了不少資料&#xff0c;最終從以下兩篇文章中借鑒了不少 1、Gorm 入門介紹與基本使用 這篇知乎文章詳細介紹了 gorm 框…
閱讀更多...
C語言 -- 操作符詳解?

C語言 -- 操作符詳解?

C語言 -- 操作符詳解? 1. 操作符的分類2. 二進制和進制轉換?2.1 2進制轉10進制?2.1.1 10進制轉2進制數字? 2.2 2進制轉8進制和16進制?2.2.1 2進制轉8進制?2.2.2 2進制轉16進制? 3. 原碼、反碼、補碼?4. 移位操作符?4.1 左移操作符? 4.2 右移操作符?5. 位操作符&…
閱讀更多...
Symfony實戰手冊：PHP框架的高級應用技巧

Symfony實戰手冊：PHP框架的高級應用技巧

引言 Symfony是一個功能強大且廣泛應用于PHP應用程序開發的框架&#xff0c;它提供了許多高級特性和工具&#xff0c;可以幫助開發人員更高效地構建和管理復雜的Web應用程序。以下是Symfony框架的幾個關鍵方面及其高級應用技巧&#xff1a; 1. 路由和控制器 Symfony的路由組…
閱讀更多...
suricata7 rule格式

suricata7 rule格式

suricata 7.0.5 suricata rule由三部分組成&#xff0c; action, header, options action,決定當前規則匹配上后需要執行的動作header,定義當前規則的協議&#xff0c;IP地址&#xff0c;端口&#xff0c;方向options,定義了具體的規則 一、 action 合法的action值有&#x…
閱讀更多...
Linux_共享內存通信

Linux_共享內存通信

目錄 1、共享內存原理 2、申請共享內存 2.1 ftok 2.2 測試shmget、ftok 2.3 查看系統下的共享內存 3、關聯共享內存 3.1 測試shmat 4、釋放共享內存 4.1 測試shmctl 5、實現共享內存通信 6、共享內存的特性 結語 前言&#xff1a; 在Linux下&#xff0c;有一…
閱讀更多...
爆！Java高級特性之Stream API詳解

爆！Java高級特性之Stream API詳解

爆&#xff01;Java高級特性之Stream API詳解 Java 8引入的Stream API可以說是一個革命性的特性,讓我們告別了又臭又長的for循環,迎來了函數式編程的春天。今天就讓我們來一起深入了解這個讓人又愛又恨的Stream API吧! 什么是Stream? Stream就像一個高級的迭代器,允許我們以…
閱讀更多...
分支與循環

分支與循環

目錄 1. if語句 1&#xff09;if 2) else 3&#xff09;分支中包含多條語句 4&#xff09;if嵌套 2.關系操作符 3.條件操作符 4.邏輯操作符&#xff1a;&& || ! 1) 邏輯取反運算符 !?編輯 2 與運算符?編輯 3) 或運算符?編輯 4) 閏年的判斷 5) 短路 …
閱讀更多...
LangChain 概述 (模塊索引)

LangChain 概述 (模塊索引)

文章目錄 一、下載二、核心功能1、流式傳輸 streaming 三、LCEL四、組成部分1、Promp template2、Example selectors (示例選擇器)3、Chat models (聊天模型)4、Messages (消息)5、LLMs (大語言模型) 一、下載 二、核心功能 其中包括以下內容&#xff1a; 從模型中返回結構化的…
閱讀更多...
若依 Vue 前端分離 3.8.8 版中生成的前端代碼中關于下拉框只有下拉箭頭的問題

若依 Vue 前端分離 3.8.8 版中生成的前端代碼中關于下拉框只有下拉箭頭的問題

生成代碼修改前 <el-form-item label"課程學科" prop"subject"><el-select v-model"queryParams.subject" placeholder"請選擇課程學科" clearable><el-optionv-for"dict in course_subject":key"dict…
閱讀更多...
最新文章

Copyright @ 2022~2023