在Uniapp里面实现评论回复和评论展开收起功能

最新推荐文章于 2025-03-04 10:31:22 发布
最新推荐文章于 2025-03-04 10:31:22 发布
阅读量747 收藏 11
点赞数 4
分类专栏： uniapp篇 文章标签： uniapp java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_62882300/article/details/144817764
版权

1.前言

     这是本人课程设计中其中一个功能点，就是用户在使用unapp中的首页模块中可以对发表的文章进行评论。

2.实现效果

3.实现思路

（1）首先，在前端页码编写好一个循环评论组件，把它看成一个List列表，因为需要在大List里面去渲染小List列表。

（2）其次，就是需要在服务端编写一个接口，查询数据库中所有的相关评论，让后端把它构造成里面大List带着小List的数据，我用是的springboot编写的后端逻辑代码。

4.实现代码

4.1Uniapp实现代码

<template>
	<view>
		<scroll-view scroll-y="true" >
			<uni-card :title="items.title">
				<view class="flex-space u-m-5">
					<view class="flex">
						<u-avatar :src="items.userPic"></u-avatar>
						<view class="" style="">
							<view class="">{{items.username}}</view>
							<view class="">
								<u-tag text="原创" type="error"></u-tag>
							</view>
						</view>
					</view>
					<view class="" style="align-content: center;text-align: right;">
						<view class="">{{items.state}}</view>
						<text class="ts">{{items.createTime}}</text>
					</view>
				</view>
				<image :src="items.coverImg" style="width: 100%;" mode="aspectFill"></image>
				<u-read-more  ref="uReadMore" :toggle="true">
				    <rich-text :nodes="items.content"></rich-text>
				</u-read-more>
			</uni-card>
			
			<view class="u-flex-col" style=" width: 100%; left: 0;">
				<view class="u-m-l-40 u-m-b-20 u-m-r-20" style="height: 30px;">
					<u-section title="评论列表" sub-title="评论" @click="openDialog"></u-section>
				</view>
				<u-empty :show="list.length==0"
				        mode="list"
				        icon="http://cdn.uviewui.com/uview/empty/list.png">
				</u-empty>
				<uni-list>
					<uni-list-item v-for="(item,index) in list">
						<view class="" slot="header">
							<view class="">
								<view class="flex-row" @click="toReply(item)">
									<u-avatar :src="item.userPic"></u-avatar>
								<!-- 	<image :src="item.userPic" mode="aspectFill" style="width: 100upx;height: 100upx;border-radius: 50dp;"></image> -->
									<view class="">
										<view class="" style="color: #999;font-size: 30upx;">{{item.username}}</view>
										<view class="" >{{item.content}}</view>
										<view class="" style="color: #999;font-size: 18upx;">{{item.createTime}}</view>
									</view>
								</view>
							</view>
							<uni-list-item v-for="(item1,index1) in item.commentList.slice(0,(item.status==1?item.status:item.commentList.length))">
								<view class="" slot="header" @click="toReply(item1)">
									<view class="flex-center">
										<u-avatar :src="item1.userPic"></u-avatar>
										<!-- <image :src="item1.userPic" mode="aspectFill" style="width: 100upx;height: 100upx;border-radius: 50dp;"></image> -->
										<view class="">
											<view class="" style="color: #999;font-size: 30upx;">{{item1.username}}
											<u-icon name="play-right-fill"></u-icon>
											{{item1.replyName}}</view>
											<view class="" >{{item1.content}}</view>
											<view class="" style="color: #999;font-size: 18upx;">{{item1.createTime}}</view>
										</view>
									</view>
								</view>
							</uni-list-item>
							<view class="" v-if="item.commentList.length-1>0" @click="toMore(index)">
								<text>{{item.status==0?"收起":`展开${item.commentList.length-1}条回复`}}</text>
							</view>
						</view>
					</uni-list-item>
					<u-divider class="u-m-t-40" v-if="list.length!=0" style="bottom: 35px;width: 100%;">已显示全部评论</u-divider>
				</uni-list>
			</view>
			<view class="u-m-l-20" style="position: fixed; width: 100%;height: 50px;bottom: -14px;
			background-color: #FFFFFF;">
				<view class="flex-row u-m-r-50">
					<view class="" style="width: 70%;" @click="openDialog">
						<uni-easyinput disabled prefixIcon="compose" placeholder="写评论..." />
					</view>
					<view class="u-m-l-40 flex-space" style="width: 80px;">
						<uni-icons type="hand-up" size="30" :color="thumbState?'#2979ff':'#d5d5d5'" >
							<uni-badge :text="items.thumbNum" @click="addThumb"/>
						</uni-icons>
						<uni-icons type="star" size="30" :color="collectState?'#2979ff':'#d5d5d5'" >
							<uni-badge :text="items.collectNum" @click="addCollect"></uni-badge>
						</uni-icons>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<uni-popup ref="addDialog"  type="bottom" maskClick>
			<uni-popup-dialog mode="input" :duration="2000" style="width: 100%;"
			:before-close="true" @close="addClose" @confirm="addConfirm" :title="`添加回复${replyname}`">
			</uni-popup-dialog>
		</uni-popup>
		
		<uni-popup ref="Dialog" type="dialog" maskClick>
			<uni-popup-dialog mode="input" :duration="2000"
			:before-close="true" @close="close" @confirm="confirm" title="添加评论对话框">
			</uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				items:{},
				form:{
					articleId:'',
					content:'',
					replyUser:'',
					commentId:'',
					treeId:''
				},
				list:[],
				replyname:'',
				collectState:false,
				thumbState:false,
				itemId:0
			}
		},
		onLoad(e) {
			this.itemId = e.id
			this.getDetail()
		},
		methods: {
			getDetail(){
				this.request('/article/detail?id='+this.itemId).then(res=>{
					console.log(res)
					this.items = res.data
					this.form.articleId = this.items.id
					console.log(this.items)
					this.getList()
					this.$nextTick(() => {
						this.$refs.uReadMore.init();
					})
					this.request(`/collect/myLike?articleId=${this.itemId}`).then(res=>{
						if(res.code==200)
						this.collectState = res.data
						console.log(res)
					})
					this.request(`/thumb/myLike?articleId=${this.itemId}`).then(res=>{
						if(res.code==200)
						this.thumbState = res.data
						console.log(res)
					})
				})
				
			},
			getList(){
				this.request(`/comment?articleId=${this.form.articleId}`).then(res=>{
					this.list = res.data
					console.log(res.data)
				})
			},
			openDialog(){
				this.$refs.Dialog.open()
			},
			toReply(item){
				console.log(item)
				this.replyname = item.username
				this.form.replyUser = item.usersId
				this.form.commentId = item.id
				if(item.treeId)this.form.treeId = item.treeId  //有根给根
				else this.form.treeId = item.id  //无根给自己id
				console.log(this.form)
				this.$refs.addDialog.open()
			},
			addConfirm(e){
				this.form.content = e
				this.toAddRequest(1)
			},
			addClose(){
				this.$refs.addDialog.close()
				this.clear()
			},
			confirm(e){
				this.form.content = e
				this.toAddRequest(0)
			},
			close(){
				this.$refs.Dialog.close()
				this.clear()
			},
			toAddRequest(idx){
				this.request('/comment','post',{...this.form}).then(res=>{
					uni.showToast({
						title:res.message
					})
					this.getList()
					if(idx==0)this.close()
					else this.addClose()
					this.clear()
				})
			},
			clear(){
				this.replyname = ''
				this.form.content = ''
				this.form.replyUser = ''
				this.form.commentId = ''
				this.form.treeId = ''
			},
			toMore(index){
				console.log('你点击了'+index)
				if(this.list[index].status){
					this.list[index].status = 0
				}
				else {
					this.list[index].status = 1
				}
			},
			addCollect(){
				console.log('你点击了收藏')
				if(!this.collectState)this.request(`/collect/add?categoryId=${this.items.categoryId}&articleId=${this.itemId}`).then(res=>{
					console.log(res)
					if(res.code==200){
						uni.showToast({
							title:'收藏成功'
						})
						this.getDetail()
					}
				})
				else {
					this.request(`/collect/delete?articleId=${this.itemId}`,'delete').then(res=>{
						if(res.code==200){
							uni.showToast({
								title:'取消收藏成功'
							})
							this.getDetail()
						}
						
					})
				}
				
			},
			addThumb(){
				console.log('你点击了点赞')
				if(!this.thumbState)this.request(`/thumb/add?categoryId=${this.items.categoryId}&articleId=${this.itemId}`).then(res=>{
					if(res.code==200){
						uni.showToast({
							title:'点赞成功'
						})
						this.getDetail()
					}
				})
				else {
					this.request(`/thumb/delete?articleId=${this.itemId}`,'delete').then(res=>{
						if(res.code==200){
							uni.showToast({
								title:'取消点赞成功'
							})
							this.getDetail()
						}
					})
				}
				
			}
		}
	}
</script>

<style>

</style>

4.2Java实现代码

(1)entity层

@Data
@Schema(description = "评论实体")
public class Comment {
    @NotEmpty
    @Schema(description = "评论id") //这个是swagger里面的定义，建议删除
    private Integer id;//主键ID
    @Schema(description = "评论内容")
    private String content;//文章内容
    @Schema(description = "文章id")
    private Integer articleId;//文章id
    @Schema(description = "创建用户id")
    private Integer usersId;//创建用户id
    @Schema(description = "回复人id")
    private Integer replyUser;//回复人id
    @Schema(description = "回复评论id")
    private Integer commentId;//回复评论id
    @Schema(description = "父级评论id")
    private Integer treeId;//父级评论id
    @Schema(description = "创建人头像")
    private String userPic;//创建人头像
    @Schema(description = "创建人姓名")
    private String username;//创建人姓名
    @Schema(description = "回复人姓名")
    private String replyName;//回复人姓名
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss" )
    @Schema(description = "创建时间")
    private LocalDateTime createTime;//创建时间
}
@Schema(description = "评论列表实体")
@Data
public class CommentBean {
    @NotEmpty
    @Schema(description = "评论id")
    private Integer id;//主键ID
    @Schema(description = "评论内容")
    private String content;//文章内容
    @Schema(description = "文章id")
    private Integer articleId;//文章id
    @Schema(description = "创建用户id")
    private Integer usersId;//创建用户id
    @Schema(description = "回复人id")
    private Integer replyUser;//回复人id
    @Schema(description = "回复评论id")
    private Integer commentId;//回复评论id
    @Schema(description = "父级评论id")
    private Integer treeId;//父级评论id
    @Schema(description = "创建人头像")
    private String userPic;//创建人头像
    @Schema(description = "创建人姓名")
    private String username;//创建人姓名
    @Schema(description = "回复人姓名")
    private String replyName;//回复人姓名
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss" )
    @Schema(description = "创建时间")
    private LocalDateTime createTime;//创建时间
    @Schema(description = "评论列表折叠状态")
    private Integer status; //1,表示显示1个，0表示显示全部
    private List<Comment> commentList;
}

@Schema表示swagger生成在线文档里面的定义，如果没有用到建议删掉

（2）controller层

   @Operation(summary = "获取评论列表接口",operationId = "获取评论列表接口")
    @GetMapping
    public Result<List<CommentBean>> list(@RequestParam(required = false) Integer articleId){
        List<CommentBean> commentList =  commentService.list(articleId);
        return Result.success(commentList);
    }

 @Operation(summary = "获取评论列表接口",operationId = "获取评论列表接口")表示swagger生成在线文档里面的定义，如果没有用到建议删掉

（3）service接口

public interface CommentService {
    //获取评论列表
    List<CommentBean> list(Integer id);

}

（4）service实现类

@Service
public class CommentServiceImpl implements CommentService {

    @Autowired
    private CommentMapper commentMapper;

    @Override
    public List<CommentBean> list(Integer articleId) {
        List<CommentBean> commentBeanList  = new ArrayList<>(); //创建返回的值
        List<Comment> commentList = commentMapper.list(articleId);     //找到母体的数组
        for(Comment comment:commentList){
            CommentBean commentBean = new CommentBean();
            commentBean.setCommentList(commentMapper.treeList(articleId,comment.getId()));
            commentBean.setId(comment.getId());
            commentBean.setContent(comment.getContent());
            commentBean.setArticleId(comment.getArticleId());
            commentBean.setUsersId(comment.getUsersId());
            commentBean.setTreeId(comment.getTreeId());
            commentBean.setUserPic(comment.getUserPic());
            commentBean.setUsername(comment.getUsername());
            commentBean.setCreateTime(comment.getCreateTime());
            commentBean.setStatus(1); 
            commentBeanList.add(commentBean);
        }
        return commentBeanList;
    }

}

（5）mapper层

@Mapper
public interface CommentMapper {

    //获取根评论
    @Select("select comment.id,comment.content,comment.article_id,comment.users_id,comment.create_time,comment.tree_id,users.user_pic,users.username " +
            "from users,comment where users.id = comment.users_id and article_id = #{articleId} and comment.tree_id is null")
    List<Comment> list(Integer articleId);

    //获取父id得到子评论
    @Select("select comment.id,comment.content,comment.article_id,comment.users_id,comment.reply_user,comment.comment_id,comment.create_time,comment.tree_id,users.user_pic,users.username," +
            "(select users.username from users where users.id=comment.reply_user) as replyname  from users,comment where users.id = comment.users_id and article_id = #{articleId} and comment.tree_id = #{Id} ")
    List<Comment> treeList(Integer articleId,Integer Id);


}

 做完上述步骤即可完成此功能，切记上面有些sql语句采用了多表级联查询的功能，大家根据自己的需求来修改自己的代码，最后祝大家都能解决所有bug。

(二十一)、实现评论功能（1）【uniapp+uinicloud多用户社区博客实战项目(完整开发文档-从零到完整项目)】
tigerhhzz的博客
02-22 1074
实现评论功能（1）【uniapp+uinicloud多用户社区博客实战项目(完整开发文档-从零到完整项目)】
uniapp(全端兼容) - 最新移动端评论区讨论点赞回复功能，可发表文字或图片评论|点赞|回复|展开收起|谁回复谁|删除|自动更新等，uniapp仿抖音快手评论区效果（详细示例源码，一键复制开箱即用
高级前端工程师
03-29 3732
uni-app，评论区，支付宝微信小程序，移动端h5网页平台，安卓苹果app软件，nvue，uniApp详细实现评论区教程，最新uniapp讨论区评论，快手评论区，抖音评论区，uni-app评论区示例代码，UNIAPP微信小程序仿抖音评论区功能,支持展开收起，点赞评论功能，回复评论，盖楼评论区，删除评论区某条时更新数据，评论区插件组件，类似抖音评论弹框，如何实现短视频那样的评论区，前端实现评论区的数据结构，Uniapp评论功能 点赞评论回复，回复评论 点赞和删除，无限递归评论，新手小白，最新教程，官方插件，
SpringBoot + uniapp 实现App评论回复功能
qq_47007501的博客
07-30 2792
to_r_id: 默认为null 如果不为null 则表明这是一条回复的回复 为null 则为回复。此外，为了能够让评论显示的更加友好一些，这里按照发表时间的时间戳进行了降序排列。二、 后端接口 ( 这里没做分页，实现分页也非常简单 )上述代码有一个Bug 回复的回复始终会显示在回复的下方。comment_id: 评论ID 属于对应评论的回复。art_id： 文章ID 表示属于哪篇文章的评论。u_id: 评论人ID 用来查询评论人信息的。u_id: 回复人的ID。r_id: 回复ID。
UNIAPP实现的复杂功能：用户评论系统（支持回复、点赞和分页功能）
安
02-20 1028
UNIAPP实现的复杂功能：用户评论系统（支持回复、点赞和分页功能）
【uniapp】新闻列表+跳转详情页+评论展示（uni.request请求接口）
最新发布
qq_50694225的博客
03-04 500
uniapp接口请求和页面跳转小案例
uniapp实现一个评论区
在校前端菜菜大学僧
03-04 2690
所以我们需要画出大致的布局，先上组件代码Index.vue代码，再上comment.vue。无非就是写个评论区页面，将需要的参数通过props传入，将需要抛出的事件通过emit抛出。自己回复的评论可以进行crud, 对于他人的评论仅仅只能评论。分父级（主评论）和子级（子评论）还是话不多说，先上效果图。有问题可以一起沟通哦~
uni-app实现点赞评论功能
10-15
主要介绍了uni-app实现点赞评论功能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
uniapp——展开和收起
努力、拼搏、奋进
08-10 1076
uniapp——展开和收起
在uniapp微信小程序中实现无限级评论（vue递归组件+Java构建所有评论树状结构）
NSX-Truth
06-24 6865
1. 前言 这是本人毕业设计中其中一个功能点，就是用户在微信小程序（使用uniapp框架）中的首页模块中可以对健身资讯进行评论或者社区模块对别人发布的动态进行评论。 2. 实现效果（最后放个演示视频吧） ３. 实现思路 （1）首先，在前端页面中编写好一个递归组件，然后在资讯详情模块引用。 为什么要搞个递归组件？ 因为，这么多的评论它们肯定是一个树状结构，树状结构得用递归呈现 （2）第二步，就是需要在服务端编写一个接口，查询数据库中所有资讯评论把它们构造成一个树状结构了，我这里使用java语言编写逻辑代码
uni-app评论组件
weixin_45081480的博客
04-26 2319
<template> <view class="comContainer"> <h4>评论：</h4> <view class="readly" id="commentsBox"> <view class="readly-item" v-for="(item, index) in commentsList" :key="index"> &lt...
32个uniapp项目源码 涵盖商城团购等-网盘链接提取码下载.txt
10-04
- **滑动展开**：通过滑动手势展开或收起分类菜单。 ### 十二、自定义底部导航栏 - **知识点**： - **图标与文字**：支持自定义图标和文字描述。 - **页面跳转**：点击导航项时实现页面跳转。 ### 十三、全局...
uni-app 仿评论展开折叠效果
weixin_42180036的博客
06-10 1357
<template> <view > <view class="b-taskBox" v-for="(v,index) in dataList" :key="index" @tap="gotoDetil(v)"> <view class="b-num"> 编号：{{v.job_no}} </view> <view class="b-name"> 客户：{{v.mask.
uni-app仿抖音评论列表
qq_45550087的博客
09-21 3654
效果图： 代码如下： <template> <view> <view class="comments"> <view class="comments-items" v-for="(item, index) in commentContents" :key="index"> <image :src="item.face" class="comments-face"></image> <view clas
【实操】uniapp纯前端搞个识别植物花草小程序
JavaDog程序狗
02-07 1205
通过参考其他优秀的小程序案例，结合自身需求，确定了主要功能和流程，最终实现了拍照识花的小程序。整个开发过程使用了uni-app框架，代码结构清晰，功能实现简洁明了。本文分享了前端开发的一些实用技巧和经验，希望对其他开发者有所帮助。
[uniapp] uni-ui+vue3.2小程序评论列表组件 回复评论 点赞和删除
前端一线搬运工的博客
01-09 5261
主要是插件市场没找到满意的, 诸多用着也不顺, 所以有了cc-comment, 如有Bug请留言或Email, 开源不易且用且珍惜, 感谢使用. 关于功能样式, 主打一个借鉴如下; 参考[*小红书*]App的评论回复功能: 点击评论内容展示回复弹窗, 二级评论默认显示一条, 点击展开查看更多, 无评论收起功能. 参考[*什么值得买*]App的多层级回复评论title显示效果
uniapp中文本内容超出规定行数后展开收起的处理
babyxuqian的博客
11-10 5334
效果图： 话不多说直接上代码 <template> <view class="intro"> <view class="introText"> <span v-if="introduce" ref="text" @click="clickTotal"> {{introduce}} </span> <span v-if='exchangeButton' @click="clickTotal"&g..
uniapp CSS+JS 实现多行文本“展开收起”
qq_45503103的博客
12-27 631
参考了部分这个文章写的js+css展开收起，我自己里面还用了部分原生。感觉有点拉跨。只用作记录。 <template> <view class="flex flex-dc flex-ac"> <view class=" pos-f flex flex-ac flex-jb ov-h" style="height: 88rpx;width: 100%; z-index: 99;top: 0;background-image: url(../../../static/self
【文本展开收起】uniapp—实现文本的展开与收起功能
weixin_48596030的博客
10-24 3453
【文本展开收起】uniapp—实现文本的展开与收起功能
uniapp 评论回复组件
08-22
UniApp 的评论回复组件通常是一个用于用户间交互的部分，它允许用户对内容如文章、商品等发表评论，并能查看其他用户的回复。这种组件常见于网站和应用程序中，它集成在页面上，提供输入框让用户输入评论内容，通常还会有显示评论列表的功能，包括评论者的头像、昵称、评论时间和内容。用户可以点击评论进行回复，形成一个讨论区或论坛的效果。 在 UniApp 开发中，你可以通过 Vue.js 的组件化开发方式来构建这样的评论回复系统。常用库如 Element Plus 提供了丰富的 UI 组件，可以直接引用其 `el-message` 和 `el-input` 等组件组合使用，同时结合网络请求 API 来获取和提交评论数据。记得处理好数据绑定、状态管理和用户权限验证等问题。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值