思享工具箱

小程序开发笔记【三】，评论、评论回复及消息通知实现

摘要：
This.curCommentItem。uid:0，//默认值为0，当它为空时，它将传递给0_用户昵称：this。curCommentItem？this.curCommentItem。avatar_Url:“”，}）。然后}。这里需要注意的是，如果是注释，我们会将目标用户ID设置为空，然后传递要回复的目标ID。

先看实现的效果图

小程序开发笔记【三】，评论、评论回复及消息通知实现第1张小程序开发笔记【三】，评论、评论回复及消息通知实现第2张小程序开发笔记【三】，评论、评论回复及消息通知实现第3张

评论及评论回复实现

  1. 分析
    评论和评论回复可以设计成1张表也可以设计成2张表，根据使用场景的不同选择，这里我将评论和回复表设计成一张表，表结构如下
CREATE TABLE `tb_post_newcomment` (
  `post_comment_id` int(11) NOT NULL AUTO_INCREMENT COMMENT '说说评论表id',
  `group_post_id` int(11) DEFAULT NULL COMMENT '说说id',
  `uid` int(11) DEFAULT NULL COMMENT '用户id',
  `nickname` varchar(50) DEFAULT NULL COMMENT '用户昵称',
  `avatar_url` varchar(255) DEFAULT NULL COMMENT '用户头像地址',
  `content` varchar(255) DEFAULT NULL COMMENT '评论内容',
  `createtime` datetime DEFAULT NULL COMMENT '创建时间',
  `status` varchar(2) DEFAULT NULL COMMENT '状态  -1已删除 0正常',
  `to_uid` int(11) DEFAULT NULL COMMENT '目标用户id   ',
  `to_user_nickname` varchar(50) DEFAULT NULL COMMENT '目标用户昵称 沉余字段',
  `to_user_avatar` varchar(255) DEFAULT NULL COMMENT '目标用户头像  沉余字段',
  PRIMARY KEY (`post_comment_id`)
) ENGINE=InnoDB AUTO_INCREMENT=67 DEFAULT CHARSET=utf8mb4 COMMENT='动态评论';

其中最主要的是字段需要包含用户id和目标用户id，当然还有评论内容content字段，用户id和目标用户id这里可以理解成是谁评论了谁或谁回复了谁

  1. 设计完表结构之后，再来看代码实现

在小程序页面里

doNewComment(){
      let content = this.commentContent;
      if(!content){
        return;
      }
      api.postNewComment({
        uid:this.userid,
        postid:this.curPostItem.group_post_id,
        post_user_id:this.curPostItem.uid,//当前这条动态所属人 用于消息通知
        content:this.commentContent,
        nickname:this.xuserInfo.nickname,
        avatar_url:this.xuserInfo.head_url,
        to_uid:this.curCommentItem?this.curCommentItem.uid:0,//默认值0 ，为空时传0 
        to_user_nickname:this.curCommentItem?this.curCommentItem.nickname:'',
        to_user_avatar:this.curCommentItem?this.curCommentItem.avatar_url:'',
      }).then(res=>{
        if(res.code==0){
          this.curPostItem.comments.push(res.data);
          this.commentContent = '';
          this.isShowComment = false;
        }
      })
    },

这里需要注意的是，如果是评论的话，我们将目标用户id设置为空，回复的话则将要回复的目标id传过去。

在小程序后端，通过接受前端传过来的数据，将其保存到数据库表中，保存成功后更新评论表的count字段，最后返回当前评论对象到前端进行页面显示

if (result.affectedRows === 1) {
      // 更新说说表评论数量
      let postResult = await this.app.mysql.select('tb_group_posts', {
        where: { group_post_id: group_post_id }
      })
      let comment_count = postResult[0].comment_count;
      comment_count += 1;
      await this.app.mysql.update('tb_group_posts', { comment_count: comment_count }, {
        where: {
          group_post_id: group_post_id
        }
      });
      // 返回当前评论记录
      let commentResult = await this.app.mysql.select('tb_post_newcomment', {
        where: { post_comment_id: result.insertId }
      })
      return commentResult[0];
    }

前端评论及回复页面展示

<ul   v-if="item.comments.length>0">
              <li   v-for="(comment,commentIndex) in item.comments" :key="commentIndex" @click="replyShow(comment);getCurPostItem(item)">
                <div v-if="comment.to_uid!=0"><span class="nickname">{{comment.nickname}}</span>回复<span class="nickname">{{comment.to_user_nickname}}</span>:{{comment.content}}</div>
                <div v-else><span class="nickname">{{comment.nickname}}</span>:{{comment.content}}</div>
              </li>
            </ul>

消息通知实现

我们创建一个消息通知表，当我们点赞和评论的时候，创建一条消息通知记录，表结构设计如下

CREATE TABLE `tb_notify` (
  `notify_id` int(11) NOT NULL AUTO_INCREMENT COMMENT '通知id',
  `content` varchar(1000) DEFAULT NULL COMMENT '消息内容   公告和私信类型的消息使用',
  `type` varchar(2) DEFAULT NULL COMMENT '通知类型   1、公告 2、提醒 3、私信',
  `target_id` int(11) DEFAULT NULL COMMENT '目标id（如post的id）',
  `action` varchar(2) DEFAULT NULL COMMENT '1、点赞  2、评论 3、回复  4、关注',
  `sender_id` int(11) DEFAULT NULL COMMENT '发送者id',
  `sender_type` varchar(2) DEFAULT NULL COMMENT '发送者类型 1普通用户 2管理员',
  `user_id` int(11) DEFAULT NULL COMMENT '消息所属者，如post动态发布者',
  `is_read` varchar(2) DEFAULT NULL COMMENT '消息是否已读   0未读  1已读',
  `created_at` datetime DEFAULT NULL COMMENT '创建时间',
  `nickname` varchar(50) DEFAULT NULL COMMENT '发送者昵称',
  `avatar_url` varchar(255) DEFAULT NULL COMMENT '发送者头像',
  `comment_id` int(11) DEFAULT NULL COMMENT '评论id  评论的时候存储',
  PRIMARY KEY (`notify_id`)
) ENGINE=InnoDB AUTO_INCREMENT=120 DEFAULT CHARSET=utf8mb4 COMMENT='通知消息';
  1. 一般消息通知分为公告、提醒和私信三个类别的通知消息 ，type字段用于存储消息通知类型
  2. action用来保存动作，例如，点赞、评论、回复或关注
  3. user_id用来存储该条消息的接收者 ，如评论回复的目标用户id，如没有目标用户id，则消息所属人为该条动态的发布者
  4. is_read表示的是消息读取状态 ，已读和未读
  5. sender_id就是消息发送者id了 ，谁触发的这个动作 ，评论人、点赞的人

后端逻辑代码如下

try {
      let result = await this.GroupService.postNewComment(params);
      if (result) {
        // 消息通知目标人  根据to_uid判断 0的话说明是评论 则消息通知目标人为动态发布者，否则的话消息通知目标人为to_uid
        let notify_user_id = params.to_uid ? params.to_uid : params.post_user_id;
        let notifyObj = {
          comment_id: result.post_comment_id,//评论id
          content: params.content,//评论内容
          type: '2',//1、公告 2、提醒 3、私信
          target_id: params.postid,
          //action 1点赞 2评论 3回复 4关注
          action: params.to_uid?'3':'2',
          sender_id: params.uid,//发送者id
          nickname: params.nickname,
          avatar_url: params.avatar_url,
          is_read: '0',
          user_id: notify_user_id,//消息所属人
        }
        // 添加消息通知  如果是自己则不创建通知消息
        if (params.uid != notify_user_id) {
          await this.NotifyService.add(notifyObj);
        }
        // 返回当前评论记录
        response = this.ResultResponse.createBySuccessData(result);
      } else {
        response = this.ResultResponse.createByErrorMsg('评论失败');
      }

对于消息创建，如果是我们自己评论了自己，则此时不用去创建消息通知，只有在别人评论或者回复的时候去创建

前端页面展示及逻辑

<div   v-if="list.length>0">
              <span v-text="lastUnreadNotify.nickname"></span>
              <span v-text="lastUnreadNotify.action==1?'赞了你的动态':lastUnreadNotify.action==2?'评论了你的动态':lastUnreadNotify.action==3?'回复了你的评论':'关注了你'"></span>
            </div>

我们在小程序首页mounted方法里面创建一个定时器，每5秒或者10去请求一次未读消息接口，如果有未读消息则设置底部消息栏小红点提醒

// 轮询 每15秒请求一次
    this.setNotifyRemind();
    setInterval(() => {
      this.setNotifyRemind();
    }, 15000);

loadData(){
      api.unReadNotifyList({
        uid:this.uid
      }).then(res=>{
        if(res.code==0){
          this.list = res.data
          if(this.list.length>0){
            this.lastUnreadNotify = this.list[0];
            // 设置tab小红点
            wx.setTabBarBadge({index: 3,text: `${this.list.length}`})
          }else{
            wx.removeTabBarBadge({index: 3})
          }
        }
        wx.stopPullDownRefresh();
      })
    },

当点击消息列表的时候再将用户通知消息全部设置为已读状态就可以了

最后

以上就实现了小程序的评论、评论回复及消息通知的功能，这在小程序里面都是很常见的功能，特别是在社交小程序当中，当然，从表结构的设计到页面的展示还有很多不完善考虑不周的情况，也只有在以后的使用过程中发现问题再去优化了 。

参考阅读

https://www.cnblogs.com/Renyi-Fan/p/9057170.html
https://www.codercto.com/a/24135.html

标签：#post请求#小程序 | 浏览：322 | 发布日期：

免责声明：文章转载自《小程序开发笔记【三】，评论、评论回复及消息通知实现》仅用于学习参考。如对内容有疑问，请及时联系本站处理。

上篇flask上传图片或者文件Maven里头的pom.xml配置详解下篇

宿迁高防，2C2G15M，22元/月；香港BGP，2C5G5M，25元/月 雨云优惠码：MjYwNzM=

相关文章

PHP支付宝接口RSA验证

这两天一直困扰的PHP RSA签名验证问题终于解决了，由于之前RSA接触的不多，再加上官方至今还未有PHP的SDK可供参考，因此走了一些弯路，写在这里和大家分享。     虽然支付宝官方还未提供相关SDK，PHP确实可以实现RSA方式的签名，这点其实很重要，由于不熟悉，在遇到困难的时候，经常会不由自主地想到是否PHP不支持RSA签名，干脆用MD5得了，这样...

给微信小程序添加简单小动画

需要实现的效果很简单，当微信小程序跳转到该页面时，微信登录BUTTON从右往左淡入出现，手机登录BUTTON从左往右淡入出现，类似于animation.css的简单效果 官方文档上是这样说的： ①创建一个动画实例 animation。 ②调用实例的方法来描述动画。 ③最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性...

Tomcat下post请求大小设置

问题：最近在做App上传附件的过程中，需要将图片转成base64字符串，发现上传的附件超过2M后台报错，无法上传。 分析：POST请求本身并未限制传入参数大小，是tomcat 容器设置了接收参数大小的限制。 解决：刚开始将maxPostSize设为0后，发现不起作用，又将maxPostSize设为-1发现不报错了，Tomcat的版本7.0.73。  ...

uni-app 开发小程序 预览包过大

使用vue-cli 搭建的项目，在npm run dev:mp-weixin  进行开发时，微信开发工具，预览小程序时，提示开发包过大，无法预览。 此时是因为在开发环境中没有对代码进行压缩！ 此时修改vue.config.js 文件的配置项、 修改之后，再次运行 npm run dev:mp-weixin ，此时项目代码包就变小了。...

技术如何和营销结合

技术如何和营销结合 他做了20年的技术，曾经在大公司做过7年的CTO，现在开发AI机器人的程序，曾经业余花了3个月，开发了一个AI电话机器人系统，但是却很难赚到钱。他热爱技术，喜欢哲学，一直都在追求技术水平的精益求精，慢慢脱离了市场。于是，他在商业上就失去了方向感，不知道何为上策？ 同时，他想找一个符合自己4个条件的事情：1、睡着时间的增长而不断增值的事情...

数据产品-移动端数据分析平台

1. 应用方向   移动数据类应用，我们大多接入的很多APp都是用 Android系统或者iOS系统实现的，平时使用的手机不是 Android系统的手机就是苹果手机。如果打算做得轻量级，自己内部使用可以常使搭建小程序，而且在微信的生态内使用用户也觉得习惯和方便。但是，App开发还是有自身优势的，微信小程序暂时还有一些深度功能是不和APP比较的。而且重要的是...

最新文章

随机推荐

思享工具箱导航