开发者学堂课程【大数据实战项目:反爬虫系统(Lua+Spark+Redis+Hadoop框架搭建)第四阶段:数据预处理-系统监控web界面-路径梳理】学习笔记,与课程紧密联系,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/672/detail/11678
数据预处理-系统监控 web 界面-路径梳理
内容介绍:
一、学前回顾
二、查找模块位置及数据
一、学前回顾
任务监控思路和代码已经走完并看到效果,先把爬虫跑起来,运行结束,实时流量转发情况出现新数据,系统功能运行请况出现,下边出现新数据。
二、查找模块位置及数据
实时流量转发情况,系统功能运行请况出现,个链路流量转发情况如何从后台到前台。
实时流量转发情况如何展示界面,打开 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 如下图。
进入该 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"></i><div class="name">系统监控</div></li>
<li id="propertyMonitor">
<i class="icon iconfont"></i><div class="name">性能监控</div></li></ul>
<div id="rightcontent" class="right-content">
发现已经进行到系统监控,性能监控。
然后找到该 jsp 加载的 JS :commonIndex.js 并打开。
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 :
里面内容有:
</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>
该模块被注释掉:
接下来找到 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"
}
也就是界面里的如下图所示的系统功能运行情况
第二个 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
对应界面如下图所示实时流量转发
第三个 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)){
对应界面如下图所示爬虫加载情况,暂时这块不重要。
第四个 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’
对应界面如下图所示各链路流量转发情况
数据如何出现:
看第一个 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 里调数据。