获取“论坛”中的一篇文章以及其评论(评论可以被评论,评论无限嵌套)的数据库实现

写在最前面

作为计算机专业的大一学生,暑假和小伙伴们一起做一个音乐论坛,其中有一个功能是用户查看文章详情,需要展示文章内容、评论(评论能够被评论)、点赞数、评论数等信息。这就需要后端从数据库中拿取上述信息,并有json数据格式传到前端,再让前端解析json,最终展示到页面。

第一次写小项目(里面可能会有许多在大牛们看来很可笑的地方,希望大牛们可以指出来),有很多地方都没考虑性能问题,只是单纯的实现功能而已;目前论坛系统还未完成,写这篇文章一是为了记录一下自己是如何实现一些功能的;二来是为了听取大家的想法,改进自己的实现一些功能的方法细节,从而提升自己的能力。

准备工作

为了能让大家看懂标题所说的功能实现过程,我可能需要花一些时间展示一下别的东西:

数据库

user表:

字段 类型 备注
userid varchar 用户ID,用用户的注册时的邮箱作为userid,主键
username varchar 用户昵称
password varchar 用户密码
imageid int 用户头像id,通过uuid生成一个唯一的id
fans int 粉丝数,或者说是被关注数
description text 个人简介(或者叫个性签名)
sex varchar 性别

text表(文章表)

字段 类型 备注
userid varchar 用户ID,用用户的注册时的邮箱作为userid,主键
textid int 文章id,自增长
time varchar 文章创建时间
likes int 文章被点赞的次数
comment int 文章被评论的次数
collection int 文章被收藏的次数
text mediumtext 文章内容(存储的是html格式的数据)
title text 文章标题
type text 文章类型

text表不仅存储文章,还存储评论。我将评论也看成文章存储在text表中,让它生成唯一的textid。

comment表(评论表)

字段 类型 备注
textid int 被评论文章id
commentid int 评论文章id

一会需要用到数据库信息也就这么多

对数据库的操作我使用的是Spring Jdbc Template

实体类
public class Text extends text1 {
   
    private String userid;
    private Integer textid = null;
    private String time;
    private int likes;
    private int comment;
    private int collection;
    private String text;
    private String title;
    private String type;

    @Override
    public String getUserid() {
   
        return userid;
    }

    @Override
    public void setUserid(String userid) {
   
        this.userid = userid;
    }

    @Override
    public Integer getTextid() {
   
        return textid;
    }

    @Override
    public void setTextid(Integer textid) {
   
        this.textid = textid;
    }

    @Override
    public String getTime() {
   
        return time;
    }

    @Override
    public void setTime(String time) {
   
        this.time = time;
    }

    @Override
    public int getLikes() {
   
        return likes;
    }

    @Override
    public void setLikes(int likes) {
   
        this.likes = likes;
    }

    @Override
    public int getComment() {
   
        return comment;
    }

    @Override
    public void setComment(int comment) {
   
        this.comment = comment;
    }

    @Override
    public int getCollection() {
   
        return collection;
    }

    @Override
    public void setCollection(int collection) {
   
        this.collection = collection;
    }

    @Override
    public String getText() {
   
        return text;
    }

    @Override
    public void setText(String text) {
   
        this.text = text;
    }

    @Override
    public String getTitle() {
   
        return title;
    }

    @Override
    public void setTitle(String title) {
   
        this.title = title;
    }

    @Override
    public String getType() {
   
        return type;
    }

    @Override
    
  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
以下是一个简单的示例,演示如何使用Spring Boot和Vue.js实现嵌套评论功能: 后端代码 ```java @RestController @RequestMapping("/comments") public class CommentController { @Autowired private CommentService commentService; @PostMapping public Comment addComment(@RequestBody Comment comment) { return commentService.addComment(comment); } @GetMapping("/{id}") public List<Comment> getComments(@PathVariable Long id) { return commentService.getCommentsByPostId(id); } } ``` ```java @Service public class CommentService { @Autowired private CommentRepository commentRepository; public Comment addComment(Comment comment) { return commentRepository.save(comment); } public List<Comment> getCommentsByPostId(Long postId) { return commentRepository.findByPostIdOrderByCreatedAtDesc(postId); } } ``` ```java @Repository public interface CommentRepository extends JpaRepository<Comment, Long> { List<Comment> findByPostIdOrderByCreatedAtDesc(Long postId); } ``` 前端代码 ```vue <template> <div> <h2>Comments</h2> <div v-for="comment in comments" :key="comment.id"> <p>{{ comment.content }}</p> <button @click="showReplyForm(comment.id)">Reply</button> <div v-if="comment.id === selectedCommentId"> <form @submit.prevent="addComment"> <textarea v-model="replyContent"></textarea> <button type="submit">Submit</button> </form> </div> <div v-for="reply in comment.replies" :key="reply.id"> <p>{{ reply.content }}</p> <button @click="showReplyForm(reply.id)">Reply</button> <div v-if="reply.id === selectedCommentId"> <form @submit.prevent="addComment"> <textarea v-model="replyContent"></textarea> <button type="submit">Submit</button> </form> </div> </div> </div> </div> </template> <script> import axios from 'axios'; export default { data() { return { comments: [], selectedCommentId: null, replyContent: '', }; }, created() { this.loadComments(); }, methods: { loadComments() { axios.get('/comments/1') .then(response => { this.comments = response.data; }); }, showReplyForm(commentId) { this.selectedCommentId = commentId; }, addComment() { const comment = { postId: 1, content: this.replyContent, parentId: this.selectedCommentId, }; axios.post('/comments', comment) .then(response => { this.loadComments(); }); }, }, }; </script> ``` 在这个示例,我们使用了一个简单的评论模型,包括ID、内容、创建时间、所属帖子ID和父评论ID等字段。在后端代码,我们使用Spring Boot框架实现了一个RESTful API,用于添加评论获取评论列表。在前端代码,我们使用了Vue.js框架和axios库,实现了一个简单的评论列表和评论框。当用户点击回复按钮时,前端会展示一个评论框,用户可以输入回复内容并提交,提交后前端会调用后端API将评论保存到数据库,并重新加载评论列表展示在页面。 当评论有父评论时,我们在前端也会展示出来,形成嵌套评论的效果。在展示评论时,我们通过判断评论的父评论ID来决定是否展示回复框。如果父评论ID和当前评论的ID相等,就展示回复框,否则就不展示。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值