以下是一个简单的示例，演示如何
使用Spring Boot和Vue.js实现嵌套评论功能：
后端代码
```java
@RestController
@RequestMapping("/comments")
public class CommentController {
@Autowired
private CommentService commentService;
@
PostMapping
public Comment addComment(@RequestBody Comment comment) {
return commentService.addComment(comment);
}
@GetMapping("/{id}")
public List<Comment> getComments(@PathVariable Long id) {
return commentService.getCommentsBy
PostId(id);
}
}
```
```java
@Service
public class CommentService {
@Autowired
private CommentRepository commentRepository;
public Comment addComment(Comment comment) {
return commentRepository.save(comment);
}
public List<Comment> getCommentsBy
PostId(Long
postId) {
return commentRepository.findBy
PostIdOrderByCreatedAtDesc(
postId);
}
}
```
```java
@Repository
public interface CommentRepository extends JpaRepository<Comment, Long> {
List<Comment> findBy
PostIdOrderByCreatedAtDesc(Long
postId);
}
```
前端代码
```vue
<template>
<div>
<h2>Comments</h2>
<div v-for="comment in comments" :key="comment.id">
<p>{{ comment.content }}</p>
<button @click="showReplyForm(comment.id)">Reply</button>
<div v-if="comment.id === selectedCommentId">
<form @submit.prevent="addComment">
<textarea v-model="replyContent"></textarea>
<button type="submit">Submit</button>
</form>
</div>
<div v-for="reply in comment.replies" :key="reply.id">
<p>{{ reply.content }}</p>
<button @click="showReplyForm(reply.id)">Reply</button>
<div v-if="reply.id === selectedCommentId">
<form @submit.prevent="addComment">
<textarea v-model="replyContent"></textarea>
<button type="submit">Submit</button>
</form>
</div>
</div>
</div>
</div>
</template>
<script>
import
axios from '
axios';
export default {
data() {
return {
comments: [],
selectedCommentId: null,
replyContent: '',
};
},
created() {
this.loadComments();
},
methods: {
loadComments() {
axios.get('/comments/1')
.then(response => {
this.comments = response.data;
});
},
showReplyForm(commentId) {
this.selectedCommentId = commentId;
},
addComment() {
const comment = {
postId: 1,
content: this.replyContent,
parentId: this.selectedCommentId,
};
axios.
post('/comments', comment)
.then(response => {
this.loadComments();
});
},
},
};
</script>
```
在这个示例中，我们
使用了一个简单的评论模型，包括ID、内容、创建时间、所属帖子ID和父评论ID等字段。在后端代码中，我们
使用Spring Boot框架实现了一个RESTful API，用于添加评论和获取评论列表。在前端代码中，我们
使用了Vue.js框架和
axios库，实现了一个简单的评论列表和评论框。当用户点击回复按钮时，前端会展示一个评论框，用户可以输入回复内容并提交，提交后前端会调用后端API将评论保存到数据库中，并重新加载评论列表展示在页面中。
当评论有父评论时，我们在前端也会展示出来，形成嵌套评论的效果。在展示评论时，我们通过判断评论的父评论ID来决定是否展示回复框。如果父评论ID和当前评论的ID相等，就展示回复框，否则就不展示。
博客围绕Spring Boot展开，但具体内容缺失。Spring Boot是后端开发中常用框架，能简化开发流程，提高开发效率。
扫一扫
847
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
