CN116028248B - 适用于web端的数据处理方法、装置及电子设备 - Google Patents

Abstract

本公开提供了一种适用于WEB端的数据处理方法、装置及电子设备，其中方法包括：利用前端框架构建WEB前端页面，通过WEB后端接口连通WEB前端和WEB后端的数据，并采用可视化图表工具将WEB后端的数据在WEB前端页面进行展示；基于WEB前端页面展示的数据，通过设置数据库连接和访问信息创建数据仓库连接，其中，数据仓库连接用于访问数据库连接对应的数据库；利用数据仓库连接，对数据库中的数据进行处理。本公开通过数据仓库连接，直接对数据库中的数据进行处理，不需要再额外使用mysql管理工具，数据处理简单，降低了数据操作的门槛和学习成本，解决了相关技术中数据操作复杂且学习成本高的问题。

Description

适用于WEB端的数据处理方法、装置及电子设备

技术领域

本公开涉及数据管理技术领域，具体涉及一种适用于WEB端的数据处理方法、装置及电子设备。

背景技术

随着计算机技术的发展，日常需要管理的数据逐渐增多。目前，用户对数据库中的数据进行操作时，往往无法直接操作数据库，需要使用Navicat等mysql管理工具，然而这种方式较为繁琐，数据操作复杂，并且mysql管理工具的学习成本高。

针对相关技术中数据操作复杂且学习成本高的问题，目前尚未提出有效的技术解决方案。

发明内容

本公开的主要目的在于提供一种适用于WEB端的数据处理方法、装置及电子设备，以解决相关技术中数据操作复杂且学习成本高的问题。

为了实现上述目的，本公开的第一方面提供了一种适用于WEB端的数据处理方法，包括：

利用前端框架构建WEB前端页面，其中，WEB前端页面为WEB前端展示的用户界面；

通过WEB后端接口连通WEB前端和WEB后端的数据，并采用可视化图表工具将WEB后端的数据在WEB前端页面进行展示；

基于WEB前端页面展示的数据，通过设置数据库连接和访问信息创建数据仓库连接，其中，数据仓库连接用于访问数据库连接对应的数据库；以及

利用数据仓库连接，对数据库中的数据进行处理。

可选地，利用前端框架构建WEB前端页面包括：

基于前端框架开发WEB前端页面，构建WEB前端页面的布局，其中，前端框架包括React、Vue和Angular中的任意一种或多种；

确定前端框架对应的组件和路由管理器；

利用前端框架的组件编写WEB前端页面，并利用前端框架的路由管理器构建页面路由关系。

进一步地，利用前端框架的路由管理器构建页面路由关系包括：

利用前端框架的路由管理器设定路径，基于路径确定统一资源定位符；

构建统一资源定位符和WEB前端页面之间的映射关系。

可选地，采用可视化图表工具将WEB后端的数据在WEB前端页面进行展示包括：

基于WEB后端的数据，采用可视化图表工具统计数据规模和数据融合，并在WEB前端页面进行展示，其中，可视化图表工具包括echarts、highcharts和antv中的任意一种或多种；

对WEB前端的数据库连接进行操作，并通过数据库连接，利用图形化页面对数据库中的数据进行展示并操作；

按照数据在业务线中的流向和数据库中各个层级数据表之间的关系，确定每个元素在WEB前端页面上的位置，绘制数据血缘图并展示，其中，元素位于WEB前端页面上；

从多个维度对数据进行可视化展示，并结合多个维度监测数据的质量。

可选地，访问信息包括端口、用户名和密码；

基于WEB前端页面展示的数据，通过设置数据库连接和访问信息创建数据仓库连接，包括：

确定WEB前端页面展示的数据所属数据库，根据连接上数据库的路径设置数据库连接；

通过设置数据库连接、端口、用户名和密码，创建数据仓库连接。

可选地，利用数据仓库连接，对数据库中的数据进行处理，包括：

将数据仓库连接作为交互控件，接收用户通过数据仓库连接对数据库、数据库中表结构或数据库中数据的操作，其中，用户的操作包括增加、删除、修改和查询中的任意一种或多种；

响应用户对数据库、数据库中表结构或数据库中数据的操作，展示执行操作后的WEB前端页面。

可选地，在利用数据仓库连接，对数据库中的数据进行处理之后，方法还包括：

响应用户对WEB前端页面上元素的点击操作，显示元素对应的可操作项；

响应用户对数据仓库连接名、数据库名或表名的点击操作，展示数据仓库、数据库或表对应的信息；

响应用户对数据仓库连接名、数据库名或表名的展开操作，按照树形结构展开数据仓库连接名、数据库名或表名的下级数据。

本公开的第二方面提供了一种适用于WEB端的数据处理装置，包括：

页面构建单元，用于利用前端框架构建WEB前端页面，其中，WEB前端页面为WEB前端展示的用户界面；

可视化展示单元，用于通过WEB后端接口连通WEB前端和WEB后端的数据，并采用可视化图表工具将WEB后端的数据在WEB前端页面进行展示；

创建单元，用于基于WEB前端页面展示的数据，通过设置数据库连接和访问信息创建数据仓库连接，其中，数据仓库连接用于访问数据库连接对应的数据库；以及

数据处理单元，用于利用数据仓库连接，对数据库中的数据进行处理。

本公开的第三方面提供了一种计算机可读存储介质，计算机可读存储介质存储有计算机指令，计算机指令用于使计算机执行第一方面任意一项提供的适用于WEB端的数据处理方法。

本公开的第四方面提供了一种电子设备，电子设备包括：至少一个处理器；以及与至少一个处理器通信连接的存储器；其中，存储器存储有可被至少一个处理器执行的计算机程序，计算机程序被至少一个处理器执行，以使至少一个处理器执行第一方面任意一项提供的适用于WEB端的数据处理方法。

在本公开实施例提供的适用于WEB端的数据处理方法中，利用前端框架构建WEB前端页面，其中，WEB前端页面为WEB前端展示的用户界面；通过WEB后端接口连通WEB前端和WEB后端的数据，并采用可视化图表工具将WEB后端的数据在WEB前端页面进行展示；通过可视化图表工具对数据进行展示，可以直观地显示出异常数据，进而可以快速地发现异常并处理问题；

基于WEB前端页面展示的数据，通过设置数据库连接和访问信息创建数据仓库连接，其中，数据仓库连接用于访问数据库连接对应的数据库；利用数据仓库连接，对数据库中的数据进行处理。通过数据仓库连接，直接对数据库中的数据进行处理，不需要再额外使用mysql管理工具，数据处理简单，降低了数据操作的门槛和学习成本，解决了相关技术中数据操作复杂且学习成本高的问题。

附图说明

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

图1为本公开实施例提供的适用于WEB端的数据操作方法流程示意图；

图2为本公开实施例提供的一种WEB前端页面的布局图；

图3为本公开实施例提供的适用于WEB端的数据操作装置框图；

图4为本公开实施例提供的电子设备框图。

具体实施方式

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

需要说明的是，本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本公开的实施例。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

需要说明的是，在不冲突的情况下，本公开中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本公开。

随着WEB前端的发展，客户端应用被淘汰的趋势愈发明显，数据可视化工具开始逐渐向WEB端转移。目前，用户对数据库中的数据进行操作时，往往无法直接操作数据库，需要使用Navicat等mysql管理工具，然而这种方式较为繁琐，数据操作复杂，并且mysql管理工具的学习成本高。

为了解决上述问题，本公开实施例提供了一种适用于WEB端的数据处理方法，也包括一种适用于WEB端的数据操作方法，如图1所示，该方法包括如下的步骤S101至步骤S104：

步骤S101：利用前端框架构建WEB前端页面，其中，WEB前端页面为WEB前端展示的用户界面；本公开实施例具体适用于WEB前端，在WEB前端进行数据处理。

具体的，步骤S101包括：

基于前端框架开发WEB前端页面，构建WEB前端页面的布局，其中，前端框架包括React、Vue和Angular中的任意一种或多种；

确定前端框架对应的组件和路由管理器；

利用前端框架的组件编写WEB前端页面，并利用前端框架的路由管理器构建页面路由关系。

例如，前端框架采用Vue时，对应的组件为Vue组件，对应的路由管理器为vue-router，此时，使用Vue组件来编写操作界面，使用vue-router构建页面路由关系；Vue和vue-router深度集成，构建单页面应用，页面即WEB前端页面，路由即单页面应用的路径管理器。

通过前端框架可以帮助开发者高效地开发WEB前端页面，本公开实施例提供的一种WEB前端页面的布局如图2所示，包括顶部布局、左侧布局和右侧布局；其中，顶部为工具栏，展示可进行的操作，根据用户点击的元素不同，可以显示出不同的可操作项；左侧为用户自定义的数据仓库连接名、数据库库名、表名的树形结构展示区域，可以通过点击操作查看具体信息，也可以通过展开操作查看下级数据；右侧布局为交互控件，可以新建数据仓库连接，在数据展示区域对数据库、表的结构和数据进行增删改查等操作。

本公开实施例提供的WEB前端页面的布局还可以是不同于图2的方式，例如，当展示数据血缘图时，可以将整个WEB前端页面作为数据展示区域，此时不需要顶部布局和左侧布局，WEB前端页面的具体布局方式在本公开中不做限定。

进一步的，利用前端框架的路由管理器构建页面路由关系包括：

利用前端框架的路由管理器设定路径，基于路径确定统一资源定位符（UniversalResource Locator，简称为URL），其中，URL包含有路径，具体为，URL包含协议、用户名、密码、主机域名或者ip地址、端口、路径、参数、查询、片段和url编码；

构建统一资源定位符和WEB前端页面之间的映射关系。建立URL和页面之间的映射关系，通过路径切换或URL切换，实现页面切换，从一个页面跳转到对应的页面。

步骤S102：通过WEB后端接口连通WEB前端和WEB后端的数据，并采用可视化图表工具将WEB后端的数据在WEB前端页面进行展示；通过后台接口连通数据，将数据在WEB前端页面进行可视化展示，直观地显示出数据。

具体的，步骤S102中的采用可视化图表工具将WEB后端的数据在WEB前端页面进行展示包括：

基于WEB后端的数据，采用可视化图表工具统计数据规模和数据融合，并在WEB前端页面进行展示，其中，可视化图表工具包括echarts、highcharts和antv中的任意一种或多种；

除了统计数据规模和数据融合之外，还可以采用可视化图表工具统计数据计算能力等，将对数据的各项统计整合为数据资产大盘；通过可视化图表工具对数据进行统计和展示，可以直观地显示数据，当数据出现异常时，工作人员可以快速地发现异常并处理问题。

对WEB前端的数据库连接进行操作，并通过数据库连接，利用图形化页面对数据库中的数据进行展示并操作；操作数据库连接，通过图形化页面展示数据和操作数据，其中，图形化页面属于WEB前端页面，WEB前端页面包括图形化页面；

按照数据在业务线中的流向和数据库中各个层级数据表之间的关系，确定每个元素在WEB前端页面上的位置，绘制数据血缘图并展示，其中，元素位于WEB前端页面上；

具体的，在WEB前端页面上以页面顶点或中心点为原点建立坐标系，确定每个元素在WEB前端页面上的横轴坐标和纵轴坐标，绘制数据血缘图并展示，其中，数据血缘图用于显示数据之间的关系，分析数据库中表和字段的血缘路径。

从多个维度对数据进行可视化展示，并结合多个维度监测数据的质量。

其中，可以从一致性、及时性、有效性、完整性和完备性等多个维度，对整体数据进行可视化展示，并且，按照不同业务划分出不同数据，对于不同数据分别采用对应的评估方式来监测数据的质量，得到数据质量的排名；通过对数据质量监测结果的可视化展示，可以更直观地评估数据质量。

步骤S103：基于WEB前端页面展示的数据，通过设置数据库连接和访问信息创建数据仓库连接，其中，数据仓库连接用于访问数据库连接对应的数据库。

具体的，访问信息包括端口、用户名和密码；

步骤S103包括：

确定WEB前端页面展示的数据所属数据库，根据连接上数据库的路径设置数据库连接；数据属于各个数据库，数据库中包含有数据表、表结构和数据等，数据仓库连接是实际连接上数据库的路径。

通过设置数据库连接、端口、用户名和密码，创建数据仓库连接。

步骤S104：利用数据仓库连接，对数据库中的数据进行处理。

具体的，步骤S104包括：

将数据仓库连接作为交互控件，接收用户通过数据仓库连接对数据库、数据库中表结构或数据库中数据的操作，其中，用户的操作包括增加、删除、修改和查询中的任意一种或多种；数据库中包含有数据表、表结构和数据等，用户可以直接操作数据库，对数据库进行增加、删除、修改和查询等操作，对数据库中表结构进行增加、删除、修改和查询等操作，对数据库中数据进行增加、删除、修改和查询等操作；

响应用户对数据库、数据库中表结构或数据库中数据的操作，展示执行操作后的WEB前端页面。

通过将数据操作的权限开放给使用人员，用户可以直接在数据库中增加数据、删除数据、修改数据和查询数据，操作简单，不需要使用mysql管理工具，免去了安装成本和学习成本，对电脑配置要求较低，降低了数据操作的门槛和对电脑配置的要求；

并且，可以让操作人员更直观地操作数据库、数据库中的表结构和数据，使维护人员更高效地查找问题并维护。

具体的，在步骤S104之后，该方法还包括：

响应用户对WEB前端页面上元素的点击操作，显示元素对应的可操作项；对于工具栏展示的可进行的操作，根据用户点击的工具栏中元素的不同，可以显示出不同的可操作项；

响应用户对数据仓库连接名、数据库名或表名的点击操作，展示数据仓库、数据库或表对应的信息；

响应用户对数据仓库连接名、数据库名或表名的展开操作，按照树形结构展开数据仓库连接名、数据库名或表名的下级数据。

用户可以自定义数据仓库连接名、数据库库名和表名，通过点击操作查看各个名称的具体信息，也可以通过展开操作按照树形结构展示各个名称的下级数据，在数据操作的过程中操作便利、灵活，适用性强。

从以上的描述中，可以看出，本公开实现了如下技术效果：

本公开将开放数据操作的权限给使用人员，用户可以直接在数据库中增加数据、删除数据、修改数据和查询数据，操作简单，不需要使用mysql管理工具，免去了安装成本和学习成本，对电脑配置要求较低，降低了数据操作的门槛和对电脑配置的要求，解决了相关技术中数据操作复杂且学习成本高的问题；

通过可视化图表工具对数据进行统计和展示，可以直观地显示数据，让操作人员更直观地操作数据库、数据库中的表结构和数据，当数据出现异常时，工作人员可以快速地发现异常并处理问题。

需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

本公开实施例还提供了一种用于实施上述适用于WEB端的数据处理方法的适用于WEB端的数据处理装置，如图3所示，该装置包括：

页面构建单元31，用于利用前端框架构建WEB前端页面，其中，WEB前端页面为WEB前端展示的用户界面；

可视化展示单元32，用于通过WEB后端接口连通WEB前端和WEB后端的数据，并采用可视化图表工具将WEB后端的数据在WEB前端页面进行展示；

创建单元33，用于基于WEB前端页面展示的数据，通过设置数据库连接和访问信息创建数据仓库连接，其中，数据仓库连接用于访问数据库连接对应的数据库；以及

数据处理单元34，用于利用数据仓库连接，对数据库中的数据进行处理。

上述装置实施例中各单元的执行操作的具体方式已经在有关该方法的实施例中进行了详细描述，此处不做详细阐述说明。

本公开实施例还提供了一种电子设备，如图4所示，该电子设备包括一个或多个处理器41以及存储器42，图4中以一个处理器41为例。

该控制器还可以包括：输入装置43和输出装置44。

处理器41、存储器42、输入装置43和输出装置44可以通过总线或者其他方式连接，图4中以通过总线连接为例。

处理器41可以为中央处理器（Central Processing Unit，简称为CPU），处理器41还可以为其他通用处理器、数字信号处理器（Digital Signal Processor，简称为DSP）、专用集成电路（Application Specific Integrated Circuit，简称为ASIC）、现场可编程门阵列（Field-Programmable Gate Array，简称为FPGA）或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等芯片，或者上述各类芯片的组合，通用处理器可以是微处理器或者任何常规的处理器。

存储器42作为一种非暂态计算机可读存储介质，可用于存储非暂态软件程序、非暂态计算机可执行程序以及模块，如本公开实施例中的控制方法对应的程序指令/模块。处理器41通过运行存储在存储器42中的非暂态软件程序、指令以及模块，从而执行服务器的各种功能应用以及数据处理，即实现上述方法实施例的适用于WEB端的数据处理方法。

存储器42可以包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需要的应用程序；存储数据区可存储根据服务器操作的处理装置的使用所创建的数据等。此外，存储器42可以包括高速随机存取存储器，还可以包括非暂态存储器，例如至少一个磁盘存储器件、闪存器件、或其他非暂态固态存储器件。在一些实施例中，存储器42可选包括相对于处理器41远程设置的存储器，这些远程存储器可以通过网络连接至网络连接装置。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

输入装置43可接收输入的数字或字符信息，以及产生与服务器的处理装置的用户设置以及功能控制有关的键信号输入。输出装置44可包括显示屏等显示设备。

一个或者多个模块存储在存储器42中，当被一个或者多个处理器41执行时，执行如图1所示的方法。

本领域技术人员可以理解，实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成的，程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各电机控制方法的实施例的流程。其中，存储介质可为磁碟、光盘、只读存储记忆体（Read-Only Memory，简称为ROM）、随机存储记忆体（Random AccessMemory，简称为RAM）、快闪存储器（Flash Memory，简称为FM）、硬盘（Hard Disk Drive，简称为HDD）或固态硬盘（Solid-State Drive，简称为SSD）等；存储介质还可以包括上述种类的存储器的组合。

虽然结合附图描述了本公开的实施方式，但是本领域技术人员可以在不脱离本公开的精神和范围的情况下作出各种修改和变型，这样的修改和变型均落入由所附权利要求所限定的范围之内。

Claims (6)

1.一种适用于WEB端的数据处理方法，其特征在于，包括：

利用前端框架构建WEB前端页面，其中，所述WEB前端页面为WEB前端展示的用户界面；

通过WEB后端接口连通所述WEB前端和WEB后端的数据，并采用可视化图表工具将所述WEB后端的数据在所述WEB前端页面进行展示；

基于所述WEB前端页面展示的数据，通过设置数据库连接和访问信息创建数据仓库连接，其中，所述数据仓库连接用于访问所述数据库连接对应的数据库；以及

利用所述数据仓库连接，对所述数据库中的数据进行处理；

其中，所述利用前端框架构建WEB前端页面包括：

基于所述前端框架开发所述WEB前端页面，构建所述WEB前端页面的布局，其中，所述前端框架包括React、Vue和Angular中的任意一种或多种；

确定所述前端框架对应的组件和路由管理器；

利用所述前端框架的组件编写所述WEB前端页面，并利用所述前端框架的路由管理器构建页面路由关系；

其中，所述利用所述前端框架的路由管理器构建页面路由关系包括：

利用所述前端框架的路由管理器设定路径，基于所述路径确定统一资源定位符；

构建所述统一资源定位符和所述WEB前端页面之间的映射关系；

其中，所述采用可视化图表工具将所述WEB后端的数据在所述WEB前端页面进行展示包括：

基于所述WEB后端的数据，采用可视化图表工具统计数据规模和数据融合，并在所述WEB前端页面进行展示，其中，所述可视化图表工具包括echarts、highcharts和antv中的任意一种或多种；

对所述WEB前端的数据库连接进行操作，并通过所述数据库连接，利用图形化页面对所述数据库中的数据进行展示并操作；

按照所述数据在业务线中的流向和所述数据库中各个层级数据表之间的关系，确定每个元素在所述WEB前端页面上的位置，绘制数据血缘图并展示，其中，所述元素位于所述WEB前端页面上；数据血缘图用于显示数据之间的关系，分析数据库中表和字段的血缘路径；

从多个维度对所述数据进行可视化展示，并结合所述多个维度监测所述数据的质量；

其中，所述基于所述WEB前端页面展示的数据，通过设置数据库连接和访问信息创建数据仓库连接，包括：

确定所述WEB前端页面展示的数据所属数据库，根据连接上所述数据库的路径设置数据库连接；

其中，所述利用所述数据仓库连接，对所述数据库中的数据进行处理，包括：

将所述数据仓库连接作为交互控件，接收用户通过所述数据仓库连接对所述数据库、所述数据库中表结构或所述数据库中数据的操作，其中，所述用户的操作包括增加、删除、修改和查询中的任意一种或多种；

响应用户对所述数据库、所述数据库中表结构或所述数据库中数据的操作，展示执行所述操作后的WEB前端页面。

2.根据权利要求1所述的方法，其特征在于，

所述访问信息包括端口、用户名和密码；

所述基于所述WEB前端页面展示的数据，通过设置数据库连接和访问信息创建数据仓库连接，还包括：

通过设置所述数据库连接、端口、用户名和密码，创建数据仓库连接。

3.根据权利要求1所述的方法，其特征在于，在利用所述数据仓库连接，对所述数据库中的数据进行处理之后，所述方法还包括：

响应用户对所述WEB前端页面上元素的点击操作，显示所述元素对应的可操作项；

响应用户对数据仓库连接名、数据库名或表名的点击操作，展示所述数据仓库、数据库或表对应的信息；

响应用户对数据仓库连接名、数据库名或表名的展开操作，按照树形结构展开所述数据仓库连接名、数据库名或表名的下级数据。

4.一种适用于WEB端的数据处理装置，其特征在于，包括：

页面构建单元，用于利用前端框架构建WEB前端页面，其中，所述WEB前端页面为WEB前端展示的用户界面；

可视化展示单元，用于通过WEB后端接口连通所述WEB前端和WEB后端的数据，并采用可视化图表工具将所述WEB后端的数据在所述WEB前端页面进行展示；

创建单元，用于基于所述WEB前端页面展示的数据，通过设置数据库连接和访问信息创建数据仓库连接，其中，所述数据仓库连接用于访问所述数据库连接对应的数据库；以及

数据处理单元，用于利用所述数据仓库连接，对所述数据库中的数据进行处理；

其中，所述利用前端框架构建WEB前端页面包括：

基于所述前端框架开发所述WEB前端页面，构建所述WEB前端页面的布局，其中，所述前端框架包括React、Vue和Angular中的任意一种或多种；

确定所述前端框架对应的组件和路由管理器；

利用所述前端框架的组件编写所述WEB前端页面，并利用所述前端框架的路由管理器构建页面路由关系；

其中，所述利用所述前端框架的路由管理器构建页面路由关系包括：

利用所述前端框架的路由管理器设定路径，基于所述路径确定统一资源定位符；

构建所述统一资源定位符和所述WEB前端页面之间的映射关系；

其中，所述采用可视化图表工具将所述WEB后端的数据在所述WEB前端页面进行展示包括：

基于所述WEB后端的数据，采用可视化图表工具统计数据规模和数据融合，并在所述WEB前端页面进行展示，其中，所述可视化图表工具包括echarts、highcharts和antv中的任意一种或多种；

对所述WEB前端的数据库连接进行操作，并通过所述数据库连接，利用图形化页面对所述数据库中的数据进行展示并操作；

按照所述数据在业务线中的流向和所述数据库中各个层级数据表之间的关系，确定每个元素在所述WEB前端页面上的位置，绘制数据血缘图并展示，其中，所述元素位于所述WEB前端页面上；数据血缘图用于显示数据之间的关系，分析数据库中表和字段的血缘路径；

从多个维度对所述数据进行可视化展示，并结合所述多个维度监测所述数据的质量；

其中，所述基于所述WEB前端页面展示的数据，通过设置数据库连接和访问信息创建数据仓库连接，包括：

确定所述WEB前端页面展示的数据所属数据库，根据连接上所述数据库的路径设置数据库连接；

其中，所述利用所述数据仓库连接，对所述数据库中的数据进行处理，包括：

将所述数据仓库连接作为交互控件，接收用户通过所述数据仓库连接对所述数据库、所述数据库中表结构或所述数据库中数据的操作，其中，所述用户的操作包括增加、删除、修改和查询中的任意一种或多种；

响应用户对所述数据库、所述数据库中表结构或所述数据库中数据的操作，展示执行所述操作后的WEB前端页面。

5.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机指令，所述计算机指令用于使计算机执行权利要求1-3任意一项所述的适用于WEB端的数据处理方法。

6.一种电子设备，其特征在于，所述电子设备包括：至少一个处理器；以及与所述至少一个处理器通信连接的存储器；其中，所述存储器存储有可被所述至少一个处理器执行的计算机程序，所述计算机程序被所述至少一个处理器执行，以使所述至少一个处理器执行权利要求1-3任意一项所述的适用于WEB端的数据处理方法。