JS案例联系之留言板

前言

留言板是一种常见的功能，在网页应用程序中经常会用到。它允许用户在网站上留下评论、建议或其他类型的信息。实现一个具有留言功能的留言板需要考虑前端和后端开发。前端负责展示留言内容和收集用户输入，后端负责接收并存储用户的留言信息。

代码实现

首先，我们需要设计一个数据库表来存储用户的留言数据。可以使用关系型数据库如MySQL或非关系型数据库如MongoDB。下面是一个简单的MySQL表的示例代码：

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
);

接下来，我们需要编写前端和后端的代码。前端代码可以使用HTML、CSS和JavaScript来实现用户界面，后端代码可以使用Node.js和Express框架来处理HTTP请求和数据库操作。以下是一个示例的前端和后端代码：

<form id="message-form">
  <input type="text" id="name-input" required>
  <input type="email" id="email-input" required>
  <textarea id="message-input" required></textarea>
  <button type="submit">提交留言
</form>

<div id="messages-container"></div>


<script>
  const messageForm = document.querySelector('#message-form');
  const messagesContainer = document.querySelector('#messages-container');

  messageForm.addEventListener('submit', function(event) {
    event.preventDefault();

    const name = document.querySelector('#name-input').value;
    const email = document.querySelector('#email-input').value;
    const message = document.querySelector('#message-input').value;

    fetch('/messages', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ name, email, message })
    })
    .then(response => response.json())
    .then(data => {
      // 处理提交成功后的逻辑
      // 如更新留言展示区域的内容
    })
    .catch(error => {
      // 处理提交失败后的逻辑
    });
  });
</script>

// 后端JavaScript (Node.js + Express)
const express = require('express');
const mysql = require('mysql');

const app = express();
const db = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'password',
  database: 'database_name'
});

app.use(express.json());

// 处理留言提交的路由
app.post('/messages', (req, res) => {
  const { name, email, message } = req.body;

  const query = 'INSERT INTO messages (name, email, message) VALUES (?, ?, ?)';
  db.query(query, [name, email, message], (error, result) => {
    if (error) {
      // 处理插入失败的逻辑
      res.status(500).json({ error: 'Failed to insert message' });
    } else {
      // 处理插入成功的逻辑
      res.json({ success: true });
    }
  });
});

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

代码解释

上述代码中，前端部分包括一个表单和一个留言展示区域。用户在表单中输入姓名、邮箱和留言内容，并提交表单时，使用JavaScript中的fetch函数将数据发送到后端的路由'/messages'。后端部分用Express框架监听3000端口，并处理路由为'/messages'的POST请求，将留言数据插入数据库中。

总结

这段代码演示了一个基本的留言板功能的实现。通过前端和后端的配合，用户可以提交留言并且后端将其存储在数据库中。开发一个更完善的留言板还可以包含一些额外的功能，如分页展示留言、用户权限控制等。