留言板
谁可以给我留言板代码？包括前后端，我可以花10鱼币买 本帖最后由 歌者文明清理员 于 2023-6-17 23:13 编辑留言板通常需要前端和后端两个部分的代码，下面是一个简单的留言板实现代码示例：
前端代码（HTML/CSS/JavaScript）：
html
<!DOCTYPE html>
<html>
<head>
<title>留言板</title>
</head>
<body>
<h1>留言板</h1>
<form>
<label for="name">姓名：</label>
<input type="text" id="name" name="name"><br><br>
<label for="message">留言：</label><br>
<textarea id="message" name="message"></textarea><br><br>
<button type="submit" onclick="submitForm()">提交</button>
</form>
<h2>留言列表</h2>
<ul id="messageList"></ul>
<script>
function submitForm() {
const name = document.getElementById("name").value;
const message = document.getElementById("message").value;
fetch("/messages", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ name, message }),
})
.then((response) => response.json())
.then((data) => {
const messageList = document.getElementById("messageList");
const newMessage = document.createElement("li");
newMessage.innerText = `${data.name}: ${data.message}`;
messageList.appendChild(newMessage);
});
// 清空表单
document.getElementById("name").value = "";
document.getElementById("message").value = "";
}
// 页面加载时获取留言列表
window.addEventListener("load", () => {
fetch("/messages")
.then((response) => response.json())
.then((data) => {
const messageList = document.getElementById("messageList");
data.forEach((message) => {
const li = document.createElement("li");
li.innerText = `${message.name}: ${message.message}`;
messageList.appendChild(li);
});
});
});
</script>
</body>
</html>
后端代码（Node.js/Express）：
javascript
const express = require("express");
const bodyParser = require("body-parser");
const app = express();
app.use(bodyParser.json());
// 模拟留言数据
let messages = [
{ name: "张三", message: "你好啊" },
{ name: "李四", message: "这个留言板不错" },
];
// 获取留言列表
app.get("/messages", (req, res) => {
res.send(messages);
});
// 提交留言
app.post("/messages", (req, res) => {
const { name, message } = req.body;
messages.push({ name, message });
res.send({ name, message });
});
app.listen(3000, () => console.log("留言板已启动，访问 http://localhost:3000"));
这个示例使用了 Express 框架和 fetch 函数进行前后端通信。你可以根据自己的需求修改代码。 歌者文明清理员 发表于 2023-6-17 23:06
留言板通常需要前端和后端两个部分的代码，下面是一个简单的留言板实现代码示例：
前端代码（HTML/CSS/J ...
额，那后端代码怎么用 琅琊王朝 发表于 2023-6-18 09:09
额，那后端代码怎么用
你需要按照以下步骤来运行后端代码：
[*]安装 Node.js
如果你还没有安装 Node.js，请前往 https://nodejs.org/zh-cn/ 下载并安装。
[*]创建项目目录
在你想要放置留言板代码的位置创建一个新目录，例如 guestbook。
[*]复制后端代码
将我之前给你的后端代码复制到项目目录下，命名为 index.js。
[*]安装依赖
打开命令行，进入项目目录，使用以下命令安装依赖：
npm install express body-parser
这会安装 Express 和 body-parser 两个依赖。
[*]启动服务
使用以下命令启动服务：
node index.js
这将启动一个服务器，并输出以下信息：
留言板已启动，访问 http://localhost:3000
现在你可以打开浏览器，在地址栏输入 http://localhost:3000 进入留言板页面了。
注意：如果你需要更改端口号，请修改 app.listen(3000, ...) 中的数字。
页:
[1]