py获取前端的参数_微前端 qiankun 项目实践
(给前端大全加星标,提升前端技能)
作者:zxh1307
https://juejin.im/post/5ea55417e51d4546e347fda9
导语
最近在做微前端的项目 , 过程中真是踩了不少坑 , 在有限的资料中不断试错 , 默默无语两行泪 哈哈. 在此次将踩坑部分都记录下来, 让更多的人少走点弯路 , 此项目使用 蚂蚁金服qiankun 为基础作为开发 . 话不多说 开讲 !!!
那什么是 qiankun 呢
qiankun 是一个基于 single-spa 的微前端实现库,旨在帮助大家能更简单、无痛的构建一个生产可用微前端架构系统。
什么是微前端
微前端架构具备以下几个核心价值:
技术栈无关
主框架不限制接入应用的技术栈,微应用具备完全自主权
独立开发、独立部署
微应用仓库独立,前后端可独立开发,部署完成后主框架自动完成同步更新
增量升级
在面对各种复杂场景时,我们通常很难对一个已经存在的系统做全量的技术栈升级或重构,而微前端是一种非常好的实施渐进式重构的手段和策略
独立运行时
每个微应用之间状态隔离,运行时状态不共享
摘自 qiankun官方文档
主应用配置
此次项目 主应用与 子应用均为 vue ,
下载 qiankun
npm install qiankun
在主应用中注册微应用
// 导入乾坤函数
封装 render 方法
此方法在main.js 中要初始调用一次, 主要用来挂载主应用 , 之后子应用分别依次调用 ,所以故作判断. 传入的参数分别为 子应用 的 HTML 和 加载状态 content
字段 我们用 vuex 存储 起来,方便使用
let app = null;
function render({ appContent, loading }) { if (!app) { app = new Vue({ router, store, render: h => h(App), }).$mount('#app');
} else { store.commit('microApp/changeCenter', appContent); store.commit('microApp/changeLoading', loading); }
}
微应用注册
下文中的apps 可以为获取后数据 , 注册微应用 本文案例比较简单,方便大家理解 ,
在注册自应用的参数 ** container 与 render** 踩坑比较多,下边会着重讲解.
function genActiveRule(routerPrefix) { return location => location.pathname.startsWith(routerPrefix);}
//传递给子应用的数据let msg = {![](https://user-gold-cdn.xitu.io/2020/4/27/171bbc5de042ec98?w=1811&h=959&f=gif&s=4951066) data:'修炼爱情的辛酸,学会放好以前的渴望'}
let apps = [ { name: 'linjunjie', entry: '//localhost:215', // 改成自己子应用的端口号 container:'#subView', //节点 id // 沙盒模式 // render:render, // 普通模式 activeRule: genActiveRule('/star'), props:msg }] //注册的子应用 参数为数组registerMicroApps(apps,{ beforeLoad: [ app => { console.log(app) console.log('[LifeCycle] before load %c%s', 'color: green;', app.name); }, ], beforeMount: [ app => { console.log('[LifeCycle] before mount %c%s', 'color: green;', app.name); }, ], afterUnmount: [ app => { console.log('[LifeCycle] after unmount %c%s', 'color: green;', app.name); }, ],});
setDefaultMountApp('/star/linjunjie')
//开启沙盒模式start({ sandbox :{strictStyleIsolation: true}})
当微应用信息注册完之后,一旦浏览器的 url 发生变化,便会自动触发 qiankun 的匹配逻辑,所有 activeRule 规则匹配上的微应用就会被插入到指定的 container 中,同时依次调用微应用暴露出的生命周期钩子。
主应用为子应用准备的 展示元素
<div id="app"><div id="nav"><div @click="onChangePage('/star/linjunjie')" >林俊杰div><div @click="onChangePage('/star/zhangyixin')" >张艺兴div>div><div id="subView" class="sub-content-wrap" v-html="content">div>div>template><script>import { mapState } from 'vuex';export default{ data(){return { } },computed:{//获取子应用HTML 数据 ...mapState('microApp', ['content']), ...mapState('microApp', ['mircoAppLoading']), },methods:{//定义跳转方法 onChangePage(url){console.log(url)this.routerGo(url, '我喜爱的男明星') }, routerGo(href = '/', title = null, stateObj = {}) {window.history.pushState(stateObj, title, href); }, } }script>
子应用配置
关于子应用的配置相对较简单 , 不需要额外下载qiankun 主要将生命钩子 导出即可
导出响应的生命钩子
导出 bootstrap
、mount
、unmount
三个生命周期钩子,以供主应用在适当的时机调用。注意,实例化路由时,判断当运行在qiankun环境时,路由要添加前缀,前缀与主应用注册子应用函数genActiveRule("/subdemo")内的参数一致
'star' 值需要与主应用的值对应 genActiveRule("/star") 中的值需要商定好 主应用与微应用都要使用
如果 new VueRouter 不在main.js 中 配置 ,请将此配置移动到 main.js 方便管理
import routes
配置微应用的打包工具
除了代码中暴露出相应的生命周期钩子之外,为了让主应用能正确识别微应用暴露出来的一些信息,微应用的打包工具需要在vue.config.js 中 增加如下配置:
const packageName = require('./package.json').name;
module.exports = { output: { library: `${packageName}-[name]`, libraryTarget: 'umd', jsonpFunction: `webpackJsonp_${packageName}`, },};
子应用判断
子应用中新建 publicPath.js 在main.js 引入
if (
处理 资源加载问题
配置 vue.config.js
module.exports = {
vue.config.js 完整配置
const path =
踩坑记录
当前页面为子应用时, 刷新页面404
以下方式均为主应用配置
方式一 删除 mode 配置项
mode: 'history', // 将此配置代码删除
方式二 配置404 页面
如果没有注释掉mode: 'history'
此参数 将404 页面重新导向 home首页
{ path: '*', name: 'indexNotFound', component: resolve => require(['@/components/home'], resolve), children: HomeChild,},
子应用 样式隔离 开始沙箱模式 遇到的问题
主应用配置
sandbox :{strictStyleIsolation: true}
渲染模式由 render 模式 改为 containercontainer:'#subView'
, 此时 子应用的 挂载 dom 为 谨记主 container :#+id子应用配置 上文有提到 主要代码 截取
new Vue({
遇到的问题: 开启沙箱模式,如果是 采用 render 模式会报错 ,故选择container 模式
效果图
写到这里,项目已经构建完成了 让我们来看看效果吧
这里是完整代码 方便大家学习 代码github地址:https://github.com/zxh1307/qiankun-vue
项目问题
为啥我项目启动后看不到子应用的效果
将master 主应用 main.js 中 注册的 子应用的端口号 改成自己项目的端口号即可
结语
开发中还有其他坑 忘记记录了, 千万记得项目部署子应用资源跨域的问题 , 需要Nginx配置跨域问题
推荐阅读 点击标题可跳转
万字解析微前端、微前端框架qiankun以及源码
微前端框架是怎么导入加载子应用的
了解什么是微前端
觉得本文对你有帮助?请分享给更多人
关注「前端大全」加星标,提升前端技能
好文章,我在看❤️
py获取前端的参数_微前端 qiankun 项目实践相关推荐
- 前端dashboard框架_微前端在网易七鱼的实践
一.前言 网易七鱼是提供围绕客户服务与智能营销的 SaaS 平台.在七鱼业务中,有在线系统.呼叫系统.机器人.工单系统.数据大屏等业务线,它们分布在两个业务端,管理端和客服端.这两个端的功能框架类似, ...
- qiankun 传统项目配置_微前端 qiankun 项目实践
原标题:微前端 qiankun 项目实践 作者:zxh1307 https://juejin.im/post/5ea55417e51d4546e347fda9 导语 最近在做微前端的项目 , 过程中真 ...
- 【微前端】什么是微前端
专栏: [微前端]什么是微前端 [微前端]qiankun [微前端]qiankun + vite + vue3 目录: 一.微前端是什么 二.微前端解决了什么问题 三.微前端的优缺点 四.微前端的解决 ...
- qiankun 微前端_微前端方案 qiankun(实践及总结)
❝ 作者:沉末_ 链接:https://juejin.im/post/5ed73b73e51d4578724e3fa4 ❞ 什么是微前端? 我们先来看两个实际的场景: 1. 复用别的的项目页面 通常, ...
- 前端怎么获取cookie的值_作为前端你必须要了解的安全性问题!
前端技术不断发展,安全性的问题也越来越受到关注.作为前端工程师,保障网络安全也越来越重要. XSS攻击 XSS(Cross Site Scripting)跨站脚本攻击. 攻击者在网站上植入非法的htm ...
- 乾坤 微前端_微前端架构初探以及我的前端技术盘点
前言 最近几年微前端一直是前端界的热门议题, 它类似于微服务架构, 主要面向于浏览器端,能将一个复杂而庞大的单体应用拆分为多个功能模块清晰且独立的子应用,且共同服于务同一个主应用.各个子应用可以独立运 ...
- 前端iframe 能指定本地网页吗_微前端的技术拆分方式
路由分发式 通过HTTP服务器的反向代理功能,将请求路由到对应的应用上 特点 采用的最多.最容易的"微前端"方案 并非一个整体,每当用户从A应用转换到B应用的时候,往往需要刷新一下 ...
- python web前端开发面试_面试前端,听听别人怎么说!
分享一个人的面试经验: 一年半经验,百度.有赞.阿里面试总结 前言 人家都说,前端需要每年定期出来面面试,衡量一下自己当前的技术水平以及价值,本人17年7月份,毕业到现在都没出来试过,也没很想换工作, ...
- 微前端解决方案初探 02 微前端框架 single-spa
single-spa 概述 single-spa 是一个实现微前端架构的框架. 在 single-spa 框架中有三种类型的微前端应用: single-spa application / parcel ...
最新文章
- opengl库区分:glut、freeglut、glfw、glew、gl3w、glad
- 甩锅!偷懒!PUA!转嫁压力!铲除异己!压榨下属!这就是职场leader真面目!...
- CrazyWing:Python自动化运维开发实战 九、Python数据类型之列表
- 那些年一起学习的PHP(三)
- C++ new一个数组方法和初始化的方法
- centos6+nagios3.3.1+nrpe2.12
- 插件开发之360 DroidPlugin源码分析(四)Activity预注册占坑
- Springboot网络微小说的设计与实现毕业设计源码031758
- 如何设置电脑的固定IP地址
- Galaxy Note8面世,“三维立体”发布会传递怎样的信号?
- 【实习日报】2019年5月 前端开发实习工作日报汇总
- 设置Shell脚本开机自启
- HDFS源码解析---Balancer
- 闲云野鹤:吃鸡(一)之场景制作:使用GPU instancing方式制作刷草插件
- php鼠标移过图片放大代码,鼠标移上去,图片会自动原地放大CSS写法
- Vuforia⭐️Unity实现对手机陀螺仪的调用
- 2019计算机小高考成绩,小高考没过怎么办 2021小高考难度如何
- 教程1:Hello Behaviac
- 架构师多如过江之鲫,但你真的了解架构师这个工种吗?
- Linux工具推荐:方便地查看进程网速
热门文章
- esp32 rtc 时钟设置不对_咱们RTC时钟案例的时间为什么开始的时候总是2014年,怎么改呢?...
- 谈谈 JavaScript 中的空值合并操作符 Nullish coalescing operator
- SAP 电商云 Spartacus UI 同 SAP Customer Data Cloud 集成运行时的 api
- TypeScript的类型断言,有点像ABAP的强制类型转换
- function implemented in Scala - compiled java code - some closure example
- 如何找到在SAP社区上经过SAP官方认可比较有影响力的SAP从业者
- 国内SAP从业者们2020年最想学习的SAP相关知识分类的调查问卷结果
- jQuery.ready in CRM Fiori Opportunity Application
- OPA 16 - how is mocked transaction types loaded in the runtime
- OData metadata request url的population 逻辑