发布通知公告其他账号接到通知并可以查看

前端:

<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='通知公告已读表';

后端:已发

Logo

汇聚全球AI编程工具,助力开发者即刻编程。

更多推荐