第五天学习记录

日期: 2025年2月6日
学习目标:

实现ECharts多图表联动功能，提升数据可视化效果。

使用HttpSession管理用户登录状态，实现权限控制。

调试开发环境，确保考试模板的兼容性和稳定性。

学习内容

1. ECharts多图表联动
   主从图表设计:

主图表：柱状图展示用户注册时间分布。

从图表：饼图展示用户活跃度（如登录次数）。

实现点击柱状图某条数据时，动态更新饼图数据。

联动逻辑实现:

javascript
复制
chart.on('click', function(params) {
let date = params.name; // 获取点击的日期
fetch(/UserActiveServlet?date=${date})
.then(response => response.json())
.then(data => {
pieChart.setOption({ series: [{ data: data }] });
});
});
2. 用户会话管理
登录状态保持:

在LoginServlet中，使用HttpSession存储用户信息：

java
复制
HttpSession session = request.getSession();
session.setAttribute("username", username);
在主页中检查会话状态，未登录用户重定向到登录页：

java
复制
if (session.getAttribute("username") == null) {
response.sendRedirect("login.jsp");
}
注销功能:

创建LogoutServlet，销毁会话并重定向到登录页：

java
复制
session.invalidate();
response.sendRedirect("login.jsp");
3. 开发环境调试
考试模板测试:

下载并导入指定的HTML模板，确保在Tomcat中正常运行。

检查模板的兼容性（如浏览器支持、CSS样式加载）。

调试模板中的JavaScript代码，确保无报错。

环境配置:

确认JDK、Tomcat和Eclipse版本符合考试要求。

备份当前项目，创建干净的考试环境。

遇到的问题
ECharts联动数据延迟:

现象: 点击柱状图后，饼图数据加载较慢。

解决: 添加加载动画，并在数据请求完成前禁用点击事件。

会话失效问题:

现象: 用户登录后，会话在短时间内失效。

解决: 检查Tomcat的会话超时配置，调整为30分钟：

xml
复制

30

运行 HTML
模板样式错乱:

现象: 指定模板在Chrome中显示正常，但在Firefox中错乱。

解决: 检查CSS兼容性，使用浏览器前缀（如-moz-）修复问题。

学习总结
数据可视化进阶:

掌握了ECharts的多图表联动技术，提升了数据展示的交互性。

会话管理:

实现了用户登录状态的持久化，增强了系统的安全性。

环境调试:

通过模板测试和环境预配置，为考试做好了充分准备。

明日计划
复习与总结:

整理前五天的学习笔记，复习重点知识点。

模拟考试:

使用考试模板完成一次完整的项目开发，测试时间管理和代码质量。

问题排查:

针对模拟考试中发现的问题，进行针对性优化。