構建簡單的 PHP 用戶管理後台：從 MySQL 讀取用戶列表渲染表格，每行提供刪除按鈕，點擊發送 AJAX 請求刪除並刷新列表。採用 PDO 預處理語句防注入。

數據庫準備

CREATE DATABASE user_demo CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
USE user_demo;

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) NOT NULL UNIQUE,
    email VARCHAR(100),
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB;

INSERT INTO users (username, email) VALUES 
('張三', 'zhangsan@example.com'),
('李四', 'lisi@example.com'),
('王五', 'wangwu@example.com');

目錄結構

user-admin/
├── config.php          # 數據庫配置
├── index.php           # 用戶列表頁
├── api/
│   └── delete_user.php # 刪除接口
└── assets/
    └── app.js          # 前端交互邏輯

核心代碼

1. config.php - 數據庫連接 (PDO)

 PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
    PDO::ATTR_EMULATE_PREPARES   => false,
];

try {
    $pdo = new PDO($dsn, $user, $pass, $options);
} catch (PDOException $e) {
    throw new PDOException($e->getMessage(), (int)$e->getCode());
}

2. index.php - 用戶列表渲染

query("SELECT id, username, email, created_at FROM users ORDER BY id DESC");
$users = $stmt->fetchAll();
?>



    
    
    


    
用戶管理
    

    

        

            
ID
用戶名
郵箱
創建時間
操作
        
        

            
            

                

                

                

                

                

                    刪除
                
            
            
        
    
    

3. api/delete_user.php - 刪除接口

 false, 'message' => 'Method not allowed']);
    exit;
}

$id = filter_input(INPUT_POST, 'id', FILTER_VALIDATE_INT);
if (!$id) {
    echo json_encode(['success' => false, 'message' => 'Invalid ID']);
    exit;
}

try {
    $stmt = $pdo->prepare("DELETE FROM users WHERE id = ?");
    $stmt->execute([$id]);
    
    if ($stmt->rowCount() > 0) {
        echo json_encode(['success' => true, 'message' => '刪除成功']);
    } else {
        echo json_encode(['success' => false, 'message' => '用戶不存在']);
    }
} catch (PDOException $e) {
    http_response_code(500);
    echo json_encode(['success' => false, 'message' => '服務器錯誤']);
}

4. assets/app.js - 前端交互

// assets/app.js
document.addEventListener('DOMContentLoaded', () => {
    const tableBody = document.getElementById('user-table-body');
    const msgDiv = document.getElementById('message');
    
    tableBody.addEventListener('click', async (e) => {
        if (!e.target.classList.contains('btn-delete')) return;
        
        const btn = e.target;
        const id = btn.dataset.id;
        const row = btn.closest('tr');
        
        if (!confirm(`確定刪除用戶 ID: ${id} 嗎？`)) return;
        
        btn.disabled = true;
        btn.textContent = '刪除中...';
        
        try {
            const resp = await fetch('api/delete_user.php', {
                method: 'POST',
                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                body: `id=${id}`
            });
            const data = await resp.json();
            
            if (data.success) {
                row.remove();
                showMessage(data.message, 'success');
            } else {
                showMessage(data.message, 'error');
            }
        } catch (err) {
            showMessage('網絡錯誤，請重試', 'error');
        } finally {
            btn.disabled = false;
            btn.textContent = '刪除';
        }
    });
    
    function showMessage(text, type) {
        msgDiv.textContent = text;
        msgDiv.style.color = type === 'success' ? '#27ae60' : '#e74c3c';
        setTimeout(() => msgDiv.textContent = '', 3000);
    }
});

關鍵安全點

進階擴展建議

• 分頁：LIMIT ?, ? + 前端分頁組件
• 搜索：WHERE username LIKE ?
• 軟刪除：添加 deleted_at 字段，查詢條件 WHERE deleted_at IS NULL
• 權限控制：Session + RBAC 角色模型
• API 規範：統一響應格式、HTTP 狀態碼、錯誤碼體系

總結

PHP 用戶管理核心流程：PDO 連接 → 預處理查詢列表 → 表格渲染綁定 data-id → AJAX 刪除 → 前端移除行。堅持「參數化查詢 + 輸出轉義 + 最小權限」三原則，即可構建安全可用的基礎後台。