Bootstrap与MySQL交互如何实现_产品动态_资讯中心

发布时间:2026-04-27 16:09:52

阅读量:2

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 的文件，用于存储数据库连接信息。


$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 的文件，用于处理数据库操作。


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 的文件，用于显示用户列表和添加新用户的表单。

html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap MySQL Interactiontitle>
  <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 Listh1>
    <table class="table table-striped">
      <thead>
        <tr>
          <th>IDth>
          <th>Usernameth>
          <th>Emailth>
        tr>
      thead>
      <tbody>
        ";
          echo "" . $users['id'] . "";
          echo "" . $users['username'] . "";
          echo "" . $users['email'] . "";
          echo "";
        }
        ?>
      tbody>
    table>

    <h2 class="text-center mt-3">Add New Userh2>
    <form action="add_user.php" method="post">
      <div class="mb-3">
        <label for="username" class="form-label">Usernamelabel>
        <input type="text" class="form-control" id="username" name="username" required>
      div>
      <div class="mb-3">
        <label for="email" class="form-label">Emaillabel>
        <input type="email" class="form-control" id="email" name="email" required>
      div>
      <div class="mb-3">
        <label for="password" class="form-label">Passwordlabel>
        <input type="password" class="form-control" id="password" name="password" required>
      div>
      <button type="submit" class="btn btn-primary">Add Userbutton>
    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 的文件，用于处理新用户的添加操作。


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

以上就是关于“Bootstrap与MySQL交互如何实现”的相关介绍，筋斗云是国内较早的云主机应用的服务商，拥有10余年行业经验，提供丰富的云服务器、租用服务器等相关产品服务。云服务器资源弹性伸缩，主机vCPU、内存性能强悍、超高I/O速度、故障秒级恢复；电子化备案，提交快速，专业团队7×24小时服务支持！

简单好用、高性价比云服务器租用链接：https://www.jindouyun.cn/product/cvm