数据预处理-系统监控web界面-路径梳理|学习笔记

简介: 快速学习数据预处理-系统监控web界面-路径梳理

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

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


数据预处理-系统监控 web 界面-路径梳理


内容介绍:

一、学前回顾

二、查找模块位置及数据


一、学前回顾

任务监控思路和代码已经走完并看到效果,先把爬虫跑起来,运行结束,实时流量转发情况出现新数据,系统功能运行请况出现,下边出现新数据。image.png


二、查找模块位置及数据

实时流量转发情况,系统功能运行请况出现,个链路流量转发情况如何从后台到前台。

实时流量转发情况如何展示界面,打开 index.jsp,先找到该页面的位置,如下图所示:

<%@ page language javaimport="java util."pageEncoding="UTF-8%)

<DOCTYPE html><html>

<head>

<meta charset="utf-8" />

ctitle>传智播客反爬虫监控平台</title>

<jsp:include page="common/commonjsp/>

<script type="text/javascript”src="${ctx}/js/common/index.js"></script><script type="text/javascript">

$.ajaxsetup({

cache:false///AJAX相应的缓存});

</script></head>

<body class="by">

<jsp:include page="common/top.jsp"></jsp:include><div id="content"></div>

</body></html>

其中可以看到传智播客反爬虫监控平台,然后找到该 jsp 加载的 index.js 如下图。

image.png

进入该 js 最底下加载的 function 为:

$(function(){

index.init();

index.addlisten();

});

首先观看监听事件:

addListen :function(){

//首页

$("#indexFlage").click(function(){

index.highlighted( id: "indexflage");$("#content").html("");

var url =ctx+"/base/to/monitor/commonIndex"$("#content").load(url);});

//用户管理

$("#userManage").click(function(){

index.loadUserManage();});

//角色红理

$("#roleManage").click(function(){

index.loadRoleManage();});

//权限管理

$("#persManage").click(function(){

index.loadPersManage();});

//数据采集

$("#dataCollect").click(function(){

index.loadDataCollect();});

//数据处理

$("#dataHandle").click(function(){

index.loadDataHandle();

I

});

//数据可视化

$("#dataVisualize").click(function(){

index.loadDataVisual();

});

//流程管理

$("#processManage").click(function(){

index.loadProcessManage();});

首先管理的 click 事件,角色的 click 事件,角色管理的 click 事件,权限管理的 click 事件,数据采集,流程管理,修改密码等等都监控的单击事件。

接下来看初始化:

//初始化,默认加载系统监控界面 init :function(){

$("#content").html("");

var url =ctx+"/base/to/monitor/commonIndex";$("#content").load(ur]);},

里面加载了 init 的 function ,加载了一个 commonIndex的 JSP ,找到该 JSP并打开。

<div class="Unified">

<ul class="left-menu">

<li id="systemMonitor" class="active">

<i class="icon iconfont">&#xe612;</i><div class="name">系统监控</div></li>

<li id="propertyMonitor">

<i class="icon iconfont">&#xe613;</i><div class="name">性能监控</div></li></ul>

<div id="rightcontent" class="right-content">

发现已经进行到系统监控,性能监控。

然后找到该 jsp 加载的 JS :commonIndex.js 并打开。

image.png

commonIndex.js加载的 function 如下:

$(function(){

commonIndex.init();

commonIndex.addListen();

});

监听事件依然是监控的单击事件

addListen :function(){

//点击系统监控

$("#systemMonitor").click(function(){

commonIndex.loadsystemMonitor(:});

//点击规划监控

$("#ruleMonitor").click(function(){

commonIndex.loadRuleMonitor();});

//点击模型监控

$("#modelMonitor").click(function(){

commonIndex.loadModelMonitor();});

//点击属性监控

$("#propertyMonitor").click(function(){

commonIndex.loadPropenyMonitor();});

接下来看初始化,加载了名为systeMonitorIndex 的jsp ,

init : function(){

$("#rightcontent").html("");

var url =ctx+“/base/to/monitor/systemMonitorIndex";$("#rightcontent").load(url);//自动刷新的标识

refreshsystemMonitorFlag=null;

refreshPerformanceMonitorFlag=null; refreshRuleMonitorFlag =null;},

找到该 jsp :

image.png

里面内容有:

</ul>

<div class="content-Title" style="...">

<span class="content-Title-span">系统功能运行情况</span><div style="...">

<span class="lyanse">运行正常</span><span class="hyanse">运行异常</span></div>

<table id="content-monitor">

<tr id="firstModel">

<td style="background:#58aea5;”id="dataHandl">数据处理模块</td><td style="..." id="process">流程管理模块</td></tr>

<tr id="secondModel">

<td style="..." id="visualization">数据可视化模块</td><td style="..." id="strategy">策略管理模块</td></tr><tr>

<td style="..." id="machinestudy">机器学习模块</td><td style="..."id="rule">规则管理模块</td></tr>

该模块被注释掉:

image.png

接下来找到 systeMonitorIndex.js 并打开。加载如下:

$(function(){

systemMonitorIndex.init();});

systeMonitorIndex 只有一个 init 方法,找到init方法,找到该 function:内容如下:

init : function(){

systemMonitorIndex.loadsystemFunctionInfo();// systemMonitorIndex.loadFlows();

systemMonitorIndex.loadDiscernCondition(): systemMonitorIndex.loadFlowTransmit();

//refreshsystemMonitorFlaq在commonIndex.js定义 if(null== refreshsystemMonitorFlag){

setInterval(systemMonitorIndex.loadFlowstimeout60000); //定时60s刷新一次

setInterval(systemMonitorIndex.loadFlowTransmittimeout60000); //定时60s刷新一次

refreshsystemMonitorFlag="HAVE_REFRESH";

},

到这里就找到数据是如何出现的。该 js 里包含四个 function

第一个 function:系统功能运行情况

系统功能运行情况

loadsystemFunctionInfo:function(){

var content ='';$.ajax({

url :ctx+/systemMonitoring/getsystemFunctionInfo', type : 'get',

dataType :'json',

success:function(data){

if(data.sign == 1){

//异常css style="background:#f94325;document.getElementById(elementld:'dataHandl').style.background="#f94325";}else if(data.sign==0){

//正常css style="background:#58aea5;"

document.getElementById(elementld:'dataHandl').style.background="#58aea5"

}

也就是界面里的如下图所示的系统功能运行情况

image.png

第二个 function:实时流量转发情况

loadFlows:function(){

var sum = "";

var flowContainer =document.getElementById(elementld:'contentLeft1');//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽 var resizeflowContainer=function () {

flowContainer.style.height = 505 +'px';};

//设置容器高宽

resizeflowContainer();

//基于准备好的dom,初始化echarts实例

var mychart=echarts.init(flowContainer); var timeData = [];

var timeData=[3:00’,'6:00','9:00’, '12:00’, '15:00’, '18:00’, '21:00’, '24:00', '3:00' ]5 option = {

title:{

text:"实时流量转发情况", x:'center},

tooltip:{

trigger: 'axis',

axisPointer:{

animation:false

对应界面如下图所示实时流量转发

image.png

第三个 function:爬虫加载情况

//入载爬虫识别情况

loadDiscernCondition:function(){

var ydtstring='';$.ajax({

url :ctx+'/systemMonitoring/getNhCrawlerCurdayInfobyDate', type :'post',

dataType :'json',

success:function(data){

var myDate=new Date();

if(0==(myDate.getDate()-1)){

对应界面如下图所示爬虫加载情况,暂时这块不重要。

image.png

第四个 function:各链路流量转发情况

加载各链路汉量转发情况

loadFlowTransmit:function(){

var worldMapContainer=document.getElementById(elementld:'flow-transmit');//用于使chart自适应高度和宽度,通过窗体高宽计算容器高宽 var resizeworldMapContainer=function (){

worldMapContainer.style.height =520 +'px';};

//设置容器高宽

resizeworldMapContainer();

//基于准备好的dom,初始化echarts实例

var myChart=echarts.init(document.getElementById( elementld:'flow-transmit'))://指定图表的配置项和数据 var option = {

color:['#3398DB'], tooltip :{

trigger:'axis',

axisPointer :{ // 坐标轴指示器,坐标轴触发有效

type :'shadow' //默认为直线,可选为:"line''shadow’

对应界面如下图所示各链路流量转发情况

image.png

数据如何出现:

看第一个 function 。看到ajax 异步请求,url 是后台读取数据,展现到前端的过程。其余三个 function 同理。

loadsystemFunctionInfo:function(){

var content ='';$.ajax({

url :ctx +'/systemMonitoring/getsystemFunctionInfo',

从前端的 index.js 找到 commonIndex.jsp,找到 commonIndex.js,再找到 systeMonitorIndex.jsp 找到 systeMonitorIndex.js。通过这6步找到实时流量转发情况,系统功能运行请况出现,个链路流量转发情况数据模块位置,查到数据调后台的哪个 control。知道在哪个 control 里调数据。

相关文章
|
13天前
|
移动开发 开发者 HTML5
构建响应式Web界面:Flexbox与Grid的实战应用
【10月更文挑战第22天】随着互联网的普及,用户对Web界面的要求越来越高,不仅需要美观,还要具备良好的响应性和兼容性。为了满足这些需求,Web开发者需要掌握一些高级的布局技术。Flexbox和Grid是现代Web布局的两大法宝,它们分别由CSS3和HTML5引入,能够帮助开发者构建出更加灵活和易于维护的响应式Web界面。本文将深入探讨Flexbox和Grid的实战应用,并通过具体实例来展示它们在构建响应式Web界面中的强大能力。
32 3
|
27天前
|
计算机视觉 Python
Flask学习笔记(六):基于Flask的摄像头-web显示代码(可直接使用)
这篇文章是关于如何使用Flask框架结合OpenCV库,通过电脑摄像头实现视频流在网页上的实时显示,并提供了单摄像头和多摄像头的实现方法。
76 2
Flask学习笔记(六):基于Flask的摄像头-web显示代码(可直接使用)
|
10天前
|
移动开发 数据可视化 前端开发
可视化设计web界面的工具
有什么可视化设计web界面的工具
27 0
|
24天前
|
前端开发 开发者 容器
构建响应式Web界面:Flexbox与Grid布局的深度解析
【10月更文挑战第11天】本文深入解析了CSS3中的Flexbox和Grid布局,探讨了它们的特点、应用场景及使用方法。Flexbox适用于一维布局,如导航栏;Grid布局则适用于二维布局,如复杂网格。通过示例代码和核心属性介绍,帮助开发者灵活构建响应式Web界面。
47 5
|
10天前
|
消息中间件 监控 Kafka
Apache Kafka 成为处理实时数据流的关键组件。Kafka Manager 提供了一个简洁的 Web 界面
随着大数据技术的发展,Apache Kafka 成为处理实时数据流的关键组件。Kafka Manager 提供了一个简洁的 Web 界面,方便管理和监控 Kafka 集群。本文详细介绍了 Kafka Manager 的部署步骤和基本使用方法,包括配置文件的修改、启动命令、API 示例代码等,帮助你快速上手并有效管理 Kafka 集群。
34 0
|
28天前
|
文件存储 Python
Flask学习笔记(一):Flask Web框架
本文介绍了Flask Web框架的基本概念、安装方法、初始化参数、程序编写、静态文件显示和配置信息加载等基础知识。
24 0
|
2月前
|
前端开发 开发者 容器
【布局革命!】Flexbox与Grid双剑合璧:解锁Web设计新纪元,让响应式界面瞬间焕发光彩!
【9月更文挑战第1天】本文通过问答形式深入探讨了Flexbox和Grid布局的特点与应用场景。Flexbox专为单轴布局设计,适用于响应式导航栏和列表;Grid布局则适用于二维布局,可精确控制元素的位置和大小,适合构建复杂的内容区域和仪表板。文章还提供了示例代码,帮助读者更好地理解和应用这两种布局方式,以创建高效、美观的Web界面。
81 9
|
2月前
|
监控 前端开发 数据库连接
Zabbix 5.0 LTS的web界面安装及修改zabbix web管理员的默认密码
这篇文章是关于如何安装Zabbix 5.0 LTS的web界面以及如何修改Zabbix web管理员默认密码的教程。
160 1
|
2月前
|
前端开发 JavaScript 开发者
现代前端框架激烈交锋,高效响应式 Web 界面的归属扑朔迷离!
【9月更文挑战第6天】本文通过实际案例,比较了主流前端框架 Vue.js、React 和 Angular 的特点与优势。Vue.js 以简洁的语法和灵活的组件化架构著称,适合小型到中型项目;React 强调性能和可扩展性,适用于大型应用;Angular 凭借全面的功能和严格架构,适合企业级开发。开发者应根据项目需求和技术栈选择合适的框架。
53 0
|
3月前
|
前端开发 微服务 API
微服务浪潮下的JSF革新:如何在分散式架构中构建统一而强大的Web界面
【8月更文挑战第31天】随着微服务架构的兴起,企业将应用拆分成小型、独立的服务以提高系统可维护性和可扩展性。本文探讨如何在微服务架构下构建和部署JavaServer Faces (JSF) 应用,通过RESTful服务实现前后端分离,提升灵活性和适应性。
56 0