PHP+MySQL 实战：从零搭建员工管理系统 CRUD 全流程详解

前言

在 Web 开发领域，CRUD（创建、读取、更新、删除）作为数据交互的核心操作，是每个开发者必须掌握的基础技能。无论是企业级应用还是小型管理系统，CRUD 都是构建数据交互功能的 “骨架”。而 PHP 作为经典的服务器端脚本语言，结合 MySQL 数据库，因其简单易用、部署灵活的特点，成为快速开发中小型 Web 系统的首选技术栈。本文将以 “员工管理系统” 为案例，带大家从零开始实现一套完整的 CRUD 功能。从数据库设计、环境配置到核心功能编码，全程涵盖实战细节：包括如何通过预处理语句防止 SQL 注入，如何通过输入验证提升数据安全性，如何结合 Bootstrap 和 Font Awesome 优化前端交互体验，以及如何通过面向对象思想封装数据库操作逻辑。无论你是 PHP 初学者想入门实战，还是需要参考 CRUD 标准实现的开发者，本文都将为你提供清晰的技术路径和可直接复用的代码示例，帮助你在实践中掌握 PHP 与 MySQL 的协同开发技巧。

PHP与MySQL实例

CRUD案例

在这里插入图片描述

一、环境准备与数据库设计

1. 数据库表创建语句

首先在 MySQL 中创建employees表，用于存储员工数据：

CREATE TABLE employees (
id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(100) NOT NULL,
address VARCHAR(255) NOT NULL,
salary INT(10) NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

二、核心配置文件

优化数据库连接，启用异常模式和 UTF-8 编码：

1.config.php

<?php
/* 数据库配置常量 */
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', ''); // 请修改为您的数据库密码
define('DB_NAME', 'demo');
define('DB_CHARSET', 'utf8mb4'); // 支持中文和emoji

try {
// 建立MySQLi连接并启用异常模式
$link = new mysqli(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);
if ($link->connect_error) {
throw new mysqli_sql_exception("连接失败: " . $link->connect_error);
}
// 设置字符编码
$link->set_charset(DB_CHARSET);
} catch (mysqli_sql_exception $e) {
// 连接失败时不直接die，让调用者处理
$link = null;
}
?>

2.create_database.php

<?php
// 数据库配置（与config.php保持一致）
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', ''); // 请修改为您的数据库密码
define('DB_NAME', 'demo');
define('DB_CHARSET', 'utf8mb4');

try {
// 连接到MySQL服务器（不指定数据库）
$link = new mysqli(DB_SERVER, DB_USERNAME, DB_PASSWORD);

// 检查连接
if ($link->connect_error) {
throw new Exception("数据库服务器连接失败: " . $link->connect_error);
}

// 1. 创建数据库（如果已存在）
$sql = "CREATE DATABASE IF NOT EXISTS " . DB_NAME;
if (!$link->query($sql)) {
throw new Exception("创建数据库失败: " . $link->error);
}

// 2. 选择数据库
if (!$link->select_db(DB_NAME)) {
throw new Exception("选择数据库失败: " . $link->error);
}

// 3. 创建员工表（如果不存在）
$sql = "CREATE TABLE IF NOT EXISTS employees (
id INT NOT NULL PRIMARY KEY AUTO_INCREMENT,
name VARCHAR(100) NOT NULL,
address VARCHAR(255) NOT NULL,
salary INT(10) NOT NULL,
created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=" . DB_CHARSET;

if (!$link->query($sql)) {
throw new Exception("创建表失败: " . $link->error);
}

// 操作成功
$msg = "数据库和表创建成功！";
$link->close();
} catch (Exception $e) {
$msg = "操作失败: " . $e->getMessage();
}

// 重定向回首页并显示消息
header("location: index.php?msg=" . urlencode($msg));
exit();
?>

三、CRUD 核心功能实现

1. 首页数据列表（index.php）

展示员工列表，提供新增、查看、编辑、删除入口：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>员工管理系统</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
:root {
—primary–color: #2563eb;
—secondary–color: #4f46e5;
—accent–color: #f59e0b;
—light–color: #f3f4f6;
—dark–color: #1f2937;
}

body {
font–family: 'Segoe UI', Tahoma, Geneva, Verdana, sans–serif;
background–color: #f8fafc;
color: var(—dark–color);
line–height: 1.6;
min–height: 100vh;
display: flex;
flex–direction: column;
}

.navbar {
background–color: white;
box–shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}

.navbar:hover {
box–shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.navbar–brand {
font–weight: 700;
color: var(—primary–color);
font–size: 1.5rem;
display: flex;
align–items: center;
gap: 8px;
}

.navbar–brand i {
font–size: 1.8rem;
}

.container {
max–width: 1200px;
margin: 0 auto;
padding: 2rem 1rem;
flex: 1;
}

.page–header {
margin–bottom: 2rem;
padding–bottom: 1rem;
border–bottom: 1px solid #e5e7eb;
display: flex;
flex–wrap: wrap;
justify–content: space–between;
align–items: center;
}

.page–header h2 {
margin: 0;
font–weight: 700;
color: var(—dark–color);
position: relative;
padding–bottom: 0.5rem;
}

.page–header h2::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 3px;
background–color: var(—primary–color);
}

.btn {
transition: all 0.3s ease;
font–weight: 500;
padding: 0.5rem 1.25rem;
border–radius: 6px;
display: inline–flex;
align–items: center;
gap: 6px;
}

.btn–warning {
background–color: var(—accent–color);
border–color: var(—accent–color);
color: white;
}

.btn–warning:hover {
background–color: #d97706;
border–color: #d97706;
transform: translateY(–2px);
box–shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.btn–success {
background–color: #10b981;
border–color: #10b981;
color: white;
}

.btn–success:hover {
background–color: #059669;
border–color: #059669;
transform: translateY(–2px);
box–shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.table {
background–color: white;
border–radius: 8px;
overflow: hidden;
box–shadow: 0 4px 6px –1px rgba(0, 0, 0, 0.1), 0 2px 4px –1px rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
}

.table:hover {
box–shadow: 0 10px 15px –3px rgba(0, 0, 0, 0.1), 0 4px 6px –2px rgba(0, 0, 0, 0.05);
}

.table thead {
background–color: var(—light–color);
}

.table th, .table td {
padding: 1rem;
vertical–align: middle;
}

.table th {
font–weight: 600;
color: var(—dark–color);
border–bottom: 2px solid #e5e7eb;
}

.table tr {
transition: background–color 0.2s ease;
}

.table tr:hover {
background–color: rgba(37, 99, 235, 0.03);
}

.table tr td:last–child {
white–space: nowrap;
}

.table a {
color: #6b7280;
margin–right: 15px;
transition: all 0.2s ease;
padding: 4px 8px;
border–radius: 4px;
}

.table a:hover {
text–decoration: none;
transform: translateY(–2px);
}

.table a[title="查看"]:hover {
color: var(—primary–color);
background–color: rgba(37, 99, 235, 0.1);
}

.table a[title="编辑"]:hover {
color: #10b981;
background–color: rgba(16, 185, 129, 0.1);
}

.table a[title="删除"]:hover {
color: #ef4444;
background–color: rgba(239, 68, 68, 0.1);
}

.alert {
border–radius: 8px;
padding: 1rem;
margin–bottom: 1.5rem;
border: none;
box–shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
transition: all 0.3s ease;
}

.alert:hover {
box–shadow: 0 4px 6px –1px rgba(0, 0, 0, 0.1), 0 2px 4px –1px rgba(0, 0, 0, 0.06);
}

.alert–success {
background–color: rgba(16, 185, 129, 0.1);
color: #059669;
}

.alert–danger {
background–color: rgba(239, 68, 68, 0.1);
color: #dc2626;
}

.alert–info {
background–color: rgba(37, 99, 235, 0.1);
color: var(—primary–color);
}

@media (max–width: 768px) {
.page–header {
flex–direction: column;
align–items: flex–start;
gap: 1rem;
}

.page–header .btn–group {
width: 100%;
display: flex;
gap: 0.5rem;
}

.page–header .btn {
flex: 1;
justify–content: center;
}

.table–responsive {
overflow–x: auto;
}
}

.empty–state {
text–align: center;
padding: 3rem 1rem;
background–color: white;
border–radius: 8px;
box–shadow: 0 4px 6px –1px rgba(0, 0, 0, 0.1);
color: #6b7280;
}

.empty–state i {
font–size: 3rem;
margin–bottom: 1rem;
color: #d1d5db;
}

footer {
text–align: center;
padding: 2rem 1rem;
margin–top: 3rem;
color: #6b7280;
border–top: 1px solid #e5e7eb;
}

.loading {
display: inline–block;
width: 20px;
height: 20px;
border: 3px solid rgba(255,255,255,.3);
border–radius: 50%;
border–top–color: white;
animation: spin 1s ease–in–out infinite;
}

@keyframes spin {
to { transform: rotate(360deg); }
}
</style>
</head>
<body>
<!— 导航栏 —>
<nav class="navbar navbar-expand-lg">
<div class="container">
<a class="navbar-brand" href="#">
<i class="fas fa-users"></i>
员工管理系统
</a>
<button class="navbar-toggler" type="button" data–bs–toggle="collapse" data–bs bs–target="navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav-nav ms-auto">
<li class="nav-item">
<a class="nav-link active" href="#" aria–current="page">员工列表</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">系统设置</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">帮助中心</a>
</li>
</ul>
</div>
</div>
</nav>

<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<h2>员工列表</h2>
<div class="btn-group">
<a href="create_database.php" class="btn btn-warning">
<i class="fas fa-database"></i> 创建数据库和表
</a>
<a href="create.php" class="btn btn-success">
<i class="fas fa-plus"></i> 添加新员工
</a>
</div>
</div>

<?php
// 错误报告设置 – 生产环境应关闭
// error_reporting(E_ALL);
// ini_set('display_errors', 1);

// 数据库操作类
class EmployeeDB {
private $conn;
private $dbHost;
private $dbUser;
private $dbPass;
private $dbName;
private $dbCharset;

public function __construct($host, $user, $pass, $name, $charset = 'utf8mb4') {
$this->dbHost = $host;
$this->dbUser = $user;
$this->dbPass = $pass;
$this->dbName = $name;
$this->dbCharset = $charset;
}

// 连接到数据库服务器
public function connectToServer() {
try {
$conn = new mysqli($this->dbHost, $this->dbUser, $this->dbPass);

if ($conn->connect_error) {
throw new Exception("数据库服务器连接失败: " . $conn->connect_error);
}

return $conn;
} catch (Exception $e) {
throw $e;
}
}

// 连接到指定数据库
public function connect() {
try {
$this->conn = new mysqli($this->dbHost, $this->dbUser, $this->dbPass, $this->dbName);

if ($this->conn->connect_error) {
throw new Exception("数据库连接失败: " . $this->conn->connect_error);
}

$this->conn->set_charset($this->dbCharset);
return $this->conn;
} catch (Exception $e) {
throw $e;
}
}

// 检查数据库是否存在
public function databaseExists() {
try {
$serverConn = $this->connectToServer();
$dbName = $serverConn->real_escape_string($this->dbName);

$result = $serverConn->query("SELECT SCHEMA_NAME FROM INFORMATION_SCHEMA.SCHEMATA WHERE SCHEMA_NAME = '$dbName'");
$exists = $result->num_rows > 0;

$serverConn->close();
return $exists;
} catch (Exception $e) {
throw $e;
}
}

// 获取所有员工
public function getAllEmployees() {
try {
$this->connect();
$sql = "SELECT * FROM employees ORDER BY id DESC";
$result = $this->conn->query($sql);

$employees = [];
if ($result->num_rows > 0) {
while ($row = $result->fetch_assoc()) {
$employees[] = $row;
}
}

$result->free();
$this->close();
return $employees;
} catch (Exception $e) {
$this->close();
throw $e;
}
}

// 关闭连接
public function close() {
if ($this->conn) {
$this->conn->close();
}
}
}

// 主程序逻辑
try {
// 检查配置文件是否存在
if (!file_exists('config.php')) {
throw new Exception("配置文件 config.php 不存在，请先创建配置文件。");
}

// 引入配置文件
require_once 'config.php';

// 验证配置是否完整
$requiredConfig = ['DB_SERVER', 'DB_USERNAME', 'DB_PASSWORD', 'DB_NAME'];
foreach ($requiredConfig as $config) {
if (!defined($config)) {
throw new Exception("配置文件中缺少必要的参数: $config");
}
}

// 显示操作消息
if (isset($_GET['msg'])) {
// 过滤输入防止XSS攻击
$msg = htmlspecialchars($_GET['msg'], ENT_QUOTES, 'UTF-8');
$alertClass = strpos($msg, '成功') !== false ? 'alert-success' : 'alert-danger';
echo "<div class='alert $alertClass'>$msg</div>";
}

// 初始化数据库连接
$db = new EmployeeDB(DB_SERVER, DB_USERNAME, DB_PASSWORD, DB_NAME);
$dbExists = $db->databaseExists();

if (!$dbExists) {
echo "<div class='alert alert-info'>数据库不存在，请点击上方按钮创建数据库和表</div>";
} else {
// 获取员工列表
$employees = $db->getAllEmployees();

if (!empty($employees)) {
echo "<div class='table-responsive'>";
echo "<table class='table table-bordered'>";
echo "<thead><tr>";
echo "<th>序号</th><th>姓名</th><th>地址</th><th>薪资</th><th>操作</th>";
echo "</tr></thead><tbody>";
foreach ($employees as $row) {
// 输出前转义数据防止XSS攻击
$id = htmlspecialchars($row['id'], ENT_QUOTES, 'UTF-8');
$name = htmlspecialchars($row['name'], ENT_QUOTES, 'UTF-8');
$address = htmlspecialchars($row['address'], ENT_QUOTES, 'UTF-8');
$salary = number_format((float)$row['salary'], 2);

echo "<tr>";
echo "<td>{$id}</td>";
echo "<td>{$name}</td>";
echo "<td>{$address}</td>";
echo "<td>{$salary}</td>";
echo "<td>";
echo "<a href='read.php?id={$id}' title='查看' data-bs-toggle='tooltip'><i class='fas fa-eye'></i></a>";
echo "<a href='update.php?id={$id}' title='编辑' data-bs-toggle='tooltip'><i class='fas fa-pencil'></i></a>";
echo "<a href='delete.php?id={$id}' title='删除' data-bs-toggle='tooltip'><i class='fas fa-trash'></i></a>";
echo "</td>";
echo "</tr>";
}
echo "</tbody></table>";
echo "</div>";
} else {
echo "<div class='empty-state'>";
echo "<i class='fas fa-user-slash'></i>";
echo "<h3>暂无员工记录</h3>";
echo "<p>请点击上方的\\"添加新员工\\"按钮开始添加记录</p>";
echo "</div>";
}
}
} catch (Exception $e) {
echo "<div class='alert alert-danger'>" . htmlspecialchars($e->getMessage(), ENT_QUOTES, 'UTF-8') . "</div>";
}
?>
</div>
</div>
</div>

<!— 页脚 —>
<footer>
<div class="container">
<p>© <?php echo date("Y"); ?> 员工管理系统 – 版权所有</p>
</div>
</footer>

// 添加表格行点击效果
const tableRows = document.querySelectorAll('.table tbody tr');
tableRows.forEach(row => {
row.addEventListener('click', function(e) {
// 如果点击的是操作按钮，则不触发行点击事件
if (!e.target.closest('a')) {
const id = this.querySelector('td:first-child').textContent;
window.location.href = 'read.php?id=' + id;
}
});
});
});
</script>
</body>
</html>

2. 新增员工（create.php）

提供表单录入新员工数据，包含输入验证和预处理插入：

<?php
require_once "config.php";

// 初始化变量和错误信息
$name = $address = $salary = "";
$name_err = $address_err = $salary_err = "";

// 处理表单提交
if ($_SERVER["REQUEST_METHOD"] === "POST") {
// 验证姓名（支持中英文）
$input_name = trim($_POST["name"]);
if (empty($input_name)) {
$name_err = "请输入姓名";
} elseif (!preg_match("/^[a-zA-Z\\s\\x{4e00}-\\x{9fa5}]+$/u", $input_name)) {
$name_err = "姓名只能包含字母、汉字和空格";
} else {
$name = $input_name;
}

// 验证地址
$input_address = trim($_POST["address"]);
if (empty($input_address)) {
$address_err = "请输入地址";
} else {
$address = $input_address;
}

// 验证薪资（正整数）
$input_salary = trim($_POST["salary"]);
if (empty($input_salary)) {
$salary_err = "请输入薪资";
} elseif (!filter_var($input_salary, FILTER_VALIDATE_INT, ["options" => ["min_range" => 1]])) {
$salary_err = "薪资必须是正整数";
} else {
$salary = $input_salary;
}

// 无错误则插入数据库
if (empty($name_err) && empty($address_err) && empty($salary_err)) {
try {
// 预处理插入（防SQL注入）
$sql = "INSERT INTO employees (name, address, salary) VALUES (?, ?, ?)";
$stmt = $link->prepare($sql);
$stmt->bind_param("ssi", $name, $address, $salary); // s=字符串, i=整数

if ($stmt->execute()) {
header("location: index.php?msg=员工添加成功"); // 成功后跳转到列表页并显示消息
exit();
} else {
throw new mysqli_sql_exception("执行失败: " . $stmt->error);
}
} catch (mysqli_sql_exception $e) {
echo "错误: " . $e->getMessage();
} finally {
if (isset($stmt)) $stmt->close();
if (isset($link)) $link->close();
}
}
}
?>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>添加员工 – 员工管理系统</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
:root {
—primary–color: #2563eb;
—secondary–color: #4f46e5;
—accent–color: #f59e0b;
—light–color: #f3f4f6;
—dark–color: #1f2937;
}

.navbar {
background–color: white;
box–shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}

.navbar:hover {
box–shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}

.navbar–brand {
font–weight: 700;
color: var(—primary–color);
font–size: 1.5rem;
display: flex;
align–items: center;
gap: 8px;
}

.navbar–brand i {
font–size: 1.8rem;
}

.container {
max–width: 1200px;
margin: 0 auto;
padding: 2rem 1rem;
flex: 1;
}

.page–header {
margin–bottom: 2rem;
padding–bottom: 1rem;
border–bottom: 1px solid #e5e7eb;
display: flex;
flex–wrap: wrap;
justify–content: space–between;
align–items: center;
}

.page–header h2 {
margin: 0;
font–weight: 700;
color: var(—dark–color);
position: relative;
padding–bottom: 0.5rem;
}

.page–header h2::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 3px;
background–color: var(—primary–color);
}

.btn {
transition: all 0.3s ease;
font–weight: 500;
padding: 0.5rem 1.25rem;
border–radius: 6px;
display: inline–flex;
align–items: center;
gap: 6px;
}

.btn–success {
background–color: #10b981;
border–color: #10b981;
color: white;
}

.btn–success:hover {
background–color: #059669;
border–color: #059669;
transform: translateY(–2px);
box–shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn–secondary {
background–color: #6b7280;
border–color: #6b7280;
color: white;
}

.btn–secondary:hover {
background–color: #4b5563;
border–color: #4b5563;
transform: translateY(–2px);
box–shadow: 0 4px 12px rgba(107, 114, 128, 0.3);
}

.card {
background–color: white;
border–radius: 8px;
box–shadow: 0 4px 6px –1px rgba(0, 0, 0, 0.1), 0 2px 4px –1px rgba(0, 0, 0, 0.06);
padding: 1.5rem;
margin–bottom: 2rem;
}

.form–group {
margin–bottom: 1.5rem;
}

.form–label {
font–weight: 500;
margin–bottom: 0.5rem;
display: block;
color: var(—dark–color);
}

.form–control {
width: 100%;
padding: 0.75rem;
border: 1px solid #d1d5db;
border–radius: 6px;
transition: all 0.2s ease;
}

.form–control:focus {
outline: none;
border–color: var(—primary–color);
box–shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.has–error .form–control {
border–color: #ef4444;
}

.help–block {
color: #ef4444;
font–size: 0.875rem;
margin–top: 0.25rem;
}

footer {
text–align: center;
padding: 2rem 1rem;
margin–top: 3rem;
color: #6b7280;
border–top: 1px solid #e5e7eb;
}

@media (max–width: 768px) {
.page–header {
flex–direction: column;
align–items: flex–start;
gap: 1rem;
}

.btn–group {
width: 100%;
display: flex;
gap: 0.5rem;
}

.btn {
flex: 1;
justify–content: center;
}
}
</style>
</head>
<body>
<!— 导航栏 —>
<nav class="navbar navbar-expand-lg">
<div class="container">
<a class="navbar-brand" href="index.php">
<i class="fas fa-users"></i>
员工管理系统
</a>
<button class="navbar-toggler" type="button" data–bs–toggle="collapse" data–bs–target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="index.php">员工列表</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#" aria–current="page">添加员工</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">系统设置</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">帮助中心</a>
</li>
</ul>
</div>
</div>
</nav>

<div class="container">
<div class="row">
<div class="col-md-12">
<div class="page-header">
<h2>添加员工记录</h2>
<div class="btn-group">
<a href="index.php" class="btn btn-secondary">
<i class="fas fa-arrow-left"></i> 返回列表
</a>
</div>
</div>

<div class="card">
<p>请填写表单并提交以添加员工信息</p>
<form action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>" method="post">
<div class="form-group <?php echo !empty($name_err) ? 'has-error' : ''; ?>">
<label class="form-label" for="name">姓名</label>
<input type="text" id="name" name="name" class="form-control"
value="<?php echo htmlspecialchars($name); ?>">
<span class="help-block"><?php echo $name_err; ?></span>
</div>

<!— 页脚 —>
<footer>
<div class="container">
<p>© <?php echo date("Y"); ?> 员工管理系统 – 版权所有</p>
</div>
</footer>

// 表单验证增强 – 实时检查必填项
const form = document.querySelector('form');
form.addEventListener('submit', function(e) {
let isValid = true;

// 简单验证示例
if (!document.getElementById('name').value.trim()) {
isValid = false;
}

if (!isValid) {
e.preventDefault();
// 可以添加更友好的错误提示动画
document.querySelector('.has-error')?.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
});
});
</script>
</body>
</html>

3. 查看员工详情（read.php）

根据 ID 查询并展示单个员工的详细信息：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>查看员工详情</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
:root {
—primary–color: #2563eb;
—secondary–color: #4f46e5;
—accent–color: #f59e0b;
—light–color: #f3f4f6;
—dark–color: #1f2937;
}

/* 导航栏样式 */
.navbar {
background–color: white;
box–shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.navbar–brand {
font–weight: 700;
color: var(—primary–color);
font–size: 1.5rem;
display: flex;
align–items: center;
gap: 8px;
}

.navbar–brand i {
font–size: 1.8rem;
}

/* 主容器样式 */
.container {
max–width: 800px;
margin: 0 auto;
padding: 2rem 1rem;
flex: 1;
}

/* 页面头部样式 */
.page–header {
margin–bottom: 2rem;
padding–bottom: 1rem;
border–bottom: 1px solid #e5e7eb;
position: relative;
}

.page–header h1 {
margin: 0;
font–weight: 700;
color: var(—dark–color);
position: relative;
padding–bottom: 0.5rem;
}

.page–header h1::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 50px;
height: 3px;
background–color: var(—primary–color);
}

/* 详情卡片样式 */
.detail–card {
background–color: white;
border–radius: 10px;
box–shadow: 0 4px 6px –1px rgba(0, 0, 0, 0.1), 0 2px 4px –1px rgba(0, 0, 0, 0.06);
overflow: hidden;
transition: all 0.3s ease;
}

.detail–card:hover {
box–shadow: 0 10px 15px –3px rgba(0, 0, 0, 0.1), 0 4px 6px –2px rgba(0, 0, 0, 0.05);
}

.card–header {
background–color: var(—light–color);
padding: 1.5rem;
border–bottom: 1px solid #e5e7eb;
}

.card–header h2 {
margin: 0;
font–size: 1.5rem;
font–weight: 600;
color: var(—primary–color);
}

.card–body {
padding: 2rem;
}

/* 信息项样式 */
.info–item {
margin–bottom: 1.5rem;
padding–bottom: 1.5rem;
border–bottom: 1px solid #f1f5f9;
display: flex;
align–items: flex–start;
}

.info–item:last–child {
border–bottom: none;
margin–bottom: 0;
padding–bottom: 0;
}

.info–label {
flex: 0 0 120px;
font–weight: 600;
color: #64748b;
display: flex;
align–items: center;
gap: 8px;
}

.info–value {
flex: 1;
padding–left: 1rem;
word–break: break–word;
}

.info–icon {
color: var(—primary–color);
width: 20px;
text–align: center;
}

/* 按钮样式 */
.btn {
transition: all 0.3s ease;
font–weight: 500;
padding: 0.5rem 1.25rem;
border–radius: 6px;
display: inline–flex;
align–items: center;
gap: 6px;
}

.btn–primary {
background–color: var(—primary–color);
border–color: var(—primary–color);
color: white;
}

.btn–primary:hover {
background–color: #1d4ed8;
border–color: #1d4ed8;
transform: translateY(–2px);
box–shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.btn–group {
margin–top: 2rem;
display: flex;
gap: 1rem;
}

.btn–edit {
background–color: #10b981;
border–color: #10b981;
color: white;
}

.btn–edit:hover {
background–color: #059669;
border–color: #059669;
transform: translateY(–2px);
box–shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
}

.btn–delete {
background–color: #ef4444;
border–color: #ef4444;
color: white;
}

.btn–delete:hover {
background–color: #dc2626;
border–color: #dc2626;
transform: translateY(–2px);
box–shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

/* 页脚样式 */
footer {
text–align: center;
padding: 2rem 1rem;
margin–top: 3rem;
color: #6b7280;
border–top: 1px solid #e5e7eb;
}

/* 响应式设计 */
@media (max–width: 576px) {
.info–item {
flex–direction: column;
}

.info–label {
margin–bottom: 0.5rem;
}

.info–value {
padding–left: 0;
padding–left: 28px; /* 与图标对齐 */
}

.btn–group {
flex–direction: column;
}

.btn {
width: 100%;
justify–content: center;
}
}
</style>
</head>
<body>
<!— 导航栏 —>
<nav class="navbar navbar-expand-lg">
<div class="container">
<a class="navbar-brand" href="index.php">
<i class="fas fa-users"></i>
员工管理系统
</a>
<button class="navbar-toggler" type="button" data–bs–toggle="collapse" data–bs–target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nav-link" href="index.php">员工列表</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="#" aria–current="page">员工详情</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">帮助中心</a>
</li>
</ul>
</div>
</div>
</nav>

<div class="detail-card">
<?php
// 验证ID参数
if (!isset($_GET["id"]) || empty(trim($_GET["id"]))) {
header("location: error.php");
exit();
}

require_once "config.php";

$id = trim($_GET["id"]);
$employee = null;

try {
// 检查数据库连接
if ($link->connect_error) {
throw new mysqli_sql_exception("数据库连接失败: " . $link->connect_error);
}

// 预处理查询（防注入）
$sql = "SELECT * FROM employees WHERE id = ?";
$stmt = $link->prepare($sql);

if (!$stmt) {
throw new mysqli_sql_exception("预处理语句准备失败: " . $link->error);
}

$stmt->bind_param("i", $id);
$stmt->execute();
$result = $stmt->get_result();

if ($result->num_rows === 1) {
$employee = $result->fetch_assoc(); // 获取员工数据
} else {
header("location: error.php"); // 无匹配记录
exit();
}
} catch (mysqli_sql_exception $e) {
echo "<div class='alert alert-danger'>查询错误: " . htmlspecialchars($e->getMessage(), ENT_QUOTES) . "</div>";
$employee = null;
} finally {
if (isset($stmt) && $stmt) {
$stmt->close();
}
if (isset($link) && $link) {
$link->close();
}
}
?>

<?php if ($employee): ?>
<div class="card-header">
<h2><?php echo htmlspecialchars($employee['name'], ENT_QUOTES); ?> 的详细信息</h2>
</div>
<div class="card-body">
<div class="info-item">
<div class="info-label">
<i class="fas fa-id-card info-icon"></i>
员工ID
</div>
<div class="info-value">
<?php echo htmlspecialchars($employee['id'], ENT_QUOTES); ?>
</div>
</div>

<div class="btn-group">
<a href="index.php" class="btn btn-primary">
<i class="fas fa-arrow-left"></i> 返回列表
</a>
<a href="update.php?id=<?php echo htmlspecialchars($employee['id'], ENT_QUOTES); ?>" class="btn btn-edit">
<i class="fas fa-edit"></i> 编辑信息
</a>
<a href="delete.php?id=<?php echo htmlspecialchars($employee['id'], ENT_QUOTES); ?>" class="btn btn-delete" onclick="return confirm('确定要删除这名员工吗？此操作不可恢复。')">
<i class="fas fa-trash"></i> 删除员工
</a>
</div>
</div>
<?php else: ?>
<div class="card-body">
<div class="alert alert-danger">无法加载员工信息，请稍后重试。</div>
<a href="index.php" class="btn btn-primary">
<i class="fas fa-arrow-left"></i> 返回列表
</a>
</div>
<?php endif; ?>
</div>
</div>
</div>
</div>

// 为卡片添加淡入效果
setTimeout(() => {
document.querySelector('.detail-card').style.opacity = '1';
document.querySelector('.detail-card').style.transform = 'translateY(0)';
}, 100);
});
</script>
</body>
</html>

4. 更新员工信息（update.php）

编辑现有员工数据，包含数据回显和预处理更新：

<?php
require_once "config.php";

$id = $name = $address = $salary = "";
$name_err = $address_err = $salary_err = "";

// 处理表单提交
if ($_SERVER["REQUEST_METHOD"] === "POST") {
if (!isset($_POST["id"]) || empty(trim($_POST["id"]))) {
header("location: error.php");
exit();
}
$id = trim($_POST["id"]);

// 验证姓名
$input_name = trim($_POST["name"]);
if (empty($input_name)) {
$name_err = "请输入姓名";
} elseif (!preg_match("/^[a-zA-Z\\s\\x{4e00}-\\x{9fa5}]+$/u", $input_name)) {
$name_err = "姓名只能包含字母、汉字和空格";
} else {
$name = $input_name;
}

// 验证地址
$input_address = trim($_POST["address"]);
if (empty($input_address)) {
$address_err = "请输入地址";
} else {
$address = $input_address;
}

// 验证薪资
$input_salary = trim($_POST["salary"]);
if (empty($input_salary)) {
$salary_err = "请输入薪资";
} elseif (!filter_var($input_salary, FILTER_VALIDATE_INT, ["options" => ["min_range" => 1]])) {
$salary_err = "薪资必须是正整数";
} else {
$salary = $input_salary;
}

// 无错误则更新
if (empty($name_err) && empty($address_err) && empty($salary_err)) {
try {
$sql = "UPDATE employees SET name=?, address=?, salary=? WHERE id=?";
$stmt = $link->prepare($sql);
$stmt->bind_param("ssii", $name, $address, $salary, $id);

if ($stmt->execute()) {
header("location: index.php?msg=员工信息更新成功");
exit();
} else {
throw new mysqli_sql_exception("更新失败: " . $stmt->error);
}
} catch (mysqli_sql_exception $e) {
echo "错误: " . $e->getMessage();
} finally {
if (isset($stmt)) $stmt->close();
if (isset($link)) $link->close();
}
}
} else {
// 初始加载时获取员工数据
if (!isset($_GET["id"]) || empty(trim($_GET["id"]))) {
header("location: error.php");
exit();
}
$id = trim($_GET["id"]);

try {
$sql = "SELECT * FROM employees WHERE id = ?";
$stmt = $link->prepare($sql);
$stmt->bind_param("i", $id);
$stmt->execute();
$result = $stmt->get_result();

if ($result->num_rows === 1) {
$row = $result->fetch_assoc();
$name = $row["name"];
$address = $row["address"];
$salary = $row["salary"];
} else {
header("location: error.php");
exit();
}
} catch (mysqli_sql_exception $e) {
echo "查询错误: " . $e->getMessage();
} finally {
if (isset($stmt)) $stmt->close();
if (isset($link)) $link->close();
}
}
?>

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>编辑员工 – 员工管理系统</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
<style>
:root {
—primary–color: #2563eb;
—secondary–color: #4f46e5;
—accent–color: #f59e0b;
—light–color: #f3f4f6;
—dark–color: #1f2937;
}