快捷導(dǎo)航

Java單表實(shí)現(xiàn)評(píng)論回復(fù)功能(多種實(shí)現(xiàn)方式)

更新時(shí)間：2023年03月04日 10:57:50 作者：畢竟尹穩(wěn)健

這篇文章主要介紹了Java單表實(shí)現(xiàn)評(píng)論回復(fù)功能，大家都知道評(píng)論功能有多種實(shí)現(xiàn)方式，本文逐一給大家詳細(xì)講解,需要的朋友可以參考下

1.簡介

最近在寫畢業(yè)設(shè)計(jì)的時(shí)候發(fā)現(xiàn)需要實(shí)現(xiàn)一個(gè)評(píng)論功能，然后看了一下掘金和csdn的評(píng)論區(qū)，如何實(shí)現(xiàn)評(píng)論功能？

評(píng)論功能有多種實(shí)現(xiàn)方式：

單層型
套娃型（多層型）
兩層型

單層型：

在這里插入圖片描述

套娃型：

在這里插入圖片描述

兩層型：

在這里插入圖片描述

2.功能實(shí)現(xiàn)圖

在這里插入圖片描述

3.數(shù)據(jù)庫設(shè)計(jì)

這個(gè)地方有個(gè)answer_id 很容易讓人迷糊：是回復(fù)哪個(gè)用戶的id

CREATE TABLE `tb_blog_comments`  (
  `id` bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT '主鍵',
  `user_id` bigint(20) UNSIGNED NOT NULL COMMENT '用戶id',
  `blog_id` bigint(20) UNSIGNED NOT NULL COMMENT '探店id',
  `parent_id` bigint(20) UNSIGNED NOT NULL COMMENT '關(guān)聯(lián)的1級(jí)評(píng)論id，如果是一級(jí)評(píng)論，則值為0',
  `answer_id` bigint(20) UNSIGNED NOT NULL COMMENT '回復(fù)的評(píng)論id',
  `content` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '回復(fù)的內(nèi)容',
  `liked` int(8) UNSIGNED NULL DEFAULT 0 COMMENT '點(diǎn)贊數(shù)',
  `status` tinyint(1) UNSIGNED NULL DEFAULT 0 COMMENT '狀態(tài)，0：正常，1：被舉報(bào)，2：禁止查看',
  `create_time` timestamp(0) NOT NULL DEFAULT CURRENT_TIMESTAMP(0) COMMENT '創(chuàng)建時(shí)間',
  `update_time` timestamp(0) NOT NULL DEFAULT CURRENT_TIMESTAMP(0) ON UPDATE CURRENT_TIMESTAMP(0) COMMENT '更新時(shí)間',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci ROW_FORMAT = COMPACT;

SET FOREIGN_KEY_CHECKS = 1;

4.實(shí)體類

import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import com.baomidou.mybatisplus.annotation.TableName;
import com.fasterxml.jackson.annotation.JsonFormat;
import lombok.Data;
import lombok.EqualsAndHashCode;
import lombok.experimental.Accessors;

import java.io.Serializable;
import java.time.LocalDateTime;
import java.util.List;

/**
 * <p>
 * 
 * </p>
 *
 * @author 尹穩(wěn)健
 * @since 2022-11-09
 */
@Data
@EqualsAndHashCode(callSuper = false)
@Accessors(chain = true)
@TableName("tb_blog_comments")
public class BlogComments implements Serializable {

    private static final long serialVersionUID = 1L;

    /**
     * 主鍵
     */
    @TableId(value = "id", type = IdType.AUTO)
    private Long id;

    /**
     * 用戶id
     */
    private Long userId;

    /**
     * 探店id
     */
    private Long blogId;

    /**
     * 關(guān)聯(lián)的1級(jí)評(píng)論id，如果是一級(jí)評(píng)論，則值為0
     */
    private Long parentId;

    /**
     * 回復(fù)的評(píng)論id
     */
    private Long answerId;

    /**
     * 回復(fù)的內(nèi)容
     */
    private String content;

    /**
     * 點(diǎn)贊數(shù)
     */
    private Integer liked;

    /**
     * 狀態(tài)，0：正常，1：被舉報(bào)，2：禁止查看
     */
    private Boolean status;

    /**
     * 創(chuàng)建時(shí)間
     */
    @JsonFormat(pattern = "yyyy-MM-dd HH:mm:ss")
    private LocalDateTime createTime;

    /**
     * 更新時(shí)間
     */
    private LocalDateTime updateTime;

    /**
     * 是否點(diǎn)贊
     */
    @TableField(exist = false)
    private Boolean isLike;

    /**
     * 子評(píng)論
     */
    @TableField(exist = false)
    List<BlogComments> children;

    /**
     * 評(píng)論者的昵稱
     */
    @TableField(exist = false)
    private String nickName;

    /** 評(píng)論者的頭像 */
    @TableField(exist = false)
    private String icon;

    /** 評(píng)論者的上級(jí)昵稱 */
    @TableField(exist = false)
    private String pNickName;

    /** 評(píng)論者的的上級(jí)頭像 */
    @TableField(exist = false)
    private String pIcon;
}

5.實(shí)現(xiàn)思路

因?yàn)橛性u(píng)論區(qū)有兩層，所以肯定有一個(gè)parent_id，這樣你才能知道你是哪個(gè)評(píng)論下面的回復(fù)內(nèi)容，如果繼續(xù)評(píng)論，那么那條評(píng)論的parent_id還是之前那條評(píng)論的parent_id，而不是那條子評(píng)論的id。
回復(fù)內(nèi)容也同樣是一個(gè)評(píng)論實(shí)體類，只不過是一個(gè)集合，所以用List 存儲(chǔ)，泛型使用實(shí)體類
我的功能實(shí)現(xiàn)也用到了父評(píng)論的用戶名和頭像，這樣可以更好看出這是誰評(píng)論的，回復(fù)給誰的評(píng)論

6.功能實(shí)現(xiàn)

6.1 Sql入手

首先，我們需要知道自己需要哪些數(shù)據(jù)，返回給前端

如果你連mybatis都不會(huì)，那就看下思路吧
從這里獲取到了評(píng)論表的所有數(shù)據(jù)，以及評(píng)論的人的信息，比如說昵稱、頭像、id，可以展示在前端

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="com.sky.mapper.BlogCommentsMapper">
    <select id="findCommentDetail" resultType="com.sky.pojo.BlogComments">
        SELECT
            bl.*,
            u.icon,
            u.nick_name
        FROM `tb_blog_comments` bl
        left join tb_user u
        on u.id = bl.user_id
        where bl.blog_id = #{blogId}
        order by bl.id desc
    </select>
</mapper>

對(duì)應(yīng)的mapper接口

package com.sky.mapper;

import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.sky.pojo.BlogComments;
import org.apache.ibatis.annotations.Mapper;

import java.util.List;

/**
 * <p>
 *  Mapper 接口
 * </p>
 *
 * @author 尹穩(wěn)健
 * @since 2022-11-09
 */
@Mapper
public interface BlogCommentsMapper extends BaseMapper<BlogComments> {

    /**
     * 查詢所有的評(píng)論信息
     * @param blogId
     * @return
     */
    List<BlogComments> findCommentDetail(Long blogId);
}

6.2 業(yè)務(wù)實(shí)現(xiàn)

1.首先我們需要從數(shù)據(jù)中獲取所有的數(shù)據(jù)
2.然后我們需要找到所有的一級(jí)評(píng)論，一級(jí)評(píng)論就是最高級(jí)，他不在誰的下面，他就是最大的，我這里在添加評(píng)論的時(shí)候前端做了處理，只要是一級(jí)評(píng)論，他的paren_id = 0
3.然后我們需要從一級(jí)評(píng)論下面添加他下面所有的子評(píng)論
最主要的就是如何將父級(jí)評(píng)論的信息添加到自己的數(shù)據(jù)中？
4.通過子評(píng)論中的paren_id 找到父評(píng)論，然后通過子評(píng)論的answer_id == 父評(píng)論的user_id 這樣就可以拿到父評(píng)論的那一條數(shù)據(jù)
最后通過Optional 添加到子評(píng)論的數(shù)據(jù)中

@Override
public Result showBlogComments(Long blogId) {
    // 先將數(shù)據(jù)庫中的數(shù)據(jù)全部查詢出來，包括評(píng)論作者的信息，昵稱和頭像
    List<BlogComments> blogComments = blogCommentsMapper.findCommentDetail(blogId);
    // 獲取所有的一級(jí)評(píng)論
    List<BlogComments> rootComments = blogComments.stream().filter(blogComments1 -> blogComments1.getParentId() == 0).collect(Collectors.toList());
    // 從一級(jí)評(píng)論中獲取回復(fù)評(píng)論
    for (BlogComments rootComment : rootComments) {
        // 回復(fù)的評(píng)論
        List<BlogComments> comments = blogComments.stream()
                .filter(blogComment -> blogComment.getParentId().equals(rootComment.getId()))
                .collect(Collectors.toList());
        // 回復(fù)評(píng)論中含有父級(jí)評(píng)論的信息
        comments.forEach(comment -> {
            // 無法判斷pComment是否存在，可以使用Optional
            Optional<BlogComments> pComment
                    = blogComments
                    .stream()
                    // 獲取所有的評(píng)論的回復(fù)id也就是父級(jí)id的userid，這樣就可以獲取到父級(jí)評(píng)論的信息
                    .filter(blogComment -> comment.getAnswerId().equals(blogComment.getUserId())).findFirst();
            // 這里使用了Optional 只有pcomment！=null 的時(shí)候才會(huì)執(zhí)行下面的代碼
            pComment.ifPresent(v -> {
                comment.setPNickName(v.getNickName());
                comment.setPIcon(v.getIcon());
            });
            // 判斷是否點(diǎn)贊
            isBlogCommentLiked(comment);
        });
        rootComment.setChildren(comments);
        // 判斷是否點(diǎn)贊
        isBlogCommentLiked(rootComment);
    }
    return Result.ok(rootComments);
}

7.前端實(shí)現(xiàn)

因?yàn)榍岸舜a很多，只copy關(guān)鍵代碼

<html>
<body>
<div class="comment-list">
          <div class="comment-box" style="display: block" v-for="comment in commnetList" :key="comment.id">
            <div style="display:flex">
              <!-- 評(píng)論者頭像 -->
              <div class="comment-icon">
                <img :src="comment.icon" alt="">
              </div>
              <!-- 評(píng)論div -->
              <div class="comment-info">
                <!-- 評(píng)論者昵稱 -->
                <div class="comment-user">
                  {{comment.nickName}}
                </div>
                <!-- 評(píng)論時(shí)間 -->
                <div style="display: flex">
                  {{comment.createTime}}
                  <!-- 評(píng)論點(diǎn)贊，回復(fù)按鈕 -->
                  <div style="margin-left: 42%;display: flex;">
                    <div @click="addCommnetLike(comment)" style="display: flex">
                      <svg t="1646634642977" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="2187" width="14" height="14">
                        <path
                          d="M160 944c0 8.8-7.2 16-16 16h-32c-26.5 0-48-21.5-48-48V528c0-26.5 21.5-48 48-48h32c8.8 0 16 7.2 16 16v448zM96 416c-53 0-96 43-96 96v416c0 53 43 96 96 96h96c17.7 0 32-14.3 32-32V448c0-17.7-14.3-32-32-32H96zM505.6 64c16.2 0 26.4 8.7 31 13.9 4.6 5.2 12.1 16.3 10.3 32.4l-23.5 203.4c-4.9 42.2 8.6 84.6 36.8 116.4 28.3 31.7 68.9 49.9 111.4 49.9h271.2c6.6 0 10.8 3.3 13.2 6.1s5 7.5 4 14l-48 303.4c-6.9 43.6-29.1 83.4-62.7 112C815.8 944.2 773 960 728.9 960h-317c-33.1 0-59.9-26.8-59.9-59.9v-455c0-6.1 1.7-12 5-17.1 69.5-109 106.4-234.2 107-364h41.6z m0-64h-44.9C427.2 0 400 27.2 400 60.7c0 127.1-39.1 251.2-112 355.3v484.1c0 68.4 55.5 123.9 123.9 123.9h317c122.7 0 227.2-89.3 246.3-210.5l47.9-303.4c7.8-49.4-30.4-94.1-80.4-94.1H671.6c-50.9 0-90.5-44.4-84.6-95l23.5-203.4C617.7 55 568.7 0 505.6 0z"
                          p-id="2188" :fill="comment.isLike ? '#ff6633' : '#82848a'"></path>
                      </svg>
                      &nbsp;{{comment.liked}}
                    </div>
                    <!--  評(píng)論回復(fù) -->
                    <div style=" display:flex">
                      &nbsp;&nbsp;&nbsp;&nbsp;
                      <el-dropdown trigger="click" size="mini" placement="top" type="mini">
                        <i class="el-icon-more"></i>
                        <el-dropdown-menu>
                          <el-dropdown-item>
                            <div @click="replyCommentForm(comment)">
                              回復(fù)
                            </div>
                          </el-dropdown-item>
                          <el-dropdown-item>
                            <div v-if="comment.userId == user.id" @click="deleteComment(comment.id)">
                              刪除
                            </div>
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </el-dropdown>
                      &nbsp;
                    </div>
                  </div>
                </div>
                <!-- 評(píng)論主題 ： 評(píng)論內(nèi)容，點(diǎn)贊，回復(fù) -->
                <div style="padding: 5px 0; font-size: 14px;display: flex;">
                  <!-- 評(píng)論內(nèi)容 -->
                  <div>
                    {{comment.content}}
                  </div>
                </div>
              </div>
            </div>

            <!-- 回復(fù)的內(nèi)容 -->
            <div v-if="comment.children.length" style="padding-left: 5px;">
              <div v-for="reply in comment.children" :key="reply.id" style="padding: 5px 10px">
                <div style="display: flex">
                  <!-- 評(píng)論者頭像 -->
                  <div class="comment-icon">
                    <img :src="reply.icon" alt="">
                  </div>
                  <!-- 評(píng)論div -->
                  <div class="comment-info">
                    <!-- 評(píng)論者昵稱 -->
                    <div class="comment-user">
                      {{reply.nickName}} &nbsp;回復(fù)： {{reply.pnickName}}
                    </div>
                    <!-- 評(píng)論時(shí)間 -->
                    <div style="display: flex">
                      {{reply.createTime}}
                      <!-- 評(píng)論點(diǎn)贊，回復(fù)按鈕 -->
                      <div style="margin-left: 40%;display: flex;">
                        <div style="display: flex" @click="addCommnetLike(reply)">
                          <svg t="1646634642977" class="icon" viewBox="0 0 1024 1024" version="1.1"
                            xmlns="http://www.w3.org/2000/svg" p-id="2187" width="14" height="14">
                            <path
                              d="M160 944c0 8.8-7.2 16-16 16h-32c-26.5 0-48-21.5-48-48V528c0-26.5 21.5-48 48-48h32c8.8 0 16 7.2 16 16v448zM96 416c-53 0-96 43-96 96v416c0 53 43 96 96 96h96c17.7 0 32-14.3 32-32V448c0-17.7-14.3-32-32-32H96zM505.6 64c16.2 0 26.4 8.7 31 13.9 4.6 5.2 12.1 16.3 10.3 32.4l-23.5 203.4c-4.9 42.2 8.6 84.6 36.8 116.4 28.3 31.7 68.9 49.9 111.4 49.9h271.2c6.6 0 10.8 3.3 13.2 6.1s5 7.5 4 14l-48 303.4c-6.9 43.6-29.1 83.4-62.7 112C815.8 944.2 773 960 728.9 960h-317c-33.1 0-59.9-26.8-59.9-59.9v-455c0-6.1 1.7-12 5-17.1 69.5-109 106.4-234.2 107-364h41.6z m0-64h-44.9C427.2 0 400 27.2 400 60.7c0 127.1-39.1 251.2-112 355.3v484.1c0 68.4 55.5 123.9 123.9 123.9h317c122.7 0 227.2-89.3 246.3-210.5l47.9-303.4c7.8-49.4-30.4-94.1-80.4-94.1H671.6c-50.9 0-90.5-44.4-84.6-95l23.5-203.4C617.7 55 568.7 0 505.6 0z"
                              p-id="2188" :fill="reply.isLike ? '#ff6633' : '#82848a'"></path>
                          </svg>
                          &nbsp;{{reply.liked}}
                        </div>
                        <div style="display:flex">
                          &nbsp;&nbsp;&nbsp;&nbsp;
                          <el-dropdown trigger="click" size="mini" placement="top" type="mini">
                            <i class="el-icon-more"></i>
                            <el-dropdown-menu>
                              <el-dropdown-item>
                                <div @click="replyCommentForm(reply)">
                                  回復(fù)
                                </div>
                              </el-dropdown-item>
                              <el-dropdown-item>
                                <div v-if="reply.userId == user.id" @click="deleteComment(reply.id)">
                                  刪除
                                </div>
                              </el-dropdown-item>
                            </el-dropdown-menu>
                          </el-dropdown>
                          &nbsp;
                        </div>
                      </div>
                    </div>
                    <!-- 評(píng)論內(nèi)容 -->
                    <div style="padding: 5px 0; font-size: 14px;display: flex;">
                      <!-- 評(píng)論內(nèi)容 -->
                      <div>
                        {{reply.content}}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
<script>
    let each = function (ary, callback) {
      for (let i = 0, l = ary.length; i < l; i++) {
        if (callback(ary[i], i) === false) break
      }
    }
    const app = new Vue({
      el: "#app",
      data: {
        util,
        showPopover: false,
        actions: [{ text: '回復(fù)', icon: '' }, { text: '刪除', icon: '' }],
        commentsTotal: '',  // 評(píng)論總數(shù)
        checkCommentInputVisible: false,  // 判斷是否點(diǎn)擊回復(fù)
        commnetList: {},  // 評(píng)論回復(fù)列表
        placeholderText: '發(fā)條友善評(píng)論吧~~',
        commentForm: {
          content: '',
          userId: '',
          blogId: '',
          parentId: 0,
          answerId: 0,
        },   // 評(píng)論表單
        blog: {},
        shop: {},
        likes: [],
        user: {}, // 登錄用戶
      methods: {

        replyCommentForm(comment) {
          this.placeholderText = "回復(fù) " + comment.nickName
          this.checkCommentInputVisible = true;
          if (comment.parentId == 0) {
            this.commentForm.parentId = comment.id;
          } else {
            this.commentForm.parentId = comment.parentId;
          }
          this.commentForm.answerId = comment.userId;
        },
        submitCommentForm() {
          this.commentForm.userId = this.user.id;
          this.commentForm.blogId = this.blog.id;
          axios.post("/blog-comments/saveBlogComment", this.commentForm)
            .then(res => {
              this.loadComments(this.blog.id);
              this.checkCommentInputVisible = false;
            })
            .catch(err => this.$message.error(err))
        },
        loadComments(id) {
          axios.get("/blog-comments/showBlogComments/" + id)
            .then(res => {
              this.commnetList = res.data
            })
            .catch(err => this.$message.err(error))
        },
        }
  </script>
  </body>

</html>

8.最終成果

在這里插入圖片描述

點(diǎn)贊、評(píng)論、回復(fù)、刪除

在這里插入圖片描述

到此這篇關(guān)于Java單表實(shí)現(xiàn)評(píng)論回復(fù)功能(多種實(shí)現(xiàn)方式)的文章就介紹到這了,更多相關(guān)Java評(píng)論回復(fù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: