如何用js做留言板

使用JavaScript（JS）创建一个留言板涉及到前端与后端的交互，通常还需要一个数据库来存储留言数据。以下是一个基本的实现步骤和示例代码：

基础概念

前端：用户界面，负责展示留言和处理用户输入。
后端：服务器端逻辑，处理前端请求，与数据库交互。
数据库：存储留言数据。

技术栈

前端：HTML, CSS, JavaScript
后端：Node.js + Express（或其他后端框架）
数据库：MongoDB（或其他数据库）

实现步骤

设置后端服务器：
- 使用Node.js和Express创建一个简单的服务器。
- 设置API端点来处理留言的获取和提交。

设置数据库：
- 使用MongoDB存储留言数据。
- 创建一个留言模型（Schema）。
前端页面：
- 创建HTML页面展示留言。
- 使用JavaScript发送请求到后端API获取和提交留言。

示例代码

后端（Node.js + Express）

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');

const app = express();
app.use(bodyParser.json());

mongoose.connect('mongodb://localhost:27017/message_board', { useNewUrlParser: true, useUnifiedTopology: true });

const messageSchema = new mongoose.Schema({
    name: String,
    message: String,
    date: { type: Date, default: Date.now }
});

const Message = mongoose.model('Message', messageSchema);

app.get('/api/messages', async (req, res) => {
    const messages = await Message.find().sort({ date: -1 });
    res.json(messages);
});

app.post('/api/messages', async (req, res) => {
    const newMessage = new Message(req.body);
    await newMessage.save();
    res.status(201).json(newMessage);
});

app.listen(3000, () => console.log('Server running on port 3000'));

前端（HTML + JavaScript）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Message Board</title>
</head>
<body>
    <div id="messages"></div>
    <form id="messageForm">
        <input type="text" id="name" placeholder="Your name" required>
        <textarea id="message" placeholder="Your message" required></textarea>
        <button type="submit">Submit</button>
    </form>

    <script>
        const messageForm = document.getElementById('messageForm');
        const messagesDiv = document.getElementById('messages');

        async function loadMessages() {
            const response = await fetch('/api/messages');
            const messages = await response.json();
            messagesDiv.innerHTML = messages.map(msg => `<div><strong>${msg.name}:</strong> ${msg.message} <em>${new Date(msg.date).toLocaleString()}</em></div>`).join('');
        }

        messageForm.addEventListener('submit', async (e) => {
            e.preventDefault();
            const name = document.getElementById('name').value;
            const message = document.getElementById('message').value;
            await fetch('/api/messages', {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ name, message })
            });
            loadMessages();
            messageForm.reset();
        });

        loadMessages();
    </script>
</body>
</html>