实现评论及回复功能需要分为前端和后端两部分。

前端：

1. 使用vue框架搭建页面，引入element-ui组件库。

2. 在页面中展示文章内容和评论列表。

3. 添加一个评论框，使用element-ui的Form和Input组件进行封装，用于用户输入评论内容。

4. 在每条评论下方添加回复框，使用element-ui的Form和Input组件进行封装，用于用户输入回复内容。

5. 实现评论和回复的提交功能，使用axios库向后端发送请求。

后端：

1. 使用Java语言编写后端代码，使用Spring Boot框架搭建项目。

2. 创建一个Comment实体类，用于表示评论和回复信息。

3. 创建一个Controller，用于处理评论和回复的增删改查请求。

4. 创建一个Service，用于实现评论和回复的数据操作逻辑。

5. 创建一个Repository，用于与数据库进行交互。

具体实现步骤如下：

前端：

1. 搭建一个基于vue框架的项目，引入element-ui组件库。

2. 在页面中展示文章内容和评论列表。

<template><div class="article"><h1>{{ article.title }}</h1><p>{{ article.content }}</p><hr><h2>评论</h2><el-form ref="commentForm" :model="comment" label-width="80px"><el-form-item label="评论"><el-input type="textarea" v-model="comment.content" :autosize="{ minRows: 4, maxRows: 4 }"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitComment">提交评论</el-button></el-form-item></el-form><div class="comment-list"><div v-for="(item, index) in commentList" :key="index" class="comment-item"><div class="comment-content">{{ item.content }}</div><div class="comment-reply"><el-form ref="replyForm" :model="reply[index]" label-width="80px"><el-form-item label="回复"><el-input type="textarea" v-model="reply[index].content" :autosize="{ minRows: 2, maxRows: 2 }"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitReply(index)">提交回复</el-button></el-form-item></el-form></div><div class="reply-list"><div v-for="(replyItem, replyIndex) in item.replyList" :key="replyIndex" class="reply-item"><div class="reply-content">{{ replyItem.content }}</div><div class="reply-info">{{ replyItem.username }} 回复 {{ replyItem.targetUsername }}</div></div></div></div></div></div></template><script>export default {data() {return {article: {},comment: {content: ''},reply: [],commentList: []}},created() {// 获取文章内容和评论列表axios.get('/article/' + this.$route.params.id).then(res => {this.article = res.datathis.commentList = this.article.commentListfor (let i = 0; i < this.commentList.length; i++) {this.reply.push({content: ''})}})},methods: {submitComment() {// 提交评论const data = {articleId: this.$route.params.id,content: this.comment.content}axios.post('/comment', data).then(res => {this.commentList.push(res.data)this.comment.content = ''})},submitReply(index) {// 提交回复const data = {commentId: this.commentList[index].id,content: this.reply[index].content}axios.post('/reply', data).then(res => {this.commentList[index].replyList.push(res.data)this.reply[index].content = ''})}}}</script>

3. 添加一个评论框，使用element-ui的Form和Input组件进行封装，用于用户输入评论内容。

<el-form ref="commentForm" :model="comment" label-width="80px"><el-form-item label="评论"><el-input type="textarea" v-model="comment.content" :autosize="{ minRows: 4, maxRows: 4 }"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitComment">提交评论</el-button></el-form-item></el-form>

4. 在每条评论下方添加回复框，使用element-ui的Form和Input组件进行封装，用于用户输入回复内容。

<div class="comment-reply"><el-form ref="replyForm" :model="reply[index]" label-width="80px"><el-form-item label="回复"><el-input type="textarea" v-model="reply[index].content" :autosize="{ minRows: 2, maxRows: 2 }"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitReply(index)">提交回复</el-button></el-form-item></el-form></div>

5. 实现评论和回复的提交功能，使用axios库向后端发送请求。

submitComment() {// 提交评论const data = {articleId: this.$route.params.id,content:this.comment.content}axios.post('/comment', data).then(res => {this.commentList.push(res.data)this.comment.content = ''})},submitReply(index) {// 提交回复const data = {commentId: this.commentList[index].id,content: this.reply[index].content}axios.post('/reply', data).then(res => {this.commentList[index].replyList.push(res.data)this.reply[index].content = ''})}

后端：

1. 使用Spring Boot框架创建一个基于Maven的项目。

2. 在pom.xml中添加依赖。

<dependencies><!-- Spring Boot --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><!-- Spring Data JPA --><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-data-jpa</artifactId></dependency><!-- MySQL --><dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId></dependency></dependencies>

3. 创建一个Comment实体类，用于表示评论和回复信息。

@Entity@Table(name = "comment")public class Comment {@Id@GeneratedValue(strategy = GenerationType.IDENTITY)private Integer id;@Column(name = "article_id")private Integer articleId;@Column(name = "user_id")private Integer userId;private String content;@Column(name = "create_time")private Date createTime;// getter和setter方法}

4. 创建一个Reply实体类，用于表示回复信息。

@Entity@Table(name = "reply")public class Reply {@Id@GeneratedValue(strategy = GenerationType.IDENTITY)private Integer id;@Column(name = "comment_id")private Integer commentId;@Column(name = "user_id")private Integer userId;private String content;@Column(name = "create_time")private Date createTime;// getter和setter方法}

5. 创建一个CommentRepository接口，用于与数据库进行交互。

public interface CommentRepository extends JpaRepository<Comment, Integer> {List<Comment> findByArticleId(Integer articleId);}

6. 创建一个ReplyRepository接口，用于与数据库进行交互。

public interface ReplyRepository extends JpaRepository<Reply, Integer> {List<Reply> findByCommentId(Integer commentId);}

7. 创建一个CommentService类，用于实现评论和回复的数据操作逻辑。

@Servicepublic class CommentService {@Autowiredprivate CommentRepository commentRepository;@Autowiredprivate ReplyRepository replyRepository;public List<Comment> getCommentList(Integer articleId) {return commentRepository.findByArticleId(articleId);}public Comment addComment(Comment comment) {comment.setCreateTime(new Date());return commentRepository.save(comment);}public Reply addReply(Reply reply) {reply.setCreateTime(new Date());return replyRepository.save(reply);}}

8. 创建一个CommentController类，用于处理评论和回复的增删改查请求。

@RestControllerpublic class CommentController {@Autowiredprivate CommentService commentService;@PostMapping("/comment")public Comment addComment(@RequestBody Comment comment) {return commentService.addComment(comment);}@PostMapping("/reply")public Reply addReply(@RequestBody Reply reply) {return commentService.addReply(reply);}}

以上就是使用Java和vue实现评论及回复功能的具体步骤。