我做的留言板，不知道过关不 Nodejs版

我做的留言板，不知道过关不 Nodejs版

http://www.itaofun.com.cn/index.php?m=content&c=tucao 只不过是用php来做的，准备用node来搞

4 回复

当然可以！假设你已经使用PHP完成了一个简单的留言板，并希望用Node.js重写它。这里是一个简单的Node.js留言板的实现示例，包括前端页面和后端API。

前端页面

首先，我们需要一个简单的HTML表单供用户提交留言：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>留言板</title>
</head>
<body>
    <h1>留言板</h1>
    <form id="messageForm">
        <label for="name">姓名:</label>
        <input type="text" id="name" name="name"><br><br>
        <label for="message">留言:</label>
        <textarea id="message" name="message"></textarea><br><br>
        <button type="submit">提交</button>
    </form>

    <div id="messages">
        <!-- 留言将在这里显示 -->
    </div>

    <script src="/socket.io/socket.io.js"></script>
    <script>
        const socket = io();

        document.getElementById('messageForm').addEventListener('submit', function (event) {
            event.preventDefault();
            const name = document.getElementById('name').value;
            const message = document.getElementById('message').value;

            fetch('/api/messages', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ name, message })
            }).then(response => response.json())
              .then(data => {
                  if (data.success) {
                      socket.emit('newMessage', { name, message });
                  } else {
                      alert('提交失败');
                  }
              });
        });

        socket.on('newMessage', data => {
            const messagesDiv = document.getElementById('messages');
            const messageElement = document.createElement('div');
            messageElement.innerHTML = `<strong>${data.name}:</strong> ${data.message}`;
            messagesDiv.appendChild(messageElement);
        });
    </script>
</body>
</html>

后端API

接下来，我们使用Express框架创建后端API：

const express = require('express');
const app = express();
const http = require('http').createServer(app);
const io = require('socket.io')(http);

app.use(express.static('public'));
app.use(express.json());

let messages = [];

app.post('/api/messages', (req, res) => {
    const { name, message } = req.body;

    if (name && message) {
        messages.push({ name, message });
        io.emit('newMessage', { name, message });
        return res.json({ success: true });
    }

    res.status(400).json({ success: false, message: 'Name and message are required' });
});

io.on('connection', socket => {
    console.log('a user connected');
    socket.on('disconnect', () => {
        console.log('user disconnected');
    });
    socket.on('newMessage', data => {
        io.emit('newMessage', data);
    });
});

http.listen(3000, () => {
    console.log('listening on *:3000');
});

解释

  1. 前端：HTML表单用于提交留言，JavaScript部分通过fetch API向后端发送POST请求，并通过Socket.IO监听新消息。
  2. 后端：使用Express处理HTTP请求，存储留言并广播给所有连接的客户端。Socket.IO用于实时通信，确保所有客户端都能看到最新的留言。

这样你就有了一个基本的留言板系统，你可以在此基础上添加更多功能，如分页、用户认证等。


不错

3q

如果你想要将一个用PHP实现的留言板迁移到Node.js，并且想知道如何实现这个功能，可以参考以下步骤和代码示例。这将帮助你从头开始构建一个简单的Node.js留言板。

步骤 1: 初始化项目

首先创建一个新的Node.js项目并安装必要的依赖库：

mkdir node-messageboard
cd node-messageboard
npm init -y
npm install express body-parser ejs

这里我们使用了Express框架、body-parser用于解析表单数据以及EJS作为模板引擎。

步骤 2: 创建服务器

创建一个名为server.js的文件，并编写基本的Express服务器代码：

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

app.use(bodyParser.urlencoded({ extended: false }));
app.set('view engine', 'ejs');

let messages = [];

app.get('/', (req, res) => {
    res.render('index', { messages });
});

app.post('/submit', (req, res) => {
    const { message } = req.body;
    messages.push(message);
    res.redirect('/');
});

app.listen(3000, () => console.log('Server running on http://localhost:3000'));

步骤 3: 创建视图

在项目根目录下创建一个名为views的文件夹，并在其中添加一个index.ejs文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>留言板</title>
</head>
<body>
    <h1>留言板</h1>
    <form action="/submit" method="post">
        <input type="text" name="message" placeholder="写下你的留言" required />
        <button type="submit">提交</button>
    </form>
    <ul>
        <% messages.forEach((msg) => { %>
            <li><%= msg %></li>
        <% }); %>
    </ul>
</body>
</html>

测试与运行

保存所有更改后，在命令行中运行以下命令启动服务器：

node server.js

现在你应该可以在浏览器中访问http://localhost:3000看到你的留言板应用了。

以上就是一个简单的Node.js留言板应用的基本实现方式。你可以根据需要进一步扩展其功能，比如添加用户认证、持久化存储等。

回到顶部