留言板代码大全：app.py

来源：网络作者：日期：2025-11-12 05:19:08

从基础到高级的实现方案

留言板是网站和应用中常见的交互功能，它允许用户提交信息并与其他用户或管理员互动，无论是简单的反馈表单还是复杂的讨论区，留言板的核心功能都离不开前后端的配合，本文将为您提供多种留言板代码实现方案，涵盖HTML、JavaScript、PHP、Python、Node.js等多种技术栈,帮助您快速搭建一个功能完善的留言板系统。

纯前端留言板（无需后端）

基础HTML+JavaScript实现

<!DOCTYPE html>
<html>
<head>纯前端留言板</title>
    <style>
        .message-box {
            width: 300px;
            margin: 50px auto;
            padding: 20px;
            border: 1px solid #ccc;
        }
        textarea {
            width: 100%;
            height: 100px;
            margin-bottom: 10px;
        }
        button {
            background-color: #4CAF50;
            color: white;
            padding: 10px 20px;
            border: none;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="message-box">
        <textarea id="message" placeholder="请输入留言内容"></textarea>
        <button onclick="submitMessage()">提交留言</button>
    </div>
    <script>
        function submitMessage() {
            const message = document.getElementById('message').value;
            if (message.trim() === '') {
                alert('请填写留言内容！');
                return;
            }
            // 将留言存储到本地存储（LocalStorage）
            let messages = JSON.parse(localStorage.getItem('messages') || '[]');
            messages.push({ text: message, time: new Date().toLocaleString() });
            localStorage.setItem('messages', JSON.stringify(messages));
            alert('留言成功！');
            document.getElementById('message').value = '';
        }
        // 页面加载时显示留言
        window.onload = function() {
            let messages = JSON.parse(localStorage.getItem('messages') || '[]');
            let messageBox = document.createElement('div');
            messageBox.innerHTML = '<h2>留言板</h2>';
            messages.forEach(msg => {
                let p = document.createElement('p');
                p.textContent = `${msg.time}: ${msg.text}`;
                messageBox.appendChild(p);
            });
            document.body.insertBefore(messageBox, document.body.firstChild);
        };
    </script>
</body>
</html>

特点：使用LocalStorage存储数据，无需后端,适合小型静态网站。

PHP留言板（带数据库支持）

基础PHP留言板

<?php
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "myDB";
// 创建连接
$conn = new mysqli($servername, $username, $password, $dbname);
// 检查连接
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}
// 处理表单提交
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    $message = $_POST['message'];
    $sql = "INSERT INTO messages (content, created_at) VALUES ('$message', NOW())";
    if ($conn->query($sql) === TRUE) {
        echo "留言成功！";
    } else {
        echo "Error: " . $sql . "<br>" . $conn->error;
    }
}
$conn->close;
?>
<!DOCTYPE html>
<html>
<head>PHP留言板</title>
</head>
<body>
    <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]); ?>">
        <textarea name="message" placeholder="请输入留言内容"></textarea>
        <input type="submit" value="提交留言">
    </form>
    <?php
    // 显示留言
    $conn = new mysqli($servername, $username, $password, $dbname);
    $sql = "SELECT * FROM messages ORDER BY created_at DESC";
    $result = $conn->query($sql);
    if ($result->num_rows > 0) {
        echo "<h2>留言板</h2>";
        while($row = $result->fetch_assoc()) {
            echo "留言时间: " . $row["created_at"] . "<br>";
            echo "留言内容: " . $row["content"] . "<br><br>";
        }
    } else {
        echo "暂无留言";
    }
    $conn->close;
    ?>
</body>
</html>

特点：使用MySQL数据库存储数据,适合中等规模网站。

Node.js留言板（使用Express框架）

基础Node.js留言板

// 项目结构
// - app.js
// - public/
//   - style.css
// - views/
//   - index.ejs
// - package.json
// app.js
const express = require('express');
const app = express();
const port = 3000;
app.set('view engine', 'ejs');
app.use(express.urlencoded({ extended: true }));
app.use(express.static('public'));
let messages = [];
app.get('/', (req, res) => {
    res.render('index', { messages: messages });
});
app.post('/message', (req, res) => {
    messages.push({
        content: req.body.message,
        time: new Date().toLocaleString()
    });
    res.redirect('/');
});
app.listen(port, () => {
    console.log(`Server running on http://localhost:${port}`);
});

index.ejs:

<!DOCTYPE html>
<html>
<head>Node.js留言板</title>
    <link rel="stylesheet" href="/style.css">
</head>
<body>
    <h1>留言板</h1>
    <form action="/message" method="POST">
        <textarea name="message" placeholder="请输入留言内容"></textarea>
        <button type="submit">提交</button>
    </form>
    <div class="messages">
        <% messages.forEach(msg => { %>
            <div class="message">
                <p><%= msg.time %></p>
                <p><%= msg.content %></p>
            </div>
        <% }); %>
    </div>
</body>
</html>

特点：使用Express框架和EJS模板，适合Node.js开发者。

Python留言板（使用Flask框架）

基础Flask留言板

from datetime import datetime
app = Flask(__name__)
messages = []
@app.route('/')
def index():
    return render_template('index.html', messages=messages)
@app.route('/message', methods=['POST'])
def message():
    message = request.form['message']
    if message:
        messages.append({
            'content': message,
            'time': datetime.now().strftime('%Y-%m-%d %H:%M:%S')
        })
    return redirect(url_for('index'))
if __name__ == '__main__':
    app.run(debug=True)

templates/index.html:

<!DOCTYPE html>
<html>
<head>Flask留言板</title>
    <style>
        .message-box {
            width: 300px;
            margin: 50px auto;
            padding: 20px;
            border: 1px solid #ccc;
        }
    </style>
</head>
<body>
    <div class="message-box">
        <form action="/message" method="POST">
            <textarea name="message" placeholder="请输入留言内容"></textarea>
            <button type="submit">提交留言</button>
        </form>
    </div>
    <div class="messages">
        {% for msg in messages %}
            <div class="message">
                <p>{{ msg.time }}</p>
                <p>{{ msg.content }}</p>
            </div>
        {% endfor %}
    </div>
</body>
</html>

特点：使用Flask框架,适合Python开发者。