CN111338823A - 一种基于LowDB实现Angular非父子组件交互的系统及方法 - Google Patents

Abstract

本发明提供一种基于LowDB实现Angular非父子组件交互的系统及方法，属于互联网前端领域，主要解决的问题是Angular框架非父子组件之间无法在完全隔离的情况下实现数据交互的问题。Angular非父子组件的发送端先将打上标签的数据存储于LowDB中，接收端组件通过标签对LowDB进行数据的监听与接收，该方式实现发送端与接收端的完全隔离，互不相影响，解决了非父子组件间在完全隔离情况下的交互通信问题，并且通信双方都可作为数据的发送方与接收方，实现了数据的双向通信；同时实现了通信双方一对多、多对一、多对多的交互连接方式，一处存储，多端使用。数据读写分离，两种功能封装于不同模块，均可被发送端和接收端调用，同时增加数据删除与修改功能，增加数据操作的灵活性。

Description

一种基于LowDB实现Angular非父子组件交互的系统及方法

技术领域

本发明涉及互联网前端技术领域，特别涉及了一种解决Angular框架非父子组件完全隔离情况下的交互通信的系统及方法。

背景技术

Angular是一个前端Javascript框架，Angular是用TypeScript编写的，它将核心和附加功能实现为一组TypeScript库，很多程序员都用它来构建和维护复杂的网页应用。但Angular框架中存在一种应用场景却未能实现：两个完全隔离的非父子组件，在HTML展示层或service服务层都不被对方注入的前提下，实现数据的交互通信，且双方都可作为数据发送方与接收方。

Angular官方只提供了父子组件间的通信方式，并且需要将子组件注入到父组件HTML展示页或service服务层中，无法实现两个组件间内容的独立展示。

为了解决这一问题，可以使用浏览器本地存储作为非父子组件间数据交互的中间介质，从而解决交互双方完全隔离情况下的交互通信问题。但浏览器自身存储容量只有5M大小，限制了大容量数据的交互传输。

发明内容

本发明所要解决的技术问题具体包括如下3方面：

一是为了解决Angular框架非父子组件在完全隔离的情况下实现数据交互的问题。

二是针对浏览器本地存储容量，解决Angular框架非父子组件交互数据大小限制问题。

三是为了解决Angular框架非父子组件通信双方角色固定且无法实现一对多、多对一、多对多等模式问题。

本发明的技术任务是针对现有技术的不足，基于浏览器存储作为中间介质的思想，通过使用LowDB文件数据库，连接Angular非父子组件双方，解决了交互两端完全隔离、可传输大量数据的问题，并且允许通信双方都可作为发送端或接收端，且数量不限。

本发明解决其技术问题所采用的技术方案是：

1、本发明提供一种基于LowDB实现Angular非父子组件交互的系统，包括：

发送端模块，即为非父子组件交互数据双方的发送端，每个发送端需要封装发送数据，为其打上标签flag_x；

发送端中间件模块，响应发送端请求，将数据存储于数据文件库模块中；

数据文件库模块，其核心载体使用LowDB文件数据库，用于存储非父子组件的交互数据；

接收端中间件模块，用于响应接收端请求，从数据文件库模块中获取数据；

接收端模块，即为非父子组件交互数据双方的接收端，每个接收端根据标签flag_x从数据文件库模块取所需数据，并对数据解封装使用；

附加功能模块，用于非父子组件操作数据。

方案优选地，所述LowDB文件数据库是一个轻量级的json文件数据库，可将数据存储为json格式保存于本地文件中。

方案优选地，所述发送端中间件模块，首先连接数据库文件模块，然后根据发送端数据标签flag_x，进行数据的封装，将其存储于数据文件库模块中，按照标签名创建存储文件。

方案优选地，所述接收端中间件模块，首先连接数据库文件模块，然后响应接收端请求，按照标签flag_x从数据文件库模块中获取数据，实现对不同发送端的数据获取。

方案优选地，所述附加功能模块用于数据封装、数据删除、数据修改，被发送端中间件模块和接收端中间件模块调用使用，面向数据文件库模块。

方案优选地，在非父子组件交互双方不被互相影响的情况下，实现数据交互，实现非父子组件的完全隔离。

方案优选地，非父子组件交互双方不只是一对一的交互方式，还实现了交互双方一对多、多对一、多对多的交互方式。

2、本发明另提供一种基于LowDB实现Angular非父子组件交互的方法，包括步骤如下：

S1、发送端封装数据，为数据打上标签flag_x，传给发送端中间件模块；

S2、封装发送端中间件模块组件，首先创建数据库连接，然后添加发送功能，将发送端数据存入数据库中，按照数据标签存入所对应的文件中(文件名即为标签名)，若无该文件则新建；

S3、封装接收端中间件模块组件，首先创建数据库连接，然后添加接收功能，响应接收端发送的请求，根据请求的标签值flag_x，检索数据文件库模块中的文件，获取数据返回给接收端；

S4、接收端获取数据，然后解封装，使用数据；

S5、封装附加功能模块组件，创建数据库连接，添加数据删除功能与数据修改功能，然后在发送端中间件模块与接收端中间件模块中，新增调用方法，对接附加功能模块，方便操作数据。

本发明的一种基于LowDB实现Angular非父子组件交互的系统及方法与现有技术相比所产生的有益效果是：

1、Angular框架官方未提供非父子组件间的交互方式，本发明不需要使用占位符标签注入另一方组件，在非父子组件双方完全隔离的情况下，即可实现双方的交互通信；

2、交互通信的数据大小无限制，并且以多文件存储、标签命名等方式，精细化划分数据的存储，提升数据的存取效率；

3、与Angular框架官方提供的只能实现两组件一对一的交互方式相比，本发明实现交互双方一对多、多对一、多对多的交互方式。

附图说明

为了更清楚地描述本发明一种基于LowDB实现Angular非父子组件交互的系统及方法的工作原理，下面将附上简图作进一步说明。

附图1是本发明所涉及数据文件库模块的示意图；

附图2是本发明一种基于LowDB实现Angular非父子组件交互的系统的整体架构图。

图中各标号表示：

1、发送端模块，2、发送端中间件模块，3、数据文件库模块，

4、接收端中间件模块，5、接收端模块，6、附加功能模块。

具体实施方式

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

本发明基于浏览器存储作为中间介质的思想，通过使用LowDB文件数据库，连接Angular非父子组件双方，Angular非父子组件的发送端先将打上标签的数据存储于LowDB中，接收端组件通过标签对LowDB进行数据的监听与接收，该方式实现发送端与接收端的完全隔离，互不相影响，解决了非父子组件间在完全隔离情况下的交互通信问题，并且通信双方都可作为数据的发送方与接收方，实现了数据的双向通信；同时实现了通信双方一对多、多对一、多对多的交互连接方式，一处存储，多端使用。数据读写分离，两种功能封装于不同模块，均可被发送端和接收端调用，同时增加数据删除与修改功能，增加数据操作的灵活性。

实施例一

请参阅图1、2，本发明的一种基于LowDB实现Angular非父子组件交互的系统，包括六个模块：发送端模块、发送端中间件模块、数据文件库模块、接收端模块、接收端中间件模块、附加功能模块，各模块主要负责功能如下：

发送端模块：即为交互数据双方的发送端，每个发送端需要封装发送数据，为其打上标签(如图2所示：flag_1,flag_2…flag_n)；

发送端中间件模块：该模块作为发送端与数据库的中间介质，负责连接数据库与数据发送；

数据文件库模块：(如图1)其核心载体使用LowDB文件数据库，根据不同标签创建不同的数据库文件，精细化划分，避免数据量过大时影响数据的存取效率；

接收端中间件模块：该模块作为接收端与数据库的中间介质，负责连接数据库与数据接收；

接收端模块：即为交互数据双方的接收端，每个接收端根据标签从数据文件库模块取所需数据(如图2所示：flag_1,flag_2…flag_n)，并对数据解封装使用；

附加功能模块：封装数据删除功能和数据修改功能，被发送端中间件模块和接收端中间件模块调用使用，面向数据库。

所涉及LowDB文件数据库以json格式存储数据。

实施例二

本发明提供一种基于LowDB实现Angular非父子组件交互的方法，基于实施例一的系统，具体包括步骤如下：

S1、发送端封装数据，为数据打上标签(如图2所示：flag_1,flag_2…flag_n)，传给发送端中间件模块；

S2、封装发送端中间件模块组件，首先创建数据库连接，然后添加发送功能，将发送端数据存入数据库中，按照数据标签存入所对应的文件中(文件名即为标签名，如图2所示：flag_1.json,flag_2.json…flag_n.json)，若无该文件则新建；

S3、封装接收端中间件模块组件，首先创建数据库连接，然后添加接收功能，响应接收端发送的请求，根据请求的标签值(如图2所示：flag_1,flag_2…flag_n)，检索数据文件库模块中的文件，获取数据返回给接收端；

S4、接收端获取数据，然后解封装，使用数据；

S5、封装附加功能模块组件，创建数据库连接，添加数据删除功能与数据修改功能，然后在发送端中间件模块与接收端中间件模块中，新增调用方法，对接附加功能模块，方便操作数据。

本发明不需要使用占位符标签注入另一方组件，在非父子组件双方完全隔离(双方不被互相影响)的情况下，即可实现双方的交互通信。

本发明交互通信的数据大小无限制，并且以多文件存储、标签命名等方式，精细化划分数据的存储，提升数据的存取效率。

本发明中非父子组件交互双方不只能实现Angular框架官方提供的一对一的交互方式，还实现了交互双方一对多、多对一、多对多的交互方式。

尽管已描述了本申请的优选实施例，但本领域内的技术人员一旦得知了基本创造性概念，则可对这些实施例做出另外的变更和修改。所以，所附权利要求意欲解释为包括优选实施例以及落入本申请范围的所有变更和修改。

显然，本领域的技术人员可以对本申请进行各种改动和变型而不脱离本申请的精神和范围。这样，倘若本申请的这些修改和变型属于本申请权利要求及其等同技术的范围之内，则本申请也意图包含这些改动和变型在内。

除说明书所述的技术特征外，均为本专业技术人员的已知技术。

Claims (9)

1.一种基于LowDB实现Angular非父子组件交互的系统，其特征在于，包括：

发送端模块，即为非父子组件交互数据双方的发送端，每个发送端需要封装发送数据，为其打上标签flag_x；

发送端中间件模块，响应发送端请求，将数据存储于数据文件库模块中；

数据文件库模块，其核心载体使用LowDB文件数据库，用于存储非父子组件的交互数据；

接收端中间件模块，用于响应接收端请求，从数据文件库模块中获取数据；

接收端模块，即为非父子组件交互数据双方的接收端，每个接收端根据标签flag_x从数据文件库模块取所需数据，并对数据解封装使用；

附加功能模块，用于非父子组件操作数据。

2.根据权利要求1所述的一种基于LowDB实现Angular非父子组件交互的系统，其特征在于，所述LowDB文件数据库，以json格式存储数据。

3.根据权利要求1或2所述的一种基于LowDB实现Angular非父子组件交互的系统，其特征在于，所述发送端中间件模块，首先连接数据库文件模块，然后根据发送端数据标签flag_x，进行数据的封装，将其存储于数据文件库模块中，按照标签名创建存储文件。

4.根据权利要求1或2所述的一种基于LowDB实现Angular非父子组件交互的系统，其特征在于，所述接收端中间件模块，首先连接数据库文件模块，然后响应接收端请求，按照标签flag_x从数据文件库模块中获取数据，实现对不同发送端的数据获取。

5.根据权利要求1或2所述的一种基于LowDB实现Angular非父子组件交互的系统，其特征在于，所述附加功能模块用于数据封装、数据删除、数据修改，被发送端中间件模块和接收端中间件模块调用使用，面向数据文件库模块。

6.根据权利要求1或2所述的一种基于LowDB实现Angular非父子组件交互的系统，其特征在于，在非父子组件交互双方不被互相影响的情况下，实现数据交互，实现非父子组件的完全隔离。

7.根据权利要求1或2所述的一种基于LowDB实现Angular非父子组件交互的系统，其特征在于，非父子组件交互双方的交互方式为一对一、一对多、多对一、多对多。

8.一种基于LowDB实现Angular非父子组件交互的方法，其特征在于，基于权利要求1或2所述的系统，包括步骤如下：

S1、发送端封装数据，为数据打上标签flag_x，传给发送端中间件模块；

S2、封装发送端中间件模块组件，首先创建数据库连接，然后添加发送功能，将发送端数据存入数据库中，按照数据标签存入所对应的文件中，若无该文件则新建；

S3、封装接收端中间件模块组件，首先创建数据库连接，然后添加接收功能，响应接收端发送的请求，根据请求的标签值flag_x，检索数据文件库模块中的文件，获取数据返回给接收端；

S4、接收端获取数据，然后解封装，使用数据；

S5、封装附加功能模块组件，创建数据库连接，添加数据删除功能与数据修改功能，然后在发送端中间件模块与接收端中间件模块中，新增调用方法，对接附加功能模块，方便操作数据。

9.根据权利要求8所述的一种基于LowDB实现Angular非父子组件交互的方法，其特征在于，所述文件名即为标签名。

Images