开发者学堂课程【大数据实战项目：反爬虫系统（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 里调数据。
