当前位置：首页 > 行业动态 > 正文

html留言加数据库

admin
行业动态
2025-04-29
4826

通过HTML表单收集留言，后端脚本（如PHP/Python）处理提交，将数据存入MySQL数据库，数据库需设计留言表，含ID、内容、时间等字段，实现持久

HTML留言功能实现

前端页面结构

使用HTML表单收集用户输入,并通过CSS美化界面。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">留言板</title>
    <style>
        body { font-family: Arial, sans-serif; }
        .message-form { margin-bottom: 20px; }
        .message-list { border-top: 1px solid #ccc; }
        .message-item { padding: 10px; border-bottom: 1px solid #eee; }
    </style>
</head>
<body>
    <h1>留言板</h1>
    <!-留言表单 -->
    <div class="message-form">
        <form action="save_message.php" method="POST">
            <input type="text" name="username" placeholder="姓名" required />
            <textarea name="content" placeholder="留言内容" rows="4" required></textarea>
            <button type="submit">提交留言</button>
        </form>
    </div>
    <!-留言列表 -->
    <div class="message-list">
        <?php include 'show_messages.php'; ?>
    </div>
</body>
</html>

数据库设计

使用关系型数据库（如MySQL）存储留言数据,表结构如下：

html留言加数据库第1张

字段名	类型	说明
id	INT(11)	主键，自增
username	VARCHAR(50)	留言者姓名
content	TEXT
created_at	DATETIME	留言时间（自动记录）

建表SQL示例：

CREATE TABLE messages (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) NOT NULL,
    content TEXT NOT NULL,
    created_at DATETIME DEFAULT CURRENT_TIMESTAMP
);

后端数据处理

保存留言（PHP示例）

save_message.php 处理表单提交并写入数据库。

<?php
// 连接数据库
$conn = new mysqli("localhost", "root", "password", "database_name");
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}
// 获取表单数据并过滤
$username = htmlspecialchars($_POST['username']);
$content = htmlspecialchars($_POST['content']);
// 插入数据
$stmt = $conn->prepare("INSERT INTO messages (username, content) VALUES (?, ?)");
$stmt->bind_param("ss", $username, $content);
if ($stmt->execute()) {
    header("Location: index.html"); // 重定向回首页
} else {
    echo "提交失败: " . $stmt->error;
}
$stmt->close();
$conn->close();
?>

显示留言列表

show_messages.php 从数据库读取留言并展示。

<?php
$conn = new mysqli("localhost", "root", "password", "database_name");
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}
// 查询最新10条留言
$result = $conn->query("SELECT  FROM messages ORDER BY id DESC LIMIT 10");
if ($result) {
    while ($row = $result->fetch_assoc()) {
        echo "<div class='message-item'>";
        echo "<strong>" . $row['username'] . "</strong>";
        echo "<p>" . $row['content'] . "</p>";
        echo "<small>" . $row['created_at'] . "</small>";
        echo "</div>";
    }
} else {
    echo "暂无留言";
}
$conn->close();
?>

关键功能扩展

功能点	实现方式
防止SQL注入	使用 `prepare()` 预处理语句，避免直接拼接SQL
XSS攻击防护	对用户输入使用 `htmlspecialchars()` 转义特殊字符
分页显示留言	通过 `LIMIT` 和 `OFFSET` 实现分页查询，配合前端分页按钮控制
实时刷新留言列表	使用AJAX定时请求后台数据，或通过WebSocket实现实时推送