1. 项目背景与需求分析在开发企业级后台管理系统时实时消息通知是个刚需功能。就拿我们常见的后台管理系统来说管理员需要第一时间知道系统公告、待办任务或者审批提醒。传统做法是让用户手动刷新页面查看新消息这体验实在太糟糕了。我在实际项目中就遇到过这种情况用户总是抱怨为什么不能自动弹出新消息提醒。Ruoyi框架本身提供了完善的通知公告模块但默认需要用户主动点击才能查看。我们需要在前端导航栏添加一个会呼吸的铃铛图标当有新消息时自动闪烁提醒点击后跳转到公告页面。这个需求看似简单但实现时要注意几个关键点首先消息获取要用轮询方式定期检查服务端每5秒一次。虽然WebSocket更高效但很多传统项目环境不支持或者运维不愿意开放新端口。其次必须处理好组件生命周期避免切换路由时内存泄漏。最后动画效果要醒目但不刺眼我见过有项目用大红底色闪烁用户反馈差点被闪瞎眼。2. 环境准备与基础集成2.1 初始化Ruoyi-Vue项目确保你已经搭建好Ruoyi-Vue开发环境。我这里用的是4.7.5版本Node.js版本16.x。如果还没初始化项目可以执行git clone https://gitee.com/y_project/RuoYi-Vue.git cd RuoYi-Vue npm install关键依赖需要检查vue 2.6.xelement-ui 2.15.xaxios 0.21.x2.2 分析现有通知接口Ruoyi后端已经提供了通知公告的API接口我们打开src/api/system/notice.js可以看到export function listNotice(query) { return request({ url: /system/notice/list, method: get, params: query }) }这个接口返回的数据结构是这样的{ code: 200, msg: success, total: 5, rows: [...] }我们主要关注total字段表示未读消息数量。测试接口是否通畅可以用Postman发送GET请求到/system/notice/list应该能看到测试数据。3. 核心功能实现3.1 修改导航栏组件找到src/layout/components/Navbar.vue在script部分新增数据定义data() { return { noticeContent: 暂无新消息, noticeCount: 0, pollInterval: null, pollDelay: 5000 // 5秒轮询间隔 } }3.2 实现轮询机制在methods中添加核心方法methods: { // 启动轮询 startPolling() { // 先立即执行一次 this.fetchNotices() // 设置定时器 this.pollInterval setInterval(() { this.fetchNotices() }, this.pollDelay) }, // 停止轮询 stopPolling() { if (this.pollInterval) { clearInterval(this.pollInterval) this.pollInterval null } }, // 获取通知数据 async fetchNotices() { try { const res await listNotice() this.noticeCount res.total this.noticeContent res.total 0 ? 您有${res.total}条未读消息 : 暂无新消息 } catch (error) { console.error(获取通知失败:, error) } } }3.3 生命周期管理在Vue生命周期钩子中控制轮询created() { this.startPolling() }, beforeDestroy() { this.stopPolling() }这里有个坑我踩过如果只在mounted中启动轮询在keep-alive组件切换时可能不会正确销毁定时器。所以最好在created/beforeDestroy这对钩子中处理。4. UI效果优化4.1 添加铃铛图标在导航栏模板部分添加这个结构放在right-menu区域内el-tooltip :contentnoticeContent placementbottom el-badge :valuenoticeCount :hiddennoticeCount 0 classnotice-badge i classel-icon-bell clicktoNoticePage/i /el-badge /el-tooltip4.2 实现呼吸动画在style部分添加这些样式.notice-badge { margin-right: 15px; cursor: pointer; /deep/ .el-badge__content { top: 12px; right: 5px; transform: scale(0.9); transition: all 0.3s; } .has-notice { /deep/ .el-icon-bell { animation: breathe 1.5s infinite ease-in-out; } /deep/ .el-badge__content { background-color: #f56c6c; box-shadow: 0 0 0 2px #fff; } } } keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } }注意这里用了深度选择器/deep/来覆盖element-ui默认样式。动画效果是铃铛图标会周期性放大缩小类似呼吸效果比单纯闪烁更优雅。5. 性能优化与异常处理5.1 节流控制频繁轮询可能造成服务器压力我们可以优化fetchNotices方法async fetchNotices() { // 如果已有请求在进行则跳过 if (this.isPolling) return this.isPolling true try { const res await listNotice({ pageNum: 1, pageSize: 5, status: 0 // 只查询未读 }) // 只有当数据变化时才更新视图 if (res.total ! this.noticeCount) { this.noticeCount res.total this.noticeContent res.total 0 ? 您有${res.total}条未读消息 : 暂无新消息 } } finally { this.isPolling false } }5.2 网络异常处理真实项目中网络可能不稳定需要增强健壮性async fetchNotices() { // ...省略前面的节流逻辑 try { const res await listNotice().timeout(3000) // 3秒超时 // ...处理数据 } catch (err) { if (err.code ECONNABORTED) { console.warn(请求超时下次重试) } else if (err.response?.status 401) { this.stopPolling() this.$message.error(登录已过期) } else { console.error(通知获取异常:, err) // 指数退避重试 this.pollDelay Math.min(this.pollDelay * 2, 60000) } } }建议添加axios的timeout拦截器// 在src/utils/request.js中添加 axios.interceptors.request.use(config { config.timeout 3000 return config })6. 实际应用中的经验分享在电商后台项目中我们给这个铃铛组件加了这些增强功能分级提醒根据消息类型显示不同颜色普通通知蓝色徽章预警消息橙色徽章紧急告警红色徽章持续震动本地缓存用localStorage存储最后一次获取的消息数避免页面刷新时闪烁// 在fetchNotices成功回调中添加 localStorage.setItem(lastNoticeCount, res.total) // 在data初始化时读取 data() { return { noticeCount: parseInt(localStorage.getItem(lastNoticeCount)) || 0 } }声音提醒需要用户授权playNotificationSound() { const audio new Audio(/static/sound/notification.mp3) audio.volume 0.3 audio.play().catch(e console.log(播放失败:, e)) }在团队协作工具中我们还实现了这些功能点击铃铛后自动标记为已读下拉展示最近5条消息摘要移动端适配使用rem单位有个坑要注意Safari浏览器对音频自动播放有限制必须要在用户交互事件如click中首次触发音频播放之后才能用代码控制。
