"Mini Program JAVA combat" mini program's message and evaluation function (70)

At present, the small program only has the message function. From this time, the message module will be explained and developed. Source code: https://github.com/limingios/wxProgram.git  No.15 and springboot

Background development

The background needs to generate corresponding pojo, mapper, mapper.xml for the message table through the code generator, and the controller adds 2 methods, one to add a message and one to view the message list (page display)

• controoller

fatherCommentId and toUserId are mainly for the comment function, here is the message and comment design in a table

    @PostMapping("/saveComment")
    public JSONResult saveComment(@RequestBody Comments comment,
                                       String fatherCommentId, String toUserId) throws Exception {

        comment.setFatherCommentId(fatherCommentId);
        comment.setToUserId(toUserId);

        videosService.saveComment(comment);
        return JSONResult.ok();
    }

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

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

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

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

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

        return JSONResult.ok(list);
    }

• Add 2 methods to the service

Same as controller, get all the message list functions, one to add message evaluation

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

    @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;
    }

• Vo category, it is convenient for the page to display the information of the reviewer, and it is also convenient for the content of the mybatis query to be directly assigned

package com.idig8.pojo.vo;

import java.util.Date;
import javax.persistence.*;

import org.springframework.format.annotation.DateTimeFormat;

public class CommentsVO {
    private String id;

    /**
     * 视频id
     */
    private String videoId;

    /**
     * 留言者，评论的用户id
     */
    private String fromUserId;

    private Date createTime;

    /**
     * 评论内容
     */
    private String comment;
    
    private String faceImage;
    private String nickname;
    private String toNickname;
    private String timeAgoStr;
    

    public String getTimeAgoStr() {
        return timeAgoStr;
    }

    public void setTimeAgoStr(String timeAgoStr) {
        this.timeAgoStr = timeAgoStr;
    }

    public String getNickname() {
        return nickname;
    }

    public void setNickname(String nickname) {
        this.nickname = nickname;
    }

    public String getFaceImage() {
        return faceImage;
    }

    public void setFaceImage(String faceImage) {
        this.faceImage = faceImage;
    }

    /**
     * @return id
     */
    public String getId() {
        return id;
    }

    /**
     * @param id
     */
    public void setId(String id) {
        this.id = id;
    }

    /**
     * 获取视频id
     *
     * @return video_id - 视频id
     */
    public String getVideoId() {
        return videoId;
    }

    /**
     * 设置视频id
     *
     * @param videoId 视频id
     */
    public void setVideoId(String videoId) {
        this.videoId = videoId;
    }

    /**
     * 获取留言者，评论的用户id
     *
     * @return from_user_id - 留言者，评论的用户id
     */
    public String getFromUserId() {
        return fromUserId;
    }

    /**
     * 设置留言者，评论的用户id
     *
     * @param fromUserId 留言者，评论的用户id
     */
    public void setFromUserId(String fromUserId) {
        this.fromUserId = fromUserId;
    }

    /**
     * @return create_time
     */
    public Date getCreateTime() {
        return createTime;
    }

    /**
     * @param createTime
     */
    public void setCreateTime(Date createTime) {
        this.createTime = createTime;
    }

    /**
     * 获取评论内容
     *
     * @return comment - 评论内容
     */
    public String getComment() {
        return comment;
    }

    /**
     * 设置评论内容
     *
     * @param comment 评论内容
     */
    public void setComment(String comment) {
        this.comment = comment;
    }

    public String getToNickname() {
        return toNickname;
    }

    public void setToNickname(String toNickname) {
        this.toNickname = toNickname;
    }
}

• CommentsMapperCustom mapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.idig8.mapper.CommentsMapperCustom" >
  <resultMap id="BaseResultMap" type="com.idig8.pojo.vo.CommentsVO" >
    <!--
      WARNING - @mbg.generated
    -->
    <id column="id" property="id" jdbcType="VARCHAR" />
    <result column="video_id" property="videoId" jdbcType="VARCHAR" />
    <result column="from_user_id" property="fromUserId" jdbcType="VARCHAR" />
    <result column="create_time" property="createTime" jdbcType="TIMESTAMP" />
    <result column="comment" property="comment" jdbcType="LONGVARCHAR" />
    <result column="face_image" property="faceImage" jdbcType="VARCHAR" />
    <result column="nickname" property="nickname" jdbcType="VARCHAR" />
    <result column="toNickname" property="toNickname" jdbcType="VARCHAR" />
  </resultMap>
  
  <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>
  
</mapper>

• Mapper class adds methods for easy calling

package com.idig8.mapper;

import java.util.List;

import com.idig8.pojo.Comments;
import com.idig8.pojo.vo.CommentsVO;
import com.idig8.utils.MyMapper;

public interface CommentsMapperCustom extends MyMapper<Comments> {
    
    public List<CommentsVO> queryComments(String videoId);
}

Front desk function

videoInfo.wxml

<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>

<block wx:for="{{commentsList}}">
  <view class='comments-all' bindtap='replyFocus' 
  data-fatherCommentId='{{item.id}}'  
  data-toUserId='{{item.fromUserId}}' 
  data-toNickname='{{item.nickname}}' 
  >
      <view class='container-comments'>
          <image class="face-comments" src='{{serverUrl}}{{item.faceImage}}' ></image>
          <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>
      <view class='comments-content'>{{item.comment}}</view>
  </view>
</block> 

</view>

• videoInfo.js

  leaveComment: function () {
    this.setData({
      commentFocus: true
    });
  },

  replyFocus: function (e) {
    var fatherCommentId = e.currentTarget.dataset.fathercommentid;
    var toUserId = e.currentTarget.dataset.touserid;
    var toNickname = e.currentTarget.dataset.tonickname;

    this.setData({
      placeholder: "回复  " + toNickname,
      replyFatherCommentId: fatherCommentId,
      replyToUserId: toUserId,
      commentFocus: true
    });
  },

  saveComment: function (e) {
    var me = this;
    var content = e.detail.value;

    // 获取评论回复的fatherCommentId和toUserId
    var fatherCommentId = e.currentTarget.dataset.replyfathercommentid;
    var toUserId = e.currentTarget.dataset.replytouserid;

    var user = app.getGlobalUserInfo();
    var videoInfo = JSON.stringify(me.data.videoInfo);
    var realUrl = '../videoinfo/videoinfo#videoInfo@' + videoInfo;

    if (user == null || user == undefined || user == '') {
      wx.navigateTo({
        url: '../userLogin/login?redirectUrl=' + realUrl,
      })
    } else {
      wx.showLoading({
        title: '请稍后...',
      })
      wx.request({
        url: app.serverUrl + '/video/saveComment?fatherCommentId=' + fatherCommentId + "&toUserId=" + toUserId,
        method: 'POST',
        header: {
          'content-type': 'application/json', // 默认值
          'headerUserId': user.id,
          'headerUserToken': user.userToken
        },
        data: {
          fromUserId: user.id,
          videoId: me.data.videoInfo.id,
          comment: content
        },
        success: function (res) {
          console.log(res.data)
          wx.hideLoading();

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

          me.getCommentsList(1);
        }
      })
    }
  },

  // commentsPage: 1,
  //   commentsTotalPage: 1,
  //   commentsList: []

  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
        });
      }
    })
  },

  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. In order to easily click on a message and make a comment, you need to set (data-name)
2. The value obtained by js (data-name) is passed, e.currentTarget.dataset.name
3. Assign to the operation (data-name) in the comment list.
4. See the following pictures in order

image.png

PS: In fact, they are all basic operations, but there is a data binding of the value page attribute that must be explained in detail. This is very important.