简单留言板网站示例：使用HTML、JavaScript和Express构建

本指南将引导您逐步构建一个简单的留言板网站。

创建HTML文件

创建一个新的HTML文件（例如，index.html），并添加以下代码：

<!DOCTYPE html>
<html>
<head>
	<title>留言板</title>
</head>
<body>
	<h1>欢迎来到留言板</h1>
	<form>
		<label for='name'>姓名：</label>
		<input type='text' id='name' name='name' required><br>

		<label for='message'>留言：</label>
		<textarea id='message' name='message' rows='5' cols='30' required></textarea><br>

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

	<hr>

	<h2>留言列表</h2>
	<ul id='messages'>
		<!-- 这里将显示留言 -->
	</ul>

	<script src='https://code.jquery.com/jquery-3.5.1.min.js'></script>
	<script src='script.js'></script>
</body>
</html>

该HTML文件包含一个表单，用户可以在其中输入姓名和留言。表单将通过JavaScript发送到服务器，服务器将保存留言并将其显示在留言列表中。该文件还包含一个JavaScript文件（script.js），稍后将创建该文件。

创建服务器文件

创建一个名为server.js的新文件，该文件将充当服务器。在该文件中添加以下代码：

const express = require('express');
const app = express();
const port = 3000;

app.use(express.json());
app.use(express.urlencoded({ extended: true }));
app.use(express.static('public'));

let messages = [];

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

app.post('/messages', (req, res) => {
	let message = { name: req.body.name, message: req.body.message };
	messages.push(message);
	res.send(message);
});

app.listen(port, () => {
	console.log(`App listening at http://localhost:${port}`);
});

该文件使用Express框架创建了一个服务器。服务器将监听3000端口，并通过/messages路由处理GET和POST请求。GET请求将返回已保存的所有留言，POST请求将保存新留言并返回该留言。

创建JavaScript文件

创建一个名为script.js的新文件，并添加以下代码：

$(function() {
	getMessages();

	$('form').submit(function(event) {
		event.preventDefault();
		let name = $('#name').val();
		let message = $('#message').val();
		$.post('/messages', { name: name, message: message }, function(response) {
			addMessage(response);
			$('#name').val('');
			$('#message').val('');
		});
	});

	function getMessages() {
		$.get('/messages', function(response) {
			response.forEach(function(message) {
				addMessage(message);
			});
		});
	}

	function addMessage(message) {
		let li = '<li><strong>' + message.name + ':</strong> ' + message.message + '</li>';
		$('#messages').append(li);
	}
});

该文件使用jQuery库处理表单提交和从服务器获取留言。在表单提交时，它将使用POST请求将姓名和留言发送到服务器，并在服务器返回响应时将留言添加到留言列表中。在页面加载时，它将使用GET请求获取所有已保存的留言并将它们添加到留言列表中。

创建public文件夹

创建一个名为public的新文件夹，并将index.html和script.js文件移动到其中。

安装依赖项

在命令行中导航到项目目录并运行以下命令安装所需的依赖项：

npm install express jquery

启动服务器

运行以下命令启动服务器：

node server.js

现在，您可以在浏览器中访问http://localhost:3000并测试留言板网站。

总结

通过以上步骤，您已经成功构建了一个简单的留言板网站。该网站允许用户输入姓名和留言，并将留言保存到服务器并显示在网站上。您可以根据需要扩展该网站的功能，例如添加用户注册和登录功能、添加留言编辑和删除功能，以及使用数据库来存储留言。