郑州网站建设e00,注册网站会员需要详细填写,安监局网站建设方案,国外云服务器哪个好一、为什么要使用微前端 微前端的核心理念是将一个大型的单体前端应用拆分成多个独立的小型应用#xff0c;以便各个应用能够独立开发、部署和更新。这带来了以下几个好处#xff1a; 独立开发与部署#xff1a;各个团队可以独立开发自己的子应用#xff0c;快速上线新功能…一、为什么要使用微前端 微前端的核心理念是将一个大型的单体前端应用拆分成多个独立的小型应用以便各个应用能够独立开发、部署和更新。这带来了以下几个好处 独立开发与部署各个团队可以独立开发自己的子应用快速上线新功能而不需要等待整个应用的部署。技术栈自由子应用可以选择适合自身的技术栈降低技术演进的成本。例如主应用使用 Vue但子应用可以使用 React。渐进式升级在应用重构或版本迭代时可以逐步替换掉旧的功能而不影响整个系统的稳定性。维护性与扩展性通过模块化管理可以更好地维护代码同时容易扩展新功能。
二、微前端案例场景 假设你有一个主应用 main以及两个子应用 user 和 order。每个应用的具体职责如下 main负责整体框架和导航控制加载 user 和 order作为门户页面。user一个用于用户管理的模块提供用户列表、用户详情和用户权限设置等功能。order一个用于订单管理的模块处理订单查询、订单详情和订单更新等功能。
具体实现需求
主应用main跳转到 user 或 order 在主应用的导航栏中有两个按钮点击分别加载 user 和 order。 例如点击“用户管理”跳转到 http://main-app-url/user点击“订单管理”跳转到 http://main-app-url/order。 子应用 user 跳转到 order user 中有一个“查看用户订单”的按钮点击后跳转到 order并传递用户 ID 信息方便 order 直接加载该用户的订单。 例如点击按钮后跳转到 http://main-app-url/order/orders?userId123。 主应用与子应用的通信 主应用 main 负责通知子应用加载状态比如加载进度条。 主应用可以通过 props 传递全局信息例如用户身份、权限信息给 user 和 order。 子应用 user 和 order 之间的通信 user 和 order 都需要访问一些共享状态例如当前登录用户信息或者 user 中的操作需要通知 order 做一些更新。 通过主应用提供的事件总线或者使用 qiankun 提供的全局状态管理器来实现。 三、代码示例
主应用 main 的配置 主应用 main 注册子应用
import { registerMicroApps, start } from qiankun;registerMicroApps([{name: user,entry: //localhost:8001,container: #sub-container,activeRule: /user,props: { sharedState: { user: Admin } }, // 传递全局信息},{name: order,entry: //localhost:8002,container: #sub-container,activeRule: /order,}
]);start();
主应用导航与容器
#app.vue
templatedivnavbutton clickgoToUser用户管理/buttonbutton clickgoToOrder订单管理/button/navdiv idsub-container/div/div
/templatescript
export default {methods: {goToUser() {this.$router.push(/user);},goToOrder() {this.$router.push(/order);}}
}
/script
子应用 user 和 order 的通信 user 内部跳转到 order
function goToApp2WithUserId(userId) {window.location.href http://main-app-url/order/orders?userId${userId};
}
user 接收 order 传递的信息
const queryParams new URLSearchParams(window.location.search);
const userId queryParams.get(userId);
// 根据 userId 加载用户的订单主应用与子应用通信 主应用提供的事件总线
import { initGlobalState } from qiankun;const actions initGlobalState({ user: {} });
actions.onGlobalStateChange((state, prev) {// state变更后的状态; prev变更前的状态console.log(state, prev);
});
子应用 user 与全局状态通信
props.onGlobalStateChange((state) {console.log(user detected global state change:, state);
});
props.setGlobalState({ user: { name: John } });
四、方案总结
通过微前端架构main、user 和 order 可以独立开发、独立部署减少了各个模块之间的耦合性同时方便团队协作开发。这种架构模式可以用于大型企业级应用的不同模块中例如 ERP 系统、在线商城系统等通过微前端技术能够极大地提高开发效率和应用的扩展性。
