Java+Vue 实现消息通知示例

Java+Vue 实现消息通知示例_第1张图片 

前端代码部分:

右上方小铃铛组件

Java+Vue 实现消息通知示例_第2张图片 

Java+Vue 实现消息通知示例_第3张图片 






把是否有消息的状态通过vuex存到公共状态里来管理

 Java+Vue 实现消息通知示例_第4张图片Java+Vue 实现消息通知示例_第5张图片

 

this.$store.dispatch('app/setIsDot', true) //设置红点
this.$store.dispatch('app/setIsDot', false) //去掉红点

 首先新建通知公告 发布通知

Java+Vue 实现消息通知示例_第6张图片

 我的消息列表

Java+Vue 实现消息通知示例_第7张图片

JAVA部分

两个表 通知公告表和我的消息表 做关联

发布消息根据指定的用户类型去插入数据 通过userID分别插入到我的消息表中

Java+Vue 实现消息通知示例_第8张图片

全部设置已读 首先去查未读的消息根据userID,在遍历集合更新状态

 Java+Vue 实现消息通知示例_第9张图片

 

你可能感兴趣的:(JAVA,vue.js,java,前端)