CN111813434A

CN111813434A - 一种基于微服务的前端开发系统及方法

Info

Publication number: CN111813434A
Application number: CN202010632752.5A
Authority: CN
Inventors: 朱柯; 李辰; 姜新灿; 韩颜彬
Original assignee: Beijing Tongchuang Yongyi Technology Development Co ltd
Current assignee: Beijing Tongchuang Yongyi Technology Development Co ltd
Priority date: 2020-07-01
Filing date: 2020-07-01
Publication date: 2020-10-23

Abstract

发明提供了一种基于微服务的前端开发系统及方法，本发明的前端开发系统包括注册中心模块，Portal系统模块和子应用系统模块，注册中心模块主要管理各子应用系统，Portal系统模块展示各子应用系统，子应用系统模块实现各种业务功能；本发明的前端开发方法包括注册中心配置所有子应用系统的路由和唯一标识的配置信息，在Portal系统获取所述注册中心注册的所有子应用系统的配置信息，同时在Portal系统页面中展示各子应用系统。本发明将原来的单体应用转变为多个小型前端应用聚合，解决了单页Web前端臃肿复杂，开发项目过于庞大，程序打包编译时间过长，以及页面加载时间过长，多个开发团队协作开发困难的问题，同时满足了产品的定制化和产品的拆分。

Description

一种基于微服务的前端开发系统及方法

技术领域

本发明涉及互连网通信技术领域，尤其涉及一种基于微服务的前端开发系统及方法。

背景技术

随着互连网技术的发展，Web开发模式一直在演变优化。由早期后端为主的MVC模式转变为前后端分离模式。在这种模式下，前后端分工清晰，关键协作点是AJAX接口，前端是一个独立的单页Web应用。单页Web应用(single page web application,简称SPA) 是加载单个HTML页面，并在用户与应用程序交互的时候动态更新该页面的Web应用程序。单页Web应用使用AJAX和HTML5创建Web应用程序。浏览器一开始会加载必需的HTML、 CSS和JavaScript,所有的操作都在这张HTML页面上完成，由JavaScript来控制DOM的变化。在用户与该Web客户端进行交互的时候，浏览器通过AJAX与服务器进行数据交互，通过JavaScript对页面状态和参数进行动态的更新，更新页面内容，从而实现页面的变化和跳转等功能。用户的操作不会导致页面重新加载或跳转，提供了良好的用户体验。因此，单页Web应用需要更多的JavaScript代码来处理数据的交互问题，复杂度可想而知。随着时间的推移和业务的发展，为了支撑复杂的业务逻辑，前端变得越来越臃肿，由一个独立团队所开发的前端工程往往会越来越难以维护。前端面临模块数目多、打包编译时间过长、加载缓慢等问题，特别是当一个功能丰富的前端Web应用程序位于后端微服务架构之上时，单个前端团队将会成为一个发展瓶颈。

发明内容

本发明的目的是要解决上述现有技术中存在的问题和缺陷，提出了一种基于微服务的前端开发系统以及方法的解决方案。本发明将微服务理念应用于前端系统开发中，将原来的单体应用转变为多个小型前端应用聚合的应用，解决了单页Web应用开发的痛点。

本发明的技术方案之一是提供一种基于微服务的前端开发系统，其特征在于：

注册中心模块，提供子应用系统的注册API接口，和查询子应用系统模块注册到注册中心模块的配置信息的API接口；所述注册中心模块同时管理各子应用系统。

Portal系统模块，通过注册中心模块提供的查询子应用系统模块注册到注册中心模块的配置信息的API接口，查询注册中心注册的子应用系统；所述Portal系统模块同时展示所述各子应用系统。

子应用系统模块，业务相关的各个子应用系统模块，用于各种业务模块下的具体功能的实现。

本发明的另一个技术方案是提供一种基于微服务的前端开发方法，其特征在于：

1)通过注册中心将所有子应用系统配置到所述注册中心的子应用系统配置表中，配置所有所述子应用系统的路由信息和唯一标识；

a.所述注册中心轮询各子应用系统的状态，注册中心每隔30秒轮询所述各子应用系统是否正常，如果所述子应用系统在两次轮询的状态都异常，注册中心即将该子应用系统下线；

b.所述子应用系统注册到所述注册中心，所述子应用系统在部署上线的时候会调用所述注册中心的子应用系统的注册API接口，将所述子应用系统的配置信息注册到所述注册中心的子应用系统配置表中；

c.所述注册中心的子应用系统配置表信息包含所述子应用系统的路由信息和唯一标识信息；

2)Portal系统通过所述注册中心提供的查询子应用系统模块注册到注册中心模块配置信息的API接口，获取所述注册中心注册的所有子应用系统的配置信息，并在页面中展示所有的子应用系统；当所述注册中心将异常的子应用系统下线时，在Portal系统将无法看到所述异常子应用系统。

3)点击所述Portal系统中展示的所述子应用系统，通过获取所述子应用系统配置信息的路由信息，跳转到相应子应用系统页面。

本发明的系统和方法解决了当前Web应用开发中遇到的项目过于庞大，程序打包编译时间过长，以及页面加载时间过长，无法满足多个开发团队多人多地协作开发的问题，同时满足了产品SaaS化定制和产品的拆分。本发明将原来的单体应用转变为多个小型前端应用聚合的应用，解决了单页Web前端臃肿复杂，从而难以应用开发的痛点。

附图说明

图1是本发明的开发系统组成示意图；

图2是本发明的开发方法流程框图；

图3-5是具体实施例的输出效果示意图。

具体实施方式

以下参照附图以及示例性实施例对本发明的具体实施方式进行详细说明。本发明可以进行各种不同的改进，以及可以包括各种实施方式。以下所示出的是优选实施例，但这些优选实施例并不限定本发明的多种实施方式。

本发明的设计思想，技术方案及其主要优点在于：

本发明的设计思想源于前端业务越来越复杂，功能模块越来越多，带来的结果是前端页面的倍增和JavaScript代码量的增加，意味着前端代码的打包时间也会倍增，上线时，部署耗时会被延长。如果部署后出现缺陷，要线上立即修复，同样需要大量的时间。

而本发明的前端开发系统仅包括以下模块：

注册中心模块，提供子应用系统的注册API接口，和查询子应用系统模块注册到注册中心模块配置信息的API接口；注册中心模块同时管理各子应用系统。

Portal系统模块，通过注册中心模块提供的查询子应用系统模块注册到注册中心模块配置信息的API接口，查询注册中心注册的子应用系统；Portal系统模块同时展示各子应用系统。

本发明基于微服务的前端开发系统，由于各个子应用系统都是独自开发，独自部署上线，因此，各子应用系统之间互不影响，相应的打包时间也会减小，可以更好的部署上线，使整个前端开发项目打包速度更加优化。

本发明的前端开发系统可使团队协作的更好。现有的开发方法是前端的所有代码都在一个工程里，所有的团队在同一个工程里开发，遭遇代码冲突的概率会很频繁，而且冲突的影响面比较大。如果代码中出现问题，导致代码提交失败，其他人的代码的提交与更新也都会被阻塞。而本发明将这样的风险就平摊到各个工程上去了，由于各个子应用系统之间都是一个独立的项目，之间没有关联性，各团队之间可以更好的开发各自的项目，而不必过于担心开发代码的冲突问题，减少了代码冲突的概率。

本发明基于微服务的前端开发方法如下：

1)通过注册中心将所有子应用系统配置到所述注册中心的子应用系统配置表中，配置所有所述子应用系统的路由信息和唯一标识；配置过程为：

a.注册中心轮询各子应用系统的状态，注册中心每隔30秒轮询各子应用系统是否正常，如果子应用系统在两次轮询的状态都异常，注册中心即将该子应用系统下线；

b.子应用系统注册到注册中心，子应用系统在部署上线的时候会调用注册中心注册API接口，将子应用系统配置信息注册到注册中心的配置表中；

c.注册中心的子应用系统配置表信息包含子应用系统的路由信息和唯一标识信息。

3)点击所述Portal系统中展示的所述子应用系统，通过获取的所述子应用系统配置信息的路由信息，跳转到相应子应用系统的页面。

本发明的系统和方法将原来的单体应用转变为多个小型前端应用聚合的应用，解决了单页Web前端臃肿复杂，难以应用开发的痛点。因此，本发明方便产品定制化。当客户要求做本地化与定制化时，定制化从易到难则可以分为独立新模块、改造和替换现有模块。通过本发明，可以很容易达到本地化代码安全的下限，即客户只需要模块的前端源码。定制化最简单的独立新模块也变得更为简单，交付团队增加一个新的微前端工程即可，不需要揉进现有研发工程中，不占用研发团队资源。而定制化中的改造现有模块也可以比较好地实现。如某个标准版的页面中需要增加一个面板，则可以通过一个新的微前端工程，同样响应该页面的URL，在页面的恰当位置插入一个新的DOM节点即可。

实施例1

根据本发明的基于微服务的前端开发系统及方法，参照附图1-5所示,本发明进行了如下具体的前端系统开发，并获得了良好的输出效果。

1)如图2所示，所示某企业集团内部部门管理系统的财务系统、人事行政系统、销售系统和后勤保障系统的四个子应用系统在部署上线的同时，通过HTTP请求调用注册中心模块提供的子应用系统的注册API接口，注册中心模块将四个子应用系统的路由信息和唯一标识通过注册中心模块提供的子应用系统注册API接口注册到注册中心的子应用系统的配置信息表中；

2)该企业集团内部部门管理系统如图2和图3所示，用户访问Portal系统，本实施例中的Portal系统模块，通过HTTP请求调用注册中心模块的Portal系统模块查询子应用系统模块注册到注册中心模块配置信息的API接口，查询注册中心模块中的子应用系统配置表中的财务系统、人事行政系统、销售系统和后勤保障系统的子应用系统配置信息，同时将各子应用系统的配置信息通过Portal系统模块中的JavaScript脚本，将获取的子应用系统的信息生成HTML，在Portal系统页面的头部菜单上展示出了财务系统、人事行政系统、销售系统和后勤保障系统四个子应用系统的信息。

3)如图3和图2所示，通过点击财务系统的菜单按钮，Portal系统模块通过路由跳转的形式跳转到财务子系统的页面；其中包含了，将获取到的财务系统的应用系统配置信息中的路由信息设置为路由跳转的浏览器URL地址，同时调用浏览器的路由跳转，跳转到财务子系统的页面。

4)如图4和图2所示,当注册中心模块通过轮询的方式每隔30秒向各子应用系统发送HTTP请求查询子应用系统的应用状态，当两次查询到人事行政子应用系统的状态为异常时，注册中心模块将人事行政系统的配置信息从存储各子应用系统的配置信息的数据库配置表中删除，在Portal系统中，Portal系统模块查询各子应用系统的配置信息时，查询不到人事行政子应用系统的配置信息，所以将人事行政子应用系统对应的菜单按钮标签通过JavaScript脚本删除，页面中也就看不到人事行政系统的菜单按按钮标签。

5)如图5和图2所示,当人事行政应用系统重新部署上线，人事行政应用系统通过HTTP请求调用注册中心模块提供的子应用系统的注册API接口，注册中心模块将人事行政应用系统的路由信息和唯一标识通过注册中心模块提供的子应用系统的注册API接口，重新注册到注册中心的子应用系统的配置信息表中，当Portal系统模块通过http请求重新查询注册中心模块提供的查询注册的子应用系统的API接口时，API接口重新返回人事行政子应用系统的子应用系统的配置信息，在Portal系统中便可以正常的展示和访问人事行政子应用系统。

上述实施例说明了本发明能够实现各子应用系统之间相互独立，互不影响。当某个子应用系统出现问题而不能使用时，其他的子应用系统仍可以正常使用而不受影响。同时，应用系统的部署上线也对其他项目的正常运行没有影响。

以上详细描述了本发明的优选实施方式，但是，本发明并不限于此。在本发明的技术构思范围内，对本发明技术方案所进行的各种改进或组合，均属于本发明的保护范围。

Claims

1.一种基于微服务的前端开发系统，其特征在于，该系统包括：

注册中心模块，提供子应用系统的注册API接口，和查询子应用系统模块注册到注册中心模块的配置信息的API接口；

Portal系统模块，通过注册中心模块提供的查询子应用系统模块注册到注册中心模块的配置信息的API接口，查询注册中心注册的子应用系统；

2.根据权利要求1所述的前端开发系统，其特征在于，所述注册中心模块同时管理各子应用系统。

3.根据权利要求1所述的前端开发系统，其特征在于，所述Portal系统模块同时展示所述各子应用系统。

4.一种权利要求1-3基于微服务的前端开发方法，其特征在于，

1)通过注册中心将所有的子应用系统配置到所述注册中心的子应用系统配置表中，配置所有所述子应用系统的路由信息和唯一标识；

2)Portal系统通过所述注册中心提供的Portal系统模块，查询子应用系统模块注册到注册中心模块的配置信息的API接口，获取所述注册中心注册的所有子应用系统的配置信息，并在页面中展示所有的子应用系统；

3)点击所述Portal系统中展示的所述子应用系统，通过获取所述子应用系统配置信息的路由信息，跳转到相应子应用系统的页面。

5.根据权利要求4所述的前端开发方法，其特征在于，当所述注册中心将异常的子应用系统下线时，在Portal系统将无法看到所述异常子应用系统。