网站留言板代码大全：网站留言板代码大全，从基础到高级的实现指南

来源：网络作者：日期：2025-10-27 19:33:37

留言板的基本概念

留言板通常包括以下功能：

用户输入姓名、邮箱、留言内容等。
提交后留言显示在页面上。
后端存储留言数据（如数据库）。
防止垃圾留言（如验证码、内容过滤）。

基础实现：纯前端留言板（无后端）

虽然纯前端留言板无法持久化数据,但可以作为学习的基础。

HTML结构

<form id="messageForm">
    <label for="name">姓名：</label>
    <input type="text" id="name" required>
    <label for="email">邮箱：</label>
    <input type="email" id="email" required>
    <label for="message">留言：</label>
    <textarea id="message" required></textarea>
    <button type="submit">提交</button>
</form>
<div id="messageList"></div>

JavaScript处理

document.getElementById('messageForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const name = document.getElementById('name').value;
    const email = document.getElementById('email').value;
    const message = document.getElementById('message').value;
    // 将留言添加到页面
    const messageElement = document.createElement('div');
    messageElement.innerHTML = `<strong>${name}</strong>: ${message}`;
    document.getElementById('messageList').appendChild(messageElement);
    // 清空表单
    document.getElementById('messageForm').reset();
});

后端实现：PHP留言板

数据库设计

创建一个messages表：

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

PHP代码实现

提交表单（submit.php）

<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 数据过滤与验证
    $name = htmlspecialchars($_POST['name']);
    $email = htmlspecialchars($_POST['email']);
    $message = htmlspecialchars($_POST['message']);
    // 连接数据库
    $pdo = new PDO('mysql:host=localhost;dbname=testdb;charset=utf8', 'username', 'password');
    // 插入数据
    $stmt = $pdo->prepare('INSERT INTO messages (name, email, message) VALUES (?, ?, ?)');
    $stmt->execute([$name, $email, $message]);
    // 重定向到留言列表页
    header('Location: index.php');
    exit;
}
?>

显示留言（index.php）

<?php
$pdo = new PDO('mysql:host=localhost;dbname=testdb;charset=utf8', 'username', 'password');
$stmt = $pdo->query('SELECT * FROM messages ORDER BY created_at DESC');
$messages = $stmt->fetchAll(PDO::FETCH_ASSOC);
?>
<!DOCTYPE html>
<html>
<head>留言板</title>
</head>
<body>
    <h1>留言板</h1>
    <form method="post" action="submit.php">
        <input type="text" name="name" placeholder="姓名" required>
        <input type="email" name="email" placeholder="邮箱" required>
        <textarea name="message" placeholder="留言内容" required></textarea>
        <button type="submit">提交</button>
    </form>
    <?php foreach ($messages as $message): ?>
        <div>
            <strong><?= htmlspecialchars($message['name']) ?>:</strong>
            <p><?= htmlspecialchars($message['message']) ?></p>
            <small><?= $message['created_at'] ?></small>
        </div>
    <?php endforeach; ?>
</body>
</html>

使用Node.js和Express实现留言板

安装依赖

npm init -y
npm install express body-parser mysql

代码实现

app.js

const express = require('express');
const bodyParser = require('body-parser');
const mysql = require('mysql');
const app = express();
// 解析表单数据
app.use(bodyParser.urlencoded({ extended: false }));
// 创建数据库连接
const db = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: 'password',
    database: 'testdb'
});
db.connect();
// 显示留言页面
app.get('/', (req, res) => {
    db.query('SELECT * FROM messages ORDER BY created_at DESC', (err, results) => {
        if (err) throw err;
        res.send(`
            <h1>留言板</h1>
            <form method="POST">
                <input type="text" name="name" placeholder="姓名" required>
                <input type="email" name="email" placeholder="邮箱" required>
                <textarea name="message" placeholder="留言内容" required></textarea>
                <button type="submit">提交</button>
            </form>
            <ul>
                ${results.map(msg => `<li><strong>${msg.name}:</strong> ${msg.message}</li>`).join('')}
            </ul>
        `);
    });
});
// 提交留言
app.post('/', (req, res) => {
    const { name, email, message } = req.body;
    db.query('INSERT INTO messages (name, email, message) VALUES (?, ?, ?)', [name, email, message], (err) => {
        if (err) throw err;
        res.redirect('/');
    });
});
app.listen(3000, () => console.log('Server started on port 3000'));

使用Python和Flask实现留言板

安装Flask和SQLAlchemy

pip install flask flask-sqlalchemy

代码实现

app.py

from flask import Flask, request, render_template_string
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'mysql://username:password@localhost/testdb'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False
db = SQLAlchemy(app)
class Message(db.Model):
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(100), nullable=False)
    email = db.Column(db.String(100), nullable=False)
    message = db.Column(db.Text, nullable=False)
    created_at = db.Column(db.DateTime, default=db.func.current_timestamp())
@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == 'POST':
        name = request.form['name']
        email = request.form['email']
        message = request.form['message']
        new_message = Message(name=name, email=email, message=message)
        db.session.add(new_message)
        db.session.commit()
        return render_template_string(open('templates/index.html').read(), messages=Message.query.order_by(Message.created_at.desc()).all())
    else:
        return render_template_string(open('templates/index.html').read(), messages=Message.query.order_by(Message.created_at.desc()).all())
if __name__ == '__main__':
    app.run(debug=True)

templates/index.html

<!DOCTYPE html>
<html>
<head>留言板</title>
</head>
<body>
    <h1>留言板</h1>
    <form method="POST">
        <input type="text" name="name" placeholder="姓名" required>
        <input type="email" name="email" placeholder="邮箱" required>
        <textarea name="message" placeholder="留言内容" required></textarea>
        <button type="submit">提交</button>
    </form>
    <ul>
        {% for msg in messages %}
            <li>
                <strong>{{ msg.name }}:</strong>
                <p>{{ msg.message }}</p>
                <small>{{ msg.created_at }}</small>
            </li>
        {% endfor %}
    </ul>
</body>
</html>