以下是一个简单的留言板应用的代码实例，使用了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，你将看到一个简单的留言板应用。