开发者学堂课程【大数据实战项目：反爬虫系统（Lua+Spark+Redis+Hadoop框架搭建）：数据处理-链路统计-数据库到前端展现】学习笔记与课程紧密联系，让用户快速学习知识
课程地址：https://developer.aliyun.com/learning/course/670/detail/11638
数据处理-链路统计-数据库到前端展现
内容介绍
一、 回顾
二、 如何使数据库展现到前端
三、 效果
一、 回顾
通过 web 界面的后台当中有一个程序，程序做了定时任务，定时去拉取将 redis 里面的数据写到 mysql，数据写完以后 redis 中的 activeUserNumber 活跃的用户连接数以及近几天的数和前面的数据是如何展现到前端的呢？前端的代码是什么样的？
二、 如何使数据库展现到前端
1. web 项目展现
此页是 web 项目展现过程，项目 web 先要来到代码当中，在提供的代码中找到web app,有一个pages,pages中有一个 common,common 中有一个top.jsp,
打开 top.jsp 是一个传智播客反爬虫界面，也就是首页面里的传智播客反爬虫平台，
< div class =" top ">
< div class =" top - logo "＞传智播客反爬虫＜ div >
< div class =＂ top - user ">
< div class =" top -user1">
< div class ="user1">
< img src ="$( ctx }/ themes / default / images / user - portrait . png ”/>
< div class ="user1-accounts＂ title =""><%= usercnName %>
< div class =＂user1-Triangle">
< div style ="＂ class =" none ">
< div class ="user1-Triangle1">/ div >
< a id =" mofityPassWord ” href =＂#”＞修改密码＜/ a >< a
href =＂$ fctx }/ auth /1ogout"＞退出く/ a >
2. 数据采集
在向后看前端展现是数据管理模块中的数据采集，数据采集模块得到的是下图的效果，找到数据管理模块中的数据采集，数据采集就是按钮，按钮调用的id是dataCollect，提供了一个dataCollect的jsp
く/ div >
< ul class =" dwei ">
< li class =" dwei -1i">
< a class =" active ”
id =＂ indexFlage ” href =＂$ ctx }/ pages / index . jsp "＞首页＜/ a >
＜1i>
< li class =" dwei -1i">く a id =" dataManage "＞数据管理＜/ a >
< ul class ＂ dwei - yinc ">
< li >く a id =＂ dataCollect ” href =“#”＞数术采集 k / a >く/1i>
< li ンく a id =" dataHandle ＂ href =＂#”＞数据处理＜/ a ン/1i>
く/1i>
< li class =" dwei - li ">く a id =" dataVisualize ” href =”#”＞数据可视化＜/ a >く/ li >< li class =" dwei -11">く a id =" processManage ＂ href ="#”＞流程管理＜/ a >< li class =" dwei - li "ン< a id =" sysManage "＞系统管理＜/ a >
< ul class =＂ dwei - yinc ">
< li ン< a id =＂ useranage "＞用户管理＜/ a >
< li >< a 1d=" roleManage "＞角色管理＜/ a >/ li >< li ンく a id =" persManage "＞权限管理＜/ a >/ li >
3.jsp
dataCollect的jsp，其中有部署的服务器名称，当前活跃连接数，最近三天采集数据量，就是前端展现出来的数据库，此jsp加载的是 script dataCollect 的 js,< body >
< article class =＂ dataCollect ”>
< div class =" table - responsive ">
< table class =" table ">
< thead >
< tr >
< th ＞部署服务器＜/ th >
< th ＞当前活跃连接数＜/ th >
< th ＞最近三天采集数据量＜/ th >
