博客点赞点踩系统计数异常及数据库重复数据问题求助

问题根源分析 #

1. 数据库rating_info表未设置唯一约束，允许同一user_id+blog_id重复插入记录，导致计数统计失真
2. 后端处理逻辑仅做插入操作，切换评分时未覆盖旧记录，数据库中同时存在同一用户的like/dislike数据
3. 前端计数更新依赖本地累加，未同步后端真实统计结果

第一步：修复数据库约束 #

给rating_info表添加复合唯一索引，从根源避免重复条目：

ALTER TABLE rating_info ADD UNIQUE INDEX idx_user_blog (user_id, blog_id);

第二步：修改后端server.php逻辑 #

改用MySQL的INSERT ... ON DUPLICATE KEY UPDATE实现「存在则更新，不存在则插入」的UPSERT操作，并返回最新计数：

<?php
// 数据库连接配置
$conn = mysqli_connect('localhost', '你的用户名', '你的密码', 'ows');
if (!$conn) die('数据库连接失败');

// 接收请求参数
$blog_id = intval($_POST['blog_id']);
$user_id = 1; // 测试固定值
$rating_action = $_POST['rating_action'];

// UPSERT操作：更新或插入评分记录
$sql = "INSERT INTO rating_info (user_id, blog_id, rating_action) 
        VALUES (?, ?, ?) 
        ON DUPLICATE KEY UPDATE rating_action = ?";
$stmt = mysqli_prepare($conn, $sql);
mysqli_stmt_bind_param($stmt, "iiss", $user_id, $blog_id, $rating_action, $rating_action);
mysqli_stmt_execute($stmt);

// 获取最新的点赞/点踩计数
$like_res = mysqli_query($conn, "SELECT COUNT(*) FROM rating_info WHERE blog_id = $blog_id AND rating_action = 'like'");
$like_count = mysqli_fetch_row($like_res)[0];

$dislike_res = mysqli_query($conn, "SELECT COUNT(*) FROM rating_info WHERE blog_id = $blog_id AND rating_action = 'dislike'");
$dislike_count = mysqli_fetch_row($dislike_res)[0];

// 返回JSON格式结果
echo json_encode([
    'like_count' => $like_count,
    'dislike_count' => $dislike_count,
    'current_action' => $rating_action
]);

// 关闭连接
mysqli_close($conn);
?>

第三步：修正前端script.js逻辑 #

取消本地计数累加，完全依赖后端返回的真实数据更新页面，同时重置按钮状态：

$(document).on('click', '.like-btn, .dislike-btn', function() {
    const $btn = $(this);
    const blogId = $btn.data('blog-id');
    const action = $btn.hasClass('like-btn') ? 'like' : 'dislike';

    // 禁用按钮防止重复提交
    $btn.prop('disabled', true);

    $.ajax({
        url: 'server.php',
        type: 'POST',
        data: {blog_id: blogId, rating_action: action},
        dataType: 'json',
        success: function(res) {
            // 更新计数显示
            $(`.like-count[data-blog-id="${blogId}"]`).text(res.like_count);
            $(`.dislike-count[data-blog-id="${blogId}"]`).text(res.dislike_count);

            // 重置按钮激活状态
            $(`.like-btn[data-blog-id="${blogId}"]`).removeClass('active');
            $(`.dislike-btn[data-blog-id="${blogId}"]`).removeClass('active');
            
            // 设置当前激活按钮样式
            if (res.current_action === 'like') {
                $(`.like-btn[data-blog-id="${blogId}"]`).addClass('active');
            } else {
                $(`.dislike-btn[data-blog-id="${blogId}"]`).addClass('active');
            }
        },
        complete: function() {
            // 重新启用按钮
            $btn.prop('disabled', false);
        }
    });
});

第四步：同步HTML与CSS结构 #

确保HTML元素带有正确的data-blog-id属性，CSS定义激活状态样式：

<!-- HTML示例 -->
<div class="rating-group" data-blog-id="1">
    <button class="like-btn" data-blog-id="1">👍</button>
    <span class="like-count" data-blog-id="1">0</span>
    <button class="dislike-btn" data-blog-id="1">👎</button>
    <span class="dislike-count" data-blog-id="1">0</span>
</div>

/* CSS示例 */
.like-btn, .dislike-btn {
    color: #fff;
    border: none;
    background: transparent;
    cursor: pointer;
}
.like-btn.active, .dislike-btn.active {
    color: #999; /* 灰色激活状态 */
    cursor: default;
}

内容的提问来源于stack exchange，提问作者user21718837