正文

Bootstrap轻松入门：SQL数据库交互实战攻略

/0 浏览量
0309

引言

Bootstrap 是一个流行的前端框架，它可以帮助开发者快速构建响应式和移动设备优先的网页。在网页开发中，与后端数据库的交互是不可或缺的一环。SQL（结构化查询语言）是数据库交互的主要语言。本文将带领读者通过实战案例，轻松入门Bootstrap与SQL数据库的交互。

一、Bootstrap简介

Bootstrap 是一个开源的前端框架，它提供了一系列的CSS样式和JavaScript插件，用于快速开发响应式布局和用户界面。Bootstrap 的优势在于其简洁的语法、丰富的组件和良好的兼容性。

二、SQL数据库简介

SQL（结构化查询语言）是一种用于管理关系数据库的语言。它包括数据定义语言（DDL）、数据操作语言（DML）、数据控制语言（DCL）和数据查询语言（DQL）等。SQL 允许用户创建、修改、查询和删除数据库中的数据。

三、Bootstrap与SQL数据库交互的准备工作

  1. 安装Bootstrap：首先，需要在项目中引入Bootstrap。可以通过CDN链接或者下载Bootstrap的压缩包来实现。
<!-- 引入Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">

<!-- 引入Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>

  1. 安装数据库：选择一个合适的数据库，如MySQL、PostgreSQL等。本文以MySQL为例。

  2. 创建数据库和表：使用SQL语句创建数据库和表。

CREATE DATABASE mydatabase;
USE mydatabase;

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) NOT NULL,
    password VARCHAR(50) NOT NULL
);
  1. 安装Node.js和Express：为了方便演示，我们使用Node.js和Express框架来搭建后端服务器。
npm init -y
npm install express mysql

四、Bootstrap与SQL数据库交互实战案例

1. 用户注册

前端

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h2>用户注册</h2>
        <form id="registerForm">
            <div class="mb-3">
                <label for="username" class="form-label">用户名</label>
                <input type="text" class="form-control" id="username" required>
            </div>
            <div class="mb-3">
                <label for="password" class="form-label">密码</label>
                <input type="password" class="form-control" id="password" required>
            </div>
            <button type="submit" class="btn btn-primary">注册</button>
        </form>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="app.js"></script>
</body>
</html>

后端

const express = require('express');
const mysql = require('mysql');
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.urlencoded({ extended: false }));

const connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'password',
    database: 'mydatabase'
});

connection.connect();

app.post('/register', (req, res) => {
    const username = req.body.username;
    const password = req.body.password;

    const query = 'INSERT INTO users (username, password) VALUES (?, ?)';
    connection.query(query, [username, password], (error, results) => {
        if (error) {
            console.error(error);
            res.status(500).send('服务器错误');
        } else {
            res.send('注册成功');
        }
    });
});

app.listen(3000, () => {
    console.log('服务器运行在 http://localhost:3000');
});

2. 用户登录

前端

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户登录</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <h2>用户登录</h2>
        <form id="loginForm">
            <div class="mb-3">
                <label for="username" class="form-label">用户名</label>
                <input type="text" class="form-control" id="username" required>
            </div>
            <div class="mb-3">
                <label for="password" class="form-label">密码</label>
                <input type="password" class="form-control" id="password" required>
            </div>
            <button type="submit" class="btn btn-primary">登录</button>
        </form>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="app.js"></script>
</body>
</html>

后端

const express = require('express');
const mysql = require('mysql');
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.urlencoded({ extended: false }));

const connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'password',
    database: 'mydatabase'
});

connection.connect();

app.post('/login', (req, res) => {
    const username = req.body.username;
    const password = req.body.password;

    const query = 'SELECT * FROM users WHERE username = ? AND password = ?';
    connection.query(query, [username, password], (error, results) => {
        if (error) {
            console.error(error);
            res.status(500).send('服务器错误');
        } else if (results.length > 0) {
            res.send('登录成功');
        } else {
            res.send('用户名或密码错误');
        }
    });
});

app.listen(3000, () => {
    console.log('服务器运行在 http://localhost:3000');
});

五、总结

本文通过两个实战案例，介绍了Bootstrap与SQL数据库交互的基本方法。通过本文的学习，读者可以快速掌握Bootstrap与SQL数据库的交互技巧，为后续的网页开发打下坚实的基础。在实际开发过程中，还需要根据具体需求进行相应的调整和优化。

-- 展开阅读全文 --