public class Comment {
    private Integer id;
    private String content;
    private Integer articleId;
    private Date createTime;
 
    // getter和setter方法
}

@Mapper
public interface CommentMapper {
    List<Comment> findByArticleId(Integer articleId);
    void insert(Comment comment);
}

public interface CommentService {
    List<Comment> findByArticleId(Integer articleId);
    void create(Comment comment);
}

@Service
public class CommentServiceImpl implements CommentService {
    @Autowired
    private CommentMapper commentMapper;
 
    @Override
    public List<Comment> findByArticleId(Integer articleId) {
        return commentMapper.findByArticleId(articleId);
    }
 
    @Override
    public void create(Comment comment) {
        commentMapper.insert(comment);
    }
}

@RestController
@RequestMapping("/api/comment")
public class CommentController {
    @Autowired
    private CommentService commentService;
 
    @GetMapping("/article/{articleId}")
    public Result list(@PathVariable Integer articleId) {
        List<Comment> comments = commentService.findByArticleId(articleId);
        return Result.success("獲取評(píng)論列表成功", comments);
    }
 
    @PostMapping
    public Result create(@RequestBody Comment comment) {
        commentService.create(comment);
        return Result.success("評(píng)論發(fā)表成功");
    }
}

<template>
  <div>
    <h1>{{ article.title }}</h1>
    <p>{{ article.content }}</p>
    <h3>評(píng)論</h3>
    <div v-for="comment in comments" :key="comment.id" class="comment">
      <p>{{ comment.content }}</p>
    </div>
    <h3>發(fā)表評(píng)論</h3>
    <el-input
      type="textarea"
      placeholder="請(qǐng)輸入評(píng)論內(nèi)容"
      v-model="newCommentContent"
      class="comment-input">
    </el-input>
    <el-button type="primary" @click="submitComment">提交評(píng)論</el-button>
  </div>
</template>
 
<script>
import { ref, onMounted } from "vue";
import axios from "axios";
 
export default {
  props: ["id"],
  setup(props) {
    const article = ref({});
    const comments = ref([]);
    const newCommentContent = ref("");
 
    const fetchArticle = async () => {
      const response = await axios.get(`/api/article/${props.id}`);
      article.value = response.data.data;
    };
 
    const fetchComments = async () => {
      const response = await axios.get(`/api/comment/article/${props.id}`);
      comments.value = response.data.data;
    };
 
    const submitComment = async () => {
      await axios.post("/api/comment", {
        content: newCommentContent.value,
        articleId: props.id
      });
      newCommentContent.value = "";
      await fetchComments();
    };
 
    onMounted(async () => {
      await fetchArticle();
      await fetchComments();
    });
 
    return { article, comments, newCommentContent, submitComment };
  },
};
</script>
 
<style scoped>
.comment {
  border-bottom: 1px solid #eee;
  padding: 10px 0;
}
.comment-input {
  margin-bottom: 20px;
}
</style>

import { createRouter, createWebHistory } from "vue-router";
import ArticleList from "../views/ArticleList.vue";
import ArticleDetail from "../views/ArticleDetail.vue";
 
const routes = [
  { path: "/", name: "ArticleList", component: ArticleList },
  { path: "/article/:id", name: "ArticleDetail", component: ArticleDetail, props: true }
];
 
const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
});
 
export default router;