首页
学习
活动
专区
圈层
工具
发布

网页写入mysql数据库

将网页数据写入 MySQL 数据库通常涉及 ​​前端表单提交​​ + ​​后端处理脚本​​(如 PHP、Python、Node.js 等) + ​​MySQL 数据库操作​​。以下是完整实现流程:


​1. 准备工作​

​1.1 创建 MySQL 数据库和表​

假设我们要存储用户提交的表单数据(如姓名、邮箱、留言),先在 MySQL 中创建数据库和表:

代码语言:javascript
代码运行次数:0
复制
-- 创建数据库
CREATE DATABASE IF NOT EXISTS `web_form_db` CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

-- 使用数据库
USE `web_form_db`;

-- 创建表
CREATE TABLE IF NOT EXISTS `user_submissions` (
    `id` INT AUTO_INCREMENT PRIMARY KEY,
    `name` VARCHAR(100) NOT NULL,
    `email` VARCHAR(100) NOT NULL,
    `message` TEXT,
    `created_at` TIMESTAMP DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

​2. 前端 HTML 表单​

创建一个简单的 HTML 表单(form.html):

代码语言:javascript
代码运行次数:0
复制
下载<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>提交表单</title>
</head>
<body>
    <h1>用户反馈表单</h1>
    <form action="submit.php" method="POST">
        <label for="name">姓名:</label>
        <input type="text" id="name" name="name" required><br><br>

        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email" required><br><br>

        <label for="message">留言:</label>
        <textarea id="message" name="message" rows="4" cols="50"></textarea><br><br>

        <button type="submit">提交</button>
    </form>
</body>
</html>
  • action="submit.php":表单提交后由 PHP 脚本处理。
  • method="POST":使用 POST 方法传递数据(更安全)。

​3. 后端处理脚本(PHP 示例)​

创建 submit.php 文件,连接 MySQL 并插入数据:

代码语言:javascript
代码运行次数:0
复制
<?php
// 1. 获取表单数据
$name = $_POST['name'];
$email = $_POST['email'];
$message = $_POST['message'];

// 2. 数据过滤(防止 SQL 注入)
$name = htmlspecialchars(strip_tags($name));
$email = filter_var($email, FILTER_SANITIZE_EMAIL);
$message = htmlspecialchars(strip_tags($message));

// 3. 连接 MySQL 数据库
$servername = "localhost";  // 数据库服务器地址
$username = "root";         // 数据库用户名
$password = "";             // 数据库密码
$dbname = "web_form_db";    // 数据库名

$conn = new mysqli($servername, $username, $password, $dbname);

// 检查连接是否成功
if ($conn->connect_error) {
    die("数据库连接失败: " . $conn->connect_error);
}

// 4. 准备 SQL 语句(使用预处理语句防止 SQL 注入)
$sql = "INSERT INTO user_submissions (name, email, message) VALUES (?, ?, ?)";
$stmt = $conn->prepare($sql);

if ($stmt) {
    // 绑定参数
    $stmt->bind_param("sss", $name, $email, $message);

    // 执行 SQL
    if ($stmt->execute()) {
        echo "数据提交成功!";
    } else {
        echo "错误: " . $stmt->error;
    }

    // 关闭语句
    $stmt->close();
} else {
    echo "预处理语句错误: " . $conn->error;
}

// 5. 关闭数据库连接
$conn->close();
?>

​关键点说明​​:

  1. ​防 SQL 注入​​:
    • 使用 htmlspecialchars()strip_tags() 过滤用户输入。
    • 使用 ​​预处理语句(Prepared Statements)​​(prepare + bind_param)确保安全。
  2. ​错误处理​​:
    • 检查数据库连接和 SQL 执行是否成功。

​4. 测试流程​

  1. form.htmlsubmit.php 放在 Web 服务器目录(如 Apache 的 htdocs 或 Nginx 的 www)。
  2. 访问 http://localhost/form.html,填写表单并提交。
  3. 检查 MySQL 数据库是否成功写入数据:SELECT * FROM user_submissions;

​5. 其他后端语言示例​

​Python (Flask + MySQL)​

代码语言:javascript
代码运行次数:0
复制
下载from flask import Flask, request
import mysql.connector

app = Flask(__name__)

@app.route('/submit', methods=['POST'])
def submit():
    name = request.form['name']
    email = request.form['email']
    message = request.form['message']

    # 连接 MySQL
    conn = mysql.connector.connect(
        host="localhost",
        user="root",
        password="",
        database="web_form_db"
    )
    cursor = conn.cursor()

    # 执行 SQL(使用参数化查询)
    sql = "INSERT INTO user_submissions (name, email, message) VALUES (%s, %s, %s)"
    cursor.execute(sql, (name, email, message))
    conn.commit()

    cursor.close()
    conn.close()

    return "数据提交成功!"

if __name__ == '__main__':
    app.run(debug=True)

​Node.js (Express + MySQL)​

代码语言:javascript
代码运行次数:0
复制
下载const express = require('express');
const mysql = require('mysql2/promise');
const app = express();

app.use(express.urlencoded({ extended: true }));

app.post('/submit', async (req, res) => {
    const { name, email, message } = req.body;

    // 连接 MySQL
    const conn = await mysql.createConnection({
        host: 'localhost',
        user: 'root',
        password: '',
        database: 'web_form_db'
    });

    // 执行 SQL(使用参数化查询)
    const [result] = await conn.execute(
        'INSERT INTO user_submissions (name, email, message) VALUES (?, ?, ?)',
        [name, email, message]
    );

    await conn.end();
    res.send('数据提交成功!');
});

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

​6. 安全注意事项​

  1. ​防 SQL 注入​​:
    • 始终使用 ​​预处理语句​​(Prepared Statements),避免直接拼接 SQL。
  2. ​数据验证​​:
    • 前端用 HTML5 验证(如 requiredtype="email")。
    • 后端用正则表达式或库(如 PHP 的 filter_var())进一步验证。
  3. ​防 XSS 攻击​​:
    • 输出数据时用 htmlspecialchars()(PHP)或类似函数转义 HTML 特殊字符。
  4. ​数据库权限​​:
    • 数据库用户仅授予必要权限(如 INSERT,避免 DROP TABLE)。

​7. 扩展功能​

  • ​文件上传​​:如允许用户上传头像(需处理 $_FILES)。
  • ​邮件通知​​:提交后发送邮件给管理员(PHP 的 mail() 或 Python 的 smtplib)。
  • ​AJAX 提交​​:用 JavaScript 异步提交表单(避免页面刷新)。
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的视频

领券