Spring Boot + Vue 实现评论功能：详细步骤和代码示例

本文将带你一步步实现一个完整的 Spring Boot + Vue 系统的评论功能，涵盖后端 API 设计、数据库交互、前端页面开发等各个方面。

1. 创建 Spring Boot 项目

首先，需要创建一个 Spring Boot 项目作为后端服务。可以使用 Spring Initializr 快速创建一个基本的 Spring Boot 项目，并添加必要的依赖，例如：

Spring Web：用于构建 REST API
MyBatis：用于与数据库交互
MySQL driver：用于连接 MySQL 数据库

2. 集成 MyBatis

在 Spring Boot 项目中集成 MyBatis 框架，可以通过在 pom.xml 文件中添加相关依赖来实现。同时，需要配置 MyBatis 的数据源等相关信息，以便能够连接数据库。

3. 创建数据表

在数据库中创建评论表，包括评论的 id、用户 id、文章 id、评论内容 等字段。

4. 创建评论实体类

在 Java 代码中创建评论实体类，包括评论的 id、用户 id、文章 id、评论内容 等属性，并且使用 MyBatis 提供的注解来映射到数据库中的评论表。

@Entity
@Table(name = "comments")
public class Comment {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private Long userId;
    private Long articleId;
    private String content;
    // getters and setters
}

5. 创建 DAO 层接口

在 Java 代码中创建评论 DAO 层接口，定义各种对评论的操作方法，包括添加评论、删除评论、查询评论等。

public interface CommentDao {
    Comment save(Comment comment);
    void delete(Long id);
    List<Comment> findAllByArticleId(Long articleId);
    // other methods
}

6. 创建 Service 层接口

在 Java 代码中创建评论 Service 层接口，定义各种对评论的业务逻辑操作方法，包括根据文章 id 查询评论列表、添加评论等。

public interface CommentService {
    Comment addComment(Comment comment);
    List<Comment> getCommentsByArticleId(Long articleId);
    // other methods
}

7. 创建 Controller 层接口

在 Java 代码中创建评论 Controller 层接口，定义各种对评论的 API 接口，包括获取评论列表、添加评论等。

@RestController
@RequestMapping("/api/comments")
public class CommentController {
    @Autowired
    private CommentService commentService;

    @PostMapping
    public Comment addComment(@RequestBody Comment comment) {
        return commentService.addComment(comment);
    }

    @GetMapping("/{articleId}")
    public List<Comment> getCommentsByArticleId(@PathVariable Long articleId) {
        return commentService.getCommentsByArticleId(articleId);
    }
    // other methods
}

8. 创建前端页面

使用 Vue 框架创建前端页面，包括评论列表展示、添加评论等功能。

<template>
    <div>
        <ul>
            <li v-for="comment in comments" :key="comment.id">
                {{ comment.content }}
            </li>
        </ul>
        <form @submit.prevent="addComment">
            <input type="text" v-model="newComment.content" />
            <button type="submit">添加评论</button>
        </form>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    data() {
        return {
            comments: [],
            newComment: {
                content: '',
                articleId: 1 // 假设文章 id 为 1
            }
        };
    },
    mounted() {
        this.getComments();
    },
    methods: {
        getComments() {
            axios.get(`/api/comments/${this.newComment.articleId}`).then(response => {
                this.comments = response.data;
            });
        },
        addComment() {
            axios.post('/api/comments', this.newComment).then(response => {
                this.comments.push(response.data);
                this.newComment.content = '';
            });
        }
    }
};
</script>

9. 调用后端 API 接口

在 Vue 页面中调用后端 API 接口，实现评论列表展示、添加评论等功能。同时，可以使用 Axios 等工具来发送 HTTP 请求。

10. 完成评论功能

经过以上步骤的实现，即可完成 Spring Boot + Vue 系统的评论功能。用户可以在前端页面上添加评论，后端服务会将评论保存到数据库中，并且提供 API 接口供前端页面查询评论列表等操作。

注意： 这只是一个简单的示例，实际项目中可能需要根据具体需求进行调整和扩展。