vue项目中数据埋点

最新推荐文章于 2024-06-24 11:36:20 发布

dbi9068

最新推荐文章于 2024-06-24 11:36:20 发布

阅读量1.7k

点赞数 1

文章标签： javascript 后端 ViewUI

原文链接：http://www.cnblogs.com/chengeping/p/11459073.html

版权

数据埋点用于记录系统操作行为，当触发特定行为时向后端发送请求。本文介绍了两种Vue项目中的实现方案：1. 通过在按钮上添加data-track属性，并在main.js中监听点击事件获取该值并发送请求；2. 使用自定义指令v-dataGrow来绑定需要埋点的节点，提供了一种更简洁的实现方式。

摘要由CSDN通过智能技术生成

数据埋点其实就是对系统的某些操作行为进行记录，当触发行为时候对后端发起请求，让后端进行统计其实就是一次埋点过程。接下来就是对：新建，编辑，删除。。。。一系列行为进行监听。

　　实现方案：1. 1.在需要埋点的按钮节点加上data-track属性，然后入口文件main.js通过事件冒泡机制使用document.addEventLister("click", function() {})在函数中获取节点的data-track值，最后发起请求

　　　　　　　1. 2.第一点理想状况是可行的，但是由于项目中用了element中的组件，有些时候是拿不到data-track属性的

　　第二种方案:使用指令实现，对需要的埋点的节点使用v-dataGrow进行绑定：

 <span v-if="immediateEditList.includes(head.fieldType) && head.editable"
                data-type="immediateEdit"
                v-dataGrow="
                { alis: `${$route.query.subBusinessType}- 
        　　　　　　list-${$route.query.subBusinessType}-quickEdit-${appInfo.businessType}`,
                stop: false }"
                :data-id=&