第四天学习记录

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

使用Bootstrap框架优化页面UI，套用主页面和登录模板。

实现ECharts动态数据绑定，从数据库获取数据生成图表。

完善用户注册功能，完成数据库的增删改查操作。

学习内容

1. Bootstrap框架应用
   模板套用:

下载Bootstrap 5模板，整合到项目中，替换原有登录页面和主页的UI。

使用Bootstrap的栅格系统、导航栏组件和表单样式，优化页面布局。

实现响应式设计，适配不同设备屏幕（PC/移动端）。

登录页面优化:

html
复制

用户登录

用户名

密码

登录

运行 HTML 2. ECharts动态数据绑定 从数据库获取数据:

创建UserStatsServlet，从数据库查询用户数据（如注册时间分布）。

java
复制
String sql = "SELECT COUNT(*) AS count, CONVERT(VARCHAR, create_time, 23) AS date FROM user_info GROUP BY CONVERT(VARCHAR, create_time, 23)";
// 执行查询并将结果转为JSON格式
前端动态渲染图表:

javascript
复制
fetch('/UserStatsServlet')
.then(response => response.json())
.then(data => {
let dates = data.map(item => item.date);
let counts = data.map(item => item.count);
chart.setOption({
xAxis: { data: dates },
series: [{ data: counts }]
});
});
3. 用户注册功能开发
注册页面与逻辑:

创建RegisterServlet，处理用户提交的注册信息，并插入数据库。

增加密码加密功能（使用MD5或SHA-256哈希算法）。

java
复制
String hashedPwd = DigestUtils.md5Hex(password); // Apache Commons Codec
添加表单验证，确保用户名和密码符合规则（如长度、特殊字符）。

遇到的问题
Bootstrap样式冲突:

现象: 自定义CSS与Bootstrap样式覆盖导致布局错乱。

解决: 使用!important标记关键样式，或通过调整CSS加载顺序优化。

ECharts动态数据加载延迟:

现象: 图表初始化时数据未加载完成，导致空白。

解决: 在数据请求完成后调用chart.setOption()，并添加加载动画提升用户体验。

密码加密兼容性问题:

现象: 不同哈希算法生成的密文长度不一致，导致数据库字段溢出。

解决: 将数据库password字段长度改为64（SHA-256）或32（MD5）。

学习总结
界面优化:

掌握了Bootstrap框架的快速开发能力，实现了专业级UI设计。

通过模板复用减少了重复代码量。

动态可视化:

打通了从数据库到前端图表的完整数据流，为后续复杂报表开发奠定基础。

功能完善:

注册功能的加密和验证机制提升了系统安全性。

明日计划
高级报表开发:

实现ECharts的多图表联动（如点击柱状图跳转明细）。

会话管理:

使用HttpSession实现用户登录状态保持。

环境预配置:

按照考试要求调试开发环境，测试指定模板的兼容性。

学习时间: 1小时