springboot+axios 实现嵌套评论功能代码示例

以下是一个简单的示例，演示如何使用Spring Boot和Vue.js实现嵌套评论功能：

后端代码

@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.getCommentsByPostId(id);
    }
}

@Service
public class CommentService {
 
    @Autowired
    private CommentRepository commentRepository;
 
    public Comment addComment(Comment comment) {
        return commentRepository.save(comment);
    }
 
    public List<Comment> getCommentsByPostId(Long postId) {
        return commentRepository.findByPostIdOrderByCreatedAtDesc(postId);
    }
}

@Repository
public interface CommentRepository extends JpaRepository<Comment, Long> {
 
    List<Comment> findByPostIdOrderByCreatedAtDesc(Long postId);
}

前端代码

<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相等，就展示回复框，否则就不展示。