System.ArgumentOutOfRangeException: 索引和长度必须引用该字符串内的位置。 参数名: length 在 System.String.Substring(Int32 startIndex, Int32 length) 在 zhuanliShow.Bind()
【技术实现步骤摘要】
本专利技术属于计算机,具体涉及一种微前端架构的构建方法、架构和设备。
技术介绍
1、随着前端项目的业务体量越来越大,传统的单应用架构已经不能满足多业务的应用和跨团队的协作开发,因此,微前端技术架构被提出和使用。
2、微前端项目是一种类似于微服务的前端架构,它将微服务的架构理念应用到了前端架构中即将网页(web)应用由单一的单体应用转变为多个小型前端应用聚合为一的应用,各个小型的web应用能够独立开发、独立运行、独立部署。
3、目前,面对着规模化的微前端项目,在构建微前端项目过程中,微前端项目的开发变得越发复杂,不易灵活拆分和集成,协同开发困难,且微前端开发的重复性工作较多,开发效率低。
技术实现思路
1、为此,本专利技术提供一种微前端架构的构建方法、架构和设备,有助于帮助解决现有的微前端架构在构建过程中,存在着频繁重复开发代码、开发效率低的问题。
2、为实现以上目的,本专利技术采用如下技术方案:
3、第一方面,本专利技术提供一种微前端架构的构建方法,所述方法包括:
4、基于qiankun构建微服务架构;
5、基于monorepo构建通用代码仓库;
6、基于所述微服务架构和所述通用代码仓库,构建微前端架构;
7、其中,所述微服务架构包括至少一个主应用,以及与每个主应用对应的至少一个子应用,在每个主应用中对该主应用对应的每个子应用进行注册与配置;每个子应用通过create-react-app
8、其中,所述通用代码仓库用于为所述微服务架构中的每个主应用和每个主应用对应的子应用提供能够复用的代码,以及,存储每个主应用和每个子应用的代码文件。
9、进一步地,所述在每个主应用中对该主应用对应的每个子应用进行注册与配置,包括:
10、通过调用qiankun配置的api接口,在每个主应用中对该主应用对应的每个子应用进行注册与配置。
11、进一步地,所述基于monorepo构建通用代码仓库,包括:
12、创建根目录文件夹;
13、在所述根目录文件夹中进行yarn初始化和yarn workspaces配置,得到package.json文件;
14、根据每个子应用的功能,在所述根目录文件夹中创建对应的多个packages子应用文件夹,得到项目目录结构;其中,每个packages子应用文件夹用于存放对应的子应用的应用代码和配置文件。
15、进一步地,在得到所述项目目录结构之后,所述方法还包括:
16、对每个packages子应用文件夹进行初始化,以基于初始化后的packages子应用文件夹对对应的子应用进行开发。
17、进一步地,在每个主应用中对该主应用对应的每个子应用进行注册与配置之后,所述方法还包括:
18、通过qiankun配置的router api接口,在待跳转的主应用中匹配到对应的待跳转子应用,并跳转到所述待跳转子应用。
19、进一步地,所述方法还包括:
20、通过qiankun配置的state api接口,在待查询的主应用中查询对应的待查询子应用的状态,以完成对所述待查询子应用的状态管理。
21、第二方面,本专利技术提供一种微前端架构,所述微前端架构包括微服务架构和通用代码仓库,所述微前端架构按照如上述任一项所述微前端架构的构建方法构建得到。
22、第三方面,本专利技术提供一种微前端架构的构建设备,包括:
23、一个或者多个存储器,其上存储有可执行程序;
24、一个或者多个处理器,用于执行所述存储器中的所述可执行程序,以实现上述任一项所述方法的步骤。
25、本专利技术采用以上技术方案,至少具备以下有益效果:
26、本专利技术基于qiankun构建微服务架构和基于monorepo构建通用代码仓库;其中,微服务架构包括主应用和对应的多个子应用,在主应用中对每个子应用进行注册与配置;每个子应用通过create-react-app脚手架进行安装与创建;通用代码仓库用于为上层应用提供能够复用的代码,存储主应用和多个子应用的代码文件。通过使用qiankun搭建微服务架构,可以将前端项目进行拆解形成多个独立的子应用,然后集成到主应用上,使每个子应用的功能更简洁,可以独立开发子应用,降低了开发和维护的难度;通过使用monorepo构建通用代码仓库,对多个相关的项目代码进行管理,实现了代码的共享和复用,避免了相同功能代码的重复开发,提高了开发效率和代码质量。
27、应当理解的是,以上的一般描述和后文的细节描述仅是示例性和解释性的,并不能限制本专利技术。
本文档来自技高网...【技术保护点】
1.一种微前端架构的构建方法,其特征在于,所述方法包括:
2.根据权利要求1所述的方法,其特征在于,所述在每个主应用中对该主应用对应的每个子应用进行注册与配置,包括:
3.根据权利要求1所述的方法,其特征在于,所述基于Monorepo构建通用代码仓库,包括:
4.根据权利要求3所述的方法,其特征在于,在得到所述项目目录结构之后,所述方法还包括:
5.根据权利要求2所述的方法,其特征在于,在每个主应用中对该主应用对应的每个子应用进行注册与配置之后,所述方法还包括:
6.根据权利要求1所述的方法,其特征在于,所述方法还包括:
7.一种微前端架构,其特征在于,所述微前端架构包括微服务架构和通用代码仓库,所述微前端架构按照如权利要求1至6任一项所述的构建方法构建得到。
8.一种微前端架构的构建设备,其特征在于,包括:
【技术特征摘要】
1.一种微前端架构的构建方法,其特征在于,所述方法包括:
2.根据权利要求1所述的方法,其特征在于,所述在每个主应用中对该主应用对应的每个子应用进行注册与配置,包括:
3.根据权利要求1所述的方法,其特征在于,所述基于monorepo构建通用代码仓库,包括:
4.根据权利要求3所述的方法,其特征在于,在得到所述项目目录结构之后,所述方法还包括:
5.根...
【专利技术属性】
技术研发人员:陈意珊,高斌,邹琼,周双全,
申请(专利权)人:深圳市瑞云科技股份有限公司,
类型:发明
国别省市:
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。