java

关注公众号 jb51net

关闭
首页 > 软件编程 > java > SpringBoot Vue3实现文章查看与评论

基于SpringBoot和Vue3的博客平台文章详情与评论功能实现

作者:SYBH.

在前面的教程中,我们已经实现了基于Spring Boot和Vue3的发布、编辑、删除文章功能以及文章列表与分页功能。本教程将引导您实现博客平台的文章详情与评论功能,需要的朋友可以参考一下

在前面的教程中,我们已经实现了基于Spring Boot和Vue3的发布、编辑、删除文章功能以及文章列表与分页功能。本教程将引导您实现博客平台的文章详情与评论功能。

整个实现过程可以分为以下几个步骤:

1. 后端Spring Boot实现

我们将使用Spring Boot作为后端框架,并使用MySQL作为数据库。

1.1 创建Comment实体类

在src/main/java/com/example/blog/model目录下,创建一个名为Comment.java的实体类,用于表示评论。

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

1.2 创建CommentMapper接口

src/main/java/com/example/blog/mapper目录下,创建一个名为CommentMapper.java的接口,用于定义与评论相关的数据库操作。

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

1.3 创建CommentService接口及实现

src/main/java/com/example/blog/service目录下,创建一个名为CommentService.java的接口。

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

然后,在src/main/java/com/example/blog/service/impl目录下,创建一个名为CommentServiceImpl.java的实现类。

@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);
    }
}

1.4 创建CommentController类

src/main/java/com/example/blog/controller目录下,创建一个名为CommentController.java的类,用于处理评论相关的HTTP请求。

@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("获取评论列表成功", comments);
    }
 
    @PostMapping
    public Result create(@RequestBody Comment comment) {
        commentService.create(comment);
        return Result.success("评论发表成功");
    }
}

2. 前端Vue3实现

2.1 创建文章详情页面组件

src/views目录下创建一个名为ArticleDetail.vue的新组件,用于展示文章内容及评论列表。

<template>
  <div>
    <h1>{{ article.title }}</h1>
    <p>{{ article.content }}</p>
    <h3>评论</h3>
    <div v-for="comment in comments" :key="comment.id" class="comment">
      <p>{{ comment.content }}</p>
    </div>
    <h3>发表评论</h3>
    <el-input
      type="textarea"
      placeholder="请输入评论内容"
      v-model="newCommentContent"
      class="comment-input">
    </el-input>
    <el-button type="primary" @click="submitComment">提交评论</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>

在这个ArticleDetail.vue组件中,我们展示了文章标题、内容和评论列表。同时,添加了一个用于输入评论内容的<el-input>组件和一个用于提交评论的<el-button>组件。当用户点击提交评论按钮时,触发submitComment方法,向后端发送POST请求创建新评论。

2.2 更新路由配置

为了能够访问文章详情页面,我们需要更新src/router/index.js文件,添加一个新的路由配置:

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;

这样,用户就可以通过访问/article/:id路径来查看文章详情页及评论列表。

至此,您已经完成了基于Spring Boot和Vue3的博客平台文章详情与评论功能实现。在实际项目中,您可能需要根据需求进行更多的优化和扩展。希望本

教程对您有所帮助!

3. 优化与扩展

在实际项目中,您可能需要根据需求进行更多的优化和扩展。以下是一些建议:

3.1 评论分页

为了提高用户体验和性能,您可以为评论列表添加分页功能。这类似于我们之前实现的文章列表分页。首先,修改后端的CommentMapper、CommentService和CommentController类以支持分页查询;然后,在前端的ArticleDetail.vue组件中添加<el-pagination>组件以实现评论分页。

3.2 用户验证与权限控制

您可以为博客平台添加用户验证和权限控制功能,例如仅允许已登录用户发表评论。这需要后端实现JWT验证或其他身份验证方案,同时前端需要实现登录状态检查和用户信息存储。

3.3 评论回复

为了增加用户互动,您可以允许用户回复其他用户的评论。这需要在Comment实体类中添加一个表示父评论ID的字段,并相应地修改CommentMapper、CommentService和CommentController类。在前端,您需要在ArticleDetail.vue组件中为每个评论添加一个回复按钮,并实现回复功能。

3.4 样式与布局优化

为了提高用户体验,您可以对前端页面的样式和布局进行优化。例如,您可以为文章详情页面添加一个侧边栏,显示文章的目录结构;同时,您可以调整评论列表的样式,使其更具可读性。

3.5 其他功能

您可以根据需求添加其他功能,例如文章分类、标签、搜索、点赞等。这些功能需要相应地修改后端的数据模型、服务和控制器类,以及前端的组件和视图。

希望这些建议对您的项目有所帮助!祝您编程愉快!

以上就是基于SpringBoot和Vue3的博客平台文章详情与评论功能实现的详细内容,更多关于SpringBoot Vue3实现文章查看与评论的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文