CN109885793A - 页面数据采集方法及装置、电子设备、存储介质 - Google Patents

Abstract

本申请揭示了一种页面数据采集方法及装置，涉及大数据技术领域。所述方法包括：在前端页面加载完成后，获取与所述前端页面进行数据采集相关联的全部标签信息，所述标签信息为进行标签属性扩展的HTML标签；根据所获取标签信息中的事件属性值，监听所述前端页面中触发的采集事件，所述采集事件与所述标签信息中的事件属性值相对应；如果监听到所触发的采集事件，根据所述标签信息中对应的数据属性值，对所述采集事件所对应的数据进行采集。本申请对前端页面中可能触发的若干采集事件的监听，以及对若干采集事件进行相应数据采集的过程均由一个采集程序实现，简化了前端应用程序，便于开发人员进行维护。

Description

页面数据采集方法及装置、电子设备、存储介质

技术领域

本申请涉及大数据技术领域，特别涉及一种页面数据采集方法及装置、电子设备、计算机可读存储介质。

背景技术

随着互联网技术的发展，B/S(浏览器和服务器)架构模式逐渐兴起，在这种架构下，软件应用的用户交互界面通过浏览器来实现，软件应用的业务逻辑在服务器实现。浏览器也称为前端，前端通过采集网页中的用户交互数据，并将采集的数据发送至服务器进行逻辑处理，从而实现用户交互功能。

在现有技术中，前端采集用户交互数据的方法都是通过调用采集方法实现的。具体地，开发人员通过在前端应用程序中写入若干采集事件的监听程序以及对应的采集方法，使得前端应用程序在运行时，一旦监听到前端页面中所触发的采集事件，则通过调用相应的采集方法来采集相关数据。

很显然，前端页面需要采集的数据越多，需要开发人员写入的采集事件监听程序和采集方法也越多，导致前端应用程序在运行过程中负载很大，容易引起前端页面卡顿的问题，也不利于开发人员对前端应用程序进行维护。

发明内容

基于上述技术问题，本申请提供了一种页面数据采集方法及装置、电子设备、计算机可读存储介质。

本申请所揭示的技术方案包括：

一种页面数据采集方法，所述方法包括：在前端页面加载完成后，获取与所述前端页面进行数据采集相关联的全部标签信息，所述标签信息为进行标签属性扩展的HTML标签；根据所获取标签信息中的事件属性值，监听所述前端页面中触发的采集事件，所述采集事件与所述标签信息中的事件属性值相对应；如果监听到所触发的采集事件，根据所述标签信息中对应的数据属性值，对所述采集事件所对应的数据进行采集。

进一步地，所述在前端页面加载完成后，获取与所述前端页面进行数据采集相关联的全部标签信息，包括：获取前端提供的标签获取接口；根据所述前端页面中所采集数据的数据类型，分别调用所述标签获取接口，获得与所述前端页面进行数据采集相关联的全部标签信息。

进一步地，所述根据所获取标签信息中的事件属性值，监听所述前端页面中触发的采集事件，所述采集事件与所述标签信息中的事件属性值相对应，包括：根据所获取标签信息的不同类型，分别设置监听线程对所述前端页面中的相应区域进行监听，所述采集事件与所述标签信息中的事件属性值相对应；如果监听到所述区域被触发，则获取所述区域所对应的事件属性值。

进一步地，所述根据所述标签信息中对应的数据属性值，进行所述采集事件所对应数据的采集，包括：根据所监听到采集事件对应的事件属性值，从所述全部标签信息中查找包含所述事件属性值的标签信息；从所查找到的标签信息中提取数据属性值，获取所述数据属性值所对应的数据。

进一步地，在所述根据所述标签信息中对应的数据属性值，对所述采集事件所对应的数据进行采集之后，所述方法还包括：将所采集的数据发送至后端服务器，所述后端服务器用于进行所述数据的逻辑处理。

一种页面数据采集装置，所述装置包括：标签信息获取模块，用于在前端页面加载完成后，获取与所述前端页面进行数据采集相关联的全部标签信息，所述标签信息为进行标签属性扩展的HTML标签；采集事件监听模块，用于根据所获取标签信息中的事件属性值，监听所述前端页面中触发的采集事件，所述采集事件与所述标签信息中的事件属性值相对应；数据采集模块，用于在监听到触发了采集事件的情况下，根据所述标签信息中对应的数据属性值，对所述采集事件所对应的数据进行采集。

一种电子设备，所述电子设备包括：

处理器；

存储器，所述存储器上存储有计算机可读指令，所述计算机可读指令被所述处理器执行时，实现如前所述的页面数据采集方法。

一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时，实现如前所述的页面数据采集方法。

本申请的实施例提供的技术方案可以包括以下有益效果：

在上述技术方案中，前端应用程序中所加载的HTML标签预先进行了属性扩展，使得每一HTML标签中均包括相应的事件属性值和数据属性值，通过获取全部的HTML标签，并根据这些HTML标签中的事件属性值监听前端页面中触发的采集事件，以及根据HTML标签中的数据属性值进行相应数据的采集。

因此在本申请中，对前端页面中可能触发的若干采集事件的监听，以及对若干采集事件进行相应数据采集的过程均由一个采集程序实现，简化了前端应用程序，便于开发人员进行维护。

应当理解的是，以上的一般描述和后文的细节描述仅是示例性的，并不能限制本申请。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本申请的实施例，并于说明书一起用于解释本申请的原理。

图1是根据一示例性实施例示出的本发明实施环境的示意图；

图2是根据一示例性实施例示出的一种终端的硬件框图；

图3是根据一示例性实施例示出的一种页面数据采集方法的流程图；

图4是根据一示例性实施例示出的一种页面数据采集装置的框图。

通过上述附图，已示出本发明明确的实施例，后文中将有更详细的描述，这些附图和文字描述并不是为了通过任何方式限制本发明构思的范围，而是通过参考特定实施例为本领域技术人员说明本发明的概念。

具体实施方式

这里将详细地对示例性实施例执行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。

图1是根据一示例性实施例示出的一种实施环境的示意图。如图1所示，本发明的实施环境包括：终端100和服务器200。

在本发明中，终端100用于运行浏览器，该浏览器中加载有前端页面以与用户进行交互操作。终端100具体可以是智能手机、平板电脑、笔记本电脑、计算机或者其他任意能够运行浏览器的电子设备，在此不加以限定。

服务器200则用于存储海量数据，以响应终端发起的服务请求，根据服务请求进行数据处理。服务器200可以是一台服务器，或者是由若干服务器组成的服务器集群，本处也不进行限定。

需要说明的是，终端100与服务器200之间预先建立有线或者无线的网络连接，从而使得终端100能够与服务器200进行数据交互。

图2是根据一示例性实施例示出的一种图1所示终端100的硬件结构框图。如图2所示，终端可以包括以下一个或者多个组件：处理组件101，存储器102，电源组件103，多媒体组件104，音频组件105，传感器组件107以及通信组件 108。

其中，上述组件并不全是必须的，终端可以根据自身功能需求增加其他组件或减少某些组件，本实施例不作限定。

处理组件101通常控制终端的整体操作，诸如与显示，数据通信，相机操作以及日志数据处理相关联的操作等。处理组件101可以包括一个或多个处理器109来执行指令，以完成上述操作的全部或部分步骤。此外，处理组件101 可以包括一个或多个模块，便于处理组件101和其他组件之间的交互。例如，处理组件101可以包括多媒体模块，以方便多媒体组件104和处理组件101之间的交互。

存储器102被配置为存储各种类型的数据以支持在终端的操作。这些数据的示例包括用于在终端上操作的任何应用程序或方法的指令。存储器102可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如SRAM(静态随机存取存储器)，EEPROM(电可擦除可编程只读存储器)，EPROM(可擦除可编程只读存储器)，PROM(可编程只读存储器)，ROM(只读存储器)等。存储器102中还存储有一个或多个模块，该一个或多个模块被配置成由该一个或多个处理器109执行，以完成以下任一实施例所示页面数据采集方法中的全部或者部分步骤。

电源组件103为终端的各种组件提供电力。电源组件103可以包括电源管理系统，一个或多个电源，及其他与为终端生成、管理和分配电力相关联的组件。

多媒体组件104包括在所述终端和用户之间的提供一个输出接口的屏幕。在一些实施例中，屏幕可以包括LCD(液晶显示器)和TP(触摸面板)。如果屏幕包括触摸面板，屏幕可以被实现为触摸屏，以接收来自用户的输入信号。触摸面板包括一个或多个触摸传感器以感测触摸、滑动和触摸面板上的手势。所述触摸传感器可以不仅感测触摸或滑动动作的边界，而且还检测与所述触摸或滑动操作相关的持续时间和压力。

音频组件105被配置为输出和/或输入音频信号。例如，音频组件105可以包括一个麦克风，当终端处于操作模式，如记录模式和语音识别模式时，麦克风被配置为接收外部音频信号。所接收的音频信号可以被进一步存储在存储器 102或经由通信组件108发送。音频组件105还包括一个扬声器，用于输出音频信号，以实现终端与客户之间进行会话操作。

传感器组件107包括一个或多个传感器，用于为计算机设备提供各个方面的状态评估。例如，传感器组件107可以检测到终端的打开/关闭状态，以及终端的温度变化。在一些实施例中，传感器组件107还可以包括磁传感器，压力传感器或温度传感器。

通信组件108被配置为便于终端和其他设备之间有线或无线方式的通信。终端可以接入基于通信标准的无线网络，如WiFi，2G或3G，或它们的组合。在一个示例性实施例中，通信组件108经由广播信道接收来自外部广播管理系统的广播信号或广播相关信息。

在示例性实施例中，处理器可以被一个或多个ASIC(应用专用集成电路)、 DSP(数字信号处理器)、PLD(可编程逻辑器件)、FPGA(现场可编程门阵列)、控制器、微控制器、微处理器或其他电子元件实现，用于执行下述实施例中所详细描述的页面数据采集方法，此处将不做详细阐述说明。

图3是根据一示例性实施例示出的一种页面数据采集方法的流程图，该方法适用于图1所示的终端100。如图3所示，该方法可以包括以下步骤：

步骤310，在前端页面加载完成后，获取与前端页面进行数据采集相关联的全部标签信息。

首先应当说明的是，在现有技术所进行的前端页面数据采集中，通过采集事件监听程序监听到前端页面中触发的采集事件后，再通过调用相应的采集方法获取采集事件所对应HTML标签中包含的内容，以进行数据采集。前端页面需要采集的数据越多，需要开发人员写入的采集事件监听程序和采集方法也越多。

由于前端页面中所采集数据的类型基本是确定，例如包括以下几类：输入框、按钮、下拉框、单选按钮、多选按钮和超链接，因此，开发人员可通过对前端应用程序中所加载HTML(超文本标记语言)标签的标签属性进行扩展，并设置相应的采集程序，以根据所扩展的HTML标签进行前端页面中数据的采集。

所扩展的HTML标签属性可以包括事件属性和数据属性，其中，事件属性可以命名为“track-event”，数据属性可以命名为“track-data”。可通过对事件属性和数据属性分别进行赋值，来使得HTML标签具备相应的内容。

举例来说，假设一HTML标签为“<button type＝"button"id＝"btn-cart">加入购物车</button>”，该HTML标签所对应的采集事件为用户点击了“加入购物车”按钮。

可将上述HTML标签扩展为“<button type＝"button"id＝"btn-cart"track-data＝”点击了加入购物车”,track-event＝"click">加入购物车</button>”，由此可见，扩展所得的HTML标签中包含有相应的事件属性值和数据属性值。

开发人员通过将前端应用程序中的原HTML标签按照以上方法进行标签属性扩展后，将扩展的HTML标签重新加入前端应用程序中，使得前端应用程序重新进行页面加载。所重新加载的前端应用程序中，则包含了所进行标签属性扩展的HTML标签。

本申请所提供的页面数据采集方法即可理解为开发人员所设置的相应采集程序，以根据所进行标签属性扩展的HTML标签实现前端页面中数据的采集。

其中，与前端页面进行数据采集相关联的全部标签信息表示，与前端页面中所有可能被采集的数据相关的HTML标签。但应当说明的是，该HTML标签应当理解为进行了标签属性扩展的HTML标签。

在本实施例中，前端页面加载完成后，需要对前端页面中所触发的采集事件进行监听，以根据用户在前端页面中的操作来进行数据采集。因此，首先需要从前端应用程序中，获取与前端页面中所有可能被采集的数据相关的HTML 标签，以根据HTML标签所包含的事件属性值和数据属性值来进行相应的数据采集。

具体地，在一示例性实施例中，获取与前端页面进行数据采集相关联的全部标签信息可以包括下步骤：

获取前端所提供的标签获取接口；

根据前端页面中所采集数据的数据类型，分别调用标签获取接口，获得与前端页面进行数据采集相关联的全部标签信息。

其中，标签获取接口具体为前端所提供的API(Application ProgrammingInterface,应用程序编程接口)，用于供其他进程获取前端应用程序中所加载的 HTML标签。例如，标签获取接口具体可以是“getElementsByTagName”。

如前所述，前端页面中所采集数据一般包括输入框、按钮、下拉框、单选按钮、多选按钮和超链接等常见的数据类型，可根据前端页面中所采集数据的全部数据类型，分别调用标签获取接口，即可从前端应用程序中调取与前端页面进行数据采集相关联的全部HTML标签。

举例来说，“document.getElementsByTagName('input')；”表示通过调用标签获取接口获取输入框标签，“document.getElementsByTagName('select')；”表示通过调用标签获取接口获取下拉框标签。

步骤330，根据所获取标签信息中的事件属性值，监听前端页面中触发的采集事件。

其中，所获取标签信息均包括相应的事件属性值和数据属性值，可根据标签信息中的事件属性值，来监听前端页面中由用户触发的采集事件，所监听前端页面中由用户触发的采集事件与标签信息中的事件所述值相对应。例如，在上述HTML标签中，“track-event＝“click”表示监听点击按钮事件“click”，若用户点击前端页面中所设置按钮，则监听到由用户触发的“click”事件。

具体地，对所获取不同类型的HTML标签，分别设置若干监听线程对前端页面中的相应区域进行监听，且每一监听线程分别对应一种类型的HTML标签。各监听线程则根据其所对应类型标签中的全部事件属性值，对前端页面中的相应区域是否被触发进行监听。

应当说明的是，HTML标签的类型是根据标签中关键字段来区别的，例如上述示例HTML标签中的“button type＝"button"”表示该标签属于“button”类，或者还可以是“input”、“select”等类型。前端页面中的相应区域则应当理解为，事件属性值所对应前端页面中的区域。

需要说明的是，由于同一类型的HTML标签的数量一般为多个，所设置的监听线程应当根据每一HTML标签所包含的事件属性值进行前端页面中所触发采集事件的监听。

并且，在实际应用中，前端页面中可能存在属于同一类型的数据采集对象，例如前端页面中设置了多个按钮，为了区分每一数据采集对象，前端应用程序则为每一数据采集对象标记唯一信息。唯一信息可以是“id”、“name”、“value”所对应的数据值。由此，可以通过唯一信息来确定前端页面中与事件属性值相对应的区域。

如果监听到对应区域被触发，则获取该区域所对应的事件属性值。所获取的事件属性值，则表示监听到前端页面中由用户触发了相应的采集事件。

步骤350，如果监听到所触发的采集事件，根据标签信息中对应的数据属性值，对采集事件所对应的数据进行采集。

其中，如果监听到前端页面中所触发的采集事件，则表示获取到触发所应的事件属性值，由此可根据相应的事件属性值，从所获取的全部HTML标签中查找包含该事件属性值的HTML标签，以从查找到的HTML标签中提取对应的数据属性值。

因此，可根据所提取的数据属性值，获取相对应的数据，以实现与前端页面中所触发采集事件相对应数据的采集。

综上所述，开发人员所设置的采集程序用以执行上述实施例所描述的页面采集方法，通过该采集成绩能够对前端页面中可能触发的若干采集事件进行监听，以及对所触发采集事件进行相应数据的采集，简化了前端应用程序，且便于开发人员进行维护。

在一示例性实施例中，在进行采集事件所对应数据的采集后，需要将所采集的数据发送至后端服务器，以通过后端服务器对所采集的数据进行逻辑处理，从而实现前端页面的用户交互功能。

具体的，在一种实施例中，每采集一次数据后，由前端将采集数据发送给后端服务器，以保证后端服务器能够对采集数据进行及时处理，从而减小前端页面进行用户交互所需的响应时间，用户体验较高。

而在另一种实施例中，前端可将所采集的数据进行缓存，并定时将缓存的数据发送给后端服务器进行处理。或者，也可以采用其它方式进行采集数据向后端服务器的发送，本处并不对此进行限制。

图4是根据一示例性实施例所示出的一种页面数据采集装置。如图4所示,该装置包括标签信息获取模块410、采集事件监听模块420和数据采集模块430。

标签信息获取模块410用于在前端页面加载完成后，获取与前端页面进行数据采集相关联的全部标签信息，该标签信息为进行标签属性扩展的HTML标签。

采集事件监听模块420用于根据所获取标签信息中的事件属性值，监听前端页面中触发的采集事件，采集事件与标签信息中的事件属性值相对应。

数据采集模块430用于在监听到触发了采集事件的情况下，根据标签信息中对应的数据属性值，对采集事件所对应的数据进行采集。

在另一示例性实施例中，标签信息获取模块410具体包括接口获取单元和接口调用单元。

接口获取单元用于获取前端提供的标签获取接口。

接口调用单元用于根据前端页面中所采集数据的数据类型，分别调用标签获取接口，获得与前端页面进行数据采集相关联的全部标签信息。

在另一示例性实施例中，采集事件监听模块420具体包括

事件监听单元用于根据所获取标签信息的不同类型，分别设置监听线程对前端页面中的相应区域进行监听，前端页面中的相应区域为标签信息中事件属性值所对应区域。

事件获取单元用于在监听到前端页面中的相应区域被触发的情况下，获取该区域所对应的事件属性值。

在另一示例性实施例中，数据采集模块430具体包括信息查找单元和数据获取单元。

信息查找单元用于根据所获取的事件属性值，从全部标签信息中查找包含该事件属性值的标签信息；

数据获取单元用于从所查找到的标签信息中提取数据属性值，获取数据属性值所对应的数据。

在另一示例性实施例中，页面数据采集装置还包括采集数据发送模块。采集数据发送模块用于将所采集的数据发送至后端服务器，该后端服务器用于进行所接收数据的逻辑处理。

需要说明的是，上述实施例所提供的装置与上述实施例所提供的方法属于同一构思，其中各个模块执行操作的具体方式已经在方法实施例中进行了详细描述，此处不再赘述。

在一示例性实施例中，本申请还提供一种电子设备，该电子设备包括：

处理器；

存储器，该存储器上存储有计算机可读指令，该计算机可读指令被处理器执行时，实现如前所示的方法。

在一示例性实施例中，本申请还提供一种计算机可读存储介质，其上存储有计算机程序，该计算机程序被处理器执行时，实现如前所示的方法。

应当理解的是，本申请并不局限于上面已经描述并在附图中示出的精确结构，并且可以在不脱离其范围执行各种修改和改变。本申请的范围仅由所附的权利要求来限制。

Claims (10)

1.一种页面数据采集方法，其特征在于，所述方法包括：

在前端页面加载完成后，获取与所述前端页面进行数据采集相关联的全部标签信息，所述标签信息为进行标签属性扩展的HTML标签；

根据所获取标签信息中的事件属性值，监听所述前端页面中触发的采集事件，所述采集事件与所述标签信息中的事件属性值相对应；

如果监听到所触发的采集事件，根据所述标签信息中对应的数据属性值，对所述采集事件所对应的数据进行采集。

2.根据权利要求1所述的方法，其特征在于，所述在前端页面加载完成后，获取与所述前端页面进行数据采集相关联的全部标签信息，包括：

获取前端提供的标签获取接口；

根据所述前端页面中所采集数据的数据类型，分别调用所述标签获取接口，获得与所述前端页面进行数据采集相关联的全部标签信息。

3.根据权利要求1所述的方法，其特征在于，所述根据所获取标签信息中的事件属性值，监听所述前端页面中触发的采集事件，所述采集事件与所述标签信息中的事件属性值相对应，包括：

根据所获取标签信息的不同类型，分别设置监听线程对所述前端页面的相应区域进行监听，所述前端页面的相应区域为所述标签信息中事件属性值所对应区域；

如果监听到所述区域被触发，则获取所述区域所对应的事件属性值。

4.根据权利要求1所述的方法，其特征在于，所述根据所述标签信息中对应的数据属性值，进行所述采集事件所对应数据的采集，包括：

根据所监听到采集事件对应的事件属性值，从所述全部标签信息中查找包含所述事件属性值的标签信息；

从所查找到的标签信息中提取数据属性值，获取所述数据属性值所对应的数据。

5.根据权利要求1所述的方法，其特征在于，在所述根据所述标签信息中对应的数据属性值，对所述采集事件所对应的数据进行采集，所述方法还包括：

将所采集的数据发送至后端服务器，所述后端服务器用于进行所述数据的逻辑处理。

6.一种页面数据采集装置，其特征在于，所述方法包括：

标签信息获取模块，用于在前端页面加载完成后，获取与所述前端页面进行数据采集相关联的全部标签信息，所述标签信息为进行标签属性扩展的HTML标签；

采集事件监听模块，用于根据所获取标签信息中的事件属性值，监听所述前端页面中触发的采集事件，所述采集事件与所述标签信息中的事件属性值相对应；

数据采集模块，用于在监听到触发了采集事件的情况下，根据所述标签信息中对应的数据属性值，对所述采集事件对应的数据进行采集。

7.根据权利要求6所述的装置，其特征在于，所述标签信息获取模块包括：

接口获取单元，用于获取前端提供的标签获取接口；

接口调用单元，用于根据所述前端页面中所采集数据的数据类型，分别调用所述标签获取接口，获得与所述前端页面进行数据采集相关联的全部标签信息。

8.根据权利要求6所述的装置，其特征在于，所述数据采集模块包括：

信息查找单元，用于根据所监听到采集事件对应的事件属性值，从所述全部标签信息中查找包含所述事件属性值的标签信息；

数据获取单元，用于从所查找到的标签信息中提取数据属性值，获取所述数据属性值所对应的数据。

9.一种电子设备，其特征在于，所述设备包括：

处理器；

存储器，所述存储器上存储有计算机可读指令，所述计算机可读指令被所述处理器执行时，实现如权利要求1至5任一项所述的页面数据采集方法。

10.一种计算机可读存储介质，其特征在于，其上存储有计算机程序，所述计算机程序被处理器执行时，实现如权利要求1至5任一项所述的页面数据采集方法。