若依前后端分离 通知公告前端
·
发布通知公告其他账号接到通知并可以查看
前端:
<el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
<div class="avatar-wrapper">
<img :src="avatar" class="user-avatar">
<i class="el-icon-caret-bottom" />
</div>
<el-dropdown-menu slot="dropdown">
<router-link to="/user/profile">
<el-dropdown-item>个人中心</el-dropdown-item>
</router-link>
<el-dropdown-item @click.native="setting = true">
<span>布局设置</span>
</el-dropdown-item>
<el-dropdown-item divided @click.native="logout">
<span>退出登录</span>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
.avatar-container {
margin-right: 30px;
.avatar-wrapper {
margin-top: 5px;
position: relative;
.user-avatar {
cursor: pointer;
width: 40px;
height: 40px;
border-radius: 10px;
}
.el-icon-caret-bottom {
cursor: pointer;
position: absolute;
right: -20px;
top: 25px;
font-size: 12px;
}
}
}
data() {
return {
noticeContent: '',//通知内容
noticeCount: 0,//通知数量
intervalId: null
}
},
created() {
this.poll();
},
mounted() {
// 启动轮询
this.startPolling();
},
methods: {
startPolling() {
// 每隔一定时间执行轮询任务 查看未读通知数量
this.intervalId = setInterval(() => {
this.poll();
}, 6000 * 10 * 60); // 6秒轮询一次,根据需要调整间隔时间 我设置是1小时
},
stopPolling() {
// 清除定时器,停止轮询任务 !!!!重要,防止内存泄露
clearInterval(this.intervalId);
},
poll() {
// 在这里执行轮询的任务,可以是发送请求或执行其他操作
listNoticeRead().then(response => {
this.noticeCount = response.total;//获取信息条数
this.noticeContent = "您有" + this.noticeCount + "条未读的信息";//定制内容
});
}
}
数据库:
CREATE TABLE `sys_notice_read` (
`notice_read_id` int(4) NOT NULL AUTO_INCREMENT COMMENT '公告已读ID',
`notice_id` int(4) NOT NULL COMMENT '公告ID',
`user_id` bigint(20) NOT NULL COMMENT '用户ID',
`create_time` datetime DEFAULT NULL COMMENT '创建时间',
`update_time` datetime DEFAULT NULL COMMENT '更新时间',
PRIMARY KEY (`notice_read_id`),
UNIQUE KEY `unique_notice_user` (`notice_id`,`user_id`)
) ENGINE=InnoDB AUTO_INCREMENT=8 DEFAULT CHARSET=utf8 COLLATE=utf8_general_ci COMMENT='通知公告已读表';
后端:已发
更多推荐



所有评论(0)