VUE+Java实现评论回复功能

下面我将详细讲解如何实现“VUE+Java实现评论回复功能”的完整攻略。

步骤一：准备工作

1. 创建一个Java项目，使用Spring Boot框架。
2. 创建一个vue项目，使用vue-cli工具。

步骤二：实现后端接口

1. 创建一个Comment类，用于存储评论信息，包括id、content、parentId等字段。
2. 创建一个接口，用于获取所有评论和回复，接口地址为/comment/list。
3. 创建一个接口，用于新增评论，接口地址为/comment/add。
4. 创建一个接口，用于回复评论，接口地址为/comment/reply。

以下是示例代码：

// Comment类
@Data
public class Comment {
    private Long id; // 评论id
    private String content; // 评论内容
    private Long parentId; // 父评论id
}

// 获取所有评论和回复
@GetMapping("/comment/list")
public List<Comment> list() {
    // 查询所有评论
    List<Comment> comments = commentService.findAll();
    // 构建评论树结构
    return commentService.buildTree(comments);
}

// 新增评论
@PostMapping("/comment/add")
public Comment add(@RequestBody Comment comment) {
    return commentService.add(comment);
}

// 回复评论
@PostMapping("/comment/reply")
public Comment reply(@RequestBody Comment comment) {
    return commentService.reply(comment);
}

步骤三：实现前端界面

1. 在vue中安装axios，用于发送http请求。
2. 创建一个CommentList组件，用于显示评论列表和添加评论以及回复评论。
3. 在CommentList组件中，使用axios调用后端接口获取所有评论和回复。
4. 设置评论和回复的层级关系，使用v-for指令循环渲染。

以下是示例代码：

<!-- CommentList组件 -->
<template>
  <div class="comment-list">
    <div v-for="comment in comments" :key="comment.id">
      <div>{{comment.content}}</div>
      <div>
        <button @click="showReply(comment)">回复</button>
        <div v-if="comment.children">
          <div v-for="child in comment.children" :key="child.id" v-html="child.content">
          </div>
        </div>
      </div>
    </div>
    <form>
      <textarea v-model="commentContent"></textarea>
      <button @click.prevent="addComment">添加评论</button>
    </form>
    <div v-if="showReplyBlock">
      <form>
        <textarea v-model="replyContent"></textarea>
        <button @click.prevent="replyComment">回复</button>
      </form>
    </div>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data() {
    return {
      comments: [], // 所有评论和回复
      commentContent: '', // 评论内容
      showReplyBlock: false, // 是否显示回复框
      replyContent: '', // 回复内容
      replyCommentId: '' // 回复评论的id
    }
  },
  mounted() {
    this.getComments()
  },
  methods: {
    showReply(comment) {
      this.showReplyBlock = true
      this.replyCommentId = comment.id
    },
    addComment() {
      axios.post('/comment/add', {
        content: this.commentContent
      }).then(res => {
        this.comments.push(res.data)
        this.commentContent = ''
      })
    },
    replyComment() {
      axios.post('/comment/reply', {
        content: this.replyContent,
        parentId: this.replyCommentId
      }).then(res => {
        const index = this.comments.findIndex(item => item.id === this.replyCommentId)
        if (!this.comments[index].children) {
          this.comments[index].children = []
        }
        this.comments[index].children.push(res.data)
        this.showReplyBlock = false
        this.replyContent = ''
        this.replyCommentId = ''
      })
    },
    getComments() {
      axios.get('/comment/list').then(res => {
        this.comments = res.data
      })
    }
  }
}
</script>

至此，一个带有评论回复功能的VUE+Java网站就实现了。