(扩展)网站流量日志分析--数据可视化-- vue 版--复杂 josn 格式数据剖析 | 学习笔记

简介: 快速学习(扩展)网站流量日志分析--数据可视化-- vue 版--复杂 josn 格式数据剖析

开发者学堂课程【大数据分析之企业级网站流量运营分析系统开发实战(第五阶段):(扩展)网站流量日志分析--数据可视化-- vue 版--复杂 josn 格式数据剖析】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/697/detail/12262


(扩展)网站流量日志分析--数据可视化-- vue 版--复杂 josn 格式数据剖析

内容介绍:

一、复杂 josn 格式数据剖析的过程

二、注意内容

 

一、复杂 josn 格式数据剖析的过程

网页搜索 JOSN 在线解析及格式化验证,将内容复制到其中,网站自动进行解析,解析之后会发现数据相当有规律,返回后发现数据是两个标准的 JOSN。

image.png

两个属性分别为 xAxis 和 series,都是数组的格式,对象属性是 data 对应 x 轴的一点、二点或者一号、二号等,也就是说,x 轴是一个对象数组,里面分装了对象,对象有一个属性叫做 data,y 轴也是一个数组,这个数组存放着三个对象,这三个对象分别代表三条折线,

image.png

属性极其类似,

分别如下:"id":"620000201 408199241",

"name": "浏览次数",

"total": 37082,

"items”又是一个数组,存放着对象,date 格式。

用 Navicat 把数据加载到数据库的表中,右键运行 SQL 文件,选择桌面,点击开始。

点击刷新,每天每个指标的值,我们要做的就是根据时间,根据相关的属性维度统计指标的情况。

把后台的数据拆分,向前端返回。数据看上去比较复杂,实际上就是数组里面嵌套数组。

流线图如下:

image.png

右边是 datebase,也就是通过相关的工具分析出来的数据,不管后边数据如何查询,重点在于前端需要的数据格式,我们大致可以确定它是 josn,设计一个对象叫 ToPageBean, 有两个属性分别是 xAxis 和 series,只不过这两个属性都很特殊,他不是基本属性,而是数组。

而且这个数组还是对象数组,第一个存放的属性叫做 date,建立一个对象 Datapojo,它只有一个 data 属性,x 存放的就是对象组成的对象数组,y 轴还是一个数组,yseriespojo,最后一个属性叫 items,他的数组格式是 Datapojo[]。

ySeriespojo

String id

String name

long total

Datapojo[] items

ToPageBean

Datapojo[] xAxis

ySeriespojo[l series

用各种 josn 工具转换成 josn 字符串,就符合了前端所需要的工具。里面的每一个属性都是数组,数组中的元素还是对象,甚至对象中的属性还是数组嵌套着对象。因此看起来数据比较复杂。

利用工具类把他梳理清楚之后,要设置什么样的对象,分装什么样的数组,怎么返回将会变得清晰。这一步实际上也是最大的开发量。

 

二、注意内容

在实际数据报表的展示的开发中,作为后端的数据人员

最大的开发量在于把查询返回的数据按照前端需要的数据格式返回往往数据都 json

注意 json 里面属性的嵌套

相关实践学习
【涂鸦即艺术】基于云应用开发平台CAP部署AI实时生图绘板
【涂鸦即艺术】基于云应用开发平台CAP部署AI实时生图绘板
相关文章
|
3月前
|
SQL 人工智能 监控
SLS Copilot 实践:基于 SLS 灵活构建 LLM 应用的数据基础设施
本文将分享我们在构建 SLS SQL Copilot 过程中的工程实践,展示如何基于阿里云 SLS 打造一套完整的 LLM 应用数据基础设施。
774 60
|
3月前
|
数据采集 运维 监控
不重启、不重写、不停机:SLS 软删除如何实现真正的“无感数据急救”?
SLS 全新推出的「软删除」功能,以接近索引查询的性能,解决了数据应急删除与脏数据治理的痛点。2 分钟掌握这一数据管理神器。
253 30
|
4月前
|
存储 缓存 Apache
StarRocks+Paimon 落地阿里日志采集:万亿级实时数据秒级查询
A+流量分析平台是阿里集团统一的全域流量数据分析平台,致力于通过埋点、采集、计算构建流量数据闭环,助力业务提升流量转化。面对万亿级日志数据带来的写入与查询挑战,平台采用Flink+Paimon+StarRocks技术方案,实现高吞吐写入与秒级查询,优化存储成本与扩展性,提升日志分析效率。
553 1
|
4月前
|
存储 关系型数据库 数据库
【赵渝强老师】PostgreSQL数据库的WAL日志与数据写入的过程
PostgreSQL中的WAL(预写日志)是保证数据完整性的关键技术。在数据修改前,系统会先将日志写入WAL,确保宕机时可通过日志恢复数据。它减少了磁盘I/O,提升了性能,并支持手动切换日志文件。WAL文件默认存储在pg_wal目录下,采用16进制命名规则。此外,PostgreSQL提供pg_waldump工具解析日志内容。
412 0
|
4月前
|
数据采集 运维 监控
|
3月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中,兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线,大型项目建议使用Pinia等状态管理工具,确保数据流清晰可控,避免内存泄漏。
346 2
|
2月前
|
缓存 JavaScript
vue中的keep-alive问题(2)
vue中的keep-alive问题(2)
320 137
|
6月前
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析:改变 key 导致组件销毁与重建
829 0
|
6月前
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
|
7月前
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑,结合D3强大的数据可视化能力,实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展(如节点类型定制、连接样式优化等),并提供了性能优化方案以应对大数据量场景。最终,展示了基础网络拓扑、实时更新拓扑等应用实例,为开发者提供了一套完整的实现思路和实践经验。
925 77