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

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

实现效果图如下：

---

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">
                            <!-- 如果是回复他人，用来存储父id -->
							<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");
        }
    });
}