如何优雅地将 MySQL 数据在 HTML 网页上展示-php教程-PHP中文网

如何优雅地将 MySQL 数据在 HTML 网页上展示

聖光之護

发布： 2025-10-12 12:20:01

原创

195人浏览过

如何优雅地将 mysql 数据在 html 网页上展示

本文旨在提供一种清晰、高效的方式，将从 MySQL 数据库获取的数据以表格形式呈现在 HTML 网页上。通过使用 PDO 连接数据库，并结合 HTML 表格结构，我们将展示如何提取数据并将其格式化为易于阅读和理解的表格，同时注重代码的可维护性和安全性。

连接数据库并获取数据

首先，我们需要建立与 MySQL 数据库的连接。PHP 的 PDO（PHP Data Objects）扩展提供了一种安全且灵活的方式来连接和操作数据库。以下代码展示了如何使用 PDO 连接到数据库，并执行查询：

<?php
// 数据库连接信息
define('DB_ADR', 'localhost'); // 数据库地址
define('DB_DBN', 'i8127115_wp4'); // 数据库名称
define('DB_USR', ''); // 数据库用户名
define('DB_PWD', ''); // 数据库密码

try {
    // 创建 PDO 实例
    $pdo = new PDO('mysql:host='.DB_ADR.';dbname='.DB_DBN.';charset=UTF8', DB_USR, DB_PWD);
    // 设置错误模式为异常，便于调试
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    // 执行查询
    $stmt = $pdo->query("SELECT info FROM wp_amelia_customer_bookings;");

    // 检查是否成功执行查询
    if ($stmt === false) {
        die("查询失败: " . $pdo->errorInfo()[2]);
    }

} catch(PDOException $e) {
    // 捕获连接或查询过程中发生的异常
    echo "Error: " . $e->getMessage();
    die(); // 终止脚本执行
}
?>

登录后复制

代码解释：

定义数据库连接信息： 使用 define() 函数定义了数据库的地址、名称、用户名和密码。这有助于提高代码的可读性和可维护性。
创建 PDO 实例： new PDO() 创建了一个 PDO 对象，用于连接到 MySQL 数据库。连接字符串包含了数据库地址、数据库名称和字符集。
设置错误模式： $pdo-youjiankuohaophpcnsetAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION) 设置 PDO 的错误模式为异常。这意味着当发生错误时，PDO 将抛出一个异常，这使得错误处理更加方便和可靠。
执行查询： $pdo->query() 方法执行 SQL 查询语句。
错误处理： 增加了错误处理，当查询失败时，会输出错误信息并终止脚本执行。

构建 HTML 表格

接下来，我们需要将从数据库获取的数据以 HTML 表格的形式展示出来。以下代码展示了如何构建 HTML 表格，并将数据填充到表格中：

立即学习“前端免费学习笔记（深入）”；

稿定在线PS

PS软件网页版

查看详情

<?php
// HTML 表格模板
define('TMPL', '<tr><td style="width: 150px; border: 1px solid black;">%s</td></tr>');

echo "<table style='border: solid 1px black;'>";
echo "<tr><th>Id</th></tr>"; // 表头

try {
    // ... (之前的数据库连接代码) ...

    // 循环遍历结果集，并将数据填充到表格中
    foreach($pdo->query("SELECT info FROM wp_amelia_customer_bookings;") as $row) {
        printf(TMPL, htmlspecialchars($row['info'])); // 使用 htmlspecialchars 防止 XSS 攻击
    }

} catch(PDOException $e) {
    // ... (之前的错误处理代码) ...
}

echo "</table>";
?>

登录后复制

代码解释：

定义 HTML 表格模板： 使用 define() 函数定义了一个 HTML 表格行的模板。这使得代码更加清晰和易于维护。
输出 HTML 表格头部： 使用 echo 语句输出 HTML 表格的头部，包括 <table> 标签和表头 <tr><th>。
循环遍历结果集： foreach 循环遍历从数据库查询返回的结果集。
填充表格数据： printf(TMPL, $row['title']) 使用 HTML 表格模板将每一行数据填充到表格中。$row['title'] 包含了从数据库查询返回的 title 字段的值。
使用 htmlspecialchars 函数： htmlspecialchars() 函数用于转义 HTML 特殊字符，防止 XSS（跨站脚本攻击）攻击。这是一个重要的安全措施，可以保护你的网站免受恶意用户的攻击。

完整代码示例

将上述两部分代码合并，即可得到完整的代码示例：

<!DOCTYPE html>
<html>
<head>
<title>MySQL 数据展示</title>
</head>
<body>

<table style='border: solid 1px black;'>
<tr><th>Id</th></tr>
<?php
define('DB_ADR', 'localhost');
define('DB_DBN', 'i8127115_wp4');
define('DB_USR', '');
define('DB_PWD', '');
define('TMPL', '<tr><td style="width: 150px; border: 1px solid black;">%s</td></tr>');

try {
    $pdo = new \PDO('mysql:host='.DB_ADR.';dbname='.DB_DBN.';charset=UTF8', DB_USR, DB_PWD);
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

    foreach($pdo->query("SELECT info FROM wp_amelia_customer_bookings;") as $row) {
        print sprintf(TMPL, htmlspecialchars($row['info']));
    }
} catch(PDOException $e) {
    echo "Error: " . $e->getMessage();
}
?>
</table>

</body>
</html>

登录后复制

注意事项和总结

安全性： 请务必注意数据库连接信息的安全性，不要将用户名和密码硬编码在代码中，而是应该从配置文件或环境变量中读取。同时，使用 htmlspecialchars() 函数转义 HTML 特殊字符，防止 XSS 攻击。
错误处理： 良好的错误处理机制可以帮助你快速定位和解决问题。在代码中添加适当的错误处理逻辑，例如使用 try-catch 块捕获异常，并记录错误信息。
性能优化： 对于大量数据的查询，可以考虑使用分页或其他性能优化技术，以提高网页的加载速度。
代码可读性： 使用有意义的变量名，添加注释，并遵循良好的代码风格，可以提高代码的可读性和可维护性。