阅读量:0
Bootstrap 是一个用于快速开发响应式网站和 Web 应用程序的前端框架，而 MySQL 是一个关系型数据库管理系统。要实现 Bootstrap 与 MySQL 的交互，通常需要后端编程语言（如 PHP、Python、Node.js 等）来作为桥梁。以下是一个简单的示例，使用 PHP 和 MySQL 实现 Bootstrap 与数据库的交互。
- 创建一个 MySQL 数据库和数据表：
首先，创建一个名为 my_database 的数据库，并在其中创建一个名为 users 的数据表，用于存储用户信息。
CREATE DATABASE my_database; USE my_database; CREATE TABLE users ( id INT AUTO_INCREMENT PRIMARY KEY, username VARCHAR(255) NOT NULL UNIQUE, email VARCHAR(255) NOT NULL UNIQUE, password VARCHAR(255) NOT NULL ); - 创建一个 PHP 文件来处理数据库连接和操作：
创建一个名为 config.php 的文件，用于存储数据库连接信息。
<?php $servername = "localhost"; $username = "your_username"; $password = "your_password"; $dbname = "my_database"; $conn = new mysqli($servername, $username, $password, $dbname); if ($conn->connect_error) { die("Connection failed: " . $conn->connect_error); } ?> 接下来，创建一个名为 functions.php 的文件，用于处理数据库操作。
<?php include 'config.php'; function addUser($username, $email, $password) { global $conn; $password = password_hash($password, PASSWORD_DEFAULT); $stmt = $conn->prepare("INSERT INTO users (username, email, password) VALUES (?, ?, ?)"); $stmt->bind_param("sss", $username, $email, $password); if ($stmt->execute()) { echo "New user added successfully"; } else { echo "Error: " . $stmt->error; } $stmt->close(); } function getUser($id) { global $conn; $stmt = $conn->prepare("SELECT * FROM users WHERE id = ?"); $stmt->bind_param("i", $id); $stmt->execute(); $result = $stmt->get_result(); if ($result->num_rows > 0) { return $result->fetch_assoc(); } else { return null; } } ?> - 在 HTML 文件中使用 Bootstrap 和 PHP：
创建一个名为 index.html 的文件，用于显示用户列表和添加新用户的表单。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Bootstrap MySQL Interaction</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container mt-5"> <h1 class="text-center">User List</h1> <table class="table table-striped"> <thead> <tr> <th>ID</th> <th>Username</th> <th>Email</th> </tr> </thead> <tbody> <?php $users = getUser(1); // 获取第一个用户 if ($users) { echo "<tr>"; echo "<td>" . $users['id'] . "</td>"; echo "<td>" . $users['username'] . "</td>"; echo "<td>" . $users['email'] . "</td>"; echo "</tr>"; } ?> </tbody> </table> <h2 class="text-center mt-3">Add New User</h2> <form action="add_user.php" method="post"> <div class="mb-3"> <label for="username" class="form-label">Username</label> <input type="text" class="form-control" id="username" name="username" required> </div> <div class="mb-3"> <label for="email" class="form-label">Email</label> <input type="email" class="form-control" id="email" name="email" required> </div> <div class="mb-3"> <label for="password" class="form-label">Password</label> <input type="password" class="form-control" id="password" name="password" required> </div> <button type="submit" class="btn btn-primary">Add User</button> </form> </div> <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.min.js"></script> </body> </html> - 创建一个 PHP 文件来处理新用户的添加：
创建一个名为 add_user.php 的文件，用于处理新用户的添加操作。
<?php include 'config.php'; include 'functions.php'; if ($_SERVER["REQUEST_METHOD"] == "POST") { $username = $_POST['username']; $email = $_POST['email']; $password = $_POST['password']; addUser($username, $email, $password); header("Location: index.html"); exit(); } ?> 现在，当用户提交表单时，add_user.php 文件将处理新用户的添加操作，并将结果重定向回 index.html 文件以显示更新后的用户列表。
