刚刚看了知乎的头部消息提醒功能的实现，重点看了接口，发现消息内容全部是由后端传到前端的。

我现在项目的提醒实现很不好，主要是设计的时候没有考虑好，没加时间戳，导致无法按消息来的顺序渲染到消息列表，还有一点， xxx回复了你和xxx评论了你和xxx私信了你这些文字都是需要后台返回到前台的，到时候前台直接渲染就可以乱序按时间顺序来渲染消息列表了。

有三个需要传时间，用户表里的评论、回复和私信，我把他们的数据库字段全部加上了时间戳，这样就可以按时间将他们进行排序了，传给前端一整个数组（按时间排列的所有数据），前端直接渲染整个数组就可以实现消息的按序提醒。代码如下

前端：
<div v-for="(tip,key) in tips" :key="key"><router-link :to="tip.verb=='私信了你'?{path:'/messageDetail',query:{name:tip.from}}:{path:'/detail',query:{id:tip.articleId}}"><el-dropdown-item>{{tip.from}} {{tip.verb}}</el-dropdown-item> </router-link></div>

后端：
//获取评论人、回复者、私信者，按时间顺序写到头的消息提醒处
router.get("/getTips", (req,res,next) => {
  var userId = req.session.user.userId
  User.findOne({'userId':userId},(err,doc)=>{
    if(err){
      res.json({
        status:'1',
        msg:'err'
      })
    }else{
      var publishReply=[];//[{date:xxx,from:xxx,articleId:xxx,verb:'评论了你的文章'}]
      var messageReply=[];//[{date:xxx,from:xxx,verb:'私信了你'}]
      var articleReply=[];//[{date:xxx,from:xxx,articleId:xxx,verb:'回复了你'}]
      for(var i = 0;i<doc.publishArticle.length;i++){
        for(var j=0;j<doc.publishArticle[i].comment.length;j++){
          if(doc.publishArticle[i].comment.length!=0){
            publishReply[j]={date:doc.publishArticle[i].comment[j].time,from:doc.publishArticle[i].comment[j].from,articleId:doc.publishArticle[i].comment[j].articleId,verb:'评论了你的文章'}
          }
        }

      }
      for(var i=0;i<doc.message.length;i++){
        if(doc.message[i].hisMessageContent.length!=0){
          for(var j=0;j<doc.message[i].hisMessageContent.length;j++)
            messageReply[j]={date:doc.message[i].hisMessageContent[j].sendTime,from:doc.message[i].with,verb:'私信了你'}
        }
      }
      for(var i=0;i<doc.toMeReply.length;i++){
        articleReply[i]={date:doc.toMeReply[i].time,from:doc.toMeReply[i].from,articleId:doc.toMeReply[i].articleId,verb:'回复了你'}
      }
      //将这几个数组合并起来并按时间进行排序
      var concatArray = publishReply.concat(messageReply).concat(articleReply)
      var a;//临时交换变量
      for(var i = 0;i<concatArray.length;i++){
        for(var j=i+1;j<concatArray.length;j++){
          if(concatArray[i].date<concatArray[j].date){
            a=concatArray[i];
            concatArray[i]=concatArray[j];
            concatArray[j]=a;
          }
        }

      }
      res.json({
        status:'0',
        concatArray
      })
    }
  })
})

但是消息提醒还有一些需要优化的是有新消息的时候显示新消息的红点，点击完的消息显示已读（背景变白），这需要后端再加一个字段，标记字段，当用户点完这个消息时数据库字段信息更新为true。判断整体都为true之后将红点消去，否则加上红点（表示未读）

赏

谢谢你请我吃糖果

微信