「小程式JAVA實戰」小程式的留言和評價功能（69）

Java 小程式開發 · 發表 2018-10-28 22:02:15

摘要：目前小程式這塊就只差留言功能了，從這次開始將對留言這個模組進行講解和開發。原始碼：https://github.com/limingios/wxProgram.git 中No.15和springboot 後臺開發後臺需要通過程式碼生成器針對留言表生成對應的pojo，mapp...

目前小程式這塊就只差留言功能了，從這次開始將對留言這個模組進行講解和開發。原始碼：https://github.com/limingios/wxProgram.git 中No.15和springboot

後臺開發

後臺需要通過程式碼生成器針對留言表生成對應的pojo，mapper，mapper.xml，controller增加2個方法，一個新增留言，一個檢視留言列表（分頁顯示）

controoller

> fatherCommentId 和 toUserId 主要針對的是評論功能，這裡是把留言和評論設計在一張表裡了

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

service中新增2個方法

>同controller，獲取所有的留言列表功能，一個新增留言評價

@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類，方便頁面展示評論人的資訊，也方便mybatis查詢的內容直接賦值

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類新增方法，方便呼叫

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

前臺功能

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

為了方便點選某條留言，進行評論，需要設定（data-名稱）
js獲取（data-名稱）的值是通過，e.currentTarget.dataset.名稱
賦值給評論列表裡面的操作（data-名稱）就可以了。
按照順序看下面的圖

PS：其實都是基本操作，但是有個傳值頁面屬性data繫結必須詳細說下，這個很重要。

ofollow,noindex" target="_blank" href="http://zhanzhang.baidu.com/sitesubmit/index?sitename=https://idig8.com/2018/10/28/xiaochengxujavashizhanxiaochengxudeliuyanhepingjiagongneng69/">百度未收錄

>>原創文章，歡迎轉載。轉載請註明：轉載自IT人故事會，謝謝！

>>原文連結地址：上一篇:

已是最新文章

「小程式JAVA實戰」小程式的留言和評價功能（69）

後臺開發

前臺功能

您可能也會喜歡…