bindtap='leaveComment'></cover-image>
其中，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= Short();
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= Short();
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 = AllComments(videoId, page, pageSize);
return IMoocJSONResult.ok(list);
}
//videoServiceImpl.java
对分页⾥⾯的信息进⾏赋值，包括timeAgo利⽤TimeAgoUtils.CreateTime())实现时间戳显⽰格式为⼏天前等格式，list中查询到的多个commentsVO对象，分页也是采⽤PageHelper.startPage(page, pageSize)⽅式。
@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.CreateTime());
c.setTimeAgoStr(timeAgo);
}
PageInfo<CommentsVO> pageList = new PageInfo<>(list);
PagedResult grid = new PagedResult();
grid.Pages());
grid.setRows(list);
grid.setPage(page);
grid.Total());
return grid;
}
//l
根据查询到的信息按照时间最近的来显⽰
<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 _user_id = tu.id
where c.video_id =#{videoId} order ate_time desc
</select>
前端
//videoInfo.js
getCommentsList为定义的显⽰分页内容的⽅法，根据传来的页码值，获取当前页的信息。
getCommentsList: function(page){
var me = this;
var videoId = me.data.videoInfo.id;
url: app.serverUrl + '/video/getVideoComments?videoId=' + videoId + "&page=" + page + "&pageSize=5",
method: "POST",
success: function(res){
console.log(res.data);
var commentsList = res.ws;
国家社科var newCommentsList = me.datamentsList;
me.setData({
commentsList: at(commentsList),
commentsPage: page,
commentsTotalPage: res.al
});
}
})
}
下拉的时候对下页的信息进⾏加载，同时清空之前页的信息：在load()⾥回调函数⾥加⼊commentsList: []
onReachBottom: function(){
var me = this;
var currentPage = me.datamentsPage;
var totalPage = me.datamentsTotalPage;
if(currentPage === totalPage){
return;
}
var page = currentPage + 1;
}
三、评论回复功能
1.评论回复sql设计与查询
//l
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 _user_id = tu.id
where c.video_id =#{videoId} order ate_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="{{Nickname != null}}">
回复
<label class='nickname-lbl'>@{{Nickname}}</label>
</block>
<block wx:else>
留⾔：
</block>
</view>
//评论内容
<view class='comments-content'>{{itemment}}</view>
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议