开发一个简单的留言板应用——使用 Node.js 、Express 库和 jQuery 库来实现一个简单的留言板应用程序

以下是一个简单的留言板应用的代码实例，使用了Node.js、Express 和 jQuery。

首先，确保你已经安装了Node.js和npm。

创建一个新的Node.js项目，并安装Express和jQuery：




mkdir message_board
cd message_board
npm init -y
npm install express jquery

创建一个简单的Express服务器：




// server.js
const express = require('express');
const app = express();
const port = 3000;
 
app.use(express.static('public'));
 
app.listen(port, () => {
  console.log(`Server running on http://localhost:${port}`);
});

创建一个HTML文件和JavaScript文件来处理前端逻辑：




<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Message Board</title>
  <script src="/jquery.min.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <h1>Message Board</h1>
  <div id="messages"></div>
  <input type="text" id="messageInput" placeholder="Type a message">
  <button id="sendMessage">Send</button>
</body>
</html>




// script.js
$(document).ready(function() {
  $('#sendMessage').click(function() {
    var message = $('#messageInput').val();
    $.post('/message', { message: message }, function(data) {
      $('#messages').append(`<p>${data.message}</p>`);
    });
  });
 
  function getMessages() {
    $.get('/messages', function(data) {
      data.forEach(message => {
        $('#messages').append(`<p>${message}</p>`);
      });
    });
  }
 
  getMessages();
});

在Express中设置路由来处理消息的发送和获取：




// server.js
const express = require('express');
const app = express();
const port = 3000;
 
let messages = [];
 
app.use(express.static('public'));
 
app.post('/message', (req, res) => {
  const message = req.body.message;
  messages.push(message);
  res.json({ message });
});
 
app.get('/messages', (req, res) => {
  res.json(messages);
});
 
app.listen(port, () => {
  console.log(`Server running on http://localhost:${port}`);
});

确保你有一个public文件夹，并且里面包含jquery.min.js文件。

运行服务器：




node server.js

在浏览器中打开http://localhost:3000，你将看到一个简单的留言板应用。

开发一个简单的留言板应用——使用 Node.js 、Express 库和 jQuery 库来实现一个简单的留言板应用程序

评论已关闭

推荐阅读