vue+SpringBoot实现回复评论功能

实现回复评论功能的基本思路如下：

1. 在前端页面中，为每个评论添加一个“回复”按钮或者图标，点击该按钮可以弹出一个输入框，用于输入回复内容。

2. 在后端 Spring Boot 中，需要创建一个 RESTful API 接口，用于接收前端传来的回复内容，并将该回复内容存储到数据库中。

3. 在数据库中，需要为每个评论添加一个字段，用于存储其回复内容。可以考虑使用一个 JSON 格式的字符串来存储回复内容和回复者信息等相关信息。

4. 在前端页面中，需要使用 Axios 或者其他类似的 HTTP 请求库，向后端发送 POST 请求，将回复内容提交到后端保存。

5. 在前端页面中，需要动态渲染出已有的评论及其回复内容，并显示在页面上。

6. 在后端 Spring Boot 中，需要编写代码来查询数据库中的评论及其回复内容，并将其返回给前端。

下面是一个简单的实现示例：

1. 前端页面代码：

<!-- 评论列表 -->
<div class="comment-list">
  <div class="comment-item" v-for="(comment, index) in comments" :key="index">
    <div class="comment-info">
      <div class="comment-user">{{ comment.user }}</div>
      <div class="comment-content">{{ comment.content }}</div>
      <div class="comment-time">{{ comment.time }}</div>
      <button class="reply-btn" @click="showReplyDialog(index)">回复</button>
    </div>
    <div class="comment-reply" v-if="comment.reply">
      <div class="comment-user">{{ comment.reply.user }}</div>
      <div class="comment-content">{{ comment.reply.content }}</div>
      <div class="comment-time">{{ comment.reply.time }}</div>
    </div>
  </div>
</div>

<!-- 回复对话框 -->
<div class="reply-dialog" v-if="showDialog">
  <textarea v-model="replyContent"></textarea>
  <button @click="submitReply">提交</button>
</div>

2. 前端页面 JS 代码：

import axios from 'axios'

export default {
  data() {
    return {
      comments: [], // 评论列表
      showDialog: false, // 是否显示回复对话框
      replyIndex: -1, // 当前回复的评论索引
      replyContent: '' // 回复内容
    }
  },
  created() {
    this.getComments()
  },
  methods: {
    // 获取评论列表
    getComments() {
      axios.get('/api/comments')
        .then(response => {
          this.comments = response.data
        })
        .catch(error => {
          console.log(error)
        })
    },
    // 显示回复对话框
    showReplyDialog(index) {
      this.showDialog = true
      this.replyIndex = index
    },
    // 提交回复内容
    submitReply() {
      axios.post('/api/comments/' + this.replyIndex + '/reply', {
        content: this.replyContent,
        user: '匿名用户',
        time: new Date().toLocaleString()
      })
        .then(response => {
          this.showDialog = false
          this.replyContent = ''
          this.getComments()
        })
        .catch(error => {
          console.log(error)
        })
    }
  }
}

3. 后端 Spring Boot 代码：

@RestController
@RequestMapping("/api/comments")
public class CommentController {
  
  @Autowired
  private CommentRepository commentRepository;
  
  // 获取评论列表
  @GetMapping("")
  public List<Comment> getComments() {
    return commentRepository.findAll();
  }
  
  // 回复评论
  @PostMapping("/{index}/reply")
  public void replyComment(@PathVariable int index, @RequestBody Reply reply) {
    Comment comment = commentRepository.findById(index).get();
    comment.setReply(reply);
    commentRepository.save(comment);
  }
}

4. 数据库表结构：

CREATE TABLE `comment` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `content` varchar(255) NOT NULL,
  `user` varchar(50) NOT NULL,
  `time` varchar(50) NOT NULL,
  `reply` json DEFAULT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

5. Reply 类定义：

public class Reply {
  private String content;
  private String user;
  private String time;
  
  // getter 和 setter 略
}

以上是一个简单的回复评论功能实现示例，您可以根据实际需求进行修改和扩展。