Vue项目实现报表功能,vue 动态的表单怎么数据回显
为什么要在标题中添加业务数据报告？因为我们前端项目可以上报的数据维度太多了，比如性能数据、页面错误数据、控制台抓取等。这里只说明业务数据的埋葬点。
目录
概述1。每条路线的PV报告2。用户点击行为报告3。用户操作结果数据报告汇总
概述
业务报告主要分为：
每条路线的PV报告；
用户的点击行为被举报；
用户操作结果的数据上报(分享是否成功)等。
一般数据和必须上报的数据固定在上报代码中。比如需要上报的数据，比如设备信息、用户信息、cookie等。在报告之前进行处理。如果需要异步采集，数据是固定的，就要好好存储，防止每次都被重新采集。其他附加数据通过公开的send方法传递。
比如客户端给的jsapi只能异步调用，那么我们可以这样处理：
函数getAppInfo() {
let appInfo={ }；
return ()={
if (appInfo.deviceId) {
return promise . resolve(appInfo)；
}否则{
返回新承诺((解决，拒绝)={
ABB.getAppInfo(信息={
if (info.deviceId) {
appInfo=info
解决(appInfo)；
}否则{
reject(新错误( get AppInfo Error ))；
}
})
})
}
}
}
const AppInfo=getAppInfo()；
console . log(AppInfo())；
1. 各个路由的PV上报
每条路由的PV报告可以通过vue路由器的afterEach实现，每次刷新路由都会执行afterEach方法，所以我们在这里报告PV:
//每个哈希路由的PV报告
router.afterEach((to)={
//to是当前打开的页面，to.name是router/index.ts中设置的名称
data boss . send PV(to . name)；
})
2. 用户点击行为的上报
用户点击行为的报告在每个被点击的业务代码的末尾进行一次。但是，这样的缺点是必须为每个需要报告的点击元素添加一个业务代码。同时，如果多个点击行为共享一个业务细分市场，那么点击差异化是必需的：
方法：{
myClick(值，程序，行为){
//.业务逻辑的处理
//数据提交
wzp.send({
act: act，
页面来源：“主页”
})
}
}
现在，我们使用Vue中的自定义指令来报告点击行为，报告处理用业务代码来划分：
//海关指令正式文件：https://cn.vuejs.org/v2/guide/custom-directive.html
//自定义boss指令
//bind:仅绑定此元素一次。
//el: DOM元素被触发时
//binding.value:传入的值
//使用v-boss= {page: mainpage ，SOP:捐 }
Vue.directive(boss ，{
//
bind: function (el: HTMLElement，binding: any) {
el.addEventListener(click ，()={
//绑定click事件，触发后上报数据。
vue . prototype . $ data boss . send(binding . value)
})
}
})
自定义v-boss指令后，我们可以在元素上使用此指令：
！-将点击数据添加到用户的头像并报告-
div class= avatar v-boss= { pageName: main page ，sop: sop _ own _ click } @ click= link to
img:src= user . avatar :alt= user . nickname
/div
3. 用户操作结果的数据上报
这里的数据报表是用户点击后的结果报表。比如用户点击了分享按钮，那么最后是真的分享成功了，还是中途取消了？这类数据的报告，可以分析从意向运营到最终变现的用户流失情况。
操作结果的数据上报依赖于客户端或接口的反馈结果，需要在业务代码中实现。定义一个全局变量$dataBoss，并通过以下方式报告数据：
例如，监控共享是否成功：
//启动共享
handleShare() {
share . show()；
share.on(shareResult ，res={
这个。$dataBoss.send({
sop:“分享成功”
});
})
}
根据界面中的数据进行报告：
handleUser() {
jsonp(url)。然后(结果={
这个。$dataBoss.send({
kv: {
钱：20
}
});
})
}
总结
前端数据上报有很多维度，都是为了方便我们更多的了解用户和产品，方便以后的功能迭代。
以上是Vue单页如何上报业务数据的细节。更多关于Vue单页上报业务数据的信息，请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。