SpringBoot整合Mybatis-plus實現(xiàn)多級評論功能
在本文中,我們將介紹如何使用SpringBoot整合Mybatis-plus實現(xiàn)多級評論功能。同時,本文還將提供數(shù)據(jù)庫的設計和詳細的后端代碼,前端界面使用Vue2。
數(shù)據(jù)庫設計
本文的多級評論功能將采用MySQL數(shù)據(jù)庫實現(xiàn),下面是數(shù)據(jù)庫的設計:
用戶表
用戶表用于存儲注冊用戶的信息。
屬性名 | 數(shù)據(jù)類型 | 描述 |
---|---|---|
id | int | 用戶ID |
username | varchar(20) | 用戶名 |
password | varchar(20) | 密碼 |
varchar(30) | 電子郵箱 | |
avatar | varchar(50) | 頭像 |
評論表
用于存儲所有的評論信息。
屬性名 | 數(shù)據(jù)類型 | 描述 |
---|---|---|
id | int | 評論ID |
content | text | 評論內容 |
create_time | datetime | 評論創(chuàng)建時間 |
parent_id | int | 父級評論ID |
user_id | int | 評論用戶ID |
后端實現(xiàn)
相關依賴
首先,我們需要在pom.xml
文件中添加以下依賴:
<!-- SpringBoot依賴 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> <version>${spring-boot-version}</version> </dependency> <!-- Mybatis-plus依賴 --> <dependency> <groupId>com.baomidou.mybatisplus</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>${mybatis-plus-version}</version> </dependency> <!-- MySQL驅動 --> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>${mysql-version}</version> </dependency>
其中,${spring-boot-version}
、${mybatis-plus-version}
和${mysql-version}
需要根據(jù)實際情況進行替換。
配置文件
接下來,我們需要在application.yml
文件中配置MySQL的信息:
spring: datasource: driver-class-name: com.mysql.jdbc.Driver url: jdbc:mysql://localhost:3306/dbname?useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai username: root password: root # Mybatis-plus配置 mybatis-plus: # 實體包路徑 typeAliasesPackage: cn.example.entity # Mybatis XML文件位置 mapperLocations: classpath:mapper/*.xml # 自動填充策略 global-config: db-config: id-type: auto field-strategy: not_empty
這里需要將dbname
替換成實際的數(shù)據(jù)庫名稱。
實體類
然后,我們需要創(chuàng)建實體類User
和Comment
,分別對應用戶和評論。
@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è)務邏輯和接口。
首先是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
是用于封裝返回結果的工具類,這里不做過多解釋。
前端實現(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>評論內容:</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)">查看回復</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>
總結
本文介紹了如何使用SpringBoot整合Mybatis-plus實現(xiàn)多級評論功能,同時提供了數(shù)據(jù)庫的設計和詳細的后端代碼,前端界面使用的Vue2,希望本文能夠對您有所幫助。
到此這篇關于SpringBoot整合Mybatis-plus實現(xiàn)多級評論的文章就介紹到這了,更多相關SpringBoot多級評論內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
- SpringBoot3整合mybatis-plus的實現(xiàn)
- Springboot3整合Mybatis-plus3.5.3報錯問題解決
- SpringBoot整合mybatis-plus實現(xiàn)分頁查詢功能
- springboot3.2整合mybatis-plus詳細代碼示例
- SpringBoot3和mybatis-plus整合出現(xiàn)的問題解決辦法
- SpringBoot3.2.2整合MyBatis-Plus3.5.5依賴不兼容的問題解決
- SpringBoot整合Mybatis-Plus實現(xiàn)關聯(lián)查詢
- 全網最新springboot整合mybatis-plus的過程
- SpringBoot3.3.X整合Mybatis-Plus的實現(xiàn)示例
相關文章
Java8 將一個List<T>轉為Map<String,T>的操作
這篇文章主要介紹了Java8 將一個List<T>轉為Map<String, T>的操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2021-02-02使用spring mail發(fā)送html郵件的示例代碼
本篇文章主要介紹了使用spring mail發(fā)送html郵件的示例代碼,這里整理了詳細的示例代碼,具有一定的參考價值,有興趣的可以了解一下2017-09-09