当前位置：首页 > PHP

php实现评论回复

2026-03-13 12:15:43PHP

实现评论回复功能

在PHP中实现评论回复功能需要结合数据库设计和前端交互。以下是一个完整的实现方案：

数据库设计

创建评论表时需要考虑层级关系：

CREATE TABLE comments (
    id INT AUTO_INCREMENT PRIMARY KEY,
    content TEXT NOT NULL,
    user_id INT NOT NULL,
    parent_id INT DEFAULT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (parent_id) REFERENCES comments(id) ON DELETE CASCADE
);

添加评论

处理表单提交的评论数据：

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $content = htmlspecialchars($_POST['content']);
    $parentId = isset($_POST['parent_id']) ? (int)$_POST['parent_id'] : null;

    $stmt = $pdo->prepare("INSERT INTO comments (content, user_id, parent_id) VALUES (?, ?, ?)");
    $stmt->execute([$content, $_SESSION['user_id'], $parentId]);

    header('Location: '.$_SERVER['PHP_SELF']);
    exit;
}

显示评论

递归方式显示评论及其回复：

function displayComments($parentId = null, $depth = 0) {
    global $pdo;

    $stmt = $pdo->prepare("SELECT * FROM comments WHERE parent_id " . ($parentId ? "= ?" : "IS NULL") . " ORDER BY created_at DESC");
    $parentId ? $stmt->execute([$parentId]) : $stmt->execute();

    while ($comment = $stmt->fetch()) {
        echo '<div class="comment" style="margin-left: ' . ($depth * 30) . 'px">';
        echo '<p>' . htmlspecialchars($comment['content']) . '</p>';
        echo '<button class="reply-btn" data-comment-id="' . $comment['id'] . '">回复</button>';

        // 递归显示回复
        displayComments($comment['id'], $depth + 1);
        echo '</div>';
    }
}

前端交互

使用JavaScript处理回复按钮点击事件：

document.querySelectorAll('.reply-btn').forEach(button => {
    button.addEventListener('click', function() {
        const commentId = this.getAttribute('data-comment-id');
        const form = document.createElement('form');
        form.method = 'post';
        form.innerHTML = `
            <input type="hidden" name="parent_id" value="${commentId}">
            <textarea name="content" required></textarea>
            <button type="submit">提交回复</button>
        `;
        this.parentNode.appendChild(form);
    });
});

样式优化

添加基本CSS样式提升用户体验：

.comment {
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
}
.reply-btn {
    background: #f0f0f0;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
}