数据预处理﹣系统监控 web 界面﹣实时流量转发数据来源|学习笔记

简介: 快速学习数据预处理﹣系统监控 web 界面﹣实时流量转发数据来源

开发者学堂课程【大数据实战项目:反爬虫系统(Lua+Spark+Redis+Hadoop框架搭建)第四阶段数据预处理﹣系统监控 web 界面﹣实时流量转发数据来源】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/672/detail/11680


数据预处理﹣系统监控 web 界面﹣实时流量转发数据来源


内容介绍:

一、实时流量转发数据来源代码介绍

二、前端展示


一、实时流量转发数据来源代码介绍

之前学习了系统功能运行情况,分析了代码运行,今天来学习第二个,第二个里面有一个定时的运行的周期。因为实时流量转发情况数据是不断刷新的,每隔60秒刷新一次

setInterval ( systemMonitorIndex . loadFlows , timeout :60000);

往下找到实时流量转发情况代码,也就是实时流量转发的数据来源。上面几行的代码是一些参数的设置,option 往下的 tooltip 及以下就是实时流量转发

image.png

再往后会出现 ajax,option 是 ext 可以直接进行数据填充,数据就存在于 ajax 的 systemMonitoring 里面。通过ajax 就可以找到数据的来源,复制 getRealTimeTraffid 到搜索框就找到了这个实时流量转发情况。

下面来看一下曲线图的来源,

*获取实时流量转发情况

@ RequestMapping ( value ="/ getRealTimeTraffic ", method = RequestMethod . PosT )

@ResponseBody

public Map < String ,0bject> getRealTimeTraffic ( HttpServletRequest request ){

Map < String , object > map = new HashMap <~>();

try {

/ *

* mapS . put (" time ", endTimeList );

mapS . put (" value ", sourceCountList );

mapS . put (" sum ", currFlowSum );

* /

map = TrafficUtil . getForwardInfo ( minutes :-20, Constants . CSANTI _ MONITOR _ DP );

catch ( Exception e ){

//Т000: handLe exception

System . out . println ( e . getStackTrace ()); Logger . info

( e .getMessage ());

return map ;

第一个方法用 map,往后看有一个 TrafficUtil 传了一个-20和一个前缀,进入这个方法:int minutes 是-20,key 是前缀,数据又被传到了 getTrafficInfoByMinute 这个方法里面,进入这个方法发现前缀被塞到了 strFlage 这个方法。这个方法是以 strFlage 为前缀,传递到keys ( jedisCluster , pattern : strFlage +“*”)方法里面,keys 前面有一个初始化的集群,在这个集群里,以strFlage为前缀加一个*,就可以获取所有的节次点keys获取所有以 dp 开头的 key,全部获取过来,添加到keys里面并进行了返回,key遍历每一个,每一个节次点 get key,get key 就是拿到数据。数据拿到后把value又转化成了 jsonVO 的 class。把key设置一下,所有的数据就都有了,添加到 jsonVO 里面并返回,返回后就获得了多个 jsonVOs,这里面拿到的是所有的数据转化成 jsonVO 的结果。

public static List < JsonVo > getTrafficInfoByMinute ( int minutes , String key ){

// redis 内所有的匹配上的数据

List < JsonVo > jsonVos = trafficInfo ( key ); List < JsonVo > sList = new ArrayList <~>();

//获取当前时间

string timeE= TimeUtil . getCurrTime ();

//获取 minutes 分钟前的时间

String timeS = TimeUtil . getTimeByMinute ( TimeUtil . yyyy _ MM _ DDH Н24miss( timeE ), minutes );

//选取 minutes 分钟内的数据

for ( JsonVo jsonVo : jsonVos ){

//比较时间大小,并对返回 fint 值做判断

int i = jsonVo . getEndTime (). compareTo ( times ); int j =

timeE . compareTo ( jsonVo . getEndTime ()); if ( i > o && j >0){

sList . add ( jsonvo );

return sList ;

jsonVO 再往后遍历,刚刚的-2也就是两分钟之前,判断它是在两分钟之前,两分钟之后和当前时间性之前,也就是两分钟之内,而现在传过来的只是-20,-20是20分钟之前和当前时间,这20分钟内依然是旧的对比,依然大于零。也就是数据的时间大于20分钟之前并且小于当前,也就是说它在20分钟之内,然后把它添加进来sList里面,然后把sList return 返回。返回到 List < JsonVo > jsonos = getTrafficInfoByMinute ( minutes , key );这个就是我们20分钟之内的而不是2分钟。曲线图中展示的也就是20分钟的数据了。

下面的 endTimeList 还有 sourceCountList 这两个,从字面理解是来存储结束时间,sourceCount 总数的。

List < Jsonvo > jsonVOs = getTrafficInfoByMinute ( minutes , key );

List < String > endTimeList = new ArrayList <~>();

List < String >sourcCountList = new ArrayList <~>();

有了20分钟的数据,接着往下看,

//对 list 集合排序

float currFlowSum =0;

Collections . sort ( jsonVOs );

for ( JsonVo jsonVo : jsonVos ){

String endTime = jsonVo . getEndTime ();

String sourceCount = jsonVo . getSourceCount (); endTimeList .

add ( endTime );

sourceCountList . add ( sourceCount );

currFlowSum += Float . valueof ( jsonVo . getSourceCount ());

mapS . put (" time ", endTimeList );

mapS . put (" value ", sourceCountList );

mapS . put (" sum ", currFlowSum );

return maps

先定义了一个数值,Flow 类型的,数值是零,调用了 sort 方法,把之前调用的20分钟内的数据排序,然后是遍历20分钟内的数据,获得每一个。GetendTime 就是之前的 jsonVO,jsonVO 里面有结束时间,结束时间就是数据中的endTime。

数据遍历出排序以后,遍历出其中的每一个结束世界,就得到了结束时间。把结束时间添加到 endTimeList,endTimeList 就是存储结束时间的一个集合。如果结束时间有十几或者二十几个就会添加到这个集合里面。

再往下看 get sourceCountList 中的 sourceCount 就是我们的总数,每个数据中的总数,总数获取过来以后拿到的结果添加到了 sourceCountList 里面,这个结果记录每个 rdd 里面最终的数据总数。

再往下 currFlowSum 是定义了一个Float类型的变量,getSourceCount 是我们记录的每个数据的数量后变成 Float 类型然后做了一个+=,做了一个数据总数的记录,对数据总数做了一个计算。currFlowSum += Float . valueof ( isonvg . getSourceCount ());

这里面分装了两个 list 和一个总数。

再往下看maps,就是我们最初的 map,

public static Map < String , Object > getForwardInfo ( int minutes , String key )

maps 定义了一个 map 类型,key 是 String,value 是 Object 类型,然后 maps 添加数据,key 是 time 是 endTimeList,就是一个存储了很多结束时间的 list,把它作为一个 value 放到 maps 里面。第二个是 value 是sourceCountList,这个就是刚刚查出来的每个 RDD 的总数的集合,吧 value 作为 key,集合作为 value 存进去。

还有一个 sum,sum 是算出的总和。

综上maps里面存储的是数据结束时间的 list,还有数据的 list,以及总和。

Maps 返回可以回到

public static Map < String , Object > getForwardInfo ( int minutes , String key )

Map 再回来,这里面有说明 maps . put 的是结束时间和结束时间的list,value 和数据的 list 以及总和。

mapS . put (" time ", endTimeList );

mapS . put (" value ",sourceCountList );

mapS . put (" sum "currFlowSum )

然后再把 map 返回,返回就回到了 ajax 里面,也就是下面代码中的 date:

success : function ( deita ){

sum = data . sum ;

if ( data !=nul1){

option . XAxis []. setData ( data . time );

option . series []. setData ( data . value );

myChart . setoption ( option , true );

date 就是刚刚的 map,封装的 map,包含那三个值的 map。然后获取 date 里面的 time,也就是结束时间的 list,结束时间的list获取到后给 setDate 的x 横坐标,也就是图表当中的横坐标。然后下面的 date value,value 是记录的每个批次 RDD 的总数,RDD 里面数据的总数,数量获取到后给了 series,这个值就是维度表里面的y轴,横坐标是时间上面是数值,然后后面就把数据给设置进去了 myChart 设置进去,设置完成后整个代码就完成了。这个也就是我实时流量转发从后台到前台的过程。


二、前端展示

接下来运行一下这个程序,同时爬虫也启动,看一下效果:

image.png

可以看到横坐标出现了时间,纵坐标看上图红点标有十二。

以上就是调用 ajax 到后台来读取数据,这个过程和前边类似,先到前边数据把所有 key 拿到,然后再去 get key 对应的数据,拿到后转化成 jsonVO,获取到 jsonVO 后再去把20分钟内的数据过滤出来,对其进行排序,排完序后再把相应的值截取出来,塞给相应的 list,然后返回。

以上就是实时流量转发从后台到展示的全过程。

相关文章
|
27天前
|
编解码 前端开发 JavaScript
构建高效响应式Web界面:现代前端框架的比较
【4月更文挑战第9天】在移动设备和多样屏幕尺寸盛行的时代,构建能够适应不同视口的响应式Web界面变得至关重要。本文深入探讨了几种流行的前端框架——Bootstrap、Foundation和Tailwind CSS,分析它们在创建响应式设计中的优势与局限。通过对比这些框架的栅格系统、组件库和定制化能力,开发者可以更好地理解如何选择合适的工具来优化前端开发流程,并最终实现高性能、跨平台兼容的用户界面。
|
2月前
|
网络协议 Java Nacos
nacos常见问题之在web界面 上下线服务时报错 400如何解决
Nacos是阿里云开源的服务发现和配置管理平台,用于构建动态微服务应用架构;本汇总针对Nacos在实际应用中用户常遇到的问题进行了归纳和解答,旨在帮助开发者和运维人员高效解决使用Nacos时的各类疑难杂症。
37 0
|
9天前
|
UED 开发者 容器
【专栏】构建响应式Web界面:Flexbox的力量
【4月更文挑战第27天】Flexbox是CSS3的全新布局模式,提供灵活响应式的页面设计。其特点包括灵活性、响应式和易理解,通过主轴和交叉轴控制元素排列对齐。核心概念有容器和项目,常用于导航栏、卡片布局、响应式设计、表格和表单布局。关键属性如flex-direction定义主轴方向,justify-content和align-items控制对齐,flex属性调整项目伸缩,order改变排序。在实践中,要关注响应式、代码维护和浏览器兼容性,以优化布局和用户体验。
|
7天前
|
开发框架 前端开发 JavaScript
学会Web UI框架--Bootstrap,快速搭建出漂亮的前端界面
学会Web UI框架--Bootstrap,快速搭建出漂亮的前端界面
|
9天前
|
移动开发 开发者 HTML5
【专栏】构建响应式Web界面:Flexbox与Grid的实战应用
【4月更文挑战第27天】本文介绍了Flexbox和Grid两种现代Web布局技术,它们能帮助开发者创建美观、响应式且兼容性好的界面。Flexbox通过主轴和交叉轴实现复杂布局,如垂直居中、响应式和多列布局。Grid布局则利用网格线定义容器和网格项,适用于网格系统和响应式设计。文中以构建响应式Web界面为例,展示了如何结合Flexbox和Grid实现头部、内容区域和底部的布局。
|
1月前
|
前端开发 开发者 UED
构建响应式Web界面:Flexbox与Grid布局的深度解析
【4月更文挑战第6天】 在现代前端开发中,为了适配不同设备并提供流畅的用户体验,理解并掌握响应式设计变得至关重要。本文将深入探讨两种主要的CSS布局模式——Flexbox和Grid。我们将剖析它们的核心概念、使用场景以及如何结合它们来创建复杂且灵活的响应式界面。通过实例演示和对比分析,帮助开发者提升界面布局技能,从而设计出能够适应多变设备的Web界面。
|
1月前
|
编解码 前端开发 开发者
构建响应式Web界面:现代前端开发的最佳实践
【4月更文挑战第4天】 在多设备浏览时代,响应式Web设计已成为前端开发者的必备技能。本文将深入探讨实现响应式界面的关键策略,包括灵活布局、媒体查询、图片优化等技术。通过这些方法,开发者能够确保网站在不同屏幕尺寸和分辨率上都能提供良好的用户体验。文章还将介绍最新趋势,如CSS Grid和Flexbox的使用,以及性能优化的相关建议。
|
1月前
|
编解码 前端开发 开发者
构建响应式Web界面:Flexbox与Grid布局的深度对比
【4月更文挑战第4天】 在现代前端开发中,构建灵活且响应式的用户界面是至关重要的。随着移动设备浏览量的增加,能够适应不同屏幕尺寸和分辨率的布局技术变得必不可少。Flexbox和Grid是CSS提供的两种强大的布局机制,它们各自以独特的方式解决了响应式设计的挑战。本文将深入探讨Flexbox和Grid的核心概念、使用场景和性能考量,为开发者提供在面对不同布局需求时做出明智选择的依据。
|
1月前
|
前端开发 开发者 UED
构建响应式Web界面:Flexbox的力量
【4月更文挑战第3天】 在当今多设备浏览的时代,创建能够适应不同屏幕大小的Web界面变得至关重要。本文探讨了CSS Flexbox布局模块,这是一种设计工具,允许开发者轻松地构建灵活且响应式的布局结构。通过详细解析Flexbox的核心概念、使用场景以及实战示例,读者将学会如何利用这一强大的技术来提升前端项目的响应式能力。
|
2月前
|
编解码 前端开发 开发者
构建响应式Web界面:Flexbox的力量
【2月更文挑战第28天】 在现代网页设计中,创建能在不同设备上保持一致性和功能性的响应式界面是至关重要的。Flexbox,一个CSS布局模块,为前端开发者提供了强大工具来轻松实现灵活的布局设计。本文将深入探讨Flexbox的核心概念、使用场景以及如何通过它来优化响应式设计流程。