SpringBoot整合Mybatis-plus實(shí)現(xiàn)多級(jí)評(píng)論功能

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

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

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

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

用戶表

用戶表用于存儲(chǔ)注冊(cè)用戶的信息。

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

評(píng)論表

用于存儲(chǔ)所有的評(píng)論信息。

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

后端實(shí)現(xiàn)

實(shí)體類

然后，我們需要?jiǎng)?chuàng)建實(shí)體類User和Comment，分別對(duì)應(yīng)用戶和評(pí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接口

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

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

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

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

Service層和Controller層

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

首先是CommentService：

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

然后是CommentController：

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

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

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

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

<template>
  <div class="comment-box">
    <h2>評(píng)論區(qū)域</h2>
    <h3>發(fā)表評(píng)論</h3>
    <form @submit.prevent="addComment">
      <div class="form-item">
        <label>評(píng)論內(nèi)容：</label>
        <textarea v-model="comment.content" required></textarea>
      </div>
      <button type="submit">提交</button>
    </form>
    <h3>一級(jí)評(píng)論</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>二級(jí)評(píng)論</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: {
    // 獲取一級(jí)評(píng)論列表
    getParentComments() {
      axios.get('/comment/parent').then(res => {
        this.parentComments = res.data.data;
      }).catch(err => {
        console.log(err);
      });
    },
    // 獲取二級(jí)評(píng)論列表
    getChildComments(parentId) {
      axios.get('/comment/child', {params: {parentId}}).then(res => {
        this.childComments = res.data.data;
      }).catch(err => {
        console.log(err);
      });
    },
    // 添加評(píng)論
    addComment() {
      axios.post('/comment/add', this.comment).then(res => {
        this.comment.content = '';
        this.getParentComments();
      }).catch(err => {
        console.log(err);
      });
    },
    // 顯示二級(jí)評(píng)論
    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>

總結(jié)

本文介紹了如何使用SpringBoot整合Mybatis-plus實(shí)現(xiàn)多級(jí)評(píng)論功能，同時(shí)提供了數(shù)據(jù)庫(kù)的設(shè)計(jì)和詳細(xì)的后端代碼，前端界面使用的Vue2，希望本文能夠?qū)δ兴鶐椭?/p>

到此這篇關(guān)于SpringBoot整合Mybatis-plus實(shí)現(xiàn)多級(jí)評(píng)論的文章就介紹到這了,更多相關(guān)SpringBoot多級(jí)評(píng)論內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: