当前位置: 首页 > news >正文

用户行为素材可视化

8.1 构建javaweb系统查询用户行为

8.1.2 搭建并部署javaweb项目

tomcat的安装与配置

进入网址:https://tomcat.apache.org/download-90.cgi,选择图示版本
在这里插入图片描述

解压至windows本地文件夹即可
在这里插入图片描述

idea构建javaweb项目

在Idea中打开书中配套代码
在这里插入图片描述
点编辑配置
在这里插入图片描述
在这里插入图片描述
点配置,选择自己的文件夹
在这里插入图片描述
在这里插入图片描述
添加部署
在这里插入图片描述

在这里插入图片描述
添加完成将下述路径改成/newsWeb
在这里插入图片描述
将web.xml文件改成如下内容:
在这里插入图片描述

在这里插入图片描述

启动tomcat

pom.xml文件的json-lib库改成:

<dependency>
<groupId>net.sf.json-lib</groupId>
<artifactId>json-lib</artifactId>
<version>2.4</version>
<classifier>jdk15</classifier>
</dependency>

启动之后:
访问网址如下:
http://localhost:8080/newsWeb/TestServlet
如图
在这里插入图片描述

8.1.3 用户行为查询代码开发

修改配置文件

修改my.properties
在这里插入图片描述
修改web.xml文件
在这里插入图片描述

8.2 用户行为数据展示与分析

javaweb项目配置与打包

把my.properties改成:

jdbc.driver=com.mysql.cj.jdbc.Driver
jdbc.datasource.size=5
jdbc.url=jdbc:mysql://192.168.255.139:3306/test?useUnicode=true&characterEncoding=utf8&useSSL=false&serverTimezone=Asia/Shanghai&allowPublicKeyRetrieval=true
jdbc.user=hive
jdbc.password=hive

JDBCHelper.java改成:

//第一步:加载驱动
/*static{
try {
ConfigurationManager.getProperty(Constants.JDBC_DRIVER);
Class.forName("com.mysql.jdbc.Driver");
} catch (ClassNotFoundException e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}*/
static {
try {
// 直接用配置文件里的值,适配 8.x
Class.forName(ConfigurationManager.getProperty(Constants.JDBC_DRIVER));
} catch (ClassNotFoundException e) {
e.printStackTrace();
}
}

web.xml改成:

<!DOCTYPE web-app PUBLIC
"-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
"http://java.sun.com/dtd/web-app_2_3.dtd" >
<web-app>
<display-name>newsWeb</display-name><servlet><servlet-name>NewsSvlt</servlet-name><servlet-class>com.djt.servlet.NewsSvlt</servlet-class></servlet><servlet-mapping><servlet-name>NewsSvlt</servlet-name><url-pattern>/news</url-pattern></servlet-mapping><welcome-file-list><welcome-file>jsp/news.jsp</welcome-file></welcome-file-list>
</web-app>

在webapp下新建目录jsp,在此下新建文件news.jsp

新闻大屏展示
/js/echarts.min.js">
/js/jquery-3.2.1.js">
正在加载新闻数据...
var myChart, myChart_sum, myChart_period;
function initCharts() {
myChart = echarts.init(document.getElementById('main'));
myChart_sum = echarts.init(document.getElementById('sum'));
myChart_period = echarts.init(document.getElementById('period'));
}
$(document).ready(function(){
// 初始化图表
initCharts();
// 加载数据
initNewsNum();
// 每10秒刷新一次(减少频率避免过多请求)
setInterval(function() {
initNewsNum();
}, 10000);
});
function initNewsNum(){
var action = "/news";   // 调用后端 Servlet
$.ajax({
url: action,
type: 'GET',
dataType: 'json',
timeout: 10000,
success: function(data) {
console.log('接收到数据:', data);
if (data.error) {
console.error('服务器返回错误:', data.error);
return;
}
// 隐藏加载提示,显示内容
$('#loading').hide();
$('#content').show();
newsRank(data);
newsSum(data.newssum);
periodRank(data);
},
error: function(xhr, status, error) {
console.error('AJAX请求失败:', status, error);
console.error('响应内容:', xhr.responseText);
// 隐藏加载提示,显示错误信息
$('#loading').html('数据加载失败,请检查数据库连接错误信息: ' + error + '');
// 可选:显示空的图表
$('#content').show();
var emptyData = {
name: [],
newscount: [],
logtime: [],
periodcount: [],
newssum: 0
};
newsRank(emptyData);
newsSum(emptyData.newssum);
periodRank(emptyData);
}
});
}
// 新闻浏览量排行
function newsRank(json){
var option = {
backgroundColor: '#ffffff',
title: {
text: '新闻话题浏览量【实时】排行',
subtext: '数据来自搜狗',
textStyle: { fontWeight: 'normal', color: '#408829' }
},
tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
legend: { data: ['浏览量'] },
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
xAxis: { type: 'value', boundaryGap: [0, 0.01] },
yAxis: { type: 'category', data: json.name },
series: [{
name: '浏览量',
type: 'bar',
label: { normal: { show: true, position: 'insideRight' } },
itemStyle:{ normal:{color:'#f47209'} },
data: json.newscount
}]
};
myChart.setOption(option);
}
// 新闻话题曝光总量
function newsSum(data){
var option = {
backgroundColor: '#fbfbfb',
title: { text: '新闻话题曝光量【实时】统计', subtext: '数据来自搜狗' },
tooltip: { formatter: "{a} {b} : {c}%" },
toolbox: { feature: { restore: {}, saveAsImage: {} } },
series: [{
name: '业务指标',
type: 'gauge',
max: 50000,
detail: { formatter:'{value}个话题' },
data: [{value: 0, name: '话题曝光量'}]
}]
};
option.series[0].data[0].value = data;
myChart_sum.setOption(option, true);
}
// 时段新闻浏览量排行
function periodRank(json){
var option = {
backgroundColor: '#ffffff',
color: ['#00FFFF'],
tooltip : { trigger: 'axis', axisPointer : { type : 'shadow' } },
grid: { left: '3%', right: '4%', bottom: '3%', containLabel: true },
xAxis : [{ type : 'category', data : json.logtime, axisTick: { alignWithLabel: true } }],
yAxis : [{ type : 'value' }],
series : [{
name:'新闻话题曝光量',
type:'bar',
barWidth: '60%',
data: json.periodcount
}]
};
myChart_period.setOption(option, true);
}

在这里插入图片描述

把打包好的拷贝到tomcat的webapps目录下:
在这里插入图片描述
在这里插入图片描述

启动数据库

确认hadoop01的数据库启动,并在tomcat里把表清空
在这里插入图片描述

启动

来到tomcat的bin目录下,双击start.bat在这里插入图片描述

访问 http://localhost:8080/newsWeb/
此时没数据所以显示空白
在这里插入图片描述

8.2.2 项目整体联调

启动 MySQL 服务

因为 Flink 处理结果要落到 MySQL 的 newscountperiodcount 表里,所以必须先启动数据库。

确保有 test 数据库,以及表 newscountperiodcount 已创建。

启动 Zookeeper 服务

Kafka 依赖 Zookeeper 协调。

  • hadoop01/hadoop02/hadoop03 各节点执行:

    cd /home/hadoop/app/zookeeper/bin
    ./zkServer.sh start
  • 验证:

    ./zkServer.sh status

    确保有一个是 leader,其他是 follower


启动 Kafka 集群

Flink DataStream 会消费 Kafka 的日志流。

  • 在各节点执行:

    cd /home/hadoop/app/kafka/bin
    ./kafka-server-start.sh -daemon ../config/server.properties
  • 验证:

    jps | grep Kafka

启动 Flink 实时应用

书里用的例子是 KafkaFlinkMySQL,把 Kafka 数据实时处理后写入 MySQL。

  • 在 IDEA 里找到 KafkaFlinkMySQL.java
  • 右键 → Run 'KafkaFlinkMySQL.main()'
  • Flink 应用会本地运行,消费 Kafka 日志,计算新闻浏览量 → 写入 MySQL。

在这里插入图片描述


启动 Flume 聚合节点

Flume 负责把采集到的日志推送到 Kafka。

启动 Flume 采集节点

  • hadoop01 上执行:

    cd /home/hadoop/app/flume
    bin/flume-ng agent -n a1 -c conf -f conf/xxx.conf -Dflume.root.logger=INFO,console &

这一步会把日志源源不断地推送到聚合节点,再写到 Kafka。

模拟产生数据

  • hadoop01 上执行:

    cd /home/hadoop/shell/bin
    ./sogoulogs.sh

在这里插入图片描述


查看 MySQL 结果

在这里插入图片描述


最终效果

  1. Flume → Kafka → Flink → MySQL → Java Web 大屏

  2. 打开大屏地址:

    http://localhost:8080/newsWeb/

    页面会通过 NewsSvlt 查询 MySQL → 返回 JSON → ECharts 实时展示统计结果。


访问http://localhost:8080/newsWeb/

在这里插入图片描述

http://www.hskmm.com/?act=detail&tid=27454

相关文章:

  • “十五五”战略下,央国企人事系统如何破局增效?T集团数字化转型案例分享
  • 关于审批流的记录
  • CF1726E Almost Perfect
  • 如何基于Elasticsearch实现问题联想?
  • 技术人的阅读提效神器:多语言智能中文摘要生成指令
  • 数据结构(树)
  • CSP-S模拟28
  • 形式化验证提升RSA性能与部署效率
  • AI元人文的硅基实现可行性Ai研究报告
  • 利用linux系统自带的cron 定时备份数据库,不需要写代码了
  • centos服务器实时备份
  • 666
  • P14150 不动鸣神,恒常乐土
  • python本地生成验证码图片
  • CentOS 7 一键安装 vsftpd 并创建可登录 FTP 用户 test - 教程
  • 【完结】-固态硬盘ssd
  • 破解工地防盗难题:如何利用国标GB28181视频平台EasyCVR实现视频监控统一管理?
  • autogen论文解读 - Sun
  • 高效仿真:功耗与散热攻略
  • Vue的nextTick函数作用
  • #6515. 「雅礼集训 2018 Day10」贪玩蓝月
  • 公告
  • 车企数据治理平台化实战:从数据孤岛到全链路治理的架构演进
  • 磁盘的管理
  • 完整教程:Java中的缓存机制与分布式缓存实现!
  • jsconfig.json-vscode或cursor ctrl点击@路径,快速到达
  • C# 弃元模式:从语法糖到性能利器的深度解析
  • 2025钣金加工厂家最新推荐榜:精密工艺与定制服务口碑之选
  • python查询数据信息,分析前了解表格结构
  • 减少磁盘延迟的方法