当前位置: 首页 > news >正文

【前端知识】简单讲讲什么是微前端

微前端介绍

      • 一、定义
      • 二、背景
      • 三、核心思想
      • 四、基本要素
      • 五、核心价值
      • 六、实现方式
      • 七、应用场景
      • 八、挑战与解决方案
    • 什么是single-spa
      • 一、核心特点
      • 二、核心原理
      • 三、应用加载流程
      • 四、最佳实践
      • 五、优缺点
      • 六、应用场景
    • 什么是 qiankun
      • 一、概述
      • 二、特点与优势
      • 三、核心功能
      • 四、使用场景
      • 五、注意事项
      • 六、总结
    • Web Components
      • 一、定义与背景
      • 二、核心组件与技术
      • 三、优势与特点
      • 四、应用场景
      • 五、使用方法
      • 六、注意事项

一、定义

微前端(Micro-Frontends)是一种将前端应用拆分为多个独立、可部署的部分的架构模式,每个部分可以由不同的团队独立开发、测试、部署和维护。这种架构类似于微服务在后端的应用,是为了应对复杂前端应用的维护和扩展问题而提出的。

二、背景

在现代前端开发中,随着应用规模的不断扩大和复杂度的增加,前端单体应用(Monolithic Front-End Application)逐渐暴露出维护困难、部署缓慢和团队协作受限等问题。为了解决这些问题,微前端架构应运而生。

三、核心思想

微前端的核心思想是将前端应用拆分为多个独立的模块,这些模块可以独立开发、测试、部署和运行。每个模块有自己的运行环境和技术栈,互不干扰。这些小应用通过某种方式集成在一起,形成最终的用户界面。

四、基本要素

  1. 技术栈无关:主框架不限制接入应用的技术栈,微应用具备完全自主权。
  2. 应用隔离:每个微前端模块应独立开发、测试和部署,不依赖于其他模块,同时每个模块的状态应相互隔离,避免全局状态的相互污染。
  3. 独立开发:微应用仓库独立,前后端可独立开发。

五、核心价值

  1. 团队独立性:不同团队可以负责不同的微前端模块,减少了代码耦合,提升了开发效率和协作性。
  2. 渐进迁移:企业可以逐步将旧系统迁移到新架构中,无需一次性重构整个应用,降低了风险和成本。
  3. 技术栈多样性:不同的微前端模块可以使用不同的技术栈(如React、Vue、Angular等),更好地满足团队的偏好和项目需求。
  4. 独立部署:每个微前端模块可以独立部署,这意味着可以更快地发布和回滚,减少对其他模块的影响。

六、实现方式

  1. 使用iframe:iframe是最稳定的、上手难度最低的微前端实现方式,但存在性能低、通信复杂、双滚动条、弹窗无法全局覆盖、加载是另一个window窗口导致页面缩放时内部窗口内部缩放不同步等问题。
  2. 使用single-spa:通过监听url change事件,在路由变化时匹配到渲染的子应用并进行渲染。这种方式较基础,对原有项目的改造过多,成本较高。
  3. 使用qiankun:qiankun是基于single-spa的微前端框架,由阿里巴巴开发,提供了更加开箱即用的API和工具,简化了微前端的实现。它使用import-html-entry插件将子应用的html作为入口,框架会将HTML document作为子节点塞到主框架的容器中。
  4. 使用Web Components:基于类WebComponent进行渲染的微前端框架,不同于目前流行的开源框架,它从组件化的思维实现微前端,旨在降低上手难度、提升工作效率。它提供了JS沙箱、样式隔离、元素隔离、预加载、资源地址补全、插件系统、数据通信等一系列完善的功能。

七、应用场景

  1. 大型企业应用:适用于需要多个团队协作的大型企业级应用。
  2. 需要频繁更新的应用:适用于需要频繁发布和更新的应用,可以降低发布风险。
  3. 多技术栈共存的应用:适用于需要同时使用多种前端技术的应用。
  4. 渐进式迁移:适用于需要逐步从老旧系统迁移到新系统的场景。

八、挑战与解决方案

尽管微前端有很多优点,但在实际应用中也面临一些挑战,包括性能优化、通信和状态管理、样式和资源管理、安全性、运维和监控等方面。为了解决这些挑战,可以采取以下措施:

  1. 性能优化:通过代码分割、懒加载、缓存等手段,优化微前端应用的加载速度和性能。
  2. 通信和状态管理:设计高效的模块间通信机制和全局状态管理方案,如使用CustomEvent、Redux、RxJS等来处理模块之间的通信。
  3. 样式和资源管理:使用CSS Modules、Scoped CSS或Shadow DOM等方式,确保各模块的样式不会相互影响,并处理资源共享问题。
  4. 安全性:使用内容安全策略(CSP)限制模块的资源加载和执行,配置跨域资源共享(CORS)策略,确保资源的安全加载,并设计统一的认证和授权机制。
  5. 运维和监控:建立完善的运维和监控体系,记录各个模块的运行日志,监控模块的加载和运行性能,及时发现和优化性能瓶颈,并设计统一的错误处理机制。

综上所述,微前端是一种应对复杂前端应用开发的新思路,它提高了团队协作的灵活性,提供了更高的可扩展性和可维护性。在实际应用中,需要根据项目需求、团队能力和技术栈等因素来综合考虑是否采用微前端架构。

什么是single-spa

Single-spa是一个用于构建微前端应用的JavaScript框架,它允许将多个单页面应用(SPA)聚合为一个整体应用,在同一页面上使用多个前端框架(如React、AngularJS、Angular、Ember等)而不用刷新页面。以下是对Single-spa的详细介绍:

一、核心特点

  1. 独立性:每个单页面应用都可以独立部署,新功能可以使用新框架开发,而旧的单页应用无需重写即可共存。
  2. 性能优化:Single-spa可以改善初始加载时间,通过延迟加载代码来优化性能。
  3. 灵活性:支持多种前端框架和库,开发者可以根据项目需求选择合适的技术栈。
  4. 生命周期管理:定义了微应用的生命周期钩子,包括bootstrap、mount、unmount等,方便开发者对微应用进行精细化的管理。

二、核心原理

  1. 路由机制:Single-spa通过监听URL的变化,自动加载和卸载对应的微应用。它提供了一套基于URL的路由机制,可以实现微应用之间的无缝切换和通信。
  2. 生命周期管理:微应用的生命周期钩子允许开发者在微应用的不同阶段执行相应的操作。例如,bootstrap钩子用于加载微应用的代码和资源,mount钩子用于渲染微应用的界面,unmount钩子用于清理微应用的资源和事件监听器。
  3. 微应用通信:虽然Single-spa本身不提供微应用之间的通信机制,但可以通过一些方式实现微应用之间的数据共享和通信。常见的方式包括使用全局状态管理库(如Redux、Vuex等)或事件总线(如EventEmitter)。

三、应用加载流程

  1. 注册阶段:每个微应用在启动时会注册到Single-spa中,并定义其加载和卸载的逻辑。
  2. 加载阶段:当用户访问某个微应用的页面时,Single-spa会根据Root Config配置文件中的路由规则,决定加载哪个微应用。
  3. 运行阶段:加载成功后,Single-spa会将微应用的根组件插入到页面中,同时监听路由变化,根据Root Config配置文件的路由规则,动态加载和卸载微应用。

四、最佳实践

  1. 模块化设计:将应用拆分为独立的微前端,每个微前端专注于特定功能或业务领域,有助于保持代码的清晰和可维护性。
  2. 独立开发和部署:允许微前端独立开发和部署,可以简化维护和更新过程,提高开发效率。
  3. 定义明确的路由规则:确保每个微前端只处理与其功能相关的路由,以保持应用架构的清晰度。
  4. 优化加载和执行时间:使用代码拆分、懒加载和缓存机制来提升应用性能。

五、优缺点

  • 优点

    • 支持多种前端框架和库。
    • 提供了灵活的路由机制和生命周期管理。
    • 可以改善初始加载时间并优化性能。
  • 缺点

    • 不支持Js沙箱和样式隔离,容易出现Js冲突和样式污染等问题。
    • 集成相对复杂,需要一定的学习和配置成本。

六、应用场景

Single-spa适用于需要将大型前端应用拆分为多个小型、独立的应用的场景,以实现应用的分治和更好的可扩展性。例如,在电商平台、企业管理系统或复杂的Web应用中,可以使用Single-spa来构建微前端架构,提高开发效率和应用的可维护性。

综上所述,Single-spa是一个功能强大且灵活的微前端框架,它允许开发者将多个单页面应用聚合为一个整体应用,并在同一页面上使用不同的前端框架。通过遵循最佳实践和注意其优缺点,开发者可以更好地利用Single-spa来构建高效、可扩展的Web应用。

什么是 qiankun

qiankun是一种微前端框架,旨在帮助开发者构建生产可用的微前端架构系统。以下是对qiankun的详细介绍:

一、概述

qiankun基于single-spa进行二次开发,将微服务的理念应用于浏览器端,即将Web应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。各个前端应用还可以独立运行、独立开发、独立部署。

二、特点与优势

  1. 技术兼容性好:qiankun支持多种技术栈,如React、Vue、Angular等,使得主应用和子应用可以基于不同的技术架构进行开发。
  2. 接入方式简单:通过HTML entry的接入方式,使得微应用的接入像使用iframe一样简单。
  3. 耦合性低:各个团队可以独立开发、独立部署微应用,互不干扰,降低了系统之间的耦合性。
  4. 可维护性和扩展性好:微前端架构便于局部升级和增量升级,提高了系统的可维护性和扩展性。
  5. JS沙箱:确保微应用之间的全局变量/事件不冲突,提高了系统的稳定性。

三、核心功能

  1. 应用注册:主应用可以通过registerMicroApps方法注册多个子应用,每个子应用需要指定名称、入口、容器和激活规则等信息。
  2. 应用加载:当浏览器的URL发生变化时,qiankun会自动触发匹配逻辑,将匹配上的微应用插入到指定的容器中,并依次调用微应用暴露出的生命周期钩子。
  3. 应用通信:qiankun提供了一套完整的通信机制,允许不同的子应用之间进行跨框架和跨域的通信和交互。
  4. 资源预加载:在浏览器空闲时间预加载未打开的微应用资源,加速微应用的打开速度。

四、使用场景

qiankun适用于以下场景:

  1. 大型Web应用:将大型Web应用拆分成多个小型前端应用,便于独立开发、测试和部署。
  2. 多团队协作:多个团队共同开发一个Web应用时,可以使用qiankun将各自的应用集成在一起,实现协同工作。
  3. 渐进式重构:在面对复杂场景时,可以使用qiankun实现渐进式重构,逐步将旧系统升级为新的微前端架构。

五、注意事项

  1. 样式隔离:为了避免微应用之间的样式冲突,qiankun提供了样式隔离的功能。开发者需要确保子应用的样式不会影响到其他子应用或主应用。
  2. 沙箱环境:qiankun通过沙箱环境来隔离微应用之间的全局变量和事件。开发者需要注意在沙箱环境中运行子应用时可能出现的兼容性问题。
  3. 路由管理:在使用qiankun时,需要注意子应用的路由管理。如果子应用使用了hash路由或history路由,需要在主应用中进行相应的配置和适配。

六、总结

qiankun作为一种微前端框架,具有技术兼容性好、接入方式简单、耦合性低、可维护性和扩展性好等优势。它适用于大型Web应用、多团队协作和渐进式重构等场景。在使用qiankun时,需要注意样式隔离、沙箱环境和路由管理等问题。

Web Components

Web Components是一套允许开发者创建可重用自定义元素的技术,这些自定义元素具有封装的功能,可以独立于其他代码运行。以下是关于Web Components的详细介绍:

一、定义与背景

Web Components是由谷歌推动的浏览器原生组件技术,旨在解决代码复用、组件自定义以及复用管理等问题。它允许开发者创建自己的HTML标签,并在这些标签中使用自定义的JavaScript和CSS。Web Components技术通过标准化非侵入的方式封装一个组件,每个组件能组织好它自身的HTML结构、CSS样式、JavaScript代码,从而实现了代码的高度封装和复用。

二、核心组件与技术

Web Components主要包含以下四个核心技术:

  1. Custom Elements:允许开发者定义新的HTML元素,这些元素可以像原生HTML元素一样在页面中使用。
  2. Shadow DOM:提供了一种封装元素内部结构和样式的机制,使得元素的内部实现与外部代码相隔离。通过Shadow DOM,开发者可以在一个完全独立于主文档的DOM树中创建和管理元素的内容。
  3. HTML Templates:允许开发者定义可重用的HTML片段,这些片段可以在需要时通过JavaScript动态地插入到页面中。
  4. Slots:提供了一种机制,允许开发者在自定义元素中定义插槽(slots),以便将外部内容插入到元素的特定位置。

三、优势与特点

  1. 可重用性:Web Components允许开发者创建可重用的自定义元素,这些元素可以在多个页面或组件中使用,从而提高开发效率和代码的可维护性。
  2. 封装性:通过Shadow DOM和Custom Elements等技术,Web Components实现了对元素内部结构和样式的封装,使得不同组件之间的代码不会相互干扰。
  3. 互操作性:Web Components创建的组件可以跨框架使用,无需依赖特定的前端框架或库。这使得开发者可以在不同的技术栈中重用相同的组件。
  4. 可扩展性:Web Components提供了丰富的API和机制,允许开发者对组件进行扩展和自定义。

四、应用场景

Web Components可以广泛应用于各种类型的项目中,包括但不限于:

  1. Web应用:用于构建复杂的Web应用,如单页应用(SPA)或动态网站。通过Web Components,开发者可以创建可复用的自定义元素,提高开发效率和代码的可维护性。
  2. 桌面应用:结合像Electron这样的框架,Web Components可以用于构建跨平台的桌面应用。
  3. 移动应用:通过像Apache Cordova这样的框架,Web Components可以打包成移动应用,并在多个平台上运行。
  4. 物联网应用:Web Components可以创建可复用的自定义元素,这些元素可以在多个IoT设备或网关上使用。
  5. 数据可视化:用于构建数据可视化工具,如图表、仪表板等。

五、使用方法

使用Web Components创建自定义元素通常包括以下步骤:

  1. 定义自定义元素:使用JavaScript定义一个类,该类继承自HTMLElement。在类中实现元素的自定义行为。
  2. 注册自定义元素:使用window.customElements.define()方法将自定义元素与定义的类关联起来。
  3. 创建元素模板:使用<template>标签定义元素的HTML结构。如果需要,还可以使用<slot>标签定义插槽,以便将外部内容插入到元素的特定位置。
  4. 附加Shadow DOM:在自定义元素的构造函数中使用attachShadow()方法创建一个Shadow DOM,并将模板内容克隆到Shadow DOM中。
  5. 在页面中使用自定义元素:像使用原生HTML元素一样,在HTML代码中使用自定义元素标签。

六、注意事项

  1. 兼容性:虽然Web Components已经得到了广泛的支持,但在某些旧版浏览器中可能仍然存在兼容性问题。因此,在使用Web Components时,需要注意浏览器的兼容性。
  2. 样式隔离:虽然Shadow DOM提供了样式隔离的机制,但在某些情况下,仍然需要注意避免样式冲突。例如,当使用全局样式表时,需要确保样式不会影响到其他组件或页面。
  3. 性能优化:在使用Web Components时,需要注意性能优化。例如,可以通过延迟加载组件、减少DOM操作等方式来提高应用的性能。

综上所述,Web Components是一种强大的技术,允许开发者创建可重用、可维护、可扩展的自定义元素。它广泛应用于各种类型的项目中,为前端开发提供了更多的工具和技术选择。

相关文章:

【前端知识】简单讲讲什么是微前端

微前端介绍 一、定义二、背景三、核心思想四、基本要素五、核心价值六、实现方式七、应用场景八、挑战与解决方案 什么是single-spa一、核心特点二、核心原理三、应用加载流程四、最佳实践五、优缺点六、应用场景 什么是 qiankun一、概述二、特点与优势三、核心功能四、使用场景…...

AWS IAM

一、介绍 1、简介 AWS Identity and Access Management (IAM) 是 Amazon Web Services 提供的一项服务,用于管理 AWS 资源的访问权限。通过 IAM,可以安全地控制用户、组和角色对 AWS 服务和资源的访问权限。IAM 是 AWS 安全模型的核心组成部分,确保只有经过授权的用户和应…...

丹摩|丹摩助力selenium实现大麦网抢票

丹摩&#xff5c;丹摩助力selenium实现大麦网抢票 声明&#xff1a;非广告&#xff0c;为用户体验 1.引言 在人工智能飞速发展的今天&#xff0c;丹摩智算平台&#xff08;DAMODEL&#xff09;以其卓越的AI算力服务脱颖而出&#xff0c;为开发者提供了一个简化AI开发流程的强…...

基于Qt/C++/Opencv实现的一个视频中二维码解析软件

本文详细讲解了如何利用 Qt 和 OpenCV 实现一个可从视频和图片中检测二维码的软件。代码实现了视频解码、多线程处理和界面更新等功能&#xff0c;是一个典型的跨线程图像处理项目。以下分模块对代码进行解析。 一、项目的整体结构 项目分为以下几部分&#xff1a; 主窗口 (M…...

智慧理财项目测试文档

目录 幕布思维导图链接&#xff1a;https://www.mubu.com/doc/6xk3c7DzgFs学习链接&#xff1a;https://www.bilibili.com/video/BV15J4m147vZ/?spm_id_from333.999.0.0&vd_source078d5d025b9cb472d70d8fda1a7dc5a6智慧理财项目测试文档项目介绍项目基本信息项目业务特性系…...

R | 统一栅格数据的坐标系、分辨率和行列号

各位同学&#xff0c;在做相关性等分析时&#xff0c;经常会遇到各栅格数据间的行列号不统一等问题&#xff0c;下面的代码能直接解决这类麻烦。以某个栅格数据的坐标系、分辨率和行列号为准&#xff0c;统一文件夹内所有栅格并输出到新的文件夹。 代码只需要更改输入输出和ti…...

C++学习——编译的过程

编译的过程——预处理 引言预处理包含头文件宏定义指令条件编译 编译、链接 引言 C程序编译的过程&#xff1a;预处理 -> 编译&#xff08;优化、汇编&#xff09;-> 链接 编译和链接的内容可以查阅这篇文章&#xff08;点击查看&#xff09; 预处理 编译预处理是指&a…...

当你要改文件 但是原来的文件内容又不能丢失的时候,拷贝一份(备注原来的),然后添加后缀:.bak

当你要改文件 但是原来的文件内容又不能丢失的时候&#xff0c;拷贝一份&#xff08;备注原来的&#xff09;&#xff0c;然后添加后缀&#xff1a;.bak &#xff01;&#xff01;&#xff01;文件不要直接删除&#xff0c;若你以后要还原的话会找不到...

MATLAB神经网络(五)——R-CNN视觉检测

5.1 目标分类、检测与分割 在计算机视觉领域&#xff0c;目标分类、检测与分割是常用计数。三者的联系与区分又在哪呢&#xff1f;目标分类是解决图像中的物体是什么的问题&#xff1b;目标检测是解决图像中的物体是什么&#xff0c;在哪里的问题&#xff1b;目标分割时将目标和…...

mock.js:定义、应用场景、安装、配置、使用

前言&#xff1a;什么是mock.js&#xff1f; 作为一个前端程序员&#xff0c;没有mockjs你不感觉很被动吗&#xff1f;你不感觉你的命脉被后端那个男人掌握了吗&#xff1f;所以&#xff0c;我命由我不由天&#xff01;学学mock.js吧&#xff01; mock.js 是一个用于生成随机…...

【GAT】 代码详解 (1) 运行方法【pytorch】可运行版本

GRAPH ATTENTION NETWORKS 代码详解 前言0.引言1. 环境配置2. 代码的运行2.1 报错处理2.2 运行结果展示 3.总结 前言 在前文中&#xff0c;我们已经深入探讨了图卷积神经网络和图注意力网络的理论基础。还没看的同学点这里补习下。接下来&#xff0c;将开启一个新的阶段&#…...

Transformer中的Self-Attention机制如何自然地适应于目标检测任务

Transformer中的Self-Attention机制如何自然地适应于目标检测任务&#xff1a; 特征图的降维与重塑 首先&#xff0c;Backbone&#xff08;如ResNet、VGG等&#xff09;会输出一个特征图&#xff0c;这个特征图通常具有较高的通道数、高度和宽度&#xff08;例如CHW&#xff…...

2411rust,1.75.0

原文 Rust团队很高兴地声明推出Rust的新版本1.75.0. 如果你rustup安装了以前版本的Rust,你可如下取1.75.0: $ rustup update stable1.75.0稳定版中的功能 async fn和特征中的返回位置impl Trait. 指针字节偏移API 原始指针(*const T和*mutT)过去主要支持,T为单位的操作.如…...

远程办公新宠:分享8款知识共享软件

远程办公模式下&#xff0c;知识共享软件成为了团队协作和沟通的重要工具。以下是8款备受推崇的知识共享软件&#xff1a; 1、HelpLook AI知识库 简介&#xff1a;HelpLook是一款快速搭建AI知识库的系统&#xff0c;具备强大功能&#xff0c;如快速精准的知识检索、灵活定制的…...

3.9MayBeSomeAssembly

就是先从数组里&#xff0c;乘4得到正确地址 32&#xff08;&s3),s3是基址&#xff0c;32是偏移量&#xff0c;就是先从数组里取出数到临时寄存器&#xff0c;然后再在临时寄存器上加上变量&#xff0c;最后再把临时寄存器上的变量存到数组里&#xff0c;偏移量&#xff0…...

i春秋-签到题

练习平台地址 竞赛中心 题目描述 题目内容 点击GUESS后会有辨识细菌的选择题 全部完成后会有弹窗提示 输入nickname后提示获得flag F12检查 元素中没有发现信息 检查后发现flag在控制台中 flag flag{663a5c95-3050-4c3a-bb6e-bc4f2fb6c32e} 注意事项 flag不一定要在元素中找&a…...

TypeScript 中扩展现有模块的用法

declare module 是 TypeScript 中用于扩展现有模块的特性。它允许开发者在已有模块的基础上&#xff0c;添加新的功能&#xff08;比如扩展接口、添加类型声明等&#xff09;。通过 declare module&#xff0c;可以将额外的声明合并到原模块中。以下是用法详解&#xff1a; 用…...

【报错记录】解决Termux中pulseaudio启动报错,报:E: [pulseaudio] main.c: Daemon startup failed.

前言 在尝试使用Termux-X11启动Minecraft过程中&#xff0c;不知道怎么回事原本好好的pulseaudio居然无法启动了&#xff0c;一直在报&#xff1a; E: [pulseaudio] main.c: Daemon startup failed. 重装了好几次也没用解决方案如下。 排除重复启动 如果pulseaudio之前已经…...

Java list

在 Java 中&#xff0c;链表&#xff08;LinkedList&#xff09;是一个非常重要的数据结构&#xff0c;它可以动态地插入和删除元素&#xff0c;因此比数组更灵活。Java 提供了 LinkedList 类&#xff0c;该类实现了 List 接口&#xff0c;并且是基于双向链表实现的&#xff0c…...

MAC借助终端上传jar包到云服务器

前提&#xff1a;保证工程本地已打包完成&#xff1a;图中路径即为项目的target目录下已准备好的jar包 第一步&#xff1a;打开终端&#xff08;先不要连接自己的服务器&#xff09;&#xff0c;输入下面的上传命令&#xff1a; scp /path/to/local/app.jar username192.168.1…...

对原jar包解压后修改原class文件后重新打包为jar

文章目录 背景三种修改方式1.POM中移除原jar中依赖的历史版本2.原jar它不使用pom依赖而是直接放在源码中再编译使用JarEditor 插件对源码进行修改(推荐)使用java-decompiler反编译后修改源码覆盖原class&#xff08;不好用-不推荐直接跳过&#xff09;提醒 参考资料-推荐阅读拓…...

YY币支付系统改源码(改良版本)

Nginx &#xff1a;1.20.1&#xff08;版本都可以&#xff09; MySQL&#xff1a;5.6.50&#xff08;兼容该版本其他不知道&#xff09; 简单优化服务器&#xff08;可不安装&#xff0c;看要求&#xff09; PHP安装扩展名称&#xff1a;fileinfo | opcache | imagemagick …...

【Swift】类型标注、类型安全和类型推断

文章目录 类型标注类型安全和类型推断什么是类型安全和类型推断为什么说Swift是一门安全语言类型安全带来的好处 类型标注 当你声明常量或者变量的时候可以加上类型标注&#xff08;type annotation&#xff09;&#xff0c;说明常量或者变量中要存储的值的类型。如果要添加类…...

06 —— Webpack优化—压缩过程

css代码提取后想要压缩 —— 使用css-minimizer-webpack-plugin插件 下载 css-minimizer-webpack-plugin 本地软件包 npm install css-minimizer-webpack-plugin --save-dev 配置 webpack.config.js 让webpack拥有该功能 const CssMinimizerPlugin require(css-minimizer-…...

uniapp页面样式和布局和nvue教程详解

uniapp页面样式和布局和nvue教程 尺寸单位 uni-app 支持的通用 css 单位包括 px、rpx px 即屏幕像素。rpx 即响应式px&#xff0c;一种根据屏幕宽度自适应的动态单位。以750宽的屏幕为基准&#xff0c;750rpx恰好为屏幕宽度。屏幕变宽&#xff0c;rpx 实际显示效果会等比放大…...

单条推理转批量推理prompt

为了将单条推理程序改为批量推理程序&#xff0c;并实现您的要求&#xff0c;我们需要进行以下步骤&#xff1a; 输入的图片和视频都是随机从视频文件夹、图片文件夹挑选&#xff0c;组成输入对&#xff1a; 需要编写一个函数来读取指定文件夹中的所有图片和视频文件。 使用随…...

网络安全审计概述与分类

目录 网络安全审计概述等保五个级别对审计要求网络安全审计系统组成网络安全审计系统类型 网络安全审计概述 4A分别是认证、授权、账号、审计 网络安全审计是指对网络信息系统的安全相关活动信息进行获取、记录、存储分析和利用的工作。 网络安全审计的作用在于建立“事后”…...

【已解决】“EndNote could not connect to the online sync service”问题的解决

本人不止一次在使用EndNote软件时遇到过“EndNote could not connect to the online sync service”这个问题。 过去遇到这个问题都是用这个方法来解决&#xff1a; 这个方法虽然能解决&#xff0c;但工程量太大&#xff0c;每次做完得歇半天身体才能缓过来。 后来再遇到该问…...

数据脱敏工具:基于 FFmpeg 的视频批量裁剪

在数据处理和隐私保护领域&#xff0c;数据脱敏是一项重要的任务&#xff0c;尤其是在处理包含敏感信息的视频数据时。本文介绍了一种使用 Python 和 FFmpeg 实现的视频批量裁剪工具&#xff0c;该工具可以将视频中的敏感区域裁剪掉&#xff0c;从而实现数据脱敏。通过使用 PyI…...

Debezium日常分享系列之:Debezium3版本Debezium connector for JDBC

Debezium日常分享系列之&#xff1a;Debezium3版本Debezium connector for JDBC 概述JDBC连接器的工作原理消费复杂的Debezium变更事件至少一次的传递多个任务数据和列类型映射主键处理删除模式幂等写入模式演化引用和大小写敏感性连接空闲超时数据类型映射部署Debezium JDBC连…...