iis服务器助手广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >如何在Vue单页面中进行业务数据的上报
  • 208
分享到

如何在Vue单页面中进行业务数据的上报

2024-04-02 19:04:59 208人浏览 泡泡鱼
摘要

目录概述1. 各个路由的PV上报2. 用户点击行为的上报3. 用户操作结果的数据上报总结概述 业务数据的上报主要分为: 各个路由的PV上报; 用户的点击行为上报;

概述

业务数据的上报主要分为:

  • 各个路由的PV上报;
  • 用户的点击行为上报;
  • 用户操作结果(分享是否成功)的数据上报等;

通用和必须上报的数据,均在上报的代码中进行固定,比如设备信息、用户信息、cookie等都需要上报的数据,在上报前处理完成,需要异步获取且数据固定的,做好存储,防止每次都要重新获取;其他额外的数据,通过对外暴露的send方法进行传递。

比如获取信息这块,客户端给到的jsapi,有可能只能异步调用,那么我们就可以这么处理:


function getAppInfo() {
    let appInfo = {};

    return ()=> {
        if (appInfo.deviceId) {
            return Promise.resolve(appInfo);
        } else {
            return new Promise((resolve, reject) => {
                ABB.getAppInfo(info => {
                    if (info.deviceId) {
                        appInfo = info;
                        resolve(appInfo);
                    } else {
                        reject(new Error('get AppInfo error'));
                    }
                })
            })
        }
    }
}

const AppInfo = getAppInfo();
console.log( AppInfo() );

1. 各个路由的PV上报

各个路由的PV上报可以通过Vue router的afterEach来实现,每次路由刷新时,afterEach方法都会执行,那么我们在这里进行PV的上报:


// 每个hash路由的PV上报
router.afterEach((to)=>{
    // to为当前已打开的页面,to.name为在router/index.ts中设定的name
    dataBoss.sendPV(to.name);
})

2. 用户点击行为的上报

用户点击行为的上报,之前是在每个点击的业务代码最后,进行一次点击上报。不过这样一个不好的地方是,必须为每个需要上报的点击元素添加一段业务代码,同时,如果多个点击行为共享某个业务片段时,需要进行点击区分:


methods: {
    myClick(value, prarams, act) {
        // ... 业务逻辑的处理

        // 数据的上报
        wzp.send({
            act: act,
            pageSource: 'MainPage'
        })
    }
}

现在,我们利用Vue中的自定义指令来实现点击行为的上报,上报的处理与业务代码进行分割:


// 自定义指令的官方文档: https://cn.vuejs.org/v2/guide/custom-directive.html
// 自定义boss指令
// bind: 只对该元素绑定一次
// el: 触发时的DOM元素
// binding.value: 传入的值
// 使用 v-boss="{page: 'MainPage', sop: 'donate'}"
Vue.directive('boss', {
    // 
    bind: function (el: HTMLElement, binding: any) {
        el.addEventListener('click', ()=>{
            // 绑定click事件,触发后进行数据上报
            Vue.prototype.$dataBoss.send(binding.value)
        })
    }
})

自定义v-boss指令后,我们就可以在元素上使用这个指令后:


<!-- 为用户头像添加点击数据上报 -->
<div class="avatar" v-boss="{pageName: 'MainPage', sop: 'sop_own_click'}" @click="linkTo">
    <img :src="user.avatar" :alt="user.nickname">
</div>

3. 用户操作结果的数据上报

这里的数据上报是用户点击行为之后的结果上报,比如用户点击了分享按钮,那么最终他是真的分享成功了,还是中途又取消了。这种数据的上报,可以分析出用户从意图操作到最终实现的一个流失情况。

操作结果的数据上报,依赖于客户端或者接口给反馈的结果,这就需要在业务代码中实现了,定义一个全局变量$dataBoss,通过这个来上报数据:

比如分享是否成功的监控


// 发起分享
handleShare() {
    share.show();
    share.on('shareResult', res => {
        this.$dataBoss.send({
            sop: 'share_success'
        });
    })
}

根据接口中的数据进行上报:


handleUser() {
    JSONp(url).then(result => {
        this.$dataBoss.send({
            kv: {
                money: 20
            }
        });
    })
}

总结

前端数据上报的维度很多,都是为了方便我们更加的了解用户、了解产品,方便以后的功能迭代。

以上就是如何在Vue单页面中进行业务数据的上报的详细内容,更多关于Vue单页面中进行业务数据的上报的资料请关注编程网其它相关文章!

--结束END--

本文标题: 如何在Vue单页面中进行业务数据的上报

本文链接: https://www.lsjlt.com/news/125923.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • 如何在Vue单页面中进行业务数据的上报
    目录概述1. 各个路由的PV上报2. 用户点击行为的上报3. 用户操作结果的数据上报总结概述 业务数据的上报主要分为: 各个路由的PV上报; 用户的点击行为上报; ...
    99+
    2024-04-02
  • 怎么在Vue单页面中进行业务数据的上报
    小编给大家分享一下怎么在Vue单页面中进行业务数据的上报,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!概述业务数据的上报主要分为:各个路由的PV上报;用户的点击行为上报;用户操作结果(分享是否成功)的数据上报等;通用和必须...
    99+
    2023-06-15
  • 如何进行数据采集和数据上报
    本篇内容介绍了“如何进行数据采集和数据上报”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!数据采集性能数据采...
    99+
    2024-04-02
  • css中如何在页面上对背景图像进行平铺
    小编给大家分享一下css中如何在页面上对背景图像进行平铺,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! 要是须要在页面上对背景...
    99+
    2024-04-02
  • 如何在CSS中编辑单个页面上的样式
    小编给大家分享一下如何在CSS中编辑单个页面上的样式,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!如果您有一个 CMS 并且希望您的某些帖子看起来与其他帖子不同,...
    99+
    2023-06-27
  • 如何在单个数据帧内进行vlookup?
    问题内容 来自以下数据框(df): |------------+--------------------+-------------| | child_code | child_nam...
    99+
    2024-02-09
  • css如何在页面上对背景图像进行平铺
    这篇文章主要为大家展示了“css如何在页面上对背景图像进行平铺”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“css如何在页面上对背景图像进行平铺”这篇文章吧。 ...
    99+
    2024-04-02
  • vue单页面如何通过prerender-spa-plugin插件进行SEO优化
    目录一、前言二、过程prerender-spa-plugin插件只能对静态的页面做预渲染实现SEO优化,如果是后台请求的数据需要做SSR处理,例如商品详情页,可使用Vue SSR,详...
    99+
    2024-04-02
  • 如何在ipad上借助firebug工具来进行页面调试
    本篇内容主要讲解“如何在ipad上借助firebug工具来进行页面调试”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“如何在ipad上借助firebug工具来进行页面调试”吧!以前用ios5的时候...
    99+
    2023-06-08
  • 如何在ASP网页中使用NumPy进行数据分析?
    数据分析已成为现代企业和科学研究的关键因素。Python中的NumPy库是一个强大的工具,用于处理和分析数值数据。在本文中,我们将探讨如何在ASP网页中使用NumPy进行数据分析。 安装NumPy库 要在ASP网页中使用NumPy,首先...
    99+
    2023-08-12
    自然语言处理 numy apache
  • PHP数组分页中如何进行单元测试?
    php 数组分页单元测试指南包括:测试边缘情况(空数组、无效页码);测试分页结果是否正确(第一页、中间页、最后一页);测试总页码计算是否正确(元素数量等于每页元素数量、元素数量大于每页元...
    99+
    2024-05-01
    php 单元测试
  • PHP数组分页中如何进行数据转换?
    数据转换在 php 数组分页中至关重要,以便正确显示和处理分页数据。可以通过以下函数转换数据类型:intval():转换为整数floatval():转换为浮点数strval():转换为字...
    99+
    2024-04-30
    数据转换 php数组分页
  • 如何在Pig中进行数据排序
    在Pig中进行数据排序可以通过使用ORDER BY语句来实现。以下是一个简单的排序示例: 假设我们有一个包含名字和年龄的数据集,并且...
    99+
    2024-03-07
    Pig
  • 在Hive中如何进行数据分析和生成报告
    在Hive中进行数据分析和生成报告需要按照以下步骤进行: 准备数据:首先需要从数据源(比如HDFS、S3等)中加载数据到Hive...
    99+
    2024-04-02
  • 如何对 Golang 中的数据库查询进行分页?
    非常抱歉,由于您没有提供文章标题,我无法为您生成一篇高质量的文章。请您提供文章标题,我将尽快为您生成一篇优质的文章。...
    99+
    2024-05-14
  • css如何把Web页面上的段落的第一行缩进
    小编给大家分享一下css如何把Web页面上的段落的第一行缩进,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧! 把 Web 页面上的段落的第一行缩进,这是一种最常用的文本格式化效果。 CS...
    99+
    2024-04-02
  • 如何在Oracle数据库中进行事务管理
    在Oracle数据库中进行事务管理可以通过以下步骤实现: 开始事务:在执行需要进行事务管理的操作之前,使用BEGIN TRANS...
    99+
    2024-04-09
    Oracle
  • Vue在页面数据渲染完成之后如何调用
    这篇文章主要为大家展示了“Vue在页面数据渲染完成之后如何调用”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Vue在页面数据渲染完成之后如何调用”这篇文章吧。在...
    99+
    2024-04-02
  • 如何在PHP中进行数据可视化和报告生成?
    在Web应用程序和商业软件中,数据可视化和报告生成是必不可少的功能。它们帮助人们更好地理解和分析数据,以便做出更好的决策。PHP是一种广泛使用的编程语言,它提供了多种库和工具,使得数据可视化和报告生成变得更加简单和高效。本文将介绍如何在PH...
    99+
    2023-05-21
    数据分析 PHP数据可视化 报告生成
  • PHP中如何进行商业智能和数据分析?
    随着互联网的发展和数据量的不断增加,商业智能和数据分析变得越来越重要。在这个无所不在的数据时代,很多企业也开始关注如何利用数据来做出更明智的商业决策。而PHP,作为最常用的Web编程语言之一,也可以用来实现商业智能和数据分析的任务。本文将详...
    99+
    2023-05-21
    数据分析 商业智能 PHP
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作