正文

掌握Bootstrap轻松实现数据库保存与获取操作：新手教程+实战案例

/0 浏览量
0406

前言

Bootstrap 是一个流行的前端框架，它可以帮助开发者快速构建响应式网站。在许多应用中，我们需要将数据保存到数据库中，或者从数据库中获取数据。本文将介绍如何使用 Bootstrap 结合 JavaScript 和数据库（如 MySQL）来实现数据的保存与获取操作，非常适合新手学习。

一、准备工作

在开始之前，请确保你已经：

  1. 安装了 Bootstrap。
  2. 了解基本的 HTML、CSS 和 JavaScript。
  3. 安装了 MySQL 数据库。

二、创建数据库和表

首先，我们需要在 MySQL 数据库中创建一个表来存储数据。以下是一个简单的 SQL 语句，用于创建一个名为 users 的表：

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

三、Bootstrap 表单设计

接下来，我们使用 Bootstrap 创建一个简单的表单，用于收集用户数据。以下是一个 HTML 示例：

<div class="container">
  <h2>用户注册</h2>
  <form id="userForm">
    <div class="form-group">
      <label for="name">姓名：</label>
      <input type="text" class="form-control" id="name" required>
    </div>
    <div class="form-group">
      <label for="email">邮箱：</label>
      <input type="email" class="form-control" id="email" required>
    </div>
    <button type="submit" class="btn btn-primary">提交</button>
  </form>
</div>

四、JavaScript 数据处理

现在，我们需要使用 JavaScript 来处理表单数据，并将其保存到数据库中。以下是一个简单的 JavaScript 代码示例：

document.getElementById('userForm').addEventListener('submit', function(event) {
  event.preventDefault();
  
  var name = document.getElementById('name').value;
  var email = document.getElementById('email').value;
  
  var xhr = new XMLHttpRequest();
  xhr.open('POST', 'saveUser.php', true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.send('name=' + name + '&email=' + email);
  
  xhr.onload = function() {
    if (xhr.status === 200) {
      alert('数据已保存！');
    } else {
      alert('保存失败！');
    }
  };
});

五、PHP 后端处理

在服务器端，我们需要创建一个 PHP 脚本（例如 saveUser.php）来处理数据库操作。以下是一个简单的 PHP 代码示例：

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

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

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

$name = $_POST['name'];
$email = $_POST['email'];

$sql = "INSERT INTO users (name, email) VALUES ('$name', '$email')";

if ($conn->query($sql) === TRUE) {
    echo "新记录插入成功";
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}

$conn->close();
?>

六、获取数据

要获取数据库中的数据，我们可以创建一个新的表单来显示用户列表。以下是一个 HTML 示例：

<div class="container">
  <h2>用户列表</h2>
  <table class="table table-bordered">
    <thead>
      <tr>
        <th>姓名</th>
        <th>邮箱</th>
      </tr>
    </thead>
    <tbody id="userList">
      <!-- 用户数据将通过 JavaScript 动态插入 -->
    </tbody>
  </table>
</div>

然后，我们可以使用 JavaScript 从服务器获取数据并动态插入到表格中：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'getUser.php', true);
xhr.onload = function() {
  if (xhr.status === 200) {
    var users = JSON.parse(xhr.responseText);
    var userList = document.getElementById('userList');
    users.forEach(function(user) {
      var row = '<tr><td>' + user.name + '</td><td>' + user.email + '</td></tr>';
      userList.innerHTML += row;
    });
  }
};
xhr.send();

最后，创建一个 PHP 脚本（例如 getUser.php）来获取用户数据：

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

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

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

$sql = "SELECT name, email FROM users";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
  $users = array();
  while($row = $result->fetch_assoc()) {
    $users[] = $row;
  }
  echo json_encode($users);
} else {
  echo "0 结果";
}

$conn->close();
?>

七、总结

通过以上步骤，我们已经成功实现了使用 Bootstrap、JavaScript 和 PHP 来保存和获取数据库数据。这是一个非常基础且实用的示例，你可以根据需要对其进行扩展和改进。希望这篇文章能帮助你入门 Bootstrap 和数据库操作。

-- 展开阅读全文 --