微信小程序实现留言功能

2024-04-15 14:32
文章标签 功能 微信 留言 程序实现

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

一、保存留言

  • 前端：
    //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>

这篇关于微信小程序实现留言功能的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/906081。

相关文章

W外链微信推广短连接怎么做？

W外链微信推广短连接怎么做？

制作微信推广链接的难点分析 一、内容创作难度 制作微信推广链接时，首先需要创作有吸引力的内容。这不仅要求内容本身有趣、有价值，还要能够激起人们的分享欲望。对于许多企业和个人来说，尤其是那些缺乏创意和写作能力的人来说，这是制作微信推广链接的一大难点。 二、精准定位难度 微信用户群体庞大，不同用户的需求和兴趣各异。因此，制作推广链接时需要精准定位目标受众，以便更有效地吸引他们点击并分享链接
阅读更多...
C++11第三弹：lambda表达式 | 新的类功能 | 模板的可变参数

C++11第三弹：lambda表达式 | 新的类功能 | 模板的可变参数

🌈个人主页： 南桥几晴秋 🌈C++专栏： 南桥谈C++ 🌈C语言专栏： C语言学习系列 🌈Linux学习专栏： 南桥谈Linux 🌈数据结构学习专栏： 数据结构杂谈 🌈数据库学习专栏： 南桥谈MySQL 🌈Qt学习专栏： 南桥谈Qt 🌈菜鸡代码练习： 练习随想记录 🌈git学习： 南桥谈Git 🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈�
阅读更多...
让树莓派智能语音助手实现定时提醒功能

让树莓派智能语音助手实现定时提醒功能

最初的时候是想直接在rasa 的chatbot上实现，因为rasa本身是带有remindschedule模块的。不过经过一番折腾后，忽然发现，chatbot上实现的定时，语音助手不一定会有响应。因为，我目前语音助手的代码设置了长时间无应答会结束对话，这样一来，chatbot定时提醒的触发就不会被语音助手获悉。那怎么让语音助手也具有定时提醒功能呢？ 我最后选择的方法是用threading.Time
阅读更多...
Spring框架5 - 容器的扩展功能 (ApplicationContext)

Spring框架5 - 容器的扩展功能 (ApplicationContext)

private static ApplicationContext applicationContext;static {applicationContext = new ClassPathXmlApplicationContext("bean.xml");} BeanFactory的功能扩展类ApplicationContext进行深度的分析。ApplicationConext与 BeanF
阅读更多...
JavaFX应用更新检测功能（在线自动更新方案）

JavaFX应用更新检测功能（在线自动更新方案）

JavaFX开发的桌面应用属于C端，一般来说需要版本检测和自动更新功能，这里记录一下一种版本检测和自动更新的方法。 1. 整体方案 JavaFX.应用版本检测、自动更新主要涉及一下步骤： 读取本地应用版本拉取远程版本并比较两个版本如果需要升级，那么拉取更新历史弹出升级控制窗口用户选择升级时，拉取升级包解压，重启应用用户选择忽略时，本地版本标志为忽略版本用户选择取消时，隐藏升级控制窗口 2.
阅读更多...
Android 10.0 mtk平板camera2横屏预览旋转90度横屏拍照图片旋转90度功能实现

Android 10.0 mtk平板camera2横屏预览旋转90度横屏拍照图片旋转90度功能实现

1.前言 在10.0的系统rom定制化开发中，在进行一些平板等默认横屏的设备开发的过程中，需要在进入camera2的 时候，默认预览图像也是需要横屏显示的，在上一篇已经实现了横屏预览功能，然后发现横屏预览后，拍照保存的图片 依然是竖屏的，所以说同样需要将图片也保存为横屏图标了，所以就需要看下mtk的camera2的相关横屏保存图片功能， 如何实现实现横屏保存图片功能 如图所示: 2.mtk
阅读更多...
Spring+MyBatis+jeasyui 功能树列表

Spring+MyBatis+jeasyui 功能树列表

java代码@EnablePaging@RequestMapping(value = "/queryFunctionList.html")@ResponseBodypublic Map<String, Object> queryFunctionList() {String parentId = "";List<FunctionDisplay> tables = query(parent
阅读更多...
PostgreSQL核心功能特性与使用领域及场景分析

PostgreSQL核心功能特性与使用领域及场景分析

PostgreSQL有什么优点？ 开源和免费 PostgreSQL是一个开源的数据库管理系统，可以免费使用和修改。这降低了企业的成本，并为开发者提供了一个活跃的社区和丰富的资源。 高度兼容 PostgreSQL支持多种操作系统（如Linux、Windows、macOS等）和编程语言（如C、C++、Java、Python、Ruby等），并提供了多种接口（如JDBC、ODBC、ADO.NET等
阅读更多...
寻迹模块TCRT5000的应用原理和功能实现（基于STM32）

寻迹模块TCRT5000的应用原理和功能实现（基于STM32）

目录 概述 1 认识TCRT5000 1.1 模块介绍 1.2 电气特性 2 系统应用 2.1 系统架构 2.2 STM32Cube创建工程 3 功能实现 3.1 代码实现 3.2 源代码文件 4 功能测试 4.1 检测黑线状态 4.2 未检测黑线状态 概述 本文主要介绍TCRT5000模块的使用原理，包括该模块的硬件实现方式，电路实现原理，还使用STM32类
阅读更多...
nginx介绍及常用功能

nginx介绍及常用功能

什么是nginx nginx跟Apache一样，是一个web服务器（网站服务器），通过HTTP协议提供各种网络服务。 Apache：重量级的，不支持高并发的服务器。在Apache上运行数以万计的并发访问，会导致服务器消耗大量内存。操作系统对其进行进程或线程间的切换也消耗了大量的CPU资源，导致HTTP请求的平均响应速度降低。这些都决定了Apache不可能成为高性能WEB服务器  nginx：
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2