网站留言系统编写代码，实现用户互动与反馈的实用教程，构建互动反馈，网站留言系统编程实战教程

未命名 2026年02月28日 20:57 14 admin

本教程详细介绍了如何编写网站留言系统代码，实现用户互动与反馈，涵盖前端和后端技术，包括HTML、CSS、JavaScript和PHP，让用户轻松实现留言功能，提高网站用户体验。

随着互联网的普及,越来越多的企业和个人开始建设自己的网站，一个完善的网站不仅要有精美的界面和丰富的内容，还需要一个能够与用户互动的留言系统，以便收集用户的反馈和建议，本文将详细介绍如何编写一个简单的网站留言系统代码，帮助您实现这一功能。

准备工作

在开始编写代码之前,我们需要做一些准备工作：

确定开发环境：根据个人喜好选择适合的开发工具，如Visual Studio、Sublime Text等。
确定数据库：留言系统需要存储用户留言信息，因此需要选择一个数据库，本文以MySQL为例。
确定编程语言：留言系统通常使用HTML、CSS、JavaScript和PHP等前端和后端技术实现，本文以PHP为例。

数据库设计

创建数据库：在MySQL中创建一个名为message_board的数据库。

CREATE DATABASE message_board;

创建留言表：在message_board数据库中创建一个名为messages的表，用于存储用户留言信息。

CREATE TABLE messages (
    id INT AUTO_INCREMENT PRIMARY KEY,
    username VARCHAR(50) NOT NULL,
    email VARCHAR(100),
    message TEXT NOT NULL,
    create_time TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

前端页面设计

创建留言表单：使用HTML和CSS编写留言表单页面。

<!DOCTYPE html>
<html>
<head>留言板</title>
    <style>
        /* 样式设计，可根据需求调整 */
        body {
            font-family: Arial, sans-serif;
        }
        .container {
            width: 80%;
            margin: 0 auto;
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 5px;
        }
        input, textarea {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        button {
            padding: 10px 20px;
            background-color: #5cb85c;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>留言板</h1>
        <form action="submit.php" method="post">
            <div class="form-group">
                <label for="username">昵称：</label>
                <input type="text" id="username" name="username" required>
            </div>
            <div class="form-group">
                <label for="email">邮箱：</label>
                <input type="email" id="email" name="email">
            </div>
            <div class="form-group">
                <label for="message">留言内容：</label>
                <textarea id="message" name="message" required></textarea>
            </div>
            <button type="submit">提交</button>
        </form>
    </div>
</body>
</html>

创建留言展示页面：使用HTML和CSS编写留言展示页面。

<!DOCTYPE html>
<html>
<head>留言板</title>
    <style>
        /* 样式设计，可根据需求调整 */
        body {
            font-family: Arial, sans-serif;
        }
        .container {
            width: 80%;
            margin: 0 auto;
        }
        .message {
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 20px;
        }
        .message h3 {
            margin: 0;
        }
        .message p {
            margin: 5px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>留言板</h1>
        <div class="message">
            <h3>昵称：张三</h3>
            <p>邮箱：zhangsan@example.com</p>
            <p>留言内容：这是一条测试留言。</p>
        </div>
        <!-- 动态加载留言内容 -->
    </div>
</body>
</html>

后端代码编写

创建submit.php文件：用于处理留言表单提交。

<?php
// 连接数据库
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "message_board";
$conn = new mysqli($servername, $username, $password, $dbname);
// 检查连接
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}
// 获取表单数据
$username = $_POST['username'];
$email = $_POST['email'];
$message = $_POST['message'];
// 插入数据到数据库
$sql = "INSERT INTO messages (username, email, message) VALUES ('$username', '$email', '$message')";
if ($conn->query($sql) === TRUE) {
    echo "留言成功！";
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}
$conn->close();
?>

创建show_messages.php文件：用于展示留言内容。

<?php
// 连接数据库
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "message_board";
$conn = new mysqli($servername, $username, $password, $dbname);
// 检查连接
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}
// 查询留言数据
$sql = "SELECT * FROM messages ORDER BY create_time DESC";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
    // 输出数据
    while($row = $result->fetch_assoc()) {
        echo "<div class='message'>";
        echo "<h3>" . $row["username"] . "</h3>";
        echo "<p>邮箱：" . $row["email"] . "</p>";
        echo "<p>留言内容：" . $row["message"] . "</p>";
        echo "</div>";
    }
} else {
    echo "暂无留言。";
}
$conn->close();
?>

整合页面