个人中心修复【2.0】
一、本次代码已修复的问题
1. PHP 底层安全 & 语法兼容修复
- Session 启动兼容修复 原旧写法直接 session_start() 不判断环境,新增 if (!isset($_SESSION)) 判断,兼容 PHP5.6 低版本环境,避免重复启动 Session 报错、会话失效。
- SQL 注入风险修复(全页面输出转义) 所有前端输出变量统一用 htmlspecialchars(变量, ENT_QUOTES, 'UTF-8') 包裹:用户名、时间、帖子标题、ID,解决 XSS 跨站脚本漏洞,引号、特殊符号不会破坏页面 HTML 结构。
- ID 数字强类型过滤 用户 ID、帖子 ID 全部用 intval() 强制转为数字,拼接 SQL、URL 链接时杜绝字符串注入风险。
- 重复查询优化逻辑修复 原先页面加载时两次重复查询未读通知数量(顶部导航一次、页面变量一次),逻辑统一,复用同一套计数规则,数据库查询冗余问题修复。
- 时间兼容逻辑修复 add_time 同时兼容时间戳数字、字符串日期两种数据库存储格式,判断 is_numeric 区分转换,不会出现日期解析报错。
- SQL 查询容错修复 所有 mysql_query 执行后增加判断 if($res),无数据 / 查询失败时不会执行 mysql_fetch_assoc 导致 PHP 警告。
- 错误屏蔽规范化 顶部统一关闭报错输出 error_reporting(0); ini_set('display_errors', 0);,线上页面不暴露数据库、PHP 报错信息。
2. 前端逻辑 Bug 修复
- AJAX 轮询异常 Bug 修复
- 请求失败 xhr.onerror 不再清空红点,只静默失败,解决网络波动时未读红点无故消失问题;
- 增加 lastCount 缓存上次数值,只在拿到有效新数字才更新 DOM;
- 接口返回值做 parseInt 兜底,空响应默认按 0 处理,避免 NaN 破坏红点数字。
- 通知红点显示逻辑修复
分离两个控制类:
- show:控制红点容器显隐;
- has-unread:控制通知按钮发光闪烁动画; 无未读消息时两个类同时移除,不会出现红点隐藏但按钮持续闪烁的 BUG。
- 移动端布局错乱修复
增加 @media (max-width: 768px) 手机端适配:
- 双栏布局改为单列;
- 帖子列表垂直排版,时间换行不挤压标题;
- 缩小头部高度、内边距,适配手机窄屏。
- 空列表展示修复 无帖子时渲染专属空白提示,不会空白一片。
3. 样式视觉 Bug 修复
- 红点默认完全隐藏(visibility: hidden; opacity: 0),修复无消息时残留半透明小点问题;
- 按钮 hover 位移、阴影过渡顺滑,修复卡顿闪烁;
- 状态文字间距错乱修复,审核通过 / 待审核标签排版对齐;
- 背景渐变固定 background-attachment: fixed,滚动页面背景不抖动。
二、本次代码新增功能 & 新增内容
1. 后端 PHP 新增模块
- AJAX 异步未读通知接口 POST 参数 get_unread_notify=1 单独查询未读通知数量,纯数字输出,供前端轮询调用,不刷新整页实时更新红点。
- 帖子审核状态读取与判断
SQL 查询增加 status 字段,区分两种状态:
- status=1:已通过审核,绿色✅标识;
- 其他值:待审核,黄色⏳标识;
- 统计变量 $totalPost 自动统计用户总发帖数,展示在标题右侧标签。
- 登录权限拦截 判断 $_SESSION['uid'] 为空直接跳登录页,未登录禁止访问个人中心。
- 用户真实用户名查询 从 bbs_user 表读取登录用户用户名,默认兜底 “未知用户”,避免空用户名。
- 上海时区统一设置 date_default_timezone_set('Asia/Shanghai'),解决服务器时区错乱、时间差 8 小时问题。
- 当前完整时间变量 $now_time 展示在侧边栏用户信息卡片,精确到时分秒。
2. 前端页面新增元素
导航栏
- 通知按钮动态发光闪烁动画(有未读消息时自动激活);
- 右上角红色脉冲红点角标,显示实时未读通知数字;
- 导航栏三按钮:首页、通知、退出登录,退出按钮红色区分。
左侧侧边栏
- 用户信息卡片:圆形渐变头像、用户名、当前服务器时间;
- 三个功能快捷按钮:论坛首页、发布新帖、个人管理主页;
- 卡片毛玻璃背景 backdrop-filter: blur(8px) 科技风 UI。
主内容区
- 我的帖子列表卡片,顶部标题附带帖子总数标签;
- 每条帖子:标题链接 + 审核状态标签 + 发布时间;
- 无帖子专属空白提示文案。
3. CSS 新增样式体系
- CSS 变量统一管理配色:主蓝、警告红、成功绿、提示黄、卡片半透明底色;
- 两套关键帧动画:
- navBtnFlash:通知按钮外发光闪烁;
- badgePulse:红点缩放脉冲跳动;
- 全套暗黑科技风页面:径向渐变背景、发光阴影、半透明玻璃拟态卡片;
- 全部交互过渡动画:按钮 hover 上浮、列表 hover 右移、边框渐变变色;
- 移动端响应式全套适配样式。
4. JS 新增实时轮询功能
- 4 秒一次定时 AJAX 后台请求,不刷新页面自动同步未读通知;
- 完整 DOM 控制逻辑:动态切换红点显隐、按钮闪烁动画、更新未读数字;
- 请求容错机制,断网、接口异常不影响现有红点展示。
5. 交互体验新增
- 帖子条目鼠标悬浮轻微右移、边框高亮;
- 通知红点有消息持续跳动、按钮外围红光呼吸灯;
- 所有链接、按钮 hover 变色、边框高亮;
- 手机端自动适配单列布局,兼容触屏浏览。