微前端的需求有哪些？微前端的原理是怎么样的？为什么这么设计，及微前端的应用场景是什么？对有些客户，前端的重要性高于后端

微前端（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.mzph.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