bootstrap增删改mysql

基础概念

Bootstrap 是一个流行的前端框架，用于快速开发响应式和移动优先的网站。它提供了丰富的 UI 组件和样式，可以简化网页设计和开发过程。MySQL 是一种关系型数据库管理系统，广泛用于存储和管理网站或应用程序的数据。

类型

Bootstrap：前端框架
MySQL：关系型数据库管理系统

应用场景

Bootstrap：适用于任何需要快速构建响应式网站的项目，如企业官网、电商平台、社交媒体等。
MySQL：适用于需要存储和管理大量结构化数据的场景，如网站用户数据、商品信息、交易记录等。

增删改 MySQL 的示例

假设我们有一个简单的用户管理系统，使用 Bootstrap 和 MySQL 来实现用户的增删改功能。

数据库表结构

CREATE TABLE users (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    email VARCHAR(100) NOT NULL UNIQUE,
    role ENUM('admin', 'user') DEFAULT 'user'
);

前端页面（使用 Bootstrap）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>User Management</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <h1>User Management</h1>
        <form id="userForm">
            <div class="form-group">
                <label for="name">Name</label>
                <input type="text" class="form-control" id="name" required>
            </div>
            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" class="form-control" id="email" required>
            </div>
            <div class="form-group">
                <label for="role">Role</label>
                <select class="form-control" id="role">
                    <option value="admin">Admin</option>
                    <option value="user">User</option>
                </select>
            </div>
            <button type="submit" class="btn btn-primary">Add User</button>
        </form>
        <table class="table mt-4">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Name</th>
                    <th>Email</th>
                    <th>Role</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody id="userTable">
                <!-- Users will be displayed here -->
            </tbody>
        </table>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.bundle.min.js"></script>
    <script>
        $(document).ready(function() {
            // Load users from the database
            loadUsers();

            // Handle form submission
            $('#userForm').submit(function(event) {
                event.preventDefault();
                const name = $('#name').val();
                const email = $('#email').val();
                const role = $('#role').val();

                $.ajax({
                    url: '/api/users',
                    method: 'POST',
                    data: { name, email, role },
                    success: function(response) {
                        loadUsers();
                        $('#userForm')[0].reset();
                    },
                    error: function(error) {
                        console.error(error);
                    }
                });
            });

            // Handle delete action
            $('#userTable').on('click', '.delete-btn', function() {
                const userId = $(this).data('id');
                $.ajax({
                    url: `/api/users/${userId}`,
                    method: 'DELETE',
                    success: function(response) {
                        loadUsers();
                    },
                    error: function(error) {
                        console.error(error);
                    }
                });
            });

            // Handle edit action
            $('#userTable').on('click', '.edit-btn', function() {
                const userId = $(this).data('id');
                const name = $(this).closest('tr').find('td:nth-child(2)').text();
                const email = $(this).closest('tr').find('td:nth-child(3)').text();
                const role = $(this).closest('tr').find('td:nth-child(4)').text();

                $('#name').val(name);
                $('#email').val(email);
                $('#role').val(role);

                $('#userForm').attr('action', `/api/users/${userId}`);
                $('#userForm').attr('method', 'PUT');
            });
        });

        function loadUsers() {
            $.ajax({
                url: '/api/users',
                method: 'GET',
                success: function(response) {
                    let html = '';
                    response.forEach(user => {
                        html += `
                            <tr>
                                <td>${user.id}</td>
                                <td>${user.name}</td>
                                <td>${user.email}</td>
                                <td>${user.role}</td>
                                <td>
                                    <button class="btn btn-sm btn-warning edit-btn" data-id="${user.id}">Edit</button>
                                    <button class="btn btn-sm btn-danger delete-btn" data-id="${user.id}">Delete</button>
                                </td>
                            </tr>
                        `;
                    });
                    $('#userTable').html(html);
                },
                error: function(error) {
                    console.error(error);
                }
            });
        }
    </script>
</body>
</html>

后端代码（假设使用 Node.js 和 Express）

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

const app = express();
app.use(bodyParser.json());

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

db.connect(err => {
    if (err) throw err;
    console.log('Connected to MySQL database');
});

// Add user
app.post('/api/users', (req, res) => {
    const { name, email, role } = req.body;
    const sql = 'INSERT INTO users (name, email, role) VALUES (?, ?, ?)';
    db.query(sql, [name, email, role], (err, result) => {
        if (err) return res.status(500).send(err);
        res.status(201).send(result);
    });
});

// Get all users
app.get('/api/users', (req, res) => {
    const sql = 'SELECT * FROM users';
    db.query(sql, (err, result) => {
        if (err) return res.status(500).send(err);
        res.status(200).send(result);
    });
});

// Delete user
app.delete('/api/users/:id', (req, res) => {
    const { id } = req.params;
    const sql = 'DELETE FROM users WHERE id = ?';
    db.query(sql, [id], (err, result) => {
        if (err) return res.status(500).send(err);
        res.status(204).send();
    });
});

// Update user
app.put('/api/users/:id', (req, res) => {
    const { id } = req.params;
    const { name, email, role } = req.body;
    const sql = 'UPDATE users SET name = ?, email = ?, role = ? WHERE id = ?';
    db.query(sql, [name, email, role, id], (err, result) => {
        if (err) return res.status(500).send(err);
        res.status(200).send(result);
    });
});

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

可能遇到的问题及解决方法

数据库连接问题：
- 问题：无法连接到 MySQL 数据库。
- 原因：可能是数据库服务器未启动、连接配置错误或权限问题。
- 解决方法：检查数据库服务器是否启动，确认连接配置（如主机、端口、用户名、密码）是否正确，并确保数据库用户有足够的权限。

SQL 注入问题：
- 问题：用户输入可能导致 SQL 注入攻击。
- 原因：直接将用户输入拼接到 SQL 查询中。
- 解决方法：使用参数化查询或预处理语句来防止 SQL 注入。
跨域请求问题：
- 问题：前端页面无法与后端 API 进行通信。
- 原因：浏览器的同源策略限制。
- 解决方法：在后端设置 CORS（跨域资源共享）头，允许前端域名访问 API。
数据验证问题：
- 问题：用户提交的数据不符合预期格式或类型。
- 原因：前端或后端没有进行充分的数据验证。
- 解决方法：在前端使用表单验证，在后端使用数据验证库（如 Joi）来确保数据的正确性和安全性。