微信小程序实现留言功能

本文主要是介绍微信小程序实现留言功能，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、保存留言

前端：
//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)@Overridepublic 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)@Overridepublic 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)@Overridepublic 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.idleft join users tu on c.to_user_id = tu.idwhere 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.idleft join users tu on c.to_user_id = tu.idwhere 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>