Wechat Mini | Note-10

发表于

微信小程序开发 Note-10

保存留言功能

1
2
3
4
5
6
7
8
// Service
@Transactional(propagation = Propagation.REQUIRED)
@Override
public void saveComment(Comments comment) {
    comment.setId(sid.nextShort());
    comment.setCreateTime(new Date());
    commentsMapper.insert(comment);
}
1
2
3
4
5
6
7
8
// Controller
@ApiOperation(value = "SAVE COMMENT", notes = "SAVE COMMENT API")
@PostMapping("/saveComment")
public IMoocJSONResult saveComment(@RequestBody Comments comment) {
    // 保存留言
    videoService.saveComment(comment);
    return IMoocJSONResult.ok();
}
1
2
3
4
5
6
7
// JS
// 留言按钮触发的事件
leaveComment: function() {
    this.setData({
        commentFocus: true
    });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
// JS
// 发表留言
saveComment: function(e) {
    var me = this;
    var content = e.detail.value;
    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',
            method: 'POST',
            header: {
                'content-type': 'application/json',
                'userId': user.id,
                'userToken': user.userToken
            },
            data: {
                fromUserId: user.id,
                videoId: me.data.videoInfo.id,
                comment:content
            },
            success: function(res) {
                wx.hideLoading();
                console.log(res.data);
                me.setData({
                    // 清空留言文字
                    contentValue:"",
                    commentsList:[]
                });
                me.getCommentsList(1);
            }
        })
    }
}

留言列表（分页） & 联调

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// Service
@Override
public PagedResult getAllComments(String videoId, Integer page, Integer pageSize) {
    PageHelper.startPage(page, pageSize);
    List<CommentsVO> list = commentsMapperCustom.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;
}
1
2
3
4
5
6
7
8
9
<select id="queryComments" resultMap="BaseResultMap" parameterType="String">
    SELECT
    c.*,
    u.face_image AS face_image,
    u.nickname
    FROM comments c LEFT JOIN users u ON c.from_user_id = u.id
    WHERE c.video_id = #{videoId}
    ORDER BY c.create_time DESC
</select>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Controller
@ApiOperation(value = "GET COMMENT LIST", notes = "GET COMMENT LIST API")
@PostMapping("/getVideoComments")
public IMoocJSONResult getVideoComments(String videoId,Integer page,Integer pageSize) {
    // 获取视频留言列表
    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);
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// JS
// 获取留言列表
getCommentsList: function(page) {
    var me = this;
    var videoId = me.data.videoInfo.id;
    wx.showLoading({
        title: '留言列表加载中',
    });
    wx.request({
        url: app.serverUrl + '/video/getVideoComments?videoId=' + videoId + '&page=' + page + '&pageSize=5',
        method: 'POST',
        success: function(res) {
            wx.hideLoading();
            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
            });
        }
    });
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// JS
// 留言列表触底，刷新
onReachBottom: function() {
    var me = this;
    var currentPage = me.data.commentsPage;
    var totalPage = me.data.commentsTotalPage;
    if (currentPage === totalPage) {
        wx.showToast({
            title: '没有更多留言',
            icon: 'loading',
            duration:2000
        });
        return;
    }
    var page = currentPage + 1;
    me.getCommentsList(page);
}

评论回复（SQL设计与查询）

对于回复评论的评论，需要在数据库comments表中添加多一个新的字段father_comment_id，以表示评论之间的关系，评论的关系则使用新的字段to_user_id；

并且修改XML中的SQL查询；

1
2
3
4
5
6
7
8
9
10
11
12
<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>

评论回复功能

修改部分JS；

1
2
3
4
5
6
7
8
9
10
11
12
// 发表留言
saveComment: function(e) {
    ...
    // 获取评论回复的fatherid和touseri
    var fatherCommentId = e.currentTarget.dataset.replyfathercommentid;
    var toUserId = e.currentTarget.dataset.replytouserid;
    ...
    wx.request({
        url: app.serverUrl + '/video/saveComment?fatherCommentId=' + fatherCommentId + '&toUserId=' + toUserId,
        ...
        )}
}

修改Controller；

1
2
3
4
5
6
7
8
9
10
11
12
@ApiOperation(value = "SAVE COMMENT", notes = "SAVE COMMENT API")
@PostMapping("/saveComment")
public IMoocJSONResult saveComment(@RequestBody Comments comment, String fatherCommentId, String toUserId) {
    // 保存留言
    if (StringUtils.isBlank(fatherCommentId) || StringUtils.isBlank(toUserId)) {
        return IMoocJSONResult.errorMsg("信息不存在(无ID)");
    }
    comment.setFatherCommentId(fatherCommentId);
    comment.setToUserId(toUserId);
    videoService.saveComment(comment);
    return IMoocJSONResult.ok();
}

回复评论的评论绑定JS；

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// 回复评论的评论事件
replyFocus: function(e) {
    var me = this;
    var fatherCommentId = e.currentTarget.dataset.fathercommentid;
    var toUserId = e.currentTarget.dataset.touserid;
    var toNickname = e.currentTarget.dataset.tonickname;

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