正文

轻松学会：如何用Bootstrap快速从数据库中获取并展示表格数据

/0 浏览量
0406

在这个数字化时代，我们经常需要从数据库中获取数据并将其展示在网页上。Bootstrap 是一个流行的前端框架，它可以帮助我们快速搭建响应式和美观的网页。下面，我将一步步教你如何使用 Bootstrap 从数据库中获取数据并展示成表格。

第一步：设置环境

首先，你需要一个可以运行 PHP 的服务器环境，比如 XAMPP 或 WAMP。然后，安装 Bootstrap。你可以从 Bootstrap 的官方网站下载最新版本的 Bootstrap 框架。

第二步：创建数据库和表

在数据库中创建一个表来存储你的数据。以下是一个简单的 SQL 语句，用于创建一个名为 users 的表：

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(50),
    email VARCHAR(50),
    age INT
);

第三步：编写 PHP 代码连接数据库

在 PHP 中，你需要编写代码来连接到数据库。以下是一个简单的示例：

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "test";

// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);

// 检测连接
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}
?>

第四步：编写 PHP 代码查询数据

接下来，你需要编写代码来从数据库中查询数据。以下是一个简单的示例：

<?php
$sql = "SELECT id, name, email, age FROM users";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    // 输出数据
    while($row = $result->fetch_assoc()) {
        echo "id: " . $row["id"]. " - Name: " . $row["name"]. " - Email: " . $row["email"]. " - Age: " . $row["age"]. "<br>";
    }
} else {
    echo "0 结果";
}
$conn->close();
?>

第五步：使用 Bootstrap 创建表格

现在，你已经有了从数据库中获取的数据。接下来，你可以使用 Bootstrap 创建一个表格来展示这些数据。以下是一个简单的 HTML 示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 表格示例</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>

<div class="container">
    <h2>用户列表</h2>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>邮箱</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <!-- 通过 PHP 动态插入数据 -->
        </tbody>
    </table>
</div>

<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

第六步：将 PHP 代码整合到 HTML 中

最后，你需要将 PHP 代码整合到 HTML 中，以便动态插入数据。以下是一个简单的示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 表格示例</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>

<div class="container">
    <h2>用户列表</h2>
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>邮箱</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
            <?php
            $sql = "SELECT id, name, email, age FROM users";
            $result = $conn->query($sql);

            if ($result->num_rows > 0) {
                // 输出数据
                while($row = $result->fetch_assoc()) {
                    echo "<tr>";
                    echo "<td>" . $row["id"] . "</td>";
                    echo "<td>" . $row["name"] . "</td>";
                    echo "<td>" . $row["email"] . "</td>";
                    echo "<td>" . $row["age"] . "</td>";
                    echo "</tr>";
                }
            } else {
                echo "<tr><td colspan='4'>0 结果</td></tr>";
            }
            ?>
        </tbody>
    </table>
</div>

<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

现在，当你访问这个网页时，你应该能看到一个包含用户数据的表格。这样，你就成功地使用 Bootstrap 从数据库中获取并展示了表格数据。希望这个教程能帮助你！

-- 展开阅读全文 --