美文网首页
基于react+antd+rxjs的大型admin系统的微前端方

基于react+antd+rxjs的大型admin系统的微前端方

作者: pccold | 来源:发表于2020-05-28 12:03 被阅读0次

    将多个可独立交付的应用组合成一个更大的应用。

    简而言之,微型前端就是将大而恐怖的东西切成更小,更易于管理的部分,然后明确地表明它们之间的依赖关系。我们的团队以及我们的发布流程都应该能够彼此独立地运行和发展,而无需过多的协调。

    这是架构方案:
    1 应用容器,承载子应用
    2 子应用,统一的应用接口
    3 react版本一致,antd的版本一致最好,基于react的hook,配合rxjs做响应式。


    image.png

    其中有个模块服务和菜单服务,这其实是为业务服务的,和微前端架构没什么联系,你们可以不要。


    image.png

    这是一个架构设计方案,还需要精细的代码实现,接下来我会将大部分核心代码贴出来。

    这是应用最开始的部分,start为微前端启动程序,传递两个参数,设置主页,微前端所有子应用的配置,每个子应用必须包含一个入口文件。一下是我的示例代码:

    import start from './core/start';
    import './index.less';
    import { getApplicationContainer } from "./core/service/get-application-container";
    import testData from './testData';
    
    start({
        homePage: '/root/application/list',
        microFrontendConfig: [{
            version: '1.0.1',
            appName: 'root',
            appPath: 'root',
            resource: {
                js: ['/static/js/microfrontend.js']
            }
        }]
    }).then(function () {
        // 处理好菜单的业务逻辑
        const applicationContainer = getApplicationContainer();
        let service = applicationContainer.moduleService;
        service.setModulesOptions(testData.modulesData);
        service.setModulesData(testData.modulesData);
        service.setCurrentModule(testData.modulesData[0]);
    
        // 根据当前module去设置当前的菜单
        service.obCurrentModule.subscribe((module) => {
            const menuService = applicationContainer.menuServie;
            if (module) {
                let menuObj = testData.menusData.filter(item => item.moduleCode === module.moduleCode);
                menuService.setMenusData(menuObj[0]?.menus);
            }
        });
    });
    

    相关文章

      网友评论

          本文标题:基于react+antd+rxjs的大型admin系统的微前端方

          本文链接:https://www.haomeiwen.com/subject/zkboahtx.html