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

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

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

实现效果图如下：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5oYW9fY19o_size_16_color_FFFFFF_t_70

1、数据库表

  1. create table AM_CHANCE_COMMENT_T
  2. (
  3.     comment_id       VARCHAR2(32)  not null PRIMARY KEY,    --评论id （主键）
  4.     comment_info          VARCHAR2(1000),  -- 评论内容   
  5.     comment_user      VARCHAR2(32) ,    --评论创建人
  6.     comment_date   VARCHAR2(32) ,    --评论创建时间
  7.     chance_id      VARCHAR2(32),      -- 评论关于什么 的表关联id
  8.     parent_id     VARCHAR2(32)     --评论父 id
  9. );
  10. comment on table  AM_CHANCE_COMMENT_T                    is  '机会评论表';
  11. comment on column AM_CHANCE_COMMENT_T.comment_id              is  '评论id （主键）';
  12. comment on column AM_CHANCE_COMMENT_T.comment_info              is  '评论内容';
  13. comment on column AM_CHANCE_COMMENT_T.comment_user              is  '评论创建人';
  14. comment on column AM_CHANCE_COMMENT_T.comment_date              is  '评论创建时间';
  15. comment on column AM_CHANCE_COMMENT_T.chance_id              is  '其他表 表关联id';
  16. comment on column AM_CHANCE_COMMENT_T.parent_id              is  '评论父 id';

2、后台逻辑代码

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

实体类：

  1. public class ChanceComment implements Serializable {
  2.     private static final long serialVersionUID = -5854141812829495003L;
  3.     private String commentId;
  4.     private String commentInfo;
  5.     private String commentUser;
  6.     private String commentDate;
  7.     private String chanceId;
  8.     private String parentId;
  10.     private String userName;
  11.     private boolean hasChildComment;
  12.     // 用来存储 有子评论的 子评论信息
  13.     private List<ChanceComment> childCommet = new ArrayList<ChanceComment>();
  16.     public String getUserName() {
  17.         return userName;
  18.     }
  20.     public void setUserName(String userName) {
  21.         this.userName = userName;
  22.     }
  24.     public String getCommentId() {
  25.         return commentId;
  26.     }
  28.     public void setCommentId(String commentId) {
  29.         this.commentId = commentId;
  30.     }
  32.     public String getCommentInfo() {
  33.         return commentInfo;
  34.     }
  36.     public void setCommentInfo(String commentInfo) {
  37.         this.commentInfo = commentInfo;
  38.     }
  40.     public String getCommentUser() {
  41.         return commentUser;
  42.     }
  44.     public void setCommentUser(String commentUser) {
  45.         this.commentUser = commentUser;
  46.     }
  48.     public String getCommentDate() {
  49.         return commentDate;
  50.     }
  52.     public void setCommentDate(String commentDate) {
  53.         this.commentDate = commentDate;
  54.     }
  56.     public String getChanceId() {
  57.         return chanceId;
  58.     }
  60.     public void setChanceId(String chanceId) {
  61.         this.chanceId = chanceId;
  62.     }
  64.     public String getParentId() {
  65.         return parentId;
  66.     }
  68.     public void setParentId(String parentId) {
  69.         this.parentId = parentId;
  70.     }
  72.     public boolean isHasChildComment() {
  73.         return hasChildComment;
  74.     }
  76.     public void setHasChildComment(boolean hasChildComment) {
  77.         this.hasChildComment = hasChildComment;
  78.     }
  80.     public List<ChanceComment> getChildCommet() {
  81.         return childCommet;
  82.     }
  84.     public void setChildCommet(List<ChanceComment> childCommet) {
  85.         this.childCommet = childCommet;
  86.     }
  87. }

部分逻辑代码

  1. public Object getComment(Map params) {
  2.         // TODO 改成自己的查询逻辑
  3.         List<ChanceComment> commentList = portMapDao.getComment(params);
  4.         List<ChanceComment> result = new ArrayList<ChanceComment>();
  5.         // 处理查询结果，将有父id 的 评论 放置在父节点下
  6.         for (ChanceComment chanceComment : commentList) {
  7.             if (chanceComment.getParentId() == null || "".equals(chanceComment.getParentId())) {
  8.                 // 找到所有父集节点
  9.                 result.add(chanceComment);
  10.             }
  11.         }
  12.         for (ChanceComment chanceComment : result) {
  13.             // 再次循环，将有父id 的 节点放置到父节点下
  14.             for (ChanceComment comment : commentList) {
  15.                 if (chanceComment.getCommentId().equals(comment.getParentId())) {
  16.                     chanceComment.setHasChildComment(true);
  17.                     List<ChanceComment> childCommet = chanceComment.getChildCommet();
  18.                     childCommet.add(comment);
  19.                     chanceComment.setChildCommet(childCommet);
  20.                 }
  21.             }
  22.         }
  23.         return result;
  24.     }

3、前台展示

css样式：

  1. /* 评论区 使用样式 */
  2. .comment-div {
  3.     overflow: hidden;
  4.     max-height: 277px;
  5.     padding: 0 24px;
  6.     margin: 0
  7. }
  9. .comment-div .comment-ul {
  10.     margin-top: 10px;
  11.     border-bottom: 1px solid #e8e8ee;
  12. }
  14. .comment-div .comment-ul .comment-parent-li {
  15.     -webkit-box-orient: vertical;
  16.     -webkit-box-direction: normal;
  17.     -ms-flex-direction: column;
  18.     flex-direction: column;
  19.     position: relative;
  20.     margin-bottom: 8px;
  21.     word-break: break-all;
  23. }
  25. .comment-div .comment-ul .comment-son-li {
  26.     list-style-type: none;
  27.     word-break: break-all;
  28. }
  30. .comment-div .comment-ul .comment-son-li .son-ul {
  31.     margin-left: 32px;
  32.     padding-left: 10px;
  33.     border-left: 2px solid #f5f6f7;
  34.     border-bottom: none;
  35. }
  37. .comment-div .comment-ul .comment-son-li .son-ul .reply-li {
  38.     margin-bottom: 15px;
  39.     -webkit-box-orient: vertical;
  40.     -webkit-box-direction: normal;
  41.     list-style-type: none;
  42. }
  44. .date-span {
  45.     margin-left: 8px;
  46.     font-size: 12px;
  47.     color: #6b6b6b;
  48. }
  50. .comment-div .comment-ul .comment-parent-li .reply-span {
  51.     display: inline-block;
  52.     margin-left: 8px;
  53. }
  55. .reply-a {
  56.     box-sizing: inherit;
  57.     outline: 0;
  58.     margin: 0;
  59.     min-width: auto;
  60.     font-size: 14px;
  61.     height: 20px;
  62.     line-height: 20px;
  63.     color: #5893c2;
  64.     padding: 0 4px;
  65. }
  66. .viewChance {
  67.     position: relative;
  68.     min-height: 1px;
  69.     padding-right: 15px;
  70.     padding-left: 15px;
  71.     width: 70px;
  72. }
  73. /* 评论区 使用样式 end */

jsp html

  1. <!--  评论区 -->
  2.                 <table width="100%">
  3.                     <tr style="padding: 2px">
  4.                         <td  style="position: relative;    min-height: 1px;padding-right: 15px; padding-top: 10px;    padding-left: 15px;" colspan="7">
  5.                             <!-- 如果是回复他人，用来存储父id -->
  6.                             <input type="hidden" id="parent_id">
  7.                             <textarea cols="31" rows="4" id="comment_info"
  8.                                       class="form-control"
  9.                                       style="display: inline;width:100%"
  10.                                       placeholder="请输入评论内容。。。"></textarea>
  11.                             <div>
  12.                             <div class=" form-groupcol-xs-6"
  13.                                  style="margin-top: 5px;margin-bottom: 5px; padding-left: 15px; float: left">
  14.                                 <button class="btn green" onclick="saveComment()"
  15.                                         style="padding: 2px 7px;">确定
  16.                                 </button>
  18.                             </div>
  19.                             <div class=" form-groupcol-xs-6"
  20.                                  style="margin-top: 5px;margin-bottom: 5px; padding-left: 15px;  float: right">
  21.                                 <button class="btn red" onclick="cancelReply()" style="padding: 2px 7px;">取消回复
  22.                                 </button>
  23.                             </div>
  24.                             </div>
  25.                         </td>
  26.                     </tr>
  27.                     <tr style="width: 100%">
  28.                         <td colspan="6" id="comment_begin_td">
  29.                         </td>
  30.                     </tr>
  31.                 </table>

js：

  1. // 点击取消按钮
  2. function cancelReply() {
  3.     //取消回复
  4.     $('#comment_info').attr('placeholder', "请输入评论内容。。。");
  5.     $('#parent_id').val('');
  6. }
  8. // 保存评论
  9. function saveComment() {
  10.     let comment_info = $('#comment_info').val();
  11.     if (comment_info === '' || comment_info == null || !/[^\s]/.test(comment_info)) {
  12.         return;
  13.     }
  14.     let postData = {
  15.         comment_info : comment_info,
  16.         parent_id :  $('#parent_id').val(),
  17.         chance_id: $('#cargoId_baojia').val(),
  18.     };
  19.     // TODO 遮罩
  20.     CaUtils.showLoading();
  21.     // TODO 自己的后台方法  传送数据处理 makePostData 改成直接传送处理完的数据即可
  22.     window.$axios.post(WEB_CTX_PATH + '/TODO.do?method=TODO', makePostData(postData),{
  23.         headers: { 'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8' }
  24.     }).
  25.     then(res => res.data.errNo === '0' ? setCommentData(res.data.data) : Promise.reject(res.data.errMsg)).
  26.     then($('#comment_info').val('')).
  27.     then(cancelReply()).
  28.     catch(err => {
  29.         // TODO err处理
  30.         BRUTIL.msgAlert("", err, "error");
  31.     }).finally(() => {
  32.         // TODO 遮罩处理
  33.         CaUtils.hideLoading();
  34.     });
  35. }
  37. // 显示评论数据
  38. function setCommentData(list) {
  39.     let htmllet = '';
  40.     for (let i in list) {
  41.         htmllet = htmllet + "<div class=\"comment-div\">" +
  42.             "<ul class=\"comment-ul\">" +
  43.             "<li class=\"comment-parent-li\">"+
  44.             "<span style=\"white-space:pre-wrap;\">"
  45.             + list[i].commentInfo +
  46.             "</span>" +
  47.             "<span class=\"date-span\">"
  48.             + list[i].userName +"  "+ list[i].commentDate +
  49.             "</span>\n" +
  50.             "<span class=\"reply-span\">" +
  51.             "<a class=\"reply-a\" name = " + '\"' + list[i].userName + '\"' + " id= " + '\"_reply_' + list[i].commentId + '\"' + "  onclick=\"replyComment(this.id,this.name)\">\n" +
  52.             "回复</a></span></li>"
  53.         ;
  54.         // 有子回复
  55.         if (list[i].hasChildComment) {
  56.             for (let x in list[i].childCommet) {
  57.                 htmllet = htmllet +
  58.                     "<li class=\"comment-son-li\"><ul class=\"son-ul\"><li class=\"reply-li\">"
  59.                     + "<span style=\"white-space:pre-wrap;\">" + list[i].childCommet[x].commentInfo + "</span>"
  60.                     + "<span class=\"date-span\">" + list[i].childCommet[x].userName + " " + list[i].childCommet[x].commentDate + "</span></li></ul></li>";
  61.             }
  62.         }
  63.         htmllet = htmllet + "</ul></div>"
  64.     }
  65.     $('#comment_begin_td').html(htmllet);
  66. }
  67. // 获取该chance对应的评论数据
  68. function getComment(id) {
  70.     let postData = {
  71.         id : id
  72.     }
  73.     // TODO  传送数据处理 makePostData 改成直接传送处理完的数据即可
  74.     return window.$axios.post(WEB_CTX_PATH + '/TODO.do?method=TODO',makePostData(postData),{
  75.         headers: { 'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8' }
  76.     }).then(res => {
  77.         if(res.data.errNo !== '0'){
  78.             return Promise.reject(res.data.errMsg);
  79.         }
  80.         setCommentData(res.data.data);
  82.     }).catch(function(err) {
  83.         // TODO
  84.         if (!window.$axios.isCancel(err)){
  85.             BRUTIL.msgAlert("", err, "error");
  86.         }
  87.     });
  88. }

发表评论

表情：
评论列表 （有 0 条评论，304人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Java实现评论和回复功能

    评论和回复功能常见于各种Web应用程序，它们允许用户在文章、博客或社交媒体上互相交流和讨论。在Java中实现评论和回复功能可以通过使用数据库和服务器端技术来完成。本文将介绍一种

    Myth丶恋晨Myth丶恋晨/ 0 赞/ 149 阅读

    相关 评论回复功能的设计与实现

    评论回复功能的数据库设计可以分开设计成两张表，评论表和回复表，也可以将其设计为一张表，我采用的是一张表 评论回复表的相关字段（我做的是商品goods下的评论回复） ![

    末蓝、末蓝、/ 0 赞/ 72 阅读