微信小程序实现留言功能

一、保存留言

• 前端：
  //videoInfo.wxml

leaveComment数据绑定，欲实现的方法为点击 评论按钮，对输入留言的文本框进行聚焦

      <!-- 评论按钮 -->
      <cover-image class="size-me" src='../resource/images/comments.png' style='margin-top:30rpx;'
        bindtap='leaveComment'></cover-image>

input的属性意义见微信开发文档：https://developers.weixin.qq.com/miniprogram/dev/component/input.html

其中，focus属性为获取焦点用{{commentFocus}}进行数据绑定，点击“评论”按钮后，对input组件进行聚焦，弹出留言输入框

  <view class="saySthView">
    <input name="commentContent" class="saySth" placeholder="{{placeholder}}" confirm-type="send"
      bindconfirm="saveComment" focus='{{commentFocus}}' value='{{contentValue}}'
      data-replyFatherCommentId='{{replyFatherCommentId}}' data-replyToUserId='{{replyToUserId}}' />
  </view>

• 后端
  //videoController.java

    @Transactional(propagation = Propagation.REQUIRED)
    @Override
    public void saveComment(Comments comment) {
        String id = sid.nextShort();
        comment.setId(id);
        comment.setCreateTime(new Date());
        commentMapper.insert(comment);
    }

//videoServiceImp.java
利用留言的 commentMapper直接插入这条信息

    @Transactional(propagation = Propagation.REQUIRED)
    @Override
    public void saveComment(Comments comment) {
        String id = sid.nextShort();
        comment.setId(id);
        comment.setCreateTime(new Date());
        commentMapper.insert(comment);
    }

// comments表数据结构

• 后端保存留言成功后清空评论文本区数据

success: function(res) {
          console.log(res.data)
          wx.hideLoading();

          me.setData({
            contentValue: "",
            commentsList: []
          })

二、留言列表分页

• 后端
  //videoController.java
  后台获取videoId，在getAllComments方法对查询到的信息进行分页。

  @PostMapping("/getVideoComments")
    public IMoocJSONResult getVideoComments(String videoId, Integer page, Integer pageSize) throws Exception {

        if (StringUtils.isBlank(videoId)) {
            return IMoocJSONResult.ok();
        }

        // 分页查询视频列表，时间顺序倒序排序
        if (page == null) {
            page = 1;
        }

        if (pageSize == null) {
            pageSize = 10;
        }

        PagedResult list = videoService.getAllComments(videoId, page, pageSize);

        return IMoocJSONResult.ok(list);
    }

//videoServiceImpl.java
对分页里面的信息进行赋值，包括timeAgo利用TimeAgoUtils.format(c.getCreateTime())实现时间戳显示格式为几天前等格式，list中查询到的多个commentsVO对象，分页也是采用 PageHelper.startPage(page, pageSize)方式。

PageHelper类讲解见链接：https://blog.csdn.net/Tom870223050/article/details/115897839?spm=1001.2014.3001.5501

 @Transactional(propagation = Propagation.SUPPORTS)
    @Override
    public PagedResult getAllComments(String videoId, Integer page, Integer pageSize) {

        PageHelper.startPage(page, pageSize);

        List<CommentsVO> list = commentMapperCustom.queryComments(videoId);

        for (CommentsVO c : list) {
            String timeAgo = TimeAgoUtils.format(c.getCreateTime());
            c.setTimeAgoStr(timeAgo);
        }

        PageInfo<CommentsVO> pageList = new PageInfo<>(list);

        PagedResult grid = new PagedResult();
        grid.setTotal(pageList.getPages());
        grid.setRows(list);
        grid.setPage(page);
        grid.setRecords(pageList.getTotal());

        return grid;
    }

//CommentMapperCustom.xml
根据查询到的信息按照时间最近的来显示

  <select id="queryComments" resultMap="BaseResultMap" parameterType="String">
	select c.*,u.face_image as face_image,u.nickname,tu.nickname as toNickname 
	from comments c 
	left join users u on c.from_user_id = u.id
	left join users tu on c.to_user_id = tu.id
  	where c.video_id = #{videoId} order by c.create_time desc
  </select>

• 前端
  //videoInfo.js
  getCommentsList为定义的显示分页内容的方法，根据传来的页码值，获取当前页的信息。

 getCommentsList: function(page) {
      var me = this;

      var videoId = me.data.videoInfo.id;

      wx.request({
        url: app.serverUrl + '/video/getVideoComments?videoId=' + videoId + "&page=" + page + "&pageSize=5",
        method: "POST",
        success: function(res) {
          console.log(res.data);

          var commentsList = res.data.data.rows;
          var newCommentsList = me.data.commentsList;

          me.setData({
            commentsList: newCommentsList.concat(commentsList),
            commentsPage: page,
            commentsTotalPage: res.data.data.total
          });
        }
      })
    }

下拉的时候对下页的信息进行加载，同时清空之前页的信息：在load()里回调函数里加入 commentsList: []

onReachBottom: function() {
      var me = this;
      var currentPage = me.data.commentsPage;
      var totalPage = me.data.commentsTotalPage;
      if (currentPage === totalPage) {
        return;
      }
      var page = currentPage + 1;
      me.getCommentsList(page);
    }

三、评论回复功能

1.评论回复sql设计与查询

//CommentMapperCustom.xml
toNickname表示有回复的对象的id

  <select id="queryComments" resultMap="BaseResultMap" parameterType="String">
	select c.*,u.face_image as face_image,u.nickname,tu.nickname as toNickname 
	from comments c 
	left join users u on c.from_user_id = u.id
	left join users tu on c.to_user_id = tu.id
  	where c.video_id = #{videoId} order by c.create_time desc
  </select>

2.页面显示回复
//videoInfo.js
对 toNickname进行判空，若为空，表示没有回复别人，前端显示效果为：
@某某人 于 多少时间前 留言：
若不为空，表示回复了别人，对象的名字就是 toNickname，前端显示效果为：
@ 某某人于 多少时间前 回复 某某人

      <view class='nickname-comments'>
          <label class='nickname-lbl'>@{{item.nickname}}</label>
          于
          <label class='date-lbl'>{{item.timeAgoStr}}</label>
          <!-- 留言： -->
          <block wx:if="{{item.toNickname != null}}">
            回复
            <label class='nickname-lbl'>@{{item.toNickname}}</label>
          </block>
          <block wx:else>
            留言：
          </block>
        </view>
        
      //评论内容
      <view class='comments-content'>{{item.comment}}</view>