正文

掌握Java实现评论点赞功能：步骤详解与代码示例

/0 浏览量
0609

在Web应用中，评论点赞功能是用户互动的重要部分。以下将详细介绍如何使用Java实现一个简单的评论点赞功能，包括前后端交互、数据库设计以及关键代码示例。

1. 功能概述

评论点赞功能主要包括以下几个部分：

  • 评论发布：用户可以发布评论。
  • 点赞功能：用户可以对评论进行点赞。
  • 点赞统计：展示每个评论的点赞数量。
  • 点赞状态：判断用户是否已经对某个评论进行过点赞。

2. 技术栈

  • 后端：使用Java，结合Spring Boot框架。
  • 数据库：使用MySQL。
  • 前端：使用HTML、CSS和JavaScript。

3. 数据库设计

首先，我们需要设计两个数据库表：comments 和 likes。

3.1 comments 表

字段名 数据类型 描述
id INT 主键
content VARCHAR 评论内容
user_id INT 用户ID
created_at TIMESTAMP 创建时间

3.2 likes 表

字段名 数据类型 描述
id INT 主键
comment_id INT 评论ID
user_id INT 用户ID
liked_at TIMESTAMP 点赞时间

4. 后端实现

4.1 创建Spring Boot项目

  1. 使用Spring Initializr创建一个Spring Boot项目。
  2. 添加依赖：Spring Web、Spring Data JPA、MySQL Driver等。

4.2 实体类

@Entity
@Table(name = "comments")
public class Comment {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String content;
    private Long userId;
    private LocalDateTime createdAt;
}

@Entity
@Table(name = "likes")
public class Like {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    @ManyToOne
    @JoinColumn(name = "comment_id")
    private Comment comment;
    @ManyToOne
    @JoinColumn(name = "user_id")
    private User user;
    private LocalDateTime likedAt;
}

4.3 仓库接口

public interface CommentRepository extends JpaRepository<Comment, Long> {
}

public interface LikeRepository extends JpaRepository<Like, Long> {
}

4.4 服务层

@Service
public class CommentService {
    @Autowired
    private CommentRepository commentRepository;

    @Autowired
    private LikeRepository likeRepository;

    @Transactional
    public Comment createComment(Comment comment) {
        return commentRepository.save(comment);
    }

    @Transactional
    public Comment likeComment(Long commentId, Long userId) {
        Comment comment = commentRepository.findById(commentId).orElse(null);
        if (comment != null) {
            Like like = new Like();
            like.setComment(comment);
            like.setUser(userRepository.findById(userId).orElse(null));
            like.setLikedAt(LocalDateTime.now());
            likeRepository.save(like);
        }
        return comment;
    }
}

4.5 控制器

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

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

    @PostMapping("/{id}/like")
    public Comment likeComment(@PathVariable Long id) {
        return commentService.likeComment(id, userId());
    }
}

5. 前端实现

5.1 HTML

<div class="comment">
    <div class="content">{{ comment.content }}</div>
    <div class="likes-count">{{ comment.likesCount }}</div>
    <button onclick="likeComment('{{ comment.id }}')">Like</button>
</div>

5.2 JavaScript

function likeComment(commentId) {
    fetch(`/comments/${commentId}/like`, {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer ' + token
        }
    })
    .then(response => response.json())
    .then(data => {
        document.querySelector(`.likes-count[comment-id="${commentId}"]`).textContent = data.likesCount;
    });
}

6. 总结

本文详细介绍了使用Java实现评论点赞功能的过程，包括数据库设计、后端实现和前端实现。通过本文，读者可以了解到如何将一个简单的功能完整地实现，并且可以根据实际需求进行调整和优化。

-- 展开阅读全文 --