【技术实现步骤摘要】
本专利技术属于系统设计，具体涉及一种基于微前端的主应用对子应用管理的方法和系统。
技术介绍
1、传统项目之间的嵌套一般使用iframe实现，这种模式用于自有网站或系统加载其它项目(系统)的内容，但是在主应用(自有系统)更新操作时无法反馈给嵌入的其它项目；另外一种方式则是使用微前端qiankun技术嵌入项目，但此种方式也存在如下缺陷：在项目和平台之间公共的文件和资源会产生重复，嵌入项目所依赖的资源版本也可能会各不相同，无法进行版本统一管理，并且随着嵌入项目的数量持倍数增长，使浏览器做了太多无用的资源加载。具体如下：
2、(1)集成的子项目通常根据自身需求定制化修改框架代码，而子项目和平台是同一套项目文件，子项目开发人员容易盲目修改到通用文件或源码，需要集成的导致集成的项目在平台中打开各不兼容；
3、(2)各种子项目集成到平台中，平台需要兼容从而主动引入或被动引入子项目的资源，导致平台重复资源加载过多；
4、(3)各个项目菜单由每个项目人员自己维护，导致平台集成的子项目菜单难以动态管理。
技术实现思路
1、为了解决现有平台集成子项目时存在的项目不兼容问题，以及现有的集成无法规范这些兼容要求，各种项目使用的组件、样式框架、功能插件版本不同导致的兼容性问题，本专利技术提出了一种基于微前端的主应用对子应用管理的方法和系统。
2、实现本专利技术目的之一的一种基于微前端的主应用对子应用管理的方法，包括如下步骤：
3、s1、确定主应用和集
4、所述公用资源或公用文件包括：框架头部(包括个人设置、退出登录、标题等)及框架侧边栏的菜单选项(如后台维护数据的动态菜单等)；其具体形式包括：css文件、第三方js文件、图片等；
5、所述微前端是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，将巨石应用拆解成若干可以自治的松耦合微应用，即将web应用由单一的单体应用转变为多个小型前端应用聚合为一的应用，各个前端应用可以独立运行、独立开发、独立部署；多个团队通过独立发布功能的方式来共同构建web应用，每个微应用真正具备独立开发、独立运行的能力；
6、s2、将主应用中的所述公用文件放置于主应用的设定文件目录中，在子应用的本地目录中删除所述公用文件；并添加每个子应用的目标加载文件以使子应用在主应用中被启动；所述子应用的目标加载文件为子应用启动时的入口文件；
7、此步骤的好处是公用资源可以统一在主应用中加载，子应用无需重复加载，降低了各应用间的耦合度，同时也提高了应用加载时的速度；
8、子应用通过接口获取菜单数据并展示在主应用中，主应用端和子应用端保持相同的菜单权限；
9、s3、将所有子应用中集成的样式表放置于主应用的设定文件目录中；所述样式包括界面布局、颜色、字体大小、自适应窗口；
10、s4、在主应用中配置每个嵌入的子应用的ip地址和端口，主应用通过所述ip地址和端口访问和/或修改每个子应用，从而实现主应用对子应用的管理。
11、进一步地，所述步骤s2包括：利用webpack软件的html-webpack-plugin插件在配置文件中添加每个子应用的目标加载文件的文件路径。
12、所述webpack为代码编译工具，有入口、出口、loader和插件，用于javascript应用程序的静态模块打包工具。所述配置文件的格式一般为json文件格式。
13、更进一步地，所述步骤s2包括：
14、将子应用中的目标加载文件复制到主应用中的公共文件目录中；为了提高应用加载或启动的速度，将主应用中的目标加载文件中已经存在的link文件路径从复制文件中剔除，所述复制文件即所述的复制到主应用中的公共文件目录中的子应用中的目标加载文件。
15、所述目标加载文件为应用运行启动时的入口文件；每个主应用和子应用都有一个目标加载文件；当子应用单独运行时，调用的则是每个子应用本地的目标加载文件，该文件通常命名为index.html；当子应用在主应用中被调用时，则调用的是主应用中的公共文件目录中每个子应用的目标加载文件；每个子应用都需要将自己的目标加载文件保存在所述主应用中的公共文件目录中。
16、每个目标加载文件中包括link文件路径及script文件路径，其中link文件用于表示应用中各种层叠样式表的加载方式，script文件用于表示应用中客户端的脚本，其通过文件中的src属性指向子应用的脚本文件；由于主应用和子应用的目标加载文件中的link文件路径可能存在重复，为了提高应用的加载速度，需要从主应用中的公共文件目录中子应用的目标加载文件中剔除掉原本在主应用的目标加载文件中已经存在的link文件路径。
17、进一步地，所述步骤s3包括：
18、在主应用中新建文件目录，将子应用的样式表复制至所述新建的文件目录；所述样式表包括层叠样式表，其目的是为了使子应用可在主应用中被正常加载。
19、更进一步地，在主应用中新增子应用时，子应用的样式表的命名规则包括：{app_clientid}；其中app表示子应用的名称，clientid为子应用的唯一标识号；所述子应用的唯一标识号用于主应用调用子应用的样式表时标识每个子应用。
20、进一步地，所述步骤s4包括如下步骤：
21、在主应用的配置界面中选择待嵌入的子应用后，配置所述子应用的用于生产或测试环境的ip地址和端口，将配置的ip地址和端口存入数据库中，主应用初始化时调用数据库接口获取数据库中每个子应用的ip地址和端口，并保存在主应用的本地文件目录中。
22、更进一步地，还包括配置子应用的调试开关，所述调试开关用于控制是否开启子应用的本地开发调试；当所述子应用调试开关开启时，则将配置的子应用ip地址及端口写入主应用的配置文件中以开启子应用的本地开发调试，写入格式包括：项目名+子应用ip及端口+子应用的唯一标识号clientid。
23、子应用调试开关开启后，平台在跳转子应用的菜单时，实际上访问的是本地启动的子应用，因此可以正常进行子应用本地调试和开发，以此实现对子应用权限的控制。
24、实现本专利技术目的之二的一种基于微前端的主应用对子应用管理的系统，包括公用文件确认模块、公用文件整理模块、样式表集成模块和网络配置模块；
25、所述公用文件确认模块用于确定主应用和集成了微前端的子应用的公用文件；所述子应用为需要嵌套到所述主应用中的应用；所述子应用集成了微前端且微前端的所有微应用均已上线；
26、所述公用文件整理模块用于将主应用中的所述公用文件放置于主应用的设定文件目录中，在子应用的本地目录中删除所述公用文件；并添加每个子应用的目标加载文件以使子应用在主应用中被启动；
27、所述样式表集成模块本文档来自技高网...
【技术保护点】
1.一种基于微前端的主应用对子应用管理的方法，其特征在于，包括如下步骤：
2.如权利要求1所述的基于微前端的主应用对子应用管理的方法，其特征在于，所述步骤S4包括：
3.如权利要求2所述的基于微前端的主应用对子应用管理的方法，其特征在于，还包括配置子应用的调试开关，所述调试开关用于控制是否开启子应用的本地开发调试；当所述子应用调试开关开启时，则将配置的子应用IP地址及端口写入主应用的配置文件中以开启子应用的本地开发调试，写入格式包括：项目名+子应用IP及端口+子应用的唯一标识号clientId。
4.如权利要求1所述的基于微前端的主应用对子应用管理的方法，其特征在于，所述步骤S2包括：利用webpack软件的html-webpack-plugin插件在配置文件中添加每个子应用的目标加载文件的文件路径。
5.如权利要求1或4所述的基于微前端的主应用对子应用管理的方法，其特征在于，其特征在于，所述步骤S2包括：
6.如权利要求1所述的基于微前端的主应用对子应用管理的方法，其特征在于，其特征在于，所述步骤S3包括：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。