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

本文涉及的产品
日志服务 SLS,月写入数据量 50GB 1个月
简介: 快速学习(扩展)网站流量日志分析--数据可视化-- 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 里面属性的嵌套

相关实践学习
日志服务之使用Nginx模式采集日志
本文介绍如何通过日志服务控制台创建Nginx模式的Logtail配置快速采集Nginx日志并进行多维度分析。
相关文章
|
18天前
|
存储 Oracle 关系型数据库
【赵渝强老师】MySQL InnoDB的数据文件与重做日志文件
本文介绍了MySQL InnoDB存储引擎中的数据文件和重做日志文件。数据文件包括`.ibd`和`ibdata`文件,用于存放InnoDB数据和索引。重做日志文件(redo log)确保数据的可靠性和事务的持久性,其大小和路径可由相关参数配置。文章还提供了视频讲解和示例代码。
128 11
【赵渝强老师】MySQL InnoDB的数据文件与重做日志文件
|
2月前
|
JavaScript
如何在 Vue 项目中选择合适的模块格式
【10月更文挑战第20天】选择合适的模块格式需要综合考虑多个因素,没有一种绝对正确的选择。需要根据项目的具体情况进行权衡和分析。在实际选择过程中,要保持灵活性,根据项目的发展和变化适时调整模块格式。
21 7
|
2月前
|
JavaScript 前端开发 编译器
在 Vue 项目中使用 ES 模块格式的优点
【10月更文挑战第20天】在 Vue 项目中使用 ES 模块格式具有众多优点,这些优点共同作用,使得项目能够更高效、更可靠地开发和运行。当然,在实际应用中,还需要根据项目的具体情况和需求进行合理的选择和配置。
33 6
|
18天前
|
SQL Oracle 关系型数据库
【赵渝强老师】Oracle的联机重做日志文件与数据写入过程
在Oracle数据库中,联机重做日志文件记录了数据库的变化,用于实例恢复。每个数据库有多组联机重做日志,每组建议至少有两个成员。通过SQL语句可查看日志文件信息。视频讲解和示意图进一步解释了这一过程。
|
2月前
|
数据采集 机器学习/深度学习 存储
使用 Python 清洗日志数据
使用 Python 清洗日志数据
38 2
|
3月前
|
JavaScript 前端开发
Vue学习笔记8:解决Vue学习笔记7中用v-for指令渲染列表遇到两个问题
Vue学习笔记8:解决Vue学习笔记7中用v-for指令渲染列表遇到两个问题
|
3月前
|
JavaScript 前端开发 API
Vue学习笔记7:使用v-for指令渲染列表
Vue学习笔记7:使用v-for指令渲染列表
|
SQL 监控
日志服务数据加工最佳实践: 从RDS-MySQL拉取数据做富化
本篇覆盖日志服务数据加工最佳实践: 从RDS-MySQL拉取数据做富化的各种场景, 包括定期刷新拉取所有, 拉取部分数据, 拉取后再过滤数据, 调整返回表格结构等
1856 0
|
22天前
|
XML 安全 Java
【日志框架整合】Slf4j、Log4j、Log4j2、Logback配置模板
本文介绍了Java日志框架的基本概念和使用方法,重点讨论了SLF4J、Log4j、Logback和Log4j2之间的关系及其性能对比。SLF4J作为一个日志抽象层,允许开发者使用统一的日志接口,而Log4j、Logback和Log4j2则是具体的日志实现框架。Log4j2在性能上优于Logback,推荐在新项目中使用。文章还详细说明了如何在Spring Boot项目中配置Log4j2和Logback,以及如何使用Lombok简化日志记录。最后,提供了一些日志配置的最佳实践,包括滚动日志、统一日志格式和提高日志性能的方法。
167 30
【日志框架整合】Slf4j、Log4j、Log4j2、Logback配置模板
|
2月前
|
XML JSON Java
Logback 与 log4j2 性能对比:谁才是日志框架的性能王者?
【10月更文挑战第5天】在Java开发中,日志框架是不可或缺的工具,它们帮助我们记录系统运行时的信息、警告和错误,对于开发人员来说至关重要。在众多日志框架中,Logback和log4j2以其卓越的性能和丰富的功能脱颖而出,成为开发者们的首选。本文将深入探讨Logback与log4j2在性能方面的对比,通过详细的分析和实例,帮助大家理解两者之间的性能差异,以便在实际项目中做出更明智的选择。
250 3