js css java 实现简单的评论回复功能

淩亂°似流年 2022-12-10 14:56 259阅读 0赞

实现功能：可以添加评论，可以回复评论（单次）

实现效果图如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5oYW9fY19o_size_16_color_FFFFFF_t_70][]

--------------------

> # 1、数据库表  #

create table AM_CHANCE_COMMENT_T
    (
        comment_id       VARCHAR2(32)  not null PRIMARY KEY,    --评论id （主键）
        comment_info          VARCHAR2(1000),  -- 评论内容   
        comment_user      VARCHAR2(32) ,    --评论创建人
        comment_date   VARCHAR2(32) ,    --评论创建时间
        chance_id      VARCHAR2(32), 	 -- 评论关于什么 的表关联id
        parent_id     VARCHAR2(32)     --评论父 id
    );
    comment on table  AM_CHANCE_COMMENT_T                    is  '机会评论表';
    comment on column AM_CHANCE_COMMENT_T.comment_id              is  '评论id （主键）';
    comment on column AM_CHANCE_COMMENT_T.comment_info              is  '评论内容';
    comment on column AM_CHANCE_COMMENT_T.comment_user              is  '评论创建人';
    comment on column AM_CHANCE_COMMENT_T.comment_date              is  '评论创建时间';
    comment on column AM_CHANCE_COMMENT_T.chance_id              is  '其他表 表关联id';
    comment on column AM_CHANCE_COMMENT_T.parent_id              is  '评论父 id';

--------------------

> # 2、后台逻辑代码 #

保存啥的就不展示了，这里就展示如果取出与自己相关的子回复

实体类：

public class ChanceComment implements Serializable {
        private static final long serialVersionUID = -5854141812829495003L;
        private String commentId;
        private String commentInfo;
        private String commentUser;
        private String commentDate;
        private String chanceId;
        private String parentId;
    
        private String userName;
        private boolean hasChildComment;
        // 用来存储 有子评论的 子评论信息
        private List<ChanceComment> childCommet = new ArrayList<ChanceComment>();
    
    
        public String getUserName() {
            return userName;
        }
    
        public void setUserName(String userName) {
            this.userName = userName;
        }
    
        public String getCommentId() {
            return commentId;
        }
    
        public void setCommentId(String commentId) {
            this.commentId = commentId;
        }
    
        public String getCommentInfo() {
            return commentInfo;
        }
    
        public void setCommentInfo(String commentInfo) {
            this.commentInfo = commentInfo;
        }
    
        public String getCommentUser() {
            return commentUser;
        }
    
        public void setCommentUser(String commentUser) {
            this.commentUser = commentUser;
        }
    
        public String getCommentDate() {
            return commentDate;
        }
    
        public void setCommentDate(String commentDate) {
            this.commentDate = commentDate;
        }
    
        public String getChanceId() {
            return chanceId;
        }
    
        public void setChanceId(String chanceId) {
            this.chanceId = chanceId;
        }
    
        public String getParentId() {
            return parentId;
        }
    
        public void setParentId(String parentId) {
            this.parentId = parentId;
        }
    
        public boolean isHasChildComment() {
            return hasChildComment;
        }
    
        public void setHasChildComment(boolean hasChildComment) {
            this.hasChildComment = hasChildComment;
        }
    
        public List<ChanceComment> getChildCommet() {
            return childCommet;
        }
    
        public void setChildCommet(List<ChanceComment> childCommet) {
            this.childCommet = childCommet;
        }
    }

部分逻辑代码

public Object getComment(Map params) {
            // TODO 改成自己的查询逻辑
            List<ChanceComment> commentList = portMapDao.getComment(params);
            List<ChanceComment> result = new ArrayList<ChanceComment>();
            // 处理查询结果，将有父id 的 评论 放置在父节点下
            for (ChanceComment chanceComment : commentList) {
                if (chanceComment.getParentId() == null || "".equals(chanceComment.getParentId())) {
                    // 找到所有父集节点
                    result.add(chanceComment);
                }
            }
            for (ChanceComment chanceComment : result) {
                // 再次循环，将有父id 的 节点放置到父节点下
                for (ChanceComment comment : commentList) {
                    if (chanceComment.getCommentId().equals(comment.getParentId())) {
                        chanceComment.setHasChildComment(true);
                        List<ChanceComment> childCommet = chanceComment.getChildCommet();
                        childCommet.add(comment);
                        chanceComment.setChildCommet(childCommet);
                    }
                }
            }
            return result;
        }

--------------------

> # 3、前台展示 #

css样式：

/* 评论区 使用样式 */
    .comment-div {
    	overflow: hidden;
    	max-height: 277px;
    	padding: 0 24px;
    	margin: 0
    }
    
    .comment-div .comment-ul {
    	margin-top: 10px;
    	border-bottom: 1px solid #e8e8ee;
    }
    
    .comment-div .comment-ul .comment-parent-li {
    	-webkit-box-orient: vertical;
    	-webkit-box-direction: normal;
    	-ms-flex-direction: column;
    	flex-direction: column;
    	position: relative;
    	margin-bottom: 8px;
    	word-break: break-all;
    
    }
    
    .comment-div .comment-ul .comment-son-li {
    	list-style-type: none;
    	word-break: break-all;
    }
    
    .comment-div .comment-ul .comment-son-li .son-ul {
    	margin-left: 32px;
    	padding-left: 10px;
    	border-left: 2px solid #f5f6f7;
    	border-bottom: none;
    }
    
    .comment-div .comment-ul .comment-son-li .son-ul .reply-li {
    	margin-bottom: 15px;
    	-webkit-box-orient: vertical;
    	-webkit-box-direction: normal;
    	list-style-type: none;
    }
    
    .date-span {
    	margin-left: 8px;
    	font-size: 12px;
    	color: #6b6b6b;
    }
    
    .comment-div .comment-ul .comment-parent-li .reply-span {
    	display: inline-block;
    	margin-left: 8px;
    }
    
    .reply-a {
    	box-sizing: inherit;
    	outline: 0;
    	margin: 0;
    	min-width: auto;
    	font-size: 14px;
    	height: 20px;
    	line-height: 20px;
    	color: #5893c2;
    	padding: 0 4px;
    }
    .viewChance {
    	position: relative;
    	min-height: 1px;
    	padding-right: 15px;
    	padding-left: 15px;
    	width: 70px;
    }
    /* 评论区 使用样式 end */

jsp  html

<table width="100%">
    					<tr style="padding: 2px">
    						<td  style="position: relative;	min-height: 1px;padding-right: 15px; padding-top: 10px;	padding-left: 15px;" colspan="7">
                                
    							<input type="hidden" id="parent_id">
    							<textarea cols="31" rows="4" id="comment_info"
    									  class="form-control"
    									  style="display: inline;width:100%"
    									  placeholder="请输入评论内容。。。"></textarea>
    							<div>
    							<div class=" form-groupcol-xs-6"
    								 style="margin-top: 5px;margin-bottom: 5px; padding-left: 15px; float: left">
    								<button class="btn green" onclick="saveComment()"
    										style="padding: 2px 7px;">确定
    								</button>
    
    							</div>
    							<div class=" form-groupcol-xs-6"
    								 style="margin-top: 5px;margin-bottom: 5px; padding-left: 15px;  float: right">
    								<button class="btn red" onclick="cancelReply()" style="padding: 2px 7px;">取消回复
    								</button>
    							</div>
    							</div>
    						</td>
    					</tr>
    					<tr style="width: 100%">
    						<td colspan="6" id="comment_begin_td">
    						</td>
    					</tr>
    				</table>

js：

// 点击取消按钮
    function cancelReply() {
        //取消回复
        $('#comment_info').attr('placeholder', "请输入评论内容。。。");
        $('#parent_id').val('');
    }
    
    // 保存评论
    function saveComment() {
        let comment_info = $('#comment_info').val();
        if (comment_info === '' || comment_info == null || !/[^\s]/.test(comment_info)) {
            return;
        }
        let postData = {
            comment_info : comment_info,
            parent_id :  $('#parent_id').val(),
            chance_id: $('#cargoId_baojia').val(),
        };
        // TODO 遮罩
        CaUtils.showLoading();
        // TODO 自己的后台方法  传送数据处理 makePostData 改成直接传送处理完的数据即可
        window.$axios.post(WEB_CTX_PATH + '/TODO.do?method=TODO', makePostData(postData),{
            headers: { 'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8' }
        }).
        then(res => res.data.errNo === '0' ? setCommentData(res.data.data) : Promise.reject(res.data.errMsg)).
        then($('#comment_info').val('')).
        then(cancelReply()).
        catch(err => {
            // TODO err处理
            BRUTIL.msgAlert("", err, "error");
        }).finally(() => {
            // TODO 遮罩处理
            CaUtils.hideLoading();
        });
    }
    
    // 显示评论数据
    function setCommentData(list) {
        let htmllet = '';
        for (let i in list) {
            htmllet = htmllet + "<div class=\"comment-div\">" +
                "<ul class=\"comment-ul\">" +
                "<li class=\"comment-parent-li\">"+
                "<span style=\"white-space:pre-wrap;\">"
                + list[i].commentInfo +
                "</span>" +
                "<span class=\"date-span\">"
                + list[i].userName +"  "+ list[i].commentDate +
                "</span>\n" +
                "<span class=\"reply-span\">" +
                "<a class=\"reply-a\" name = " + '\"' + list[i].userName + '\"' + " id= " + '\"_reply_' + list[i].commentId + '\"' + "  onclick=\"replyComment(this.id,this.name)\">\n" +
                "回复</a></span></li>"
            ;
            // 有子回复
            if (list[i].hasChildComment) {
                for (let x in list[i].childCommet) {
                    htmllet = htmllet +
                        "<li class=\"comment-son-li\"><ul class=\"son-ul\"><li class=\"reply-li\">"
                        + "<span style=\"white-space:pre-wrap;\">" + list[i].childCommet[x].commentInfo + "</span>"
                        + "<span class=\"date-span\">" + list[i].childCommet[x].userName + " " + list[i].childCommet[x].commentDate + "</span></li></ul></li>";
                }
            }
            htmllet = htmllet + "</ul></div>"
        }
        $('#comment_begin_td').html(htmllet);
    }
    // 获取该chance对应的评论数据
    function getComment(id) {
    
        let postData = {
            id : id
        }
        // TODO  传送数据处理 makePostData 改成直接传送处理完的数据即可
        return window.$axios.post(WEB_CTX_PATH + '/TODO.do?method=TODO',makePostData(postData),{
            headers: { 'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8' }
        }).then(res => {
            if(res.data.errNo !== '0'){
                return Promise.reject(res.data.errMsg);
            }
            setCommentData(res.data.data);
    
        }).catch(function(err) {
            // TODO
            if (!window.$axios.isCancel(err)){
                BRUTIL.msgAlert("", err, "error");
            }
        });
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5oYW9fY19o_size_16_color_FFFFFF_t_70]: /images/20221123/f471a1a8ad274ea3ac97912d5bf0930d.png