CN112527414B - 一种基于前端的数据处理方法、装置、设备及存储介质 - Google Patents
一种基于前端的数据处理方法、装置、设备及存储介质 Download PDFInfo
- Publication number
- CN112527414B CN112527414B CN202011544055.0A CN202011544055A CN112527414B CN 112527414 B CN112527414 B CN 112527414B CN 202011544055 A CN202011544055 A CN 202011544055A CN 112527414 B CN112527414 B CN 112527414B
- Authority
- CN
- China
- Prior art keywords
- vue
- buried point
- item
- page
- current
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44505—Configuring for program initiating, e.g. using registry, configuration files
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/36—Preventing errors by testing or debugging software
- G06F11/362—Software debugging
- G06F11/3636—Software debugging by tracing the execution of the program
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/46—Multiprogramming arrangements
- G06F9/54—Interprogram communication
- G06F9/542—Event management; Broadcasting; Multicasting; Notifications
Abstract
本发明实施例涉及大数据领域，公开了一种基于前端的数据处理方法、装置、设备及存储介质，该方法包括：获取前端中的当前vue项目的根目录中的配置文件；根据配置文件中的地址信息确定待处理的vue组件，并根据待处理的vue组件对当前vue项目的页面进行渲染，确定渲染数据对应的第一埋点；监听当前vue项目中所有页面的触发事件，并确定触发事件的交互数据对应的第二埋点；将第一埋点和第二埋点进行上报，并对第一埋点和第二埋点所对应的性能指标数据进行优化处理，以实现vue组件的埋点的自动化非侵入式上报，提升业务逻辑代码的可维护性，提升埋点性能。
Description
技术领域
本发明涉及计算机技术领域，尤其涉及一种基于前端的数据处理方法、装置、设备及存储介质。
背景技术
目前前端业内，收集客户行为数据，通常的做法是在项目中进行埋点上报。埋点的主要类型有：页面渲染完成的埋点，表示用户进入并看到当前页面；以及页面点击事件，表示用户点击触发了哪些事件，以及通过事件触发的时间，推导出点击事件的顺序等。然而，这些埋点需要开发人员额外编写代码进行触发，增加了开发人员的工作量；埋点触发的代码与页面上业务逻辑是写在一起的，影响原有业务逻辑代码的可维护性、可阅读性；如果业务逻辑变更，可能需要重新调整埋点代码，增加了后期维护的工作量；每一个埋点的触发，都需要调用一次接口请求上传，如果用户短时间快速点击多次，会造成接口并发请求压力。
发明内容
本发明实施例提供了一种基于前端的数据处理方法、装置、设备及存储介质，可以实现vue组件的埋点的自动化非侵入式上报，提升了业务逻辑代码的可维护性，可阅读性，以及提升了埋点性能，减少了服务资源的浪费。
第一方面，本发明实施例提供了一种基于前端的数据处理方法，所述方法包括：
获取前端中的当前vue项目的根目录中的配置文件，其中，所述配置文件中配置了地址信息；
根据所述配置文件中的地址信息确定所述当前vue项目中待处理的vue组件，并根据所述待处理的vue组件对所述当前vue项目的页面进行渲染，以确定渲染数据对应的第一埋点；
监听所述当前vue项目中所有页面的触发事件，并根据监听到的触发事件确定所述触发事件的交互数据对应的第二埋点；
将所述第一埋点和所述第二埋点进行上报，并获取所述第一埋点和所述第二埋点所对应的性能指标数据，以及对所述性能指标数据进行优化处理。
进一步地，所述根据所述待处理的vue组件对所述当前vue项目的页面进行渲染，以确定渲染数据对应的第一埋点，包括：
根据所述待处理的vue组件生成与所述待处理的vue组件对应的目标文件，其中，所述目标文件中包括所述当前vue项目中所有页面的挂载方法；
根据所述目标文件对所述当前vue项目中的所有页面进行渲染，以确定所述当前vue项目中的所有页面的渲染数据对应的第一埋点。
进一步地，所述根据监听到的触发事件确定所述触发事件的交互数据对应的第二埋点，包括：
获取监听到的发生触发事件的页面，并根据预设关键词对所述发生触发事件的页面中的所述待处理的vue组件进行分析，查找所述发生触发事件的页面中是否存在所述预设关键词；
当查找到所述发生触发事件的页面中存在所述预设关键词时，获取所述预设关键词在所述发生触发事件的页面中的位置；
在所述位置获取所述触发事件的交互数据对应的属性信息，并根据所述属性信息确定所述触发事件的交互数据对应的第二埋点。
进一步地，所述根据监听到的触发事件确定所述触发事件的交互数据对应的第二埋点之前，还包括：
根据所述当前vue项目中待处理的vue组件生成针对所述待处理的vue组件的触发事件的埋点文件，并将所述埋点文件添加至所述待处理的vue组件中；
所述根据监听到的触发事件确定发生触发事件的交互数据对应的第二埋点，包括：
当监听到对所述待处理的vue组件的触发事件时，根据所述埋点文件确定所述触发事件的交互数据对应的第二埋点。
进一步地，所述将所述第一埋点和所述第二埋点进行上报，包括：
监听所述当前vue项目的页面中是否存在vue组件销毁前事件；
当监听到所述当前vue项目的页面中存在vue组件销毁前事件时，将所述第一埋点和所述第二埋点添加到所述vue组件销毁前事件中；
根据预设的时间间隔将添加所述第一埋点和所述第二埋点的所述vue组件销毁前事件进行上报。
进一步地，所述获取所述第一埋点和所述第二埋点所对应的性能指标数据，并对所述性能指标数据进行优化处理，包括：
获取所述当前vue项目的每个页面在预设时间范围内发生触发事件的次数和/或页面渲染的次数；
对所述当前vue项目的每个页面在预设时间范围内发生触发事件的次数进行合并处理；和/或，
对所述当前vue项目的每个页面在预设时间范围内发生页面渲染的次数进行合并处理。
进一步地，所述获取前端中的当前vue项目的根目录中的配置文件之前，还包括：
根据所述前端的当前vue项目确定所述当前vue项目的根目录，并在确定的所述当前vue项目的根目录中编写配置文件；
在所述配置文件中配置待处理的vue组件的地址信息。
第二方面，本发明实施例提供了一种基于前端的数据处理装置，包括：
获取单元，用于获取前端中的当前vue项目的根目录中的配置文件，其中，所述配置文件中配置了地址信息；
确定单元，用于根据所述配置文件中的地址信息确定所述当前vue项目中待处理的vue组件，并根据所述待处理的vue组件对所述当前vue项目的页面进行渲染，以确定渲染数据对应的第一埋点；
监听单元，用于监听所述当前vue项目中所有页面的触发事件，并根据监听到的触发事件确定所述触发事件的交互数据对应的第二埋点；
处理单元，用于将所述第一埋点和所述第二埋点进行上报，并获取所述第一埋点和所述第二埋点所对应的性能指标数据，以及对所述性能指标数据进行优化处理。
第三方面，本发明实施例提供了一种计算机设备，包括处理器、输入设备、输出设备和存储器，所述处理器、输入设备、输出设备和存储器相互连接，其中，所述存储器用于存储支持基于前端的数据处理装置执行上述方法的计算机程序，所述计算机程序包括程序，所述处理器被配置用于调用所述程序，执行上述第一方面的方法。
第四方面，本发明实施例提供了一种计算机可读存储介质，所述计算机存储介质存储有计算机程序，所述计算机程序被处理器执行以实现上述第一方面的方法。
本发明实施例可以获取前端中的当前vue项目的根目录中的配置文件，其中，所述配置文件中配置了地址信息；根据所述配置文件中的地址信息确定所述当前vue项目中待处理的vue组件，并根据所述待处理的vue组件对所述当前vue项目的页面进行渲染，以确定渲染数据对应的第一埋点；监听所述当前vue项目中所有页面的触发事件，并根据监听到的触发事件确定所述触发事件的交互数据对应的第二埋点；将所述第一埋点和所述第二埋点进行上报，并获取所述第一埋点和所述第二埋点所对应的性能指标数据，以及对所述性能指标数据进行优化处理。通过这种实施方式，可以实现vue组件的埋点的自动化非侵入式上报，提升了业务逻辑代码的可维护性，可阅读性，以及提升了埋点性能，减少了服务资源的浪费。
附图说明
为了更清楚地说明本发明实施例技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1是本发明实施例提供的一种基于前端的数据处理方法的示意流程图；
图2是本发明实施例提供的一种基于前端的数据处理装置的示意框图；
图3是本发明实施例提供的一种计算机设备的示意框图。
具体实施方式
下面将结合本发明实施例中的附图，对本发明实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例是本发明一部分实施例，而不是全部的实施例。基于本发明中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本发明保护的范围。
本发明实施例提供的基于前端的数据处理方法可以应用于一种基于前端的数据处理装置，在某些实施例中，所述基于前端的数据处理装置设置于计算机设备中。在某些实施例中，所述计算机设备包括但不限于智能手机、平板电脑、膝上型电脑等中的一种或者多种。
下面结合附图1对本发明实施例提供的基于前端的数据处理方法进行示意性说明。
请参见图1，图1是本发明实施例提供的一种基于前端的数据处理方法的示意流程图，如图1所示，该方法可以由基于前端的数据处理装置执行，所述基于前端的数据处理装置设置于计算机设备中。具体地，本发明实施例的所述方法包括如下步骤。
S101：获取前端中的当前vue项目的根目录中的配置文件，其中，所述配置文件中配置了地址信息。
本发明实施例中，基于前端的数据处理装置可以获取前端中的当前vue项目的根目录中的配置文件，其中，所述配置文件中配置了地址信息。在某些实施例中，所述配置文件可以为config.json文件。
在一个实施例中，基于前端的数据处理装置在获取前端中的当前vue项目的根目录中的配置文件之前，可以根据所述前端的当前vue项目确定所述当前vue项目的根目录，并在确定的所述当前vue项目的根目录中编写配置文件；在所述配置文件中配置待处理的vue组件的地址信息。
在一个实施例中，在根据所述前端的当前项目确定所述当前项目的根目录时，可以获取所述前端中的当前项目，并根据所述前端中的当前项目确定所述当前项目中的根目录。
在一个实施例中，在根据所述前端中的当前项目确定所述当前项目中的根目录时，具体可以在命令行(mac系统为终端)，定位当前项目的根目录，执行命令，如npm i pa-vue-auto-buried-point-D。
在一个实施例中，在编写配置文件时，所述配置文件中的配置内容可以包括需要进行埋点的vue组件，默认所有.vue类型的文件，都会进行埋点；埋点上报执行提交的执行的方法；埋点上报的预设的时间间隔，默认为没有预设的时间间隔；是否组件销毁前才上传埋点数据，默认为否等内容信息。
S102：根据所述配置文件中的地址信息确定所述当前vue项目中待处理的vue组件，并根据所述待处理的vue组件对所述当前vue项目的页面进行渲染，以确定渲染数据对应的第一埋点。
本发明实施例中，基于前端的数据处理装置可以根据所述配置文件中的地址信息确定所述当前vue项目中待处理的vue组件，并根据所述待处理的vue组件对所述当前vue项目的页面进行渲染，以确定渲染数据对应的第一埋点。
在一个实施例中，基于前端的数据处理装置在根据所述配置文件中的地址信息确定所述当前vue项目中待处理的vue组件时，可以获取配置文件config.js中配置的vue组件的地址，并根据配置文件config.js中配置的vue组件的地址，遍历获取到对应的一个或多个vue组件作为待处理的vue组件。
在一个实施例中，基于前端的数据处理装置在根据所述待处理的vue组件对所述当前vue项目的页面进行渲染，以确定渲染数据对应的第一埋点时，可以根据所述待处理的vue组件生成与所述待处理的vue组件对应的目标文件，其中，所述目标文件中包括所述当前vue项目中所有页面的挂载方法；并根据所述目标文件对所述当前vue项目中的所有页面进行渲染，以确定所述当前vue项目中的所有页面的渲染数据对应的第一埋点。
在一个示例中，所述目标文件可以为所有vue组件都共用的mixins.js文件，该文件中包含了页面挂载完成后的挂载方法如mount方法，基于前端的数据处理装置可以通过import语法将目标文件mixins.js文件引入vue组件内，通过这种方式，所有vue组件在执行到mount方法时，可以自动完成埋点上报。
S103：监听所述当前vue项目中所有页面的触发事件，并根据监听到的触发事件确定所述触发事件的交互数据对应的第二埋点。
本发明实施例中，基于前端的数据处理装置可以监听所述当前vue项目中所有页面的触发事件，并根据监听到的触发事件确定所述触发事件的交互数据对应的第二埋点。在某些实施例中，所述触发事件包括但不限于点击事件、曝光行为事件等。
在一个实施例中，基于前端的数据处理装置在根据监听到的触发事件确定所述触发事件的交互数据对应的第二埋点时，可以获取监听到的发生触发事件的页面，并根据预设关键词对所述发生触发事件的页面中的所述待处理的vue组件进行分析，查找所述发生触发事件的页面中是否存在所述预设关键词；当查找到所述发生触发事件的页面中存在所述预设关键词时，获取所述预设关键词在所述发生触发事件的页面中的位置；在所述位置获取所述触发事件的交互数据对应的属性信息，并根据所述属性信息确定所述触发事件的交互数据对应的第二埋点。
在一个实施例中，基于前端的数据处理装置在根据监听到的触发事件确定所述触发事件的交互数据对应的第二埋点之前，可以分析前端vue项目中每一个vue组件，匹配所有预设关键字，查找到预设关键字所在的页面结构dom元素的位置，并为其添加埋点独有的属性信息如buried-point-id。通过添加埋点的属性信息有助于后续根据属性信息确定第二埋点。
在一个示例中，基于前端的数据处理装置可以监听所述当前vue项目中所有页面的点击事件，并对所述发生触发事件的页面中的所述待处理的vue组件进行分析，查找所述发生触发事件的页面中是否存在预设关键词@click和/或v-on:click；当查找到所述发生触发事件的页面中存在所述预设关键词时，获取所述预设关键词在所述点击触发事件的页面中的位置；在所述位置获取所述点击事件的交互数据对应的属性信息，并根据所述属性信息确定所述点击事件的交互数据对应的第二埋点。
在一个实施例中，基于前端的数据处理装置在根据监听到的触发事件确定所述触发事件的交互数据对应的第二埋点之前，可以根据所述当前vue项目中待处理的vue组件生成针对所述待处理的vue组件的触发事件的埋点文件，并将所述埋点文件添加至所述待处理的vue组件中；当监听到对所述待处理的vue组件的触发事件时，根据所述埋点文件确定所述触发事件的交互数据对应的第二埋点。
S104：将所述第一埋点和所述第二埋点进行上报，并获取所述第一埋点和所述第二埋点所对应的性能指标数据，以及对所述性能指标数据进行优化处理。
本发明实施例中，基于前端的数据处理装置可以将所述第一埋点和所述第二埋点进行上报，并获取所述第一埋点和所述第二埋点所对应的性能指标数据，以及对所述性能指标数据进行优化处理。
在一个实施例中，基于前端的数据处理装置在将所述第一埋点和所述第二埋点进行上报时，可以监听所述当前vue项目的页面中是否存在vue组件销毁前事件；当监听到所述当前vue项目的页面中存在vue组件销毁前事件时，将所述第一埋点和所述第二埋点添加到所述vue组件销毁前事件中；根据预设的时间间隔将添加所述第一埋点和所述第二埋点的所述vue组件销毁前事件进行上报。例如，假设预设的时间间隔为5s，则可以将5s内的第一埋点和第二埋点添加到vue组件销毁前事件中，并在5s后将添加所述第一埋点和所述第二埋点的所述vue组件销毁前事件进行上报。
在一个实施例中，基于前端的数据处理装置在根据预设的时间间隔将添加所述第一埋点和所述第二埋点的所述vue组件销毁前事件进行上报时，可以通过监听vue组件的销毁前事件beforeDestroy，将所有埋点在此销毁前事件beforeDestroy的函数中进行上报。
在一个实施例中，基于前端的数据处理装置在将所述第一埋点和所述第二埋点进行上报时，可以在生成的与所述待处理的vue组件对应的目标文件中包括的挂载方法内，执行将所述第一埋点进行上报的操作。
在一个实施例中，基于前端的数据处理装置在获取所述第一埋点和所述第二埋点所对应的性能指标数据，并对所述性能指标数据进行优化处理时，可以获取所述当前vue项目的每个页面在预设时间范围内发生触发事件的次数和/或页面渲染的次数；并对所述当前vue项目的每个页面在预设时间范围内发生触发事件的次数进行合并处理；和/或，对所述当前vue项目的每个页面在预设时间范围内发生页面渲染的次数进行合并处理。例如，假设某个页面在1秒内发生触发事件的次数为4次，则可以将1秒内发生触发事件的次数为4次合并为1次。又例如，假设某个页面在1秒内发生页面渲染的次数为3次，则可以将1秒内页面渲染的次数为3次合并为1次。
可见，通过这种方式可以优化埋点的性能指标数据，有助于提升埋点性能，减少服务资源的浪费。
本发明实施例中，基于前端的数据处理装置可以获取前端中的当前vue项目的根目录中的配置文件，其中，所述配置文件中配置了地址信息；根据所述配置文件中的地址信息确定所述当前vue项目中待处理的vue组件，并根据所述待处理的vue组件对所述当前vue项目的页面进行渲染，以确定渲染数据对应的第一埋点；监听所述当前vue项目中所有页面的触发事件，并根据监听到的触发事件确定所述触发事件的交互数据对应的第二埋点；将所述第一埋点和所述第二埋点进行上报，并获取所述第一埋点和所述第二埋点所对应的性能指标数据，以及对所述性能指标数据进行优化处理。通过对vue组件的页面渲染埋点以及触发事件的埋点，可以实现vue组件的埋点的自动化非侵入式上报，无需开发人员进行额外的埋点代码的编写和开发；埋点代码内容完全独立于vue组件的业务逻辑，不会影响vue组件代码的执行，相比原有的侵入式埋点方案，直接提升了业务逻辑代码的可维护性，可阅读性；在业务逻辑变化的情况下，无需人员进行维护，只需要重新执行此工具重新生成对应埋点代码即可，大大节省了人力成本；对埋点的性能指标数据进行优化处理，提升了埋点性能，减少了服务资源的浪费。
本发明实施例还提供了一种基于前端的数据处理装置，该基于前端的数据处理装置用于执行前述任一项所述的方法的单元。具体地，参见图2，图2是本发明实施例提供的一种基于前端的数据处理装置的示意框图。本实施例的基于前端的数据处理装置包括：获取单元201、确定单元202、监听单元203以及处理单元204。
获取单元201，用于获取前端中的当前vue项目的根目录中的配置文件，其中，所述配置文件中配置了地址信息；
确定单元202，用于根据所述配置文件中的地址信息确定所述当前vue项目中待处理的vue组件，并根据所述待处理的vue组件对所述当前vue项目的页面进行渲染，以确定渲染数据对应的第一埋点；
监听单元203，用于监听所述当前vue项目中所有页面的触发事件，并根据监听到的触发事件确定所述触发事件的交互数据对应的第二埋点；
处理单元204，用于将所述第一埋点和所述第二埋点进行上报，并获取所述第一埋点和所述第二埋点所对应的性能指标数据，以及对所述性能指标数据进行优化处理。
进一步地，所述确定单元202根据所述待处理的vue组件对所述当前vue项目的页面进行渲染，以确定渲染数据对应的第一埋点时，具体用于：
根据所述待处理的vue组件生成与所述待处理的vue组件对应的目标文件，其中，所述目标文件中包括所述当前vue项目中所有页面的挂载方法；
根据所述目标文件对所述当前vue项目中的所有页面进行渲染，以确定所述当前vue项目中的所有页面的渲染数据对应的第一埋点。
进一步地，所述监听单元203根据监听到的触发事件确定所述触发事件的交互数据对应的第二埋点时，具体用于：
获取监听到的发生触发事件的页面，并根据预设关键词对所述发生触发事件的页面中的所述待处理的vue组件进行分析，查找所述发生触发事件的页面中是否存在所述预设关键词；
当查找到所述发生触发事件的页面中存在所述预设关键词时，获取所述预设关键词在所述发生触发事件的页面中的位置；
在所述位置获取所述触发事件的交互数据对应的属性信息，并根据所述属性信息确定所述触发事件的交互数据对应的第二埋点。
进一步地，所述监听单元203根据监听到的触发事件确定所述触发事件的交互数据对应的第二埋点之前，还用于：
根据所述当前vue项目中待处理的vue组件生成针对所述待处理的vue组件的触发事件的埋点文件，并将所述埋点文件添加至所述待处理的vue组件中；
所述监听单元203根据监听到的触发事件确定发生触发事件的交互数据对应的第二埋点时，具体用于：
当监听到对所述待处理的vue组件的触发事件时，根据所述埋点文件确定所述触发事件的交互数据对应的第二埋点。
进一步地，所述处理单元204将所述第一埋点和所述第二埋点进行上报时，具体用于：
监听所述当前vue项目的页面中是否存在vue组件销毁前事件；
当监听到所述当前vue项目的页面中存在vue组件销毁前事件时，将所述第一埋点和所述第二埋点添加到所述vue组件销毁前事件中；
根据预设的时间间隔将添加所述第一埋点和所述第二埋点的所述vue组件销毁前事件进行上报。
进一步地，所述处理单元204获取所述第一埋点和所述第二埋点所对应的性能指标数据，并对所述性能指标数据进行优化处理时，具体用于：
获取所述当前vue项目的每个页面在预设时间范围内发生触发事件的次数和/或页面渲染的次数；
对所述当前vue项目的每个页面在预设时间范围内发生触发事件的次数进行合并处理；和/或，
对所述当前vue项目的每个页面在预设时间范围内发生页面渲染的次数进行合并处理。
进一步地，所述获取单元201获取前端中的当前vue项目的根目录中的配置文件之前，还用于：
根据所述前端的当前vue项目确定所述当前vue项目的根目录，并在确定的所述当前vue项目的根目录中编写配置文件；
在所述配置文件中配置待处理的vue组件的地址信息。
本发明实施例中，基于前端的数据处理装置可以获取前端中的当前vue项目的根目录中的配置文件，其中，所述配置文件中配置了地址信息；根据所述配置文件中的地址信息确定所述当前vue项目中待处理的vue组件，并根据所述待处理的vue组件对所述当前vue项目的页面进行渲染，以确定渲染数据对应的第一埋点；监听所述当前vue项目中所有页面的触发事件，并根据监听到的触发事件确定所述触发事件的交互数据对应的第二埋点；将所述第一埋点和所述第二埋点进行上报，并获取所述第一埋点和所述第二埋点所对应的性能指标数据，以及对所述性能指标数据进行优化处理。通过对vue组件的页面渲染埋点以及触发事件的埋点，可以实现vue组件的埋点的自动化非侵入式上报，无需开发人员进行额外的埋点代码的编写和开发；埋点代码内容完全独立于vue组件的业务逻辑，不会影响vue组件代码的执行，相比原有的侵入式埋点方案，直接提升了业务逻辑代码的可维护性，可阅读性；在业务逻辑变化的情况下，无需人员进行维护，只需要重新执行此工具重新生成对应埋点代码即可，大大节省了人力成本；对埋点的性能指标数据进行优化处理，提升了埋点性能，减少了服务资源的浪费。
参见图3，图3是本发明实施例提供的一种计算机设备的示意框图。如图所示的本实施例中的设备可以包括：一个或多个处理器301；一个或多个输入设备302，一个或多个输出设备303和存储器304。上述处理器301、输入设备302、输出设备303和存储器304通过总线305连接。存储器304用于存储计算机程序，所述计算机程序包括程序，处理器301用于执行存储器304存储的程序。其中，处理器301被配置用于调用所述程序执行：
获取前端中的当前vue项目的根目录中的配置文件，其中，所述配置文件中配置了地址信息；
根据所述配置文件中的地址信息确定所述当前vue项目中待处理的vue组件，并根据所述待处理的vue组件对所述当前vue项目的页面进行渲染，以确定渲染数据对应的第一埋点；
监听所述当前vue项目中所有页面的触发事件，并根据监听到的触发事件确定所述触发事件的交互数据对应的第二埋点；
将所述第一埋点和所述第二埋点进行上报，并获取所述第一埋点和所述第二埋点所对应的性能指标数据，以及对所述性能指标数据进行优化处理。
进一步地，所述处理器301根据所述待处理的vue组件对所述当前vue项目的页面进行渲染，以确定渲染数据对应的第一埋点时，具体用于：
根据所述待处理的vue组件生成与所述待处理的vue组件对应的目标文件，其中，所述目标文件中包括所述当前vue项目中所有页面的挂载方法；
根据所述目标文件对所述当前vue项目中的所有页面进行渲染，以确定所述当前vue项目中的所有页面的渲染数据对应的第一埋点。
进一步地，所述处理器301根据监听到的触发事件确定所述触发事件的交互数据对应的第二埋点时，具体用于：
获取监听到的发生触发事件的页面，并根据预设关键词对所述发生触发事件的页面中的所述待处理的vue组件进行分析，查找所述发生触发事件的页面中是否存在所述预设关键词；
当查找到所述发生触发事件的页面中存在所述预设关键词时，获取所述预设关键词在所述发生触发事件的页面中的位置；
在所述位置获取所述触发事件的交互数据对应的属性信息，并根据所述属性信息确定所述触发事件的交互数据对应的第二埋点。
进一步地，所述处理器301根据监听到的触发事件确定所述触发事件的交互数据对应的第二埋点之前，还用于：
根据所述当前vue项目中待处理的vue组件生成针对所述待处理的vue组件的触发事件的埋点文件，并将所述埋点文件添加至所述待处理的vue组件中；
所述处理器301根据监听到的触发事件确定发生触发事件的交互数据对应的第二埋点时，具体用于：
当监听到对所述待处理的vue组件的触发事件时，根据所述埋点文件确定所述触发事件的交互数据对应的第二埋点。
进一步地，所述处理器301将所述第一埋点和所述第二埋点进行上报时，具体用于：
监听所述当前vue项目的页面中是否存在vue组件销毁前事件；
当监听到所述当前vue项目的页面中存在vue组件销毁前事件时，将所述第一埋点和所述第二埋点添加到所述vue组件销毁前事件中；
根据预设的时间间隔将添加所述第一埋点和所述第二埋点的所述vue组件销毁前事件进行上报。
进一步地，所述处理器301获取所述第一埋点和所述第二埋点所对应的性能指标数据，并对所述性能指标数据进行优化处理时，具体用于：
获取所述当前vue项目的每个页面在预设时间范围内发生触发事件的次数和/或页面渲染的次数；
对所述当前vue项目的每个页面在预设时间范围内发生触发事件的次数进行合并处理；和/或，
对所述当前vue项目的每个页面在预设时间范围内发生页面渲染的次数进行合并处理。
进一步地，所述处理器301获取前端中的当前vue项目的根目录中的配置文件之前，还用于：
根据所述前端的当前vue项目确定所述当前vue项目的根目录，并在确定的所述当前vue项目的根目录中编写配置文件；
在所述配置文件中配置待处理的vue组件的地址信息。
本发明实施例中，计算机设备可以获取前端中的当前vue项目的根目录中的配置文件，其中，所述配置文件中配置了地址信息；根据所述配置文件中的地址信息确定所述当前vue项目中待处理的vue组件，并根据所述待处理的vue组件对所述当前vue项目的页面进行渲染，以确定渲染数据对应的第一埋点；监听所述当前vue项目中所有页面的触发事件，并根据监听到的触发事件确定所述触发事件的交互数据对应的第二埋点；将所述第一埋点和所述第二埋点进行上报，并获取所述第一埋点和所述第二埋点所对应的性能指标数据，以及对所述性能指标数据进行优化处理。通过对vue组件的页面渲染埋点以及触发事件的埋点，可以实现vue组件的埋点的自动化非侵入式上报，无需开发人员进行额外的埋点代码的编写和开发；埋点代码内容完全独立于vue组件的业务逻辑，不会影响vue组件代码的执行，相比原有的侵入式埋点方案，直接提升了业务逻辑代码的可维护性，可阅读性；在业务逻辑变化的情况下，无需人员进行维护，只需要重新执行此工具重新生成对应埋点代码即可，大大节省了人力成本；对埋点的性能指标数据进行优化处理，提升了埋点性能，减少了服务资源的浪费。
应当理解，在本发明实施例中，所称处理器301可以是中央处理单元(CenSralProcessing UniS，CPU)，该处理器还可以是其他通用处理器、数字信号处理器(DigiSalSignal Processor，DSP)、专用集成电路(ApplicaSion Specific InSegraSed CircuiS，ASIC)、现成可编程门阵列(Field-Programmable GaSe Array，FPGA)或者其他可编程逻辑器件、分立门或者晶体管逻辑器件、分立硬件组件等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。
输入设备302可以包括触控板、麦克风等，输出设备303可以包括显示器(LCD等)、扬声器等。
该存储器304可以包括只读存储器和随机存取存储器，并向处理器301提供指令和数据。存储器304的一部分还可以包括非易失性随机存取存储器。例如，存储器304还可以存储设备类型的信息。
具体实现中，本发明实施例中所描述的处理器301、输入设备302、输出设备303可执行本发明实施例提供的图1所述的方法实施例中所描述的实现方式，也可执行本发明实施例图2所描述的基于前端的数据处理装置的实现方式，在此不再赘述。
本发明实施例中还提供了一种计算机可读存储介质，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行时实现图1所对应实施例中描述的基于前端的数据处理方法，也可实现本发明图2所对应实施例的基于前端的数据处理装置，在此不再赘述。
所述计算机可读存储介质可以是前述任一实施例所述的基于前端的数据处理装置的内部存储单元，例如基于前端的数据处理装置的硬盘或内存。所述计算机可读存储介质也可以是所述基于前端的数据处理装置的外部存储装置，例如所述基于前端的数据处理装置上配备的插接式硬盘，智能存储卡(SmarS Media Card,SMC)，安全数字(SecureDigiSal,SD)卡，闪存卡(Flash Card)等。进一步地，所述计算机可读存储介质还可以既包括所述基于前端的数据处理装置的内部存储单元也包括外部存储装置。所述计算机可读存储介质用于存储所述计算机程序以及所述基于前端的数据处理装置所需的其他程序和数据。所述计算机可读存储介质还可以用于暂时地存储已经输出或者将要输出的数据。
所述集成的单元如果以软件功能单元的形式实现并作为独立的产品销售或使用时，可以存储在一个计算机可读取存储介质中。基于这样的理解，本发明的技术方案本质上或者说对现有技术做出贡献的部分，或者该技术方案的全部或部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个计算机可读存储介质中，包括若干指令用以使得一台计算机设备(可以是个人计算机，终端，或者网络设备等)执行本发明各个实施例所述方法的全部或部分步骤。而前述的计算机可读存储介质包括：U盘、移动硬盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、磁碟或者光盘等各种可以存储程序代码的介质。所述的计算机可读存储介质可主要包括存储程序区和存储数据区，其中，存储程序区可存储操作系统、至少一个功能所需的应用程序等；存储数据区可存储根据区块链节点的使用所创建的数据等。
需要强调的是，为进一步保证上述数据的私密和安全性，上述数据还可以存储于一区块链的节点中。其中，本发明所指区块链是分布式数据存储、点对点传输、共识机制、加密算法等计算机技术的新型应用模式。区块链(Blockchain)，本质上是一个去中心化的数据库，是一串使用密码学方法相关联产生的数据块，每一个数据块中包含了一批次网络交易的信息，用于验证其信息的有效性(防伪)和生成下一个区块。区块链可以包括区块链底层平台、平台产品服务层以及应用服务层等。
以上所述，仅为本发明的部分实施方式，但本发明的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本发明揭露的技术范围内，可轻易想到各种等效的修改或替换，这些修改或替换都应涵盖在本发明的保护范围之内。
Claims (8)
1.一种基于前端的数据处理方法，其特征在于，所述方法包括：
获取前端中的当前vue项目的根目录中的配置文件，其中，所述配置文件中配置了地址信息；
根据所述配置文件中的地址信息确定所述当前vue项目中待处理的vue组件，并根据所述待处理的vue组件对所述当前vue项目的页面进行渲染，以确定渲染数据对应的第一埋点；
监听所述当前vue项目中所有页面的触发事件，并根据监听到的触发事件确定所述触发事件的交互数据对应的第二埋点；
将所述第一埋点和所述第二埋点进行上报，并获取所述第一埋点和所述第二埋点所对应的性能指标数据，以及对所述性能指标数据进行优化处理；
所述根据所述待处理的vue组件对所述当前vue项目的页面进行渲染，以确定渲染数据对应的第一埋点，包括：
根据所述待处理的vue组件生成与所述待处理的vue组件对应的目标文件，其中，所述目标文件中包括所述当前vue项目中所有页面的挂载方法；
根据所述目标文件对所述当前vue项目中的所有页面进行渲染，以确定所述当前vue项目中的所有页面的渲染数据对应的第一埋点，所述目标文件为所有vue组件都共用的mixins.js文件，所述mixins.js文件中包含了页面挂载完成后的挂载方法mount，通过import语法将目标文件mixins.js文件引入vue组件内，以使所有vue组件在执行到mount方法时，自动完成埋点上报；
所述根据监听到的触发事件确定所述触发事件的交互数据对应的第二埋点，包括：
获取监听到的发生触发事件的页面，并根据预设关键词对所述发生触发事件的页面中的所述待处理的vue组件进行分析，查找所述发生触发事件的页面中是否存在所述预设关键词；
当查找到所述发生触发事件的页面中存在所述预设关键词时，获取所述预设关键词在所述发生触发事件的页面中的位置；
在所述位置获取所述触发事件的交互数据对应的属性信息，并根据所述属性信息确定所述触发事件的交互数据对应的第二埋点。
2.根据权利要求1所述的方法，其特征在于，所述根据监听到的触发事件确定所述触发事件的交互数据对应的第二埋点之前，还包括：
根据所述当前vue项目中待处理的vue组件生成针对所述待处理的vue组件的触发事件的埋点文件，并将所述埋点文件添加至所述待处理的vue组件中；
所述根据监听到的触发事件确定发生触发事件的交互数据对应的第二埋点，包括：
当监听到对所述待处理的vue组件的触发事件时，根据所述埋点文件确定所述触发事件的交互数据对应的第二埋点。
3.根据权利要求1所述的方法，其特征在于，所述将所述第一埋点和所述第二埋点进行上报，包括：
监听所述当前vue项目的页面中是否存在vue组件销毁前事件；
当监听到所述当前vue项目的页面中存在vue组件销毁前事件时，将所述第一埋点和所述第二埋点添加到所述vue组件销毁前事件中；
根据预设的时间间隔将添加所述第一埋点和所述第二埋点的所述vue组件销毁前事件进行上报。
4.根据权利要求1所述的方法，其特征在于，所述获取所述第一埋点和所述第二埋点所对应的性能指标数据，并对所述性能指标数据进行优化处理，包括：
获取所述当前vue项目的每个页面在预设时间范围内发生触发事件的次数和/或页面渲染的次数；
对所述当前vue项目的每个页面在预设时间范围内发生触发事件的次数进行合并处理；和/或，
对所述当前vue项目的每个页面在预设时间范围内发生页面渲染的次数进行合并处理。
5.根据权利要求1所述的方法，其特征在于，所述获取前端中的当前vue项目的根目录中的配置文件之前，还包括：
根据所述前端的当前vue项目确定所述当前vue项目的根目录，并在确定的所述当前vue项目的根目录中编写配置文件；
在所述配置文件中配置待处理的vue组件的地址信息。
6.一种基于前端的数据处理装置，其特征在于，包括：
获取单元，用于获取前端中的当前vue项目的根目录中的配置文件，其中，所述配置文件中配置了地址信息；
确定单元，用于根据所述配置文件中的地址信息确定所述当前vue项目中待处理的vue组件，并根据所述待处理的vue组件对所述当前vue项目的页面进行渲染，以确定渲染数据对应的第一埋点；
监听单元，用于监听所述当前vue项目中所有页面的触发事件，并根据监听到的触发事件确定所述触发事件的交互数据对应的第二埋点；
处理单元，用于将所述第一埋点和所述第二埋点进行上报，并获取所述第一埋点和所述第二埋点所对应的性能指标数据，以及对所述性能指标数据进行优化处理；
所述根据所述待处理的vue组件对所述当前vue项目的页面进行渲染，以确定渲染数据对应的第一埋点，包括：
根据所述待处理的vue组件生成与所述待处理的vue组件对应的目标文件，其中，所述目标文件中包括所述当前vue项目中所有页面的挂载方法；
根据所述目标文件对所述当前vue项目中的所有页面进行渲染，以确定所述当前vue项目中的所有页面的渲染数据对应的第一埋点，所述目标文件为所有vue组件都共用的mixins.js文件，所述mixins.js文件中包含了页面挂载完成后的挂载方法mount，通过import语法将目标文件mixins.js文件引入vue组件内，以使所有vue组件在执行到mount方法时，自动完成埋点上报；
所述根据监听到的触发事件确定所述触发事件的交互数据对应的第二埋点，包括：
获取监听到的发生触发事件的页面，并根据预设关键词对所述发生触发事件的页面中的所述待处理的vue组件进行分析，查找所述发生触发事件的页面中是否存在所述预设关键词；
当查找到所述发生触发事件的页面中存在所述预设关键词时，获取所述预设关键词在所述发生触发事件的页面中的位置；
在所述位置获取所述触发事件的交互数据对应的属性信息，并根据所述属性信息确定所述触发事件的交互数据对应的第二埋点。
7.一种计算机设备，其特征在于，包括处理器、输入设备、输出设备和存储器，所述处理器、输入设备、输出设备和存储器相互连接，其中，所述存储器用于存储计算机程序，所述处理器被配置用于调用所述计算机程序，执行如权利要求1-5任一项所述的方法。
8.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质存储有计算机程序，所述计算机程序被处理器执行以实现权利要求1-5任一项所述的方法。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011544055.0A CN112527414B (zh) | 2020-12-23 | 2020-12-23 | 一种基于前端的数据处理方法、装置、设备及存储介质 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202011544055.0A CN112527414B (zh) | 2020-12-23 | 2020-12-23 | 一种基于前端的数据处理方法、装置、设备及存储介质 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN112527414A CN112527414A (zh) | 2021-03-19 |
| CN112527414B true CN112527414B (zh) | 2023-09-22 |
Family
ID=74976020
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202011544055.0A Active CN112527414B (zh) | 2020-12-23 | 2020-12-23 | 一种基于前端的数据处理方法、装置、设备及存储介质 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN112527414B (zh) |
Families Citing this family (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113626158A (zh) * | 2021-08-13 | 2021-11-09 | 中国工商银行股份有限公司 | 一种基于事件代理的埋点执行方法及装置 |
| WO2023169251A1 (zh) * | 2022-03-09 | 2023-09-14 | 北京字节跳动网络技术有限公司 | 一种指标确定方法、装置、服务器和介质 |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110647438A (zh) * | 2019-08-13 | 2020-01-03 | 平安科技（深圳）有限公司 | 事件监控方法、装置、计算机设备和存储介质 |
| CN111124530A (zh) * | 2019-11-25 | 2020-05-08 | 北京博睿宏远数据科技股份有限公司 | 浏览器首次渲染时间计算方法、装置、浏览器及存储介质 |
| CN111159600A (zh) * | 2019-12-27 | 2020-05-15 | 北京达佳互联信息技术有限公司 | 页面上元素的信息上报方法、装置、电子设备及存储介质 |
| CN111858252A (zh) * | 2020-07-23 | 2020-10-30 | 中国工商银行股份有限公司 | 基于前端框架的动态埋点方法及装置 |
Family Cites Families (1)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US10275226B2 (en) * | 2015-10-23 | 2019-04-30 | Oracle International Corporation | Structural representation of generic type variable in a nominally typed virtual machine |
-
2020
- 2020-12-23 CN CN202011544055.0A patent/CN112527414B/zh active Active
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN110647438A (zh) * | 2019-08-13 | 2020-01-03 | 平安科技（深圳）有限公司 | 事件监控方法、装置、计算机设备和存储介质 |
| CN111124530A (zh) * | 2019-11-25 | 2020-05-08 | 北京博睿宏远数据科技股份有限公司 | 浏览器首次渲染时间计算方法、装置、浏览器及存储介质 |
| CN111159600A (zh) * | 2019-12-27 | 2020-05-15 | 北京达佳互联信息技术有限公司 | 页面上元素的信息上报方法、装置、电子设备及存储介质 |
| CN111858252A (zh) * | 2020-07-23 | 2020-10-30 | 中国工商银行股份有限公司 | 基于前端框架的动态埋点方法及装置 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN112527414A (zh) | 2021-03-19 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN110162544B (zh) | 异构数据源数据获取方法及装置 | |
| WO2021189954A1 (zh) | 日志数据处理方法、装置、计算机设备和存储介质 | |
| CN112527414B (zh) | 一种基于前端的数据处理方法、装置、设备及存储介质 | |
| WO2021189953A1 (zh) | 日志数据处理方法、装置、计算机设备和存储介质 | |
| CN109902493B (zh) | 脚本的下发方法及服务器 | |
| CN111797351A (zh) | 页面数据管理方法、装置、电子设备及介质 | |
| CN110825731A (zh) | 数据存储方法、装置、电子设备及存储介质 | |
| CN112163412A (zh) | 数据校验方法、装置、电子设备及存储介质 | |
| CN112416710A (zh) | 用户操作的记录方法、装置、电子设备及存储介质 | |
| CN111814045A (zh) | 数据查询方法、装置、电子设备及存储介质 | |
| CN110941530A (zh) | 监控数据的获取方法、装置、计算机设备和存储介质 | |
| CN112711398A (zh) | 埋点文件生成方法、装置、设备及存储介质 | |
| CN112817831A (zh) | 应用性能监测方法、装置、计算机系统和可读存储介质 | |
| CN111176987A (zh) | 前端日志统一输出的方法、装置、计算机设备及存储介质 | |
| CN111782993A (zh) | 页面显示方法、装置及服务器 | |
| CN111897728B (zh) | 接口调试方法及相关设备 | |
| CN114153703A (zh) | 微服务的异常定位方法、装置、电子设备和程序产品 | |
| CN114185920A (zh) | 日志数据处理方法、装置、计算机设备和存储介质 | |
| CN113722225A (zh) | 页面测试方法、装置、计算机设备和存储介质 | |
| JP2021163475A (ja) | ログベースのマッシュアップのコード生成 | |
| CN111984473A (zh) | 一种内存快照数据获取方法及相关装置 | |
| CN113760696A (zh) | 一种程序问题定位方法、装置、电子设备和存储介质 | |
| CN111488230A (zh) | 修改日志输出级别的方法、装置、电子设备及存储介质 | |
| CN116661758B (zh) | 一种优化日志框架配置的方法、装置、电子设备及介质 | |
| CN111581289B (zh) | 一种双头区块链的数据管理方法、系统、装置及介质 |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| TA01 | Transfer of patent application right |
Effective date of registration: 20230918 Address after: 713400 C05, Digital Economy and Entrepreneurship Park, Yintai District, Tongchuan City, Shaanxi Province Applicant after: Shaanxi Mingshuai Technology Co.,Ltd. Address before: 518000 Room 202, block B, aerospace micromotor building, No.7, Langshan No.2 Road, Xili street, Nanshan District, Shenzhen City, Guangdong Province Applicant before: Shenzhen LIAN intellectual property service center Effective date of registration: 20230918 Address after: 518000 Room 202, block B, aerospace micromotor building, No.7, Langshan No.2 Road, Xili street, Nanshan District, Shenzhen City, Guangdong Province Applicant after: Shenzhen LIAN intellectual property service center Address before: 518000 Room 201, building A, 1 front Bay Road, Shenzhen Qianhai cooperation zone, Shenzhen, Guangdong Applicant before: PING AN PUHUI ENTERPRISE MANAGEMENT Co.,Ltd. |
|
| TA01 | Transfer of patent application right |