在现代网络社交化时代，留言板是网页设计中不可或缺的一个元素。它允许用户与作者和其他读者之间进行交流和互动，增强了网站与用户之间的联系。但是，对于许多网站管理员和开发人员来说，建立一个高效、安全、易于使用的留言板并不容易。

本篇文章将为您提供一份留言板代码大全，涵盖从前端到后端以及数据库等各个方面，帮助您快速、轻松地搭建一个交互式留言板。

前端部分

留言板的前端部分通常包括两个主要组成部分：表单和留言列表。表单用于提交新的留言，而留言列表则展示已有的留言。

HTML代码

<form>
  <label for="name">姓名：</label>
  <input type="text" id="name" name="name" required>

  <label for="email">邮箱：</label>
  <input type="email" id="email" name="email" required>

  <label for="message">留言：</label>
  <textarea id="message" name="message" required></textarea>

  <button type="submit">提交</button>
</form>

<div id="messages">
  <!-- 留言列表将通过JavaScript动态生成 -->
</div>

CSS代码

form {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
}

label {
  font-weight: bold;
}

input[type="text"],
input[type="email"],
textarea {
  padding: 5px;
  border-radius: 3px;
  border: 1px solid #ccc;
  margin-bottom: 10px;
}

button[type="submit"] {
  background-color: #007bff;
  color: #fff;
  padding: 8px 16px;
  border-radius: 3px;
  border: none;
  cursor: pointer;
}

/* 留言列表样式 */

.message {
  margin-bottom: 20px;
  padding: 10px;
  border-radius: 3px;
  border: 1px solid #ccc;
}

.message h3 {
  margin-top: 0;
}

.message p {
  margin-bottom: 0;
}

JavaScript代码

const form = document.querySelector('form');
const messagesDiv = document.querySelector('#messages');

// 监听表单提交事件
form.addEventListener('submit', event => {
  event.preventDefault(); // 防止表单默认提交行为

  const nameInput = form.querySelector('#name');
  const emailInput = form.querySelector('#email');
  const messageTextarea = form.querySelector('#message');

  // 创建一个留言对象，包含姓名、邮箱和留言内容
  const message = {
    name: nameInput.value,
    email: emailInput.value,
    message: messageTextarea.value,
    date: new Date() // 添加留言时间属性
  };

  // 发送POST请求将留言保存到服务器（详见后端部分）
  fetch('/api/messages', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify(message)
  })
    .then(response => response.json())
    .then(data => {
      // 清空表单内容
      nameInput.value = '';
      emailInput.value = '';
      messageTextarea.value = '';

      // 将新的留言添加到留言列表
      const messageDiv = document.createElement('div');
      messageDiv.classList.add('message');
      messageDiv.innerHTML = `
        <h3>${data.name}</h3>
        <p>${data.message}</p>
        <small>${data.email} - ${new Date(data.date).toLocaleString()}</small>
      `;
      messagesDiv.prepend(messageDiv);
    })
    .catch(error => {
      console.error(error);
    });
});

// 页面加载时从服务器获取所有留言并展示在留言列表中
fetch('/api/messages')
  .then(response => response.json())
  .then(data => {
    data.forEach(message => {
      const messageDiv = document.createElement('div');
	  messageDiv.classList.add('message');
	  messageDiv.innerHTML =<h3>${message.name}</h3><p>${message.message}</p><small>${message.email} - ${new Date(message.date).toLocaleString()}</small>      ;
	  messagesDiv.appendChild(messageDiv);
	});
  })
  .catch(error => {
	console.error(error);
});

后端部分

留言板的后端部分主要负责处理表单提交和数据存储。

Node.js代码

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

const app = express();
const port = process.env.PORT || 3000;

// 解析JSON请求体
app.use(bodyParser.json());

// 模拟一个初始留言数组
const messages = [
  {
    name: '张三',
    email: 'zhangsan@example.com',
    message: '第一篇留言',
    date: new Date()
  }
];

// GET /api/messages：获取所有留言
app.get('/api/messages', (req, res) => {
  res.json(messages);
});

// POST /api/messages：创建新留言
app.post('/api/messages', (req, res) => {
  const message = req.body;
  message.date = new Date();
  messages.push(message);
  res.status(201).json(message);
});

// 启动服务器
app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

以上是一个使用Express框架和Body-Parser库搭建的Node.js后端示例。其中，GET /api/messages路由用于获取所有留言，而POST /api/messages路由用于创建新的留言并将其存储在内存中。在实际项目中，您可以使用数据库或其他数据存储解决方案来持久化存储留言数据。

通过本篇文章，您已经了解了如何使用HTML、CSS和JavaScript构建一个基本的交互式留言板，并利用Node.js搭建了后端服务器来处理表单提交和保存留言数据。当然，这只是留言板开发的入门知识，您可以继续深入学习和拓展功能，例如添加用户身份验证、支持图片上传等。

希望本篇文章对您有所帮助，祝您愉快地开发留言板！

本文链接：http://task.lmcjl.com/news/12737.html