「小程序JAVA实战」小程序的留言和评价功能(69)
source link: https://idig8.com/2018/10/28/xiaochengxujavashizhanxiaochengxudeliuyanhepingjiagongneng69/?amp%3Butm_medium=referral
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
目前小程序这块就只差留言功能了,从这次开始将对留言这个模块进行讲解和开发。源码: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绑定必须详细说下,这个很重要。
>>原创文章,欢迎转载。转载请注明:转载自IT人故事会,谢谢!
>>原文链接地址:上一篇:已是最新文章
Recommend
-
83
2017-11-02 16:28性、谎言和灰产:社交软件不社交,后来者如何破局?2017年有两个泡沫正在破产:一是社交软件上屌丝能约炮,二是婚恋网站上相亲很靠谱。人们早已知晓,陌陌之类的“约炮”软件上大多...
-
56
Python - @darrow - 楼主初中毕业,英语单词量一直只有平时工作用到的一些,没有死记硬背过大量单词,语法什么的更是不懂,只学过音标在有限的时间内,在其它语言工作非必需的情况下,是先学好英语,还是先学其它语言好呢,比如
-
44
文/高飞来源:赛博故事(ID:cybergushi)目录PART1:没有奇幻好看的科幻PART2:预言未来——科幻的独门秘籍PART3:衡量科幻作家的尺度PART4:刘慈欣的技术预言PART5:刘慈欣的社会学预言PART6:流浪地球创造的乐观影像PART7:生于忧患死
-
28
类别:符合条件的对象集。 动态语言不关心对象形成的过程,满足条件即认为是同一类别的对象。 静态语言认为同一类别的对象必须是靠继承得到的类创建的。 静态语言可以靠接口来部分实现上述动态语言的...
-
37
很多小伙伴都会有这样的疑问,C语言和C++执行效率上哪一个更高呢? 针对这样的问题,今天我们就一起来看一下吧! 1.开发效率
-
66
2019年流行的8种编程语言和框架 - 51CTO.COM 2019年流行的8种编程语言和框架 我们来看看2019年根据各种统计和事实寻找的8种优秀编程语言和框架的列表。 ...
-
15
-
15
程序员 - @Gzp - ![V2erForiOS]( https://i.loli.net/2020/05/01/BOFe4hP1A6TsvWK.jpg)<br>
-
1
R语言和Python用于数据分析和数据处理,并生成相应的直方图和散点图 需要实现一个展示平台,后端使用Java,分别调用R语言和调用Python,并返回数据和图给前端显示 这个平台主要实现多维度数据的特征选择,以及数据集协变量偏移(Covariate s...
-
1
V2EX › 问与答 Go 语言和 Java 接口的优缺点分别是什么呢?
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK