快捷導(dǎo)航

SpringBoot整合Mybatis-plus實現(xiàn)多級評論功能

更新時間：2023年05月04日 10:11:21 作者：慕言要努力

本文介紹了如何使用SpringBoot整合Mybatis-plus實現(xiàn)多級評論功能，同時提供了數(shù)據(jù)庫的設(shè)計和詳細(xì)的后端代碼，前端界面使用的Vue2，本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧

數(shù)據(jù)庫設(shè)計

本文的多級評論功能將采用MySQL數(shù)據(jù)庫實現(xiàn)，下面是數(shù)據(jù)庫的設(shè)計：

用戶表

用戶表用于存儲注冊用戶的信息。

屬性名	數(shù)據(jù)類型	描述
id	int	用戶ID
username	varchar(20)	用戶名
password	varchar(20)	密碼
email	varchar(30)	電子郵箱
avatar	varchar(50)	頭像

評論表

用于存儲所有的評論信息。

屬性名	數(shù)據(jù)類型	描述
id	int	評論ID
content	text	評論內(nèi)容
create_time	datetime	評論創(chuàng)建時間
parent_id	int	父級評論ID
user_id	int	評論用戶ID

后端實現(xiàn)

實體類

然后，我們需要創(chuàng)建實體類User和Comment，分別對應(yīng)用戶和評論。

@Data
public class User {
    private Long id;
    private String username;
    private String password;
    private String email;
    private String avatar;
}
@Data
public class Comment {
    private Long id;
    private String content;
    private Date createTime;
    private Long parentId;
    private Long userId;
}

Mapper接口

接著，我們需要創(chuàng)建Mapper接口UserMapper和CommentMapper，用于操作用戶和評論的數(shù)據(jù)。

public interface UserMapper extends BaseMapper<User> {
}
public interface CommentMapper extends BaseMapper<Comment> {
    /**
     * 獲取一級評論列表（即parent_id為null的評論）
     * @return 一級評論列表
     */
    List<Comment> listParentComments();
    /**
     * 獲取二級評論列表（即parent_id不為null的評論）
     * @param parentId 父級評論ID
     * @return 二級評論列表
     */
    List<Comment> listChildComments(Long parentId);
}

BaseMapper是Mybatis-plus提供的通用Mapper接口，在使用時需要繼承并指定實體類。

除此之外，我們還添加了兩個自定義的方法listParentComments和listChildComments，用于分別獲取一級評論和二級評論的信息。

Service層和Controller層

最后，我們需要創(chuàng)建Service和Controller層，實現(xiàn)業(yè)務(wù)邏輯和接口。

首先是CommentService：

@Service
public class CommentService {
    @Autowired
    private CommentMapper commentMapper;
    /**
     * 獲取一級評論列表
     * @return 一級評論列表
     */
    public List<Comment> listParentComments() {
        return commentMapper.listParentComments();
    }
    /**
     * 獲取二級評論列表
     * @param parentId 父級評論ID
     * @return 二級評論列表
     */
    public List<Comment> listChildComments(Long parentId) {
        return commentMapper.listChildComments(parentId);
    }
    /**
     * 添加評論
     * @param comment 評論信息
     */
    public void addComment(Comment comment) {
        commentMapper.insert(comment);
    }
}

然后是CommentController：

@RestController
@RequestMapping("/comment")
public class CommentController {
    @Autowired
    private CommentService commentService;
    /**
     * 獲取一級評論列表
     * @return 一級評論列表
     */
    @GetMapping("/parent")
    public ResultVo listParentComments() {
        List<Comment> comments = commentService.listParentComments();
        return ResultUtil.success(comments);
    }
    /**
     * 獲取二級評論列表
     * @param parentId 父級評論ID
     * @return 二級評論列表
     */
    @GetMapping("/child")
    public ResultVo listChildComments(@RequestParam Long parentId) {
        List<Comment> comments = commentService.listChildComments(parentId);
        return ResultUtil.success(comments);
    }
    /**
     * 添加評論
     * @param comment 評論信息
     */
    @PostMapping("/add")
    public ResultVo addComment(@RequestBody Comment comment) {
        comment.setCreateTime(new Date());
        commentService.addComment(comment);
        return ResultUtil.success();
    }
}

這里的ResultVo和ResultUtil是用于封裝返回結(jié)果的工具類，這里不做過多解釋。

前端實現(xiàn)

前端界面使用Vue實現(xiàn)。具體實現(xiàn)過程這里不做過多解釋，在此提供代碼供參考：

<template>
  <div class="comment-box">
    <h2>評論區(qū)域</h2>
    <h3>發(fā)表評論</h3>
    <form @submit.prevent="addComment">
      <div class="form-item">
        <label>評論內(nèi)容：</label>
        <textarea v-model="comment.content" required></textarea>
      </div>
      <button type="submit">提交</button>
    </form>
    <h3>一級評論</h3>
    <ul>
      <li v-for="comment in parentComments" :key="comment.id">
        <p>{{comment.content}}</p>
        <button @click="showChildComments(comment.id)">查看回復(fù)</button>
        <div v-show="showChildCommentId === comment.id">
          <h4>二級評論</h4>
          <ul>
            <li v-for="comment in childComments" :key="comment.id">
              <p>{{comment.content}}</p>
            </li>
          </ul>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import axios from 'axios';
export default {
  data() {
    return {
      comment: {
        content: '',
      },
      parentComments: [],
      childComments: [],
      showChildCommentId: null,
    };
  },
  methods: {
    // 獲取一級評論列表
    getParentComments() {
      axios.get('/comment/parent').then(res => {
        this.parentComments = res.data.data;
      }).catch(err => {
        console.log(err);
      });
    },
    // 獲取二級評論列表
    getChildComments(parentId) {
      axios.get('/comment/child', {params: {parentId}}).then(res => {
        this.childComments = res.data.data;
      }).catch(err => {
        console.log(err);
      });
    },
    // 添加評論
    addComment() {
      axios.post('/comment/add', this.comment).then(res => {
        this.comment.content = '';
        this.getParentComments();
      }).catch(err => {
        console.log(err);
      });
    },
    // 顯示二級評論
    showChildComments(parentId) {
      if(this.showChildCommentId === parentId) {
        this.showChildCommentId = null;
        this.childComments = [];
      }else {
        this.showChildCommentId = parentId;
        this.getChildComments(parentId);
      }
    }
  },
};
</script>
<style>
.comment-box {
  font-family: Arial, sans-serif;
  max-width: 800px;
  margin: auto;
}
.form-item {
  margin-top: 10px;
}
.form-item label {
  display: inline-block;
  width: 80px;
  font-weight: bold;
}
.form-item textarea {
  width: 100%;
  height: 100px;
  border: 1px solid #ccc;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
li {
  margin-top: 10px;
}
li p {
  margin: 0;
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 3px;
}
</style>