闲庭信步聊前端 - 见微知著微前端
笔者初次接触微前端在2020年7月,是从同事的口中听说的。虽然不算是一个早期接触者,但是也确实的推动和跟进了内部某大型项目的开发和落地。也希望能把一些走过的坑和一些思考分享给大家。文内所指应用均为PC网页应用。此文不进行移动端M页讨论。
当时网上信息也不是很多,百度搜索微前端的结果也寥寥无几,乾坤,飞冰占据了大部分篇幅,还有的就是美团的内部技术沙龙。谁想半年后微前端一词越炒越烈,各种解决方案和技术实现如雨后春笋,也逐渐形成了百家争鸣的态势。
什么是微前端
网上介绍微前端的文章不胜枚举,大多源引自 Micro Frontends这篇文章。文内详细的介绍了微前端的思想。也推广了一种微前端的实现方案( Web Components ),随着时间的推移和笔者对微前端的实践,对微前端这一概念也有了一些自己的认知,希望可以帮助大家更好的理解微前端。
何为微前端,分而治之然同台而坐也。微者,散也。详细来说,即微前端是一种架构,是将整个巨石应用拆分成多个可独立开发、部署、上线,运行的小型应用(子应用),对外暴露一个控制台应用(父应用)来统一管理各个子应用的运行状态,多个子应用间在用户无感情况下往复切换。
微前端一词第一次出现是在工作思维(ThoughtWorks)2016年的技术雷达( Technology Radar )中。但是笔者认为微前端的思想在更早就已经被频繁的应用于巨石应用上了。回望前后端还未分离的时代,还在用jsp混写java和HTML时,当时一个页面就是一个html文档,以index.html文件为入口,通过锚点标签(<a/>
)将页面连接起来,页面以功能为指标,分别隶属于不同的项目中,项目间互不影响,可分布独立上线。笔者认为这就是最早期的微前端。随着SPA应用的兴起,这一早期的微前端思想也慢慢的被埋没。
为什么要用微前端
现在,SPA应用已经无法满足现代网页应用的逻辑复杂度和功能的多样性了。试想一个几M的入口文件,在首开时请求无数张图片和css文件,这期间的网络耗时和浏览器渲染时间都早已远远达不到用户预期了。
虽然也出现了诸如懒加载,精灵图,文件压缩,CDN等数不胜数的解决方案,但本质还是隶属于同一个巨石应用,这也导致对应用的任何改动都要重新打包整个项目,即使开启了happypack多线程打包,其工程效率也是不敢恭维。相信有过大型项目维护经验的读者也能体会到那种心在飞而身不动的那种无力感。
另一方面,今年前端技术栈爆炸式增长,早已不是手握jQuery,走遍天下都不怕的时代了。vue已经到了3.0,react的版本更是到了17这个恐怖数字。angular国内虽然用的不多,但是也是三大框架之一,其版本也是早早到了11。即使在各个版本向下兼容的情况下,试问有几个人敢保证项目在基础框架不被时代抛弃的前提下。长期稳定运行。这些人中又有几个人经历过angular2的重写升级和react的hooks重构(虽然react不建议这样)。
所以长远来看,将一个巨石应用拆分成多个小型应用。以达到项目可稳定升级迭代还是很具有可行性的。基本原理的流程如下:
现代应用痛点:
项目中的组件和功能模块会越来越多,导致整个项目的打包速度变慢;
因为文件夹的数量会随着功能模块的增多而增多,查找代码会变得越来越慢;
如果只改动其中一个模块的情况,需要把整个项目重新打包上线;
目录层级和模块层级过深而且文件又多,定位文件会越来越慢;
所有的项目都只能使用同一技术框架如:react、vue等;
微前端优势:
技术栈无关:主框架不限制接入应用的技术栈,微应用完全具备自主权;
独立开发、独立部署:微应用的 git 仓库独立,微应用部署完成后父应用打开的页面同步更新;
增量升级:在面对各种复杂的场景时,我们通常很难对一个已存在的系统做全量的技术栈升级或者重构,而微前端可以让我们可以做到很好的渐进式重构;
独立运行:每个项目都可以作为一个完整的单独项目去运行,它可能只是一个大后台项目中的某个功能模块,然后所有微应用组合到一起就是 PM 想要的完整功能;
微前端技术方案
路由分发式微前端
顾名思义就是通过路由(如 nginx 配置)将不同的业务分发到不同的应用上,这也是采用较多而且做简单的“微前端”方法,但是这种方式其实更像是将多个应用聚合起来了,将不同的前端应用拼凑到一起让他们看起来像是一个整体。
iFrame
iframe 是浏览器提供的一个 html 标签,iframe 元素会创建包含另一个页面的内联框架(即行内框架)。这个标签可以有效的把完成“微前端”,但是如果使用就要考虑两件事情:
应用的加载问题:父应用何时去加载和卸载微应用,在页面切换时使用怎么的效果或者动画让整个页面看起来更加自然更容易接受;
应用的通讯问题:通过 HTMLIFrameElement.contentWindow 去获取 iFrame 元素的 window 对象是一种更简化的方法,但是这就需要定义一套通讯规范:事件的key采用什么形式怎么起名,从什么时候开始监听时间等等问题;
Web Components
Web Components 是一套不同的技术,允许您创建可重用的定制元素(它们的功能封装在您的代码之外)并且在您的web应用中使用它们。它主要有三项主要技术组成,它们可以一起使用来创建封装功能的定制元素,可以在你喜欢的任何地方重用,不必担心代码冲突。
Custom elements:一组JavaScript API,允许您定义custom elements及其行为,然后可以在您的用户界面中按照需要使用它们。
Shadow DOM:一组JavaScript API,用于将封装的“影子”DOM树附加到元素(与主文档DOM分开呈现)并控制其关联的功能。通过这种方式,您可以保持元素的功能私有,这样它们就可以被脚本化和样式化,而不用担心与文档的其他部分发生冲突。
HTML templates:
<template>
和<slot>
元素使您可以编写不在呈现页面中显示的标记模板。然后它们可以作为自定义元素结构的基础被多次重用。
微前端框架选择
Mooa
Mooa 是一个为 Angular 服务的微前端框架,它是一个基于 single-spa 的微前端解决方案,但是他的项目服务于 Angular,就直接pass这种框架了,有兴趣的同学可以自行去研究一下。
飞冰
飞冰是一个面向大型系统的微前端解决方案,它可以保证一个系统的操作体验基础上,实现各个微应用的独立开发和发版,通过 icestark 管理微应用的注册和渲染,正整个系统彻底解耦。(这是我们的候选之一)
飞冰的官网地址:https://ice.work/docs/icestark/about
qiankun
qiankun 是一个 single-spa 的微前端实现库,qiankun 的设计理念一个是简单,另一个就是解耦/技术栈无关:
简单:由于主应用微应用都能做到技术栈无关,qiankun 对于用户而言只是一个类似 jQuery 的库,你需要调用几个 qiankun 的 API 即可完成应用的微前端改造。同时由于 qiankun 的 HTML entry 及沙箱的设计,使得微应用的接入像使用 iframe 一样简单;
解耦/技术栈无关:微前端的核心目标是将巨石应用拆解成若干可以自治的松耦合微应用,而 qiankun 的诸多设计均是秉持这一原则,如 HTML entry、沙箱、应用间通信等。这样才能确保微应用真正具备 独立开发、独立运行 的能力;
因为他的介绍和理念就很突出两个字,简单所以他就成为了我们的主角,但是呢还是要经过一番对比的。
qiankun的官网地址:https://qiankun.umijs.org/zh
qiankun与飞冰的对比
下面就列出以下对他们的大概对比,截止至2020-12-03
飞冰
git:星星数 943;
js 隔离:沙箱;
样式隔离:使用 CSS Modules 方案管理样式;(正常尝试使用 Shadow Dom 的方案)
打包相关:强制依赖 ice.js,及应用只能使用 react,打包也要使用ice.js 框架打包;
更新周期:1周 ~ 一个月;
qiankun
git:星星数 7.8k;
js 隔离:沙箱;
样式隔离:Shadow Dom;
打包相关:依赖于 qiankun,官方推荐使用 parcel 打包,但是可以使用 webpack;
更新周期:1天 ~ 一周;
经过上述的整理和查看后,我们内部决定使用qiankun,原因有很多,因为我们的项目对打包结果有要求,使用 parcel 满足不了我们的要求,所以要用 webpack 来打包自己想要的结果,样式隔离相比较 飞冰 更成熟,星星数高等等。
qiankun实际使用的介绍和问题记录
框架选择完毕后我们就开始搭建项目,搭建了两种不同的父应用(也可称之为基应用),一种是 react 的一种 vue 的。之后用了 demo 提供的微应用做了尝试,然后打算统一下代码最后决定后台项目都是用 react 来写,所以最后切换为 react 项目。
在研究之中得到一个消息,咱们的上线打包结果有限制的,必须要以xxx什么形式的才可以上线,然后还有一堆配置,因为时间紧迫所以只能被迫开始使用公司的搭建的 zz-react-cli 来生成 react 项目,所以最后父应用和微应用都是使用的 zz-react-cli 生成的。(这就是我们内部问题了,就不多介绍了),下面开始给大家介绍使用和遇到的问题以及怎么解决的。
基本项目结构是这样的,包含主子应用,如下图:
qiankun基本使用
项目框架
父应用和微应用都是用 react 官方脚手架生成,然后下面再讲对其修改和配置。
父应用的改造
父应用要安装两个依赖包,一个 history
一个 qiankun
,然后就是对 index.js
的修改:
import { registerMicroApps, start } from 'qiankun';ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,document.getElementById('root')
);registerMicroApps([{name: 'app1',entry: '//localhost:3002/',container: '#container',activeRule: '/app1',props: {name: 'kuitos',}}],{beforeLoad: app => console.log('before load', app.name),beforeMount: [app => console.log('before mount', app.name),],},
);start();reportWebVitals();
然后就是对 app.jsx
的修改:
import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
function App() {// 子项的点击const onMenuClick = (path) => {history.push(path);};return (<div className="layout"><header className="layout-header"><img src={logo} className="layout-logo" alt="logo" /><div className="layout-link" onClick={() => { onMenuClick('/app1'); }}>点击加载app1微应用页面</div></header><div className="layout-main" id="container">app1微应用展示区域</div></div>);
}
微应用的改造
微应用什么额外的 npm 包都不需要安装,下面是 index.js 的修改:
const initAPP = container => {ReactDOM.render(<React.StrictMode><App /></React.StrictMode>,container?container.querySelector('#root'):document.querySelector('#root'))
}//全局变量来判断环境,独立运行时if(!window.__POWERED_BY_QIANKUN__){initAPP()}
/*** bootstrap 只会在微应用初始化的时候调用一次,下次微应用重新进入时会直接调用 mount 钩子,不会再重复触发 bootstrap。* 通常我们可以在这里做一些全局变量的初始化,比如不会在 unmount 阶段被销毁的应用级别的缓存等。*/
export async function bootstrap() {console.log('react app bootstraped');
}
/*** 应用每次进入都会调用 mount 方法,通常我们在这里触发应用的渲染方法*/
export async function mount(props) {const {container}=propsinitAPP(container)
}
/*** 应用每次 切出/卸载 会调用的方法,通常在这里我们会卸载微应用的应用实例*/
export async function unmount(props) {ReactDOM.unmountComponentAtNode(props.container ? props.container.querySelector('#root') : document.getElementById('root'));
}
/*** 可选生命周期钩子,仅使用 loadMicroApp 方式加载微应用时生效*/
export async function update(props) {console.log('update props', props);
}
reportWebVitals();
这样就是基本配置,但是这样配置并没有完全ok,中间你会碰到各种各样的问题,然后碰到问题请不要着急啦,请看下面的问题记录找到相应的解决办法。
到了这里,也许你会问,网上类似资料不是有很多么,随便搭一个demo应该很容易跑出来。不过,下面说的就是基于这套架构,我们遇到的问题了,真正的干货,快仔细看!
qiankun 问题记录
无法识别生命周期钩子问题
qiankun 抛出一个 Application died in status LOADING_SOURCE_CODE: You need to export the functional lifecycles in xxx entry
的错误,这个问题是自己的项目或者官方项目引入 qiankun 是会抛出的错误,微应用的 webpack 打包部分就要加上以下代码:
const packageName = require('../package.json').name;output: {// 这里改成跟主应用中注册的一致library: 'brokenSubApp',libraryTarget: 'umd',jsonpFunction: `webpackJsonp_${packageName}`,
},
具体原因是 qiankun 抛出这个错误是因为无法从微应用的 entry js 中识别出其导出的生命周期钩子。(官方有介绍)
请求资源跨问题
项目开始启动的初始阶段因为没有一个固定域名,但是开发还要允许跨域,这时候要怎么解决呢:
devServer: {headers: {'Access-Control-Allow-Origin': '*',}
}
在微应用的 webpack 的 devServer 中加上 'Access-Control-Allow-Origin': '*' 即可。父应用不需要加,因为是父应用去加载微应用的资源。
还有一种方法就是如果你有代理工具,比如说我们使用的 whistle。
127.0.0.1:8085 a.zhuanzhuan.com/manager
127.0.0.1:8084 a.zhuanzhuan.com
把父应用和微应用的资源代理到同一个域名下也可以。
微应用刷新404问题
将父应用与微应用的路由模式切换为同样的路由模式,微应用以 browserHistory 为例:
<!-- config 设置 -->
import { createBrowserHistory } from 'history';
const history = createBrowserHistory();<Provider store={store}><ConnectedRouter history={history}><div className="rooter-wrap"><Route routeList={routeList}/></div></ConnectedRouter>
</Provider><!-- 另一个页面的配置 -->
<BrowserRouterbasename = {window.__POWERED_BY_QIANKUN__ ? '/qc_xxx' : '/hunter_qc_xxx'}forceRefresh = {!window.__POWERED_BY_QIANKUN__}
>
每个人或者公司的项目都不一样,这个具体要看各自的项目代码去更新一些东西。(如果有使用的话自己要研究下这里,否则就会造成刷新之后 404 的问题)
父应用和微应用的菜单问题
因为微应用可以单独运行,所以微应用有一套自己的菜单导航逻辑,然后再父应用时要把所有的菜单做整合。那么这就要延伸出一个问题了,怎么样去对所有的微应用的菜单做整合呢,我们想了三种思路:
在配置中心配置一套菜单导航,然后父应用请求配置中心拿到导航再渲染。微应用内部自己维护路由:
优点:本地开发方便;
缺点:维护两套路由,配置中心一套和本地一套;
父应用和微应用都在配置中心,这样子应用单独开发时也依赖于外部资源,可能会影响开发效率:
优点:维护一套路由,有现在的配置中心接口,不需要单独开发;
缺点:微应用单独开发时不方便,还要维护不同环境的不同路由。微应用和父应用都要拉取整套路由配置,然后子应用要过滤并筛选出自己的路由;
微应用打包时,把导航打包出一份单独的
.json
文件,然后通过 nginx 配置到某个地址,通过地址去访问这个文件内容,父应用请求该文件然后做整合,如下图:
优点:本地开发方便,不需要过多的配置;
缺点:需要单独开发这个功能;父应用要拉去多个子应用但是会影响首屏渲染速度;
结合上面三种方案,我们内部讨论后,决定用第三方方式,经过开发和实际上线运行发现其完全可行
下面介绍下怎么打包:
/*** 需要一个 npm 包:generate-json-webpack-plugin* webpack中写配置*/const GenerateJsonPlugin = require('generate-json-webpack-plugin');
const menuList = require('../src/router/menuData.js'); // 路由表
// 需要满足封装请求的格式
const menuConfig = {code: 0,msg: '',data: menuList
};/*** 省略中间代码...*//*** 在 webpack 的 build 中增加 plugins:* 生成指定的json文件*/plugins: [// 生成指定的json文件new GenerateJsonPlugin('webserver/config/menu.json', menuConfig),],// 之后在通过 nginx 配置一个单独的配置去指向这个文件
这样就解决了父应用和微应用的菜单问题。
子应用间同步数据
在真正的开发场景中,总会遇到复杂且超出预期的需求。子应用间同步数据就是其中之一。理论上讲,如果子应用之间足够独立,业务逻辑足够分离。是不会存在子应用间共用数据的情况的。所有数据由父应用分发即可,这也是qiankun的理念。详见issue412。但是在实践过程中,确实的存在这类需求。但是同时笔者也建议尽量减少这类需求,因为可能会导致数据流的混乱造成难以解决的bug。下面介绍详细的解决方案
父应用使用proxy创建全局store,完整代码如下。
const GlobalStore = (function () {if (window.__hunterMfeBase__) {return window.__hunterMfeBase__;}// 初始化storeconst store = Object.assign(Object.create(null), {/*** 赋值变量* @param prop 属性名* @param value 属性值* @param options* {* readOnly: Boolean 只读* }*/setValue(prop, value, options = {}) {const { readOnly } = options;// 非只读属性-直接赋值if (!(readOnly === true)) {this[prop] = value;return;}// 只读属性-将值代理到__value__上this[prop] = {value,readOnly};},/*** 初始化全局变量 (用于在父应用上初始化全局变量)* @param global*/init(global = {}) {Object.keys(global).forEach(item => (this[item] = global[item]));}});// 初始化拦截器const handler = {// 拦截取值操作get(target, prop) {// const { activeApp = 'base' } = store;// console.log(`[${activeApp}] get`, { activeApp, target, prop });const primitive = target[prop]; // 获取原始值// 只读属性-返回代理的 __value__if ({}.toString.call(primitive) === '[object Object]' && primitive.readOnly === true) {return primitive.__value__;}// 非只读属性-直接返回原始值return primitive;},// 拦截赋值操作set(target, prop, value) {// const { activeApp = 'base' } = store;// console.log(`[${activeApp}] set`, { activeApp, target, prop, value });const oldVal = target[prop]; // 读取原始值// 存在旧值且为只读属性-不可进行更改值操作if ({}.toString.call(oldVal) === '[object Object]' && oldVal.readOnly === true) {console.error(`GlobalStore.${prop}是只读属性,无法重复赋值`);return true;}// 新值存在只读属性-数据代理到__value__if ({}.toString.call(value) === '[object Object]' && value.readOnly === true) {delete value.readOnly;const proxyVal = {__value__: value.value,readOnly: true,};target[prop] = proxyVal;return true;}// 非只读属性-直接赋值target[prop] = value;return true;}};window.__hunterMfeBase__ = new Proxy(store, handler);return window.__hunterMfeBase__;
}());export default GlobalStore;
可在父应用初始化时为全局store赋值
import GlobalStore from '@store';GlobalStore.init({// 常规属性userInfo:{},// 只读属性permissionInfo:{value: {},readOnly: true},
});// 手动添加属性
GlobalStore.other = '';
// 手动添加只读属性
GlobalStore.setValue({value: '',readOnly: true
})
子应用中引用全局store
const GlobalStore = (function () {return window.__hunterMfeBase__ || {};
}());export default GlobalStore;
子应用读取全局store中数据
import GlobalStore from '@/store/globalStore';
console.log(GlobalStore.userInfo);
子应用中设置全局store中的数据
import GlobalStore from '@/store/globalStore';//...res为接口请求结果
const { userInfo = {}, permissionInfo = {} } = res;
GlobalStore.userInfo = userInfo;
此时所有子应用中获取的userInfo
都是更新过的。
至此本期微前端的所有内容已经分享完了,大家有什么问题可以再文下留言哦。我们会酌情考虑继续分享的。
如若内容造成侵权/违法违规/事实不符,请联系编程学习网邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
相关文章
- 微前端介绍
作者|王下邀月熊编辑|覃云本文节选自 Web 开发导论 / 微前端与大前端,着眼阐述了微服务与微前端的设计理念以及微服务的潜在可行方案,需要致敬的是,本文的很多考虑借鉴了 Phodal 关于微前端的系列讨论以及 Web Archite…...
2024/4/20 16:42:25 - 微前端设计理念与实践
微前端设计理念与实践 本文节选自 Web 开发导论 / 微前端与大前端,着眼阐述了微服务与微前端的设计理念以及微服务的潜在可行方案,需要致敬的是,本文的很多考虑借鉴了 Phodal 关于微前端的系列讨论以及 Web Architecture Links 中声明的其他文…...
2024/4/25 13:09:21 - 微前端的设计理念与实践初探
? 本文节选自 Web 开发导论/微前端与大前端,着眼阐述了微服务与微前端的设计理念以及微服务的潜在可行方案,需要致敬的是,本文的很多考虑借鉴了 Phodal 关于微前端的系列讨论以及 Web Architecture Links 中声明的其他文章,此外结…...
2024/4/20 16:48:50 - Vue面试问题
目录v-modelkeep-alive$nextTick双向数据绑定原理Vue2.0、Vue3.0双向数据绑定vuexvue的方法路由(切换/跳转)模式hash模式history模式hash模式和history模式的区别:hash模式和history模式谁不会向服务器发送请求组件通信的方式生命周期及钩子…...
2024/4/20 16:48:49 - vue干活
Vue总结(干货) 一、Vue的指令(指的是带有“v-”前缀的特殊属性)** 常见的Vue指令((v-if|v-else|v-else-if)/v-show/v-for/v-bind/v-on/v-if|v-else|v-else-if等等就不一一介绍了,下面讲解几个有意思的指令) 1)、v-pre v-pre主要用来跳过这个元素和它…...
2024/4/20 16:48:49 - angualr7项目开发总结
由于公司需要,开始学习angular,这个传闻中学习曲线极其陡峭的前端框架,并开始写第一个用angular的项目,截止今天初步完成现有需求,顾在此做一次遇到问题的总结,以便知识的掌握。 一、在angular项目中&#…...
2024/4/20 16:48:48 - vue
1.vue优缺点 优点:a)MVVM的开发模式,从dom中解脱出来,双向数据绑定; b)数据更新采用异步事件机制;c)采用单向数据流;d)组件式开发;e)采用虚拟domf)支持模板和jsx两种开发模式;g)可以…...
2024/4/20 16:48:46 - 欧式双眼皮做效果图片大全
...
2024/4/20 16:48:46 - vue.js面试中常问知识点整理
看看面试题,只是为了查漏补缺,看看自己那些方面还不懂。切记不要以为背了面试题,就万事大吉了,最好是理解背后的原理,这样面试的时候才能侃侃而谈。不然,稍微有水平的面试官一看就能看出,是否有…...
2024/4/20 16:48:25 - 男的男的内双割男生近视可以割欧美形双眼皮图片
...
2024/4/20 16:48:23 - 内双自动变成纳米无痕的纳米无痕双眼皮跟埋线
...
2024/4/20 16:48:22 - angular支持html,简介AngularJS的HTML DOM支持情况
以下指令可用于应用程序数据绑定到HTML DOM元素的属性。添加ng-show属性到一个HTML按钮,并把它传递模型。绑定模型到复选框,看看以下变化。Show ButtonClick Me!ng-hide 指令添加ng-hide属性为HTML按钮,通过它的模型。绑定模型到复选框&#…...
2024/4/20 2:35:12 - 哪个相机可以改内双眼皮 常见
...
2024/4/20 7:33:24 - 埋线双眼皮在什么价位是多少
...
2024/4/20 16:48:19 - 深入探究Vue
文章结尾是一个完整的vue-cli的项目 , 包括了路由跳转 , 路由传参 , 404路由页面 , axios请求 vue 集成了React、AngulaJs的优点 , MVVM Dom 借鉴了 AngulaJs 的模块化开发 , 和 React 的虚拟DOM 让我们来看看第一…...
2024/4/20 16:48:18 - 埋线双眼皮形成埋线双眼皮眼角分叉了
...
2024/4/19 18:57:58 - 埋线双眼皮吗
...
2024/4/20 16:48:18 - 埋线双眼皮会失败么
...
2024/4/20 16:42:42 - Angular-seed项目自动搭建
Angular1前端项目搭建(angular-seed)一、项目的启动1、github克隆相关代码 2、本地需要安装git,不然bower install会报错 3、npm install 4、npm start启动,在浏览器中输入http://localhost:8000二、项目框架 app ---------------…...
2024/4/20 16:42:39 - angular环境搭建常规步骤及常见的问题 ——孤独前行
步骤 1.安装node.js 直接百度nodejs 进官网下载node.js,然后无脑下一步安装即可,也可以自己指定安装路径。 装完后,进入命令行是否安装完成,一般会自动装上npm包管理器 这里给个楼主使用的下载链接 https://nodejs.org/en/ nod…...
2024/4/20 16:42:38
最新文章
- 【window环境、Linux环境、QT三种方法实现TCP通信】
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 文章目录 前言一、Windows环境下实现TCP通信1.服务器2.客户端3.运行 二、Linux环境下实现TCP通信1.服务端2.客户端 三、Qt实现TCP通信1.服务端1.客户端 总结 前言 大多数项目…...
2024/4/26 4:55:21 - 梯度消失和梯度爆炸的一些处理方法
在这里是记录一下梯度消失或梯度爆炸的一些处理技巧。全当学习总结了如有错误还请留言,在此感激不尽。 权重和梯度的更新公式如下: w w − η ⋅ ∇ w w w - \eta \cdot \nabla w ww−η⋅∇w 个人通俗的理解梯度消失就是网络模型在反向求导的时候出…...
2024/3/20 10:50:27 - 泰迪智能科技高职人工智能专业人才培养方案
人工智能行业近年来得到了快速发展,全球科技公司都在竞相投入人工智能的研发,从硅谷到北京,都在人工智能上取得了显著的进步。人工智能已经从学术研究转变为影响制造业、医疗保健、交通运输和零售等多个行业的关键因素。我国政策的积极推动下…...
2024/4/22 21:14:22 - 【stm32】I2C通信协议
【stm32】I2C通信协议 概念及原理 如果我们想要读写寄存器来控制硬件电路,就至少需要定义两个字节数据 一个字节是我们要读写哪个寄存器,也就是指定寄存器的地址 另一个字节就是这个地址下存储寄存器的内容 写入内容就是控制电路,读出内容就…...
2024/4/22 20:59:35 - uniApp使用XR-Frame创建3D场景(7)加入点击交互
上篇文章讲述了如何将XR-Frame作为子组件集成到uniApp中使用 这篇我们讲解如何与场景中的模型交互(点击识别) 先看源码 <xr-scene render-system"alpha:true" bind:ready"handleReady"><xr-node><xr-mesh id"…...
2024/4/24 19:29:31 - 【外汇早评】美通胀数据走低,美元调整
原标题:【外汇早评】美通胀数据走低,美元调整昨日美国方面公布了新一期的核心PCE物价指数数据,同比增长1.6%,低于前值和预期值的1.7%,距离美联储的通胀目标2%继续走低,通胀压力较低,且此前美国一季度GDP初值中的消费部分下滑明显,因此市场对美联储后续更可能降息的政策…...
2024/4/25 11:51:20 - 【原油贵金属周评】原油多头拥挤,价格调整
原标题:【原油贵金属周评】原油多头拥挤,价格调整本周国际劳动节,我们喜迎四天假期,但是整个金融市场确实流动性充沛,大事频发,各个商品波动剧烈。美国方面,在本周四凌晨公布5月份的利率决议和新闻发布会,维持联邦基金利率在2.25%-2.50%不变,符合市场预期。同时美联储…...
2024/4/25 18:39:24 - 【外汇周评】靓丽非农不及疲软通胀影响
原标题:【外汇周评】靓丽非农不及疲软通胀影响在刚结束的周五,美国方面公布了新一期的非农就业数据,大幅好于前值和预期,新增就业重新回到20万以上。具体数据: 美国4月非农就业人口变动 26.3万人,预期 19万人,前值 19.6万人。 美国4月失业率 3.6%,预期 3.8%,前值 3…...
2024/4/25 18:38:39 - 【原油贵金属早评】库存继续增加,油价收跌
原标题:【原油贵金属早评】库存继续增加,油价收跌周三清晨公布美国当周API原油库存数据,上周原油库存增加281万桶至4.692亿桶,增幅超过预期的74.4万桶。且有消息人士称,沙特阿美据悉将于6月向亚洲炼油厂额外出售更多原油,印度炼油商预计将每日获得至多20万桶的额外原油供…...
2024/4/25 18:39:23 - 【外汇早评】日本央行会议纪要不改日元强势
原标题:【外汇早评】日本央行会议纪要不改日元强势近两日日元大幅走强与近期市场风险情绪上升,避险资金回流日元有关,也与前一段时间的美日贸易谈判给日本缓冲期,日本方面对汇率问题也避免继续贬值有关。虽然今日早间日本央行公布的利率会议纪要仍然是支持宽松政策,但这符…...
2024/4/25 18:39:22 - 【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响
原标题:【原油贵金属早评】欧佩克稳定市场,填补伊朗问题的影响近日伊朗局势升温,导致市场担忧影响原油供给,油价试图反弹。此时OPEC表态稳定市场。据消息人士透露,沙特6月石油出口料将低于700万桶/日,沙特已经收到石油消费国提出的6月份扩大出口的“适度要求”,沙特将满…...
2024/4/25 18:39:22 - 【外汇早评】美欲与伊朗重谈协议
原标题:【外汇早评】美欲与伊朗重谈协议美国对伊朗的制裁遭到伊朗的抗议,昨日伊朗方面提出将部分退出伊核协议。而此行为又遭到欧洲方面对伊朗的谴责和警告,伊朗外长昨日回应称,欧洲国家履行它们的义务,伊核协议就能保证存续。据传闻伊朗的导弹已经对准了以色列和美国的航…...
2024/4/25 18:39:20 - 【原油贵金属早评】波动率飙升,市场情绪动荡
原标题:【原油贵金属早评】波动率飙升,市场情绪动荡因中美贸易谈判不安情绪影响,金融市场各资产品种出现明显的波动。随着美国与中方开启第十一轮谈判之际,美国按照既定计划向中国2000亿商品征收25%的关税,市场情绪有所平复,已经开始接受这一事实。虽然波动率-恐慌指数VI…...
2024/4/25 16:48:44 - 【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试
原标题:【原油贵金属周评】伊朗局势升温,黄金多头跃跃欲试美国和伊朗的局势继续升温,市场风险情绪上升,避险黄金有向上突破阻力的迹象。原油方面稍显平稳,近期美国和OPEC加大供给及市场需求回落的影响,伊朗局势并未推升油价走强。近期中美贸易谈判摩擦再度升级,美国对中…...
2024/4/25 13:39:44 - 【原油贵金属早评】市场情绪继续恶化,黄金上破
原标题:【原油贵金属早评】市场情绪继续恶化,黄金上破周初中国针对于美国加征关税的进行的反制措施引发市场情绪的大幅波动,人民币汇率出现大幅的贬值动能,金融市场受到非常明显的冲击。尤其是波动率起来之后,对于股市的表现尤其不安。隔夜美国股市出现明显的下行走势,这…...
2024/4/25 18:39:16 - 【外汇早评】美伊僵持,风险情绪继续升温
原标题:【外汇早评】美伊僵持,风险情绪继续升温昨日沙特两艘油轮再次发生爆炸事件,导致波斯湾局势进一步恶化,市场担忧美伊可能会出现摩擦生火,避险品种获得支撑,黄金和日元大幅走强。美指受中美贸易问题影响而在低位震荡。继5月12日,四艘商船在阿联酋领海附近的阿曼湾、…...
2024/4/25 18:39:16 - 【原油贵金属早评】贸易冲突导致需求低迷,油价弱势
原标题:【原油贵金属早评】贸易冲突导致需求低迷,油价弱势近日虽然伊朗局势升温,中东地区几起油船被袭击事件影响,但油价并未走高,而是出于调整结构中。由于市场预期局势失控的可能性较低,而中美贸易问题导致的全球经济衰退风险更大,需求会持续低迷,因此油价调整压力较…...
2024/4/25 0:00:17 - 氧生福地 玩美北湖(上)——为时光守候两千年
原标题:氧生福地 玩美北湖(上)——为时光守候两千年一次说走就走的旅行,只有一张高铁票的距离~ 所以,湖南郴州,我来了~ 从广州南站出发,一个半小时就到达郴州西站了。在动车上,同时改票的南风兄和我居然被分到了一个车厢,所以一路非常愉快地聊了过来。 挺好,最起…...
2024/4/25 4:19:21 - 氧生福地 玩美北湖(中)——永春梯田里的美与鲜
原标题:氧生福地 玩美北湖(中)——永春梯田里的美与鲜一觉醒来,因为大家太爱“美”照,在柳毅山庄去寻找龙女而错过了早餐时间。近十点,向导坏坏还是带着饥肠辘辘的我们去吃郴州最富有盛名的“鱼头粉”。说这是“十二分推荐”,到郴州必吃的美食之一。 哇塞!那个味美香甜…...
2024/4/25 18:39:14 - 氧生福地 玩美北湖(下)——奔跑吧骚年!
原标题:氧生福地 玩美北湖(下)——奔跑吧骚年!让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 让我们红尘做伴 活得潇潇洒洒 策马奔腾共享人世繁华 对酒当歌唱出心中喜悦 轰轰烈烈把握青春年华 啊……啊……啊 两…...
2024/4/25 18:39:12 - 扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!
原标题:扒开伪装医用面膜,翻六倍价格宰客,小姐姐注意了!扒开伪装医用面膜,翻六倍价格宰客!当行业里的某一品项火爆了,就会有很多商家蹭热度,装逼忽悠,最近火爆朋友圈的医用面膜,被沾上了污点,到底怎么回事呢? “比普通面膜安全、效果好!痘痘、痘印、敏感肌都能用…...
2024/4/25 2:10:52 - 「发现」铁皮石斛仙草之神奇功效用于医用面膜
原标题:「发现」铁皮石斛仙草之神奇功效用于医用面膜丽彦妆铁皮石斛医用面膜|石斛多糖无菌修护补水贴19大优势: 1、铁皮石斛:自唐宋以来,一直被列为皇室贡品,铁皮石斛生于海拔1600米的悬崖峭壁之上,繁殖力差,产量极低,所以古代仅供皇室、贵族享用 2、铁皮石斛自古民间…...
2024/4/25 18:39:00 - 丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者
原标题:丽彦妆\医用面膜\冷敷贴轻奢医学护肤引导者【公司简介】 广州华彬企业隶属香港华彬集团有限公司,专注美业21年,其旗下品牌: 「圣茵美」私密荷尔蒙抗衰,产后修复 「圣仪轩」私密荷尔蒙抗衰,产后修复 「花茵莳」私密荷尔蒙抗衰,产后修复 「丽彦妆」专注医学护…...
2024/4/25 13:19:01 - 广州械字号面膜生产厂家OEM/ODM4项须知!
原标题:广州械字号面膜生产厂家OEM/ODM4项须知!广州械字号面膜生产厂家OEM/ODM流程及注意事项解读: 械字号医用面膜,其实在我国并没有严格的定义,通常我们说的医美面膜指的应该是一种「医用敷料」,也就是说,医用面膜其实算作「医疗器械」的一种,又称「医用冷敷贴」。 …...
2024/4/25 18:38:58 - 械字号医用眼膜缓解用眼过度到底有无作用?
原标题:械字号医用眼膜缓解用眼过度到底有无作用?医用眼膜/械字号眼膜/医用冷敷眼贴 凝胶层为亲水高分子材料,含70%以上的水分。体表皮肤温度传导到本产品的凝胶层,热量被凝胶内水分子吸收,通过水分的蒸发带走大量的热量,可迅速地降低体表皮肤局部温度,减轻局部皮肤的灼…...
2024/4/25 18:38:57 - 配置失败还原请勿关闭计算机,电脑开机屏幕上面显示,配置失败还原更改 请勿关闭计算机 开不了机 这个问题怎么办...
解析如下:1、长按电脑电源键直至关机,然后再按一次电源健重启电脑,按F8健进入安全模式2、安全模式下进入Windows系统桌面后,按住“winR”打开运行窗口,输入“services.msc”打开服务设置3、在服务界面,选中…...
2022/11/19 21:17:18 - 错误使用 reshape要执行 RESHAPE,请勿更改元素数目。
%读入6幅图像(每一幅图像的大小是564*564) f1 imread(WashingtonDC_Band1_564.tif); subplot(3,2,1),imshow(f1); f2 imread(WashingtonDC_Band2_564.tif); subplot(3,2,2),imshow(f2); f3 imread(WashingtonDC_Band3_564.tif); subplot(3,2,3),imsho…...
2022/11/19 21:17:16 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机...
win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”问题的解决方法在win7系统关机时如果有升级系统的或者其他需要会直接进入一个 等待界面,在等待界面中我们需要等待操作结束才能关机,虽然这比较麻烦,但是对系统进行配置和升级…...
2022/11/19 21:17:15 - 台式电脑显示配置100%请勿关闭计算机,“准备配置windows 请勿关闭计算机”的解决方法...
有不少用户在重装Win7系统或更新系统后会遇到“准备配置windows,请勿关闭计算机”的提示,要过很久才能进入系统,有的用户甚至几个小时也无法进入,下面就教大家这个问题的解决方法。第一种方法:我们首先在左下角的“开始…...
2022/11/19 21:17:14 - win7 正在配置 请勿关闭计算机,怎么办Win7开机显示正在配置Windows Update请勿关机...
置信有很多用户都跟小编一样遇到过这样的问题,电脑时发现开机屏幕显现“正在配置Windows Update,请勿关机”(如下图所示),而且还需求等大约5分钟才干进入系统。这是怎样回事呢?一切都是正常操作的,为什么开时机呈现“正…...
2022/11/19 21:17:13 - 准备配置windows 请勿关闭计算机 蓝屏,Win7开机总是出现提示“配置Windows请勿关机”...
Win7系统开机启动时总是出现“配置Windows请勿关机”的提示,没过几秒后电脑自动重启,每次开机都这样无法进入系统,此时碰到这种现象的用户就可以使用以下5种方法解决问题。方法一:开机按下F8,在出现的Windows高级启动选…...
2022/11/19 21:17:12 - 准备windows请勿关闭计算机要多久,windows10系统提示正在准备windows请勿关闭计算机怎么办...
有不少windows10系统用户反映说碰到这样一个情况,就是电脑提示正在准备windows请勿关闭计算机,碰到这样的问题该怎么解决呢,现在小编就给大家分享一下windows10系统提示正在准备windows请勿关闭计算机的具体第一种方法:1、2、依次…...
2022/11/19 21:17:11 - 配置 已完成 请勿关闭计算机,win7系统关机提示“配置Windows Update已完成30%请勿关闭计算机”的解决方法...
今天和大家分享一下win7系统重装了Win7旗舰版系统后,每次关机的时候桌面上都会显示一个“配置Windows Update的界面,提示请勿关闭计算机”,每次停留好几分钟才能正常关机,导致什么情况引起的呢?出现配置Windows Update…...
2022/11/19 21:17:10 - 电脑桌面一直是清理请关闭计算机,windows7一直卡在清理 请勿关闭计算机-win7清理请勿关机,win7配置更新35%不动...
只能是等着,别无他法。说是卡着如果你看硬盘灯应该在读写。如果从 Win 10 无法正常回滚,只能是考虑备份数据后重装系统了。解决来方案一:管理员运行cmd:net stop WuAuServcd %windir%ren SoftwareDistribution SDoldnet start WuA…...
2022/11/19 21:17:09 - 计算机配置更新不起,电脑提示“配置Windows Update请勿关闭计算机”怎么办?
原标题:电脑提示“配置Windows Update请勿关闭计算机”怎么办?win7系统中在开机与关闭的时候总是显示“配置windows update请勿关闭计算机”相信有不少朋友都曾遇到过一次两次还能忍但经常遇到就叫人感到心烦了遇到这种问题怎么办呢?一般的方…...
2022/11/19 21:17:08 - 计算机正在配置无法关机,关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机...
关机提示 windows7 正在配置windows 请勿关闭计算机 ,然后等了一晚上也没有关掉。现在电脑无法正常关机以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!关机提示 windows7 正在配…...
2022/11/19 21:17:05 - 钉钉提示请勿通过开发者调试模式_钉钉请勿通过开发者调试模式是真的吗好不好用...
钉钉请勿通过开发者调试模式是真的吗好不好用 更新时间:2020-04-20 22:24:19 浏览次数:729次 区域: 南阳 > 卧龙 列举网提醒您:为保障您的权益,请不要提前支付任何费用! 虚拟位置外设器!!轨迹模拟&虚拟位置外设神器 专业用于:钉钉,外勤365,红圈通,企业微信和…...
2022/11/19 21:17:05 - 配置失败还原请勿关闭计算机怎么办,win7系统出现“配置windows update失败 还原更改 请勿关闭计算机”,长时间没反应,无法进入系统的解决方案...
前几天班里有位学生电脑(windows 7系统)出问题了,具体表现是开机时一直停留在“配置windows update失败 还原更改 请勿关闭计算机”这个界面,长时间没反应,无法进入系统。这个问题原来帮其他同学也解决过,网上搜了不少资料&#x…...
2022/11/19 21:17:04 - 一个电脑无法关闭计算机你应该怎么办,电脑显示“清理请勿关闭计算机”怎么办?...
本文为你提供了3个有效解决电脑显示“清理请勿关闭计算机”问题的方法,并在最后教给你1种保护系统安全的好方法,一起来看看!电脑出现“清理请勿关闭计算机”在Windows 7(SP1)和Windows Server 2008 R2 SP1中,添加了1个新功能在“磁…...
2022/11/19 21:17:03 - 请勿关闭计算机还原更改要多久,电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机怎么办...
许多用户在长期不使用电脑的时候,开启电脑发现电脑显示:配置windows更新失败,正在还原更改,请勿关闭计算机。。.这要怎么办呢?下面小编就带着大家一起看看吧!如果能够正常进入系统,建议您暂时移…...
2022/11/19 21:17:02 - 还原更改请勿关闭计算机 要多久,配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以...
配置windows update失败 还原更改 请勿关闭计算机,电脑开机后一直显示以以下文字资料是由(历史新知网www.lishixinzhi.com)小编为大家搜集整理后发布的内容,让我们赶快一起来看一下吧!配置windows update失败 还原更改 请勿关闭计算机&#x…...
2022/11/19 21:17:01 - 电脑配置中请勿关闭计算机怎么办,准备配置windows请勿关闭计算机一直显示怎么办【图解】...
不知道大家有没有遇到过这样的一个问题,就是我们的win7系统在关机的时候,总是喜欢显示“准备配置windows,请勿关机”这样的一个页面,没有什么大碍,但是如果一直等着的话就要两个小时甚至更久都关不了机,非常…...
2022/11/19 21:17:00 - 正在准备配置请勿关闭计算机,正在准备配置windows请勿关闭计算机时间长了解决教程...
当电脑出现正在准备配置windows请勿关闭计算机时,一般是您正对windows进行升级,但是这个要是长时间没有反应,我们不能再傻等下去了。可能是电脑出了别的问题了,来看看教程的说法。正在准备配置windows请勿关闭计算机时间长了方法一…...
2022/11/19 21:16:59 - 配置失败还原请勿关闭计算机,配置Windows Update失败,还原更改请勿关闭计算机...
我们使用电脑的过程中有时会遇到这种情况,当我们打开电脑之后,发现一直停留在一个界面:“配置Windows Update失败,还原更改请勿关闭计算机”,等了许久还是无法进入系统。如果我们遇到此类问题应该如何解决呢࿰…...
2022/11/19 21:16:58 - 如何在iPhone上关闭“请勿打扰”
Apple’s “Do Not Disturb While Driving” is a potentially lifesaving iPhone feature, but it doesn’t always turn on automatically at the appropriate time. For example, you might be a passenger in a moving car, but your iPhone may think you’re the one dri…...
2022/11/19 21:16:57