Bootstrap与MySQL交互如何实现 - 问答

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 文件以显示更新后的用户列表。

0 赞

0 踩