CN110909290A - 多个系统组合成大型单页应用的方法和系统 - Google Patents

Abstract

本发明提供了一种多个系统组合成大型单页应用的方法和系统，包括：获取多个单页应用的路由和多个单页应用的数据中心，其中，数据中心为单页应用进行数据处理的平台；为每个单页应用创建对应的命名空间，并基于创建的多个命名空间创建DOM树，得到目标DOM树；基于多个单页应用的路由、多个单页应用的数据中心和目标DOM树对多个单页应用进行组合，得到组合之后的单页应用。本发明缓解了现有技术中存在的页面因需要频繁刷新而导致加载速度慢的技术问题。

Description

多个系统组合成大型单页应用的方法和系统

技术领域

本发明涉及单页应用技术领域，尤其是涉及一种多个系统组合成大型单页应用的方法和系统。

背景技术

单页应用(single-page application，缩写SPA)是一种网络应用程序或网站的模型，它通过动态重写当前页面来与用户交互，而非传统的从服务器重新加载整个新页面。这种方法避免了页面之间切换打断用户体验，使应用程序更像一个桌面应用程序。在单页应用中，所有必要的代码(HTML、JavaScript和CSS)都通过单个页面的加载而检索，或者根据需要(通常是为响应用户操作)动态装载适当的资源并添加到页面。现有技术中，如果想要把几个单页应用合并在一起，只能采用iframe的方式进行嵌入操作，但是这种嵌入操作存在着页面因需要频繁刷新而导致加载速度慢的技术问题。

发明内容

有鉴于此，本发明的目的在于提供一种多个系统组合成大型单页应用的方法和系统，以缓解了现有技术中存在的页面因需要频繁刷新而导致加载速度慢的技术问题。

第一方面，本发明实施例提供了一种多个系统组合成大型单页应用的方法，包括：获取多个单页应用的路由和所述多个单页应用的数据中心，其中，所述数据中心为单页应用进行数据处理的平台；为每个单页应用创建对应的命名空间，并基于创建的多个命名空间创建DOM树，得到目标DOM树；基于所述多个单页应用的路由、所述多个单页应用的数据中心和所述目标DOM树对所述多个单页应用进行组合，得到组合之后的单页应用。

进一步地，基于所述多个单页应用的路由、所述多个单页应用的数据中心和所述目标DOM树对所述多个单页应用进行组合，得到组合之后的单页应用包括：对所述多个单页应用的路由进行合并，得到路由树；对所述多个单页应用的数据中心进行合并，得到目标数据中心；基于所述路由树、所述目标数据中心和所述目标DOM树对所述多个单页应用进行组合，得到组合之后的单页应用。

进一步地，在得到组合之后的单页应用之后，所述方法还包括：获取用户的数据处理请求；所述数据处理请求为请求目标单页应用执行数据处理操作的请求，所述数据处理请求中携带所述目标单页应用的命名空间信息，所述目标单页应用为所述多个单页应用中的单页应用，所述命名空间信息用于表征所述目标单页应用的命名空间；提取所述数据处理请求中的命名空间信息；按照所述命名空间信息确定所述目标单页应用的转发接口，并通过所述转发接口向所述目标单页应用发送所述数据处理请求，以使所述目标单页应用基于所述数据处理请求处理数据。

进一步地，所述数据处理请求还包括：身份认证信息；在通过所述转发接口向所述目标单页应用发送所述数据处理请求之前，所述方法还包括：基于所述身份认证信息进行单点登录认证操作，得到认证结果，所述认证结果包括以下任一项：认证成功，认证失败。

进一步地，所述方法还包括：若所述认证结果为认证成功，则通过所述转发接口向所述目标单页应用发送所述数据处理请求，以使所述目标单页应用基于所述数据处理请求处理数据。

第二方面，本发明实施例还提供了一种多个系统组合成大型单页应用的系统，包括：获取模块，创建模块和组合模块，其中，所述获取模块，用于获取多个单页应用的路由和所述多个单页应用的数据中心，其中，所述数据中心为单页应用进行数据处理的平台；所述创建模块，用于为每个单页应用创建对应的命名空间，并基于创建的多个命名空间创建DOM树，得到目标DOM树；所述组合模块，用于基于所述多个单页应用的路由、所述多个单页应用的数据中心和所述目标DOM树对所述多个单页应用进行组合，得到组合之后的单页应用。

进一步地，所述组合模块还包括：第一组合单元，第二组合单元和第三组合单元，其中，所述第一组合单元，用于对所述多个单页应用的路由进行合并，得到路由树；所述第二组合单元，用于对所述多个单页应用的数据中心进行合并，得到目标数据中心；所述第三组合单元，用于基于所述路由树、所述目标数据中心和所述目标DOM树对所述多个单页应用进行组合，得到组合之后的单页应用。

进一步地，所述系统还包括：认证模块，用于：获取用户的数据处理请求，所述数据处理请求中携带身份认证信息；基于所述身份认证信息进行单点登录认证操作，得到认证结果，所述认证结果包括以下任一项：认证成功，认证失败。

第三方面，本发明实施例还提供了一种电子设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述第一方面所述的方法的步骤。

第四方面，本发明实施例还提供了一种具有处理器可执行的非易失的程序代码的计算机可读介质，所述程序代码使所述处理器执行上述第一方面所述方法。

本发明实施例提供的一种多个系统组合成大型单页应用的方法和系统，通过将多个单页应用的路由和数据中心进行合并，形成一个大型单页应用，同时为每个单页应用创建单独的命名空间，并以命名空间为根节点创建DOM树，可以使用户通过DOM树切换与命名空间相对应的单页应用，而不是通过刷新页面进行单页应用的切换，从而解决了资源重复加载的问题，进一步缓解了页面因需要频繁刷新而导致加载速度慢的技术问题。

附图说明

为了更清楚地说明本发明具体实施方式或现有技术中的技术方案，下面将对具体实施方式或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施方式，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本发明实施例提供的一种多个系统组合成大型单页应用的方法的流程图；

图2为本发明实施例提供的一种多个系统组合成大型单页应用的系统的示意图；

图3为本发明实施例提供的另一种多个系统组合成大型单页应用的系统的示意图；

图4为本发明实施例提供的一种多个系统组合成大型单页应用的系统的系统架构示意图；

图5为本发明实施例提供的一种接口转发流程示意图；

图6为本发明实施例提供的一种SOC系统和弱点系统组合成一个大型单页应用的流程图。

具体实施方式

下面将结合附图对本发明的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。

实施例一：

图1是根据本发明实施例提供的一种多个系统组合成大型单页应用的方法的流程图，如图1所示，该方法具体包括如下步骤：

步骤S102，获取多个单页应用的路由和多个单页应用的数据中心，其中，数据中心为单页应用进行数据处理的平台。

步骤S104，为每个单页应用创建对应的命名空间，并基于创建的多个命名空间创建DOM树，得到目标DOM树。

具体地，以创建的多个命名空间为根节点创建DOM树，得到目标DOM树。

步骤S106，基于多个单页应用的路由、多个单页应用的数据中心和目标DOM树对多个单页应用进行组合，得到组合之后的单页应用。

本发明实施例提供的一种多个系统组合成大型单页应用的方法，通过将多个单页应用的路由和数据中心进行合并，形成一个大型单页应用，同时为每个单页应用创建单独的命名空间，并以命名空间为根节点创建DOM树，可以使用户通过DOM树切换与命名空间相对应的单页应用，而不是通过刷新页面进行单页应用的切换，从而解决了资源重复加载的问题，进一步缓解了页面因需要频繁刷新而导致加载速度慢的技术问题。

可选地，步骤S106具体包括如下步骤：

步骤S1061，对多个单页应用的路由进行合并，得到路由树；

步骤S1062，对多个单页应用的数据中心进行合并，得到目标数据中心；

步骤S1063，基于路由树、目标数据中心和目标DOM树对多个单页应用进行组合，得到组合之后的单页应用。

在本发明实施例中，通过上述方法可以将多个单页应用合并成一个大型的单页应用，这样就可以实现在一个应用里访问不同的单页应用的功能。

可选地，在本发明实施例中，用户访问组合之后的单页应用中的目标单页应用的步骤如下：

首先，获取用户的数据处理请求；数据处理请求为请求目标单页应用执行数据处理操作的请求，数据处理请求中携带目标单页应用的命名空间信息，目标单页应用为多个单页应用中的单页应用，命名空间信息用于表征目标单页应用的命名空间。

然后，提取数据处理请求中的命名空间信息。

最后，按照命名空间信息确定目标单页应用的转发接口，并通过转发接口向目标单页应用发送数据处理请求，以使目标单页应用基于数据处理请求处理数据。

在本发明实施例中，用户访问组合之后的大型单页应用时，可以通过单点登录的方式进行认证操作。单点登录(SingleSignOn，SSO)，就是通过用户的一次性鉴别登录。当用户在身份认证服务器上登录一次以后，即可获得访问单点登录系统中其他关联系统和应用软件的权限，同时这种实现是不需要管理员对用户的登录状态或其他信息进行修改的，这意味着在多个应用系统中，用户只需一次登录就可以访问所有相互信任的应用系统。这种方式减少了由登录产生的时间消耗，辅助了用户管理，是目前比较流行的。

具体地，数据处理请求还包括：身份认证信息；通过单点登录的方式进行认证的操作在通过转发接口向目标单页应用发送数据处理请求之前，包括如下步骤：

基于身份认证信息进行单点登录认证操作，得到认证结果，认证结果包括以下任一项：认证成功，认证失败。

若认证结果为认证成功，则通过转发接口向目标单页应用发送数据处理请求，以使目标单页应用基于数据处理请求处理数据。

在本发明实施例中，用户可以通过单点登录的方式对组合之后的大型单页应用进行身份认证，解决了不同系统组合起来需要重复登录认证的技术问题。

由以上描述可知，本发明实施例提供了一种多个系统组合成大型单页应用的方法，该方法首先获取多个单页应用的路由和多个单页应用的数据中心；然后为每个单页应用创建对应的命名空间，并基于创建的多个命名空间创建DOM树，得到目标DOM树；最后基于多个单页应用的路由、多个单页应用的数据中心和目标DOM树对多个单页应用进行组合，得到组合之后的单页应用。同时，在本发明实施例中，还可以通过单点登录的方式对组合之后的单页应用进行身份认证操作。本发明实施例提供的方法，可以将不同的单页应用自由组合，增强了单页应用的扩展性，使得对单页应用的开发也解耦，同时能够解决不同单页应用组合起来不能统一登录认证的技术问题。通过本发明组合得到的大型单页应用，用户在操作体验上感觉到的就是一个整体，而不会存在系统间的隔阂感。

实施例二：

图2是根据本发明实施例提供的一种多个系统组合成大型单页应用的系统的示意图，如图2所示，该系统包括：获取模块10，创建模块20和组合模块30。

具体地，获取模块10，用于获取多个单页应用的路由和多个单页应用的数据中心，其中，数据中心为单页应用进行数据处理的平台。

创建模块20，用于为每个单页应用创建对应的命名空间，并基于创建的多个命名空间创建DOM树，得到目标DOM树。

组合模块30，用于基于多个单页应用的路由、多个单页应用的数据中心和目标DOM树对多个单页应用进行组合，得到组合之后的单页应用。

本发明实施例提供了一种多个系统组合成大型单页应用的系统，通过组合模块将多个单页应用的路由和数据中心进行合并，形成一个大型单页应用，同时通过创建模块为每个单页应用创建单独的命名空间，并以命名空间为根节点创建DOM树，可以使用户通过DOM树切换与命名空间相对应的单页应用，而不是通过刷新页面进行单页应用的切换，从而解决了资源重复加载的问题，进一步缓解了页面因需要频繁刷新而导致加载速度慢的技术问题。

可选地，图3是根据本发明实施例提供的另一种多个系统组合成大型单页应用的系统的示意图，如图3所示，该系统中的组合模块30还包括：第一组合单元31，第二组合单元32和第三组合单元33。

具体地，第一组合单元31，用于对多个单页应用的路由进行合并，得到路由树。

第二组合单元32，用于对多个单页应用的数据中心进行合并，得到目标数据中心。

第三组合单元33，用于基于路由树、目标数据中心和目标DOM树对多个单页应用进行组合，得到组合之后的单页应用。

可选地，如图3所示，该系统还包括：认证模块40，用于：

获取用户的数据处理请求，数据处理请求中携带身份认证信息；

基于身份认证信息进行单点登录认证操作，得到认证结果，认证结果包括以下任一项：认证成功，认证失败。

若认证结果为认证成功，则通过转发接口向目标单页应用发送数据处理请求，以使目标单页应用基于数据处理请求处理数据。

本发明实施例还提供了一种电子设备，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，处理器执行计算机程序时实现上述实施例一中的方法的步骤。

本发明实施例还提供了一种具有处理器可执行的非易失的程序代码的计算机可读介质，程序代码使处理器执行上述实施例一中的方法。

实施例三：

本发明的主要目的是解决单页应用组合和大型应用功能维护的问题，提供了一种多个系统组合成大型单页应用的系统。

具体地，图4是根据本发明实施例提供的一种多个系统组合成大型单页应用的系统的系统架构示意图。如图4所示，该系统包括入口系统41，子系统42和子系统后端43。其中，子系统42的数量为多个，子系统后端43与子系统42为一一对应的关系，因此，子系统后端43的数量与子系统42的数量相同。

具体地，如图4所示，入口系统41，是整个系统的基础框架，采用react开发，入口系统41不放具体的业务，只是用来管理组织子系统42，并提供登录机制和菜单管理，具体业务由子系统42提供。

React(React.js)是一个为数据提供渲染为HTML视图的开源JavaScript库。React视图通常采用包含以自定义HTML标记规定的其他组件的组件渲染。React为程序员提供了一种子组件不能直接影响外层组件("data flows down")的模型，数据改变时对HTML文档的有效更新，和现代单页应用中组件之间干净的分离。React提供了一种称为Flux/Redux架构的创新解决方案，它代表单向数据流，是著名MVC架构的替代方案。

可选地，入口系统41还包括预设接口转发规则和公共前端服务，其中，预设接口转发规则用来转发不同子系统的接口对应到各自的后端系统；公共前端服务提供菜单配置等一些共用的接口。

可选地，入口系统41还包括SSO接口，其中SSO接口提供多系统统一登录认证的程序。

子系统42是提供具体业务的系统，每一个子系统42对应于一个单页应用。为了能拼装成单一应用，自身需要暴露相关路由和数据处理模块。

子系统后端43为与子系统42想对应的后端服务器。

可选地，本发明实施例提供的多个系统组合成大型单页应用的系统，可以通过执行下列方法的步骤，实现在一个应用里访问不同的系统的功能：

(1)使用react搭建的入口系统，提供路由和数据流处理模块(即上述实施例一种是数据中心)管理能力，提供认证登录模块，提供组合子系统路由和数据的方法。

(2)子系统中暴露自身的路由和数据流处理模块，供入口系统使用。

(3)入口系统引入需要的子系统文件，拿到它们的路由和数据流处理模块。

(4)入口系统为各个系统建立对应的命名空间，为每个子系统建立DOM根节点，不同系统的页面渲染到对应命名空间的根节点下。

(5)入口系统合多个子系统的并菜单和路由，生成路由树。

(6)合并数据流处理模块。

(7)用户点击菜单，触发不同的路由，路由里的页面渲染到各自子系统的根节点下，涉及到数据请求的话，会走相应的接口转发流程。

这样就实现在一个应用里访问不同的系统。

可选地，本发明实施例提供了一种接口转发流程，具体地，如图5所示，该接口转发流程包括如下步骤：

(1)用户发送请求。

(2)请求到web服务器，根据服务器上配置的预设接口转发规则，转发到对应系统后端。

(3)系统后端统一去SSO接口进行认证，若认证成功则返回数据，否则跳回到登录界面。

下面举例说明本发明实施例提供的系统如何将两个单页应用组成一个大型单页应用的。

例如，对于一个SOC系统，是单页应用，近期想增加一个弱点管理模块，但是单独开发比较复杂，现有另外一个弱点系统，也是单页应用，就可以通过本发明实施例提供的多系统组合成大型单页应用的系统融合SOC和弱点管理形成一个单页应用，简化开发。具体地的如图6所示。

(1)弱点系统和SOC系统相当于两个子系统，需要自己暴露出路由和数据流处理模块。

(2)入口系统中引入弱点系统和SOC系统的打包文件。

(3)入口系统配置SOC系统和弱点系统的两个菜单。

(4)入口系统初始化时，合并SOC系统和弱点系统的路由，生成路由树。合并数据流处理模块，并生成SOC系统和弱点系统两个命名空间和DOM根节点。

(5)用nodejs配置一个公共前端服务，提供菜单，登录认证等共用接口。

(6)配置一台web服务器，编写预设接口转发规则，对接到SOC系统和弱点系统的后端或者公共服务，接口都需要去SSO接口进行认证。

(7)用户点击菜单，会进入SOC系统或者弱点系统，在根节点渲染相应页面，页面中涉及到的请求，会通过web服务器转发，获取正确的数据。

最后应说明的是：以上各实施例仅用以说明本发明的技术方案，而非对其限制；尽管参照前述各实施例对本发明进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本发明各实施例技术方案的范围。

Claims (10)

1.一种多个系统组合成大型单页应用的方法，其特征在于，包括：

获取多个单页应用的路由和所述多个单页应用的数据中心，其中，所述数据中心为单页应用进行数据处理的平台；

为每个单页应用创建对应的命名空间，并基于创建的多个命名空间创建DOM树，得到目标DOM树；

基于所述多个单页应用的路由、所述多个单页应用的数据中心和所述目标DOM树对所述多个单页应用进行组合，得到组合之后的单页应用。

2.根据权利要求1所述的方法，其特征在于，基于所述多个单页应用的路由、所述多个单页应用的数据中心和所述目标DOM树对所述多个单页应用进行组合，得到组合之后的单页应用包括：

对所述多个单页应用的路由进行合并，得到路由树；

对所述多个单页应用的数据中心进行合并，得到目标数据中心；

基于所述路由树、所述目标数据中心和所述目标DOM树对所述多个单页应用进行组合，得到组合之后的单页应用。

3.根据权利要求1所述的方法，其特征在于，在得到组合之后的单页应用之后，所述方法还包括：

获取用户的数据处理请求；所述数据处理请求为请求目标单页应用执行数据处理操作的请求，所述数据处理请求中携带所述目标单页应用的命名空间信息，所述目标单页应用为所述多个单页应用中的单页应用，所述命名空间信息用于表征所述目标单页应用的命名空间；

提取所述数据处理请求中的命名空间信息；

按照所述命名空间信息确定所述目标单页应用的转发接口，并通过所述转发接口向所述目标单页应用发送所述数据处理请求，以使所述目标单页应用基于所述数据处理请求处理数据。

4.根据权利要求3所述的方法，其特征在于，所述数据处理请求还包括：身份认证信息；在通过所述转发接口向所述目标单页应用发送所述数据处理请求之前，所述方法还包括：

基于所述身份认证信息进行单点登录认证操作，得到认证结果，所述认证结果包括以下任一项：认证成功，认证失败。

5.根据权利要求4所述的方法，其特征在于，所述方法还包括：

若所述认证结果为认证成功，则通过所述转发接口向所述目标单页应用发送所述数据处理请求，以使所述目标单页应用基于所述数据处理请求处理数据。

6.一种多个系统组合成大型单页应用的系统，其特征在于，包括：获取模块，创建模块和组合模块，其中，

所述获取模块，用于获取多个单页应用的路由和所述多个单页应用的数据中心，其中，所述数据中心为单页应用进行数据处理的平台；

所述创建模块，用于为每个单页应用创建对应的命名空间，并基于创建的多个命名空间创建DOM树，得到目标DOM树；

所述组合模块，用于基于所述多个单页应用的路由、所述多个单页应用的数据中心和所述目标DOM树对所述多个单页应用进行组合，得到组合之后的单页应用。

7.根据权利要求6所述的系统，所述组合模块还包括：第一组合单元，第二组合单元和第三组合单元，其中，

所述第一组合单元，用于对所述多个单页应用的路由进行合并，得到路由树；

所述第二组合单元，用于对所述多个单页应用的数据中心进行合并，得到目标数据中心；

所述第三组合单元，用于基于所述路由树、所述目标数据中心和所述目标DOM树对所述多个单页应用进行组合，得到组合之后的单页应用。

8.根据权利要求6所述的系统，其特征在于，所述系统还包括：认证模块，用于：

获取用户的数据处理请求，所述数据处理请求中携带身份认证信息；

基于所述身份认证信息进行单点登录认证操作，得到认证结果，所述认证结果包括以下任一项：认证成功，认证失败。

9.一种电子设备，包括存储器、处理器及存储在所述存储器上并可在所述处理器上运行的计算机程序，其特征在于，所述处理器执行所述计算机程序时实现上述权利要求1至5任一项所述的方法的步骤。

10.一种具有处理器可执行的非易失的程序代码的计算机可读介质，其特征在于，所述程序代码使所述处理器执行所述权利要求1-5任一项所述方法。

Images