13. 开发论坛帖子点赞和评论功能

293 字约 1 分钟读完234 次阅读更新于 2026/5/3


SQL

CREATE TABLE `likes` (
  `id` int NOT NULL AUTO_INCREMENT COMMENT 'ID',
  `user_id` int DEFAULT NULL COMMENT '用户ID',
  `article_id` int DEFAULT NULL COMMENT '帖子ID',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='点赞信息';

开发后端接口

Likes

package com.example.entity;

public class Likes {
    private Integer id;
    private Integer userId;
    private Integer articleId;

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public Integer getUserId() {
        return userId;
    }

    public void setUserId(Integer userId) {
        this.userId = userId;
    }

    public Integer getArticleId() {
        return articleId;
    }

    public void setArticleId(Integer articleId) {
        this.articleId = articleId;
    }
}

LikesMapper

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.mapper.LikesMapper">

    <select id="selectAll" resultType="com.example.entity.Likes">
        select * from `likes`
        <where>
            <if test="userId != null"> and likes.user_id = #{userId}</if>
            <if test="articleId != null"> and likes.article_id = #{articleId}</if>
        </where>
        order by id desc
    </select>

    <insert id="insert" parameterType="com.example.entity.Likes" useGeneratedKeys="true">
        insert into `likes`
        <trim prefix="(" suffix=")" suffixOverrides=",">
            <if test="id != null">id,</if>
            <if test="userId != null">user_id,</if>
            <if test="articleId != null">article_id,</if>
        </trim>
        values
        <trim prefix="(" suffix=")" suffixOverrides=",">
            <if test="id != null">#{id},</if>
            <if test="userId != null">#{userId},</if>
            <if test="articleId != null">#{articleId},</if>
        </trim>
    </insert>

    <update id="updateById" parameterType="com.example.entity.Likes">
        update `likes`
        <set>
            <if test="id != null">
                id = #{id},
            </if>
            <if test="userId != null">
                user_id = #{userId},
            </if>
            <if test="articleId != null">
                article_id = #{articleId},
            </if>
        </set>
        where id = #{id}
    </update>

</mapper>

详情页面

<template>
  <div class="card" style="width: 60%; margin:  0 auto; padding: 50px; position: relative">
    <el-button @click="router.back()" style="position: absolute; top: 10px; left: 10px">返回论坛列表</el-button>
    <div style="position: absolute; top: 10px; right: 10px; width: fit-content; cursor: pointer">
      <img src="@/assets/imgs/赞-1.png" alt="" style="width: 30px" v-if="!data.likes?.id" @click="addLike">
      <img src="@/assets/imgs/赞.png" alt="" style="width: 30px" v-if="data.likes?.id"  @click="removeLike">
    </div>
    <div style="font-size: 28px; font-weight: bold; text-align: center; margin-bottom: 15px">{{ data.article.title }}</div>
    <div style="font-size: 14px; color: #666; text-align: center; margin-bottom: 30px">发布人：{{ data.article.userName }}   <span style="margin-left: 20px">发布时间：{{ data.article.time }}</span></div>
    <div v-html="data.article.content"></div>
  </div>
</template>

<script setup>
import { reactive } from "vue";
import request from "@/utils/request";
import router from "@/router";
import {ElMessage} from "element-plus";

const data = reactive({
  user: JSON.parse(localStorage.getItem('system-user') || '{}'),
  id: router.currentRoute.value.query.id,
  article: {},
  likes: {}
})

request.get('/article/selectById/' + data.id).then(res => {
  data.article = res.data
})

const loadLikes = () => {
  request.get('/likes/selectAll', {
    params: {
      articleId: data.id,
      userId: data.user.id
    }
  }).then(res => {
    data.likes = res.data.length ? res.data[0] : {}
  })
}
loadLikes()


const addLike = () => {
  request.post('/likes/add', { userId : data.user.id, articleId: data.id }).then(res => {
    ElMessage.success('操作成功')
    loadLikes()
  })
}
</script>

评论表

CREATE TABLE `comments` (
  `id` int NOT NULL AUTO_INCREMENT COMMENT 'ID',
  `user_id` int DEFAULT NULL COMMENT '用户ID',
  `article_id` int DEFAULT NULL COMMENT '帖子ID',
  `content` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '内容',
  `time` varchar(255) COLLATE utf8mb4_unicode_ci DEFAULT NULL COMMENT '时间',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=1 DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci COMMENT='评论信息';

后端接口

Comments

CommentsMapper.xml

管理页面

详情页