正文

如何打造一个简单的Java评论点赞系统：从数据库设计到前端展示全解析

/0 浏览量
0606

在互联网时代，评论点赞系统已经成为社交网站、论坛、博客等平台不可或缺的功能。本文将带你从数据库设计到前端展示，一步步打造一个简单的Java评论点赞系统。

一、需求分析

在开始之前，我们需要明确系统的需求。一个简单的评论点赞系统通常包含以下功能：

  1. 用户可以发表评论。
  2. 用户可以对评论进行点赞或取消点赞。
  3. 展示评论及其点赞数。
  4. 管理员可以删除评论。

二、数据库设计

1. 数据库表结构

以下是数据库的简单表结构：

  • users（用户表）：存储用户信息。

    • id：主键，用户ID。
    • username：用户名。
    • password：密码（加密存储）。
    • email：邮箱。

  • comments（评论表）：存储评论信息。

    • id：主键，评论ID。
    • user_id：外键，评论者ID。
    • content：评论内容。
    • created_at：评论时间。

  • likes（点赞表）：存储点赞信息。

    • id：主键，点赞ID。
    • comment_id：外键，评论ID。
    • user_id：外键，点赞者ID。
    • liked_at：点赞时间。

2. SQL语句

以下为创建表的SQL语句：

CREATE TABLE users (
  id INT PRIMARY KEY AUTO_INCREMENT,
  username VARCHAR(50) NOT NULL,
  password VARCHAR(50) NOT NULL,
  email VARCHAR(100) NOT NULL
);

CREATE TABLE comments (
  id INT PRIMARY KEY AUTO_INCREMENT,
  user_id INT NOT NULL,
  content TEXT NOT NULL,
  created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
  FOREIGN KEY (user_id) REFERENCES users(id)
);

CREATE TABLE likes (
  id INT PRIMARY KEY AUTO_INCREMENT,
  comment_id INT NOT NULL,
  user_id INT NOT NULL,
  liked_at DATETIME DEFAULT CURRENT_TIMESTAMP,
  FOREIGN KEY (comment_id) REFERENCES comments(id),
  FOREIGN KEY (user_id) REFERENCES users(id)
);

三、后端开发

1. 环境搭建

  • Java版本：建议使用Java 8及以上版本。
  • 框架：Spring Boot。
  • 数据库：MySQL。

2. 代码实现

以下为后端核心代码实现：

// 用户控制器
@RestController
@RequestMapping("/users")
public class UserController {
  // 省略其他代码...
  
  @PostMapping("/register")
  public ResponseEntity<?> register(@RequestBody User user) {
    // 注册用户
    // 省略其他代码...
  }
  
  @PostMapping("/login")
  public ResponseEntity<?> login(@RequestBody User user) {
    // 登录用户
    // 省略其他代码...
  }
}

// 评论控制器
@RestController
@RequestMapping("/comments")
public class CommentController {
  // 省略其他代码...
  
  @PostMapping
  public ResponseEntity<?> createComment(@RequestBody Comment comment) {
    // 创建评论
    // 省略其他代码...
  }
  
  @GetMapping("/{id}")
  public ResponseEntity<?> getComment(@PathVariable int id) {
    // 获取评论
    // 省略其他代码...
  }
  
  @PostMapping("/{id}/like")
  public ResponseEntity<?> likeComment(@PathVariable int id) {
    // 点赞评论
    // 省略其他代码...
  }
  
  @PostMapping("/{id}/dislike")
  public ResponseEntity<?> dislikeComment(@PathVariable int id) {
    // 取消点赞
    // 省略其他代码...
  }
}

// 点赞控制器
@RestController
@RequestMapping("/likes")
public class LikeController {
  // 省略其他代码...
  
  @PostMapping("/{commentId}")
  public ResponseEntity<?> likeComment(@PathVariable int commentId) {
    // 点赞评论
    // 省略其他代码...
  }
  
  @PostMapping("/{commentId}/dislike")
  public ResponseEntity<?> dislikeComment(@PathVariable int commentId) {
    // 取消点赞
    // 省略其他代码...
  }
}

四、前端开发

1. 环境搭建

  • 前端框架：Vue.js。

2. 代码实现

以下为前端核心代码实现：

<!-- 评论列表 -->
<div v-for="comment in comments" :key="comment.id">
  <div>{{ comment.content }}</div>
  <div>{{ comment.likesCount }} 点赞</div>
  <button @click="likeComment(comment.id)">点赞</button>
  <button @click="dislikeComment(comment.id)">取消点赞</button>
</div>

<!-- 发表评论 -->
<form @submit.prevent="createComment">
  <textarea v-model="newComment.content" placeholder="发表评论"></textarea>
  <button type="submit">发表</button>
</form>

// Vue组件
export default {
  data() {
    return {
      comments: [],
      newComment: {
        content: ''
      }
    };
  },
  methods: {
    async getComments() {
      // 获取评论列表
      // 省略其他代码...
    },
    async createComment() {
      // 创建评论
      // 省略其他代码...
    },
    async likeComment(commentId) {
      // 点赞评论
      // 省略其他代码...
    },
    async dislikeComment(commentId) {
      // 取消点赞
      // 省略其他代码...
    }
  },
  mounted() {
    this.getComments();
  }
};

五、总结

通过以上步骤，我们已经成功打造了一个简单的Java评论点赞系统。当然，这只是一个基础版本，实际项目中还需要考虑更多功能和优化。希望本文能对你有所帮助。

-- 展开阅读全文 --