设为首页收藏本站
切换到窄版

鱼C论坛

 找回密码
 立即注册
鱼C论坛»论坛 › 技术交流 › Web开发 › 留言板
返回列表 发新帖
查看: 520|回复: 3

[已解决]留言板

[复制链接]
琅琊王朝
发表于 2023-6-17 23:06:45 | 显示全部楼层 |阅读模式
10鱼币
谁可以给我留言板代码？包括前后端，我可以花10鱼币买
最佳答案
月排行榜 / 总排行榜
歌者文明清理员
2023-6-17 23:06:46
本帖最后由 歌者文明清理员 于 2023-6-17 23:13 编辑

留言板通常需要前端和后端两个部分的代码，下面是一个简单的留言板实现代码示例：

前端代码（HTML/CSS/JavaScript）：

html
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>留言板</title>
  5.   </head>
  6.   <body>
  7.     <h1>留言板</h1>
  8.     <form>
  9.       <label for="name">姓名：</label>
  10.       <input type="text" id="name" name="name"><br><br>
  11.       <label for="message">留言：</label><br>
  12.       <textarea id="message" name="message"></textarea><br><br>
  13.       <button type="submit" onclick="submitForm()">提交</button>
  14.     </form>

  16.     <h2>留言列表</h2>
  17.     <ul id="messageList"></ul>

  19.     <script>
  20.       function submitForm() {
  21.         const name = document.getElementById("name").value;
  22.         const message = document.getElementById("message").value;

  24.         fetch("/messages", {
  25.           method: "POST",
  26.           headers: { "Content-Type": "application/json" },
  27.           body: JSON.stringify({ name, message }),
  28.         })
  29.           .then((response) => response.json())
  30.           .then((data) => {
  31.             const messageList = document.getElementById("messageList");
  32.             const newMessage = document.createElement("li");
  33.             newMessage.innerText = `${data.name}: ${data.message}`;
  34.             messageList.appendChild(newMessage);
  35.           });

  37.         // 清空表单
  38.         document.getElementById("name").value = "";
  39.         document.getElementById("message").value = "";
  40.       }

  42.       // 页面加载时获取留言列表
  43.       window.addEventListener("load", () => {
  44.         fetch("/messages")
  45.           .then((response) => response.json())
  46.           .then((data) => {
  47.             const messageList = document.getElementById("messageList");
  48.             data.forEach((message) => {
  49.               const li = document.createElement("li");
  50.               li.innerText = `${message.name}: ${message.message}`;
  51.               messageList.appendChild(li);
  52.             });
  53.           });
  54.       });
  55.     </script>
  56.   </body>
  57. </html>
复制代码

后端代码（Node.js/Express）：

javascript
  1. const express = require("express");
  2. const bodyParser = require("body-parser");

  4. const app = express();
  5. app.use(bodyParser.json());

  7. // 模拟留言数据
  8. let messages = [
  9.   { name: "张三", message: "你好啊" },
  10.   { name: "李四", message: "这个留言板不错" },
  11. ];

  13. // 获取留言列表
  14. app.get("/messages", (req, res) => {
  15.   res.send(messages);
  16. });

  18. // 提交留言
  19. app.post("/messages", (req, res) => {
  20.   const { name, message } = req.body;
  21.   messages.push({ name, message });
  22.   res.send({ name, message });
  23. });
复制代码


app.listen(3000, () => console.log("留言板已启动，访问 http://localhost:3000"));
这个示例使用了 Express 框架和 fetch 函数进行前后端通信。你可以根据自己的需求修改代码。

最佳答案

歌者文明清理员

查看完整内容

留言板通常需要前端和后端两个部分的代码，下面是一个简单的留言板实现代码示例： 前端代码（HTML/CSS/JavaScript）： html 后端代码（Node.js/Express）： javascript app.listen(3000, () => console.log("留言板已启动，访问 http://localhost:3000")); 这个示例使用了 Express 框架和 fetch 函数进行前后端通信。你可以根据自己的需求修改代码。
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

歌者文明清理员
发表于 2023-6-17 23:06:46 | 显示全部楼层    本楼为最佳答案   
本帖最后由 歌者文明清理员 于 2023-6-17 23:13 编辑

留言板通常需要前端和后端两个部分的代码，下面是一个简单的留言板实现代码示例：

前端代码（HTML/CSS/JavaScript）：

html
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <title>留言板</title>
  5.   </head>
  6.   <body>
  7.     <h1>留言板</h1>
  8.     <form>
  9.       <label for="name">姓名：</label>
  10.       <input type="text" id="name" name="name"><br><br>
  11.       <label for="message">留言：</label><br>
  12.       <textarea id="message" name="message"></textarea><br><br>
  13.       <button type="submit" onclick="submitForm()">提交</button>
  14.     </form>

  16.     <h2>留言列表</h2>
  17.     <ul id="messageList"></ul>

  19.     <script>
  20.       function submitForm() {
  21.         const name = document.getElementById("name").value;
  22.         const message = document.getElementById("message").value;

  24.         fetch("/messages", {
  25.           method: "POST",
  26.           headers: { "Content-Type": "application/json" },
  27.           body: JSON.stringify({ name, message }),
  28.         })
  29.           .then((response) => response.json())
  30.           .then((data) => {
  31.             const messageList = document.getElementById("messageList");
  32.             const newMessage = document.createElement("li");
  33.             newMessage.innerText = `${data.name}: ${data.message}`;
  34.             messageList.appendChild(newMessage);
  35.           });

  37.         // 清空表单
  38.         document.getElementById("name").value = "";
  39.         document.getElementById("message").value = "";
  40.       }

  42.       // 页面加载时获取留言列表
  43.       window.addEventListener("load", () => {
  44.         fetch("/messages")
  45.           .then((response) => response.json())
  46.           .then((data) => {
  47.             const messageList = document.getElementById("messageList");
  48.             data.forEach((message) => {
  49.               const li = document.createElement("li");
  50.               li.innerText = `${message.name}: ${message.message}`;
  51.               messageList.appendChild(li);
  52.             });
  53.           });
  54.       });
  55.     </script>
  56.   </body>
  57. </html>
复制代码

后端代码（Node.js/Express）：

javascript
  1. const express = require("express");
  2. const bodyParser = require("body-parser");

  4. const app = express();
  5. app.use(bodyParser.json());

  7. // 模拟留言数据
  8. let messages = [
  9.   { name: "张三", message: "你好啊" },
  10.   { name: "李四", message: "这个留言板不错" },
  11. ];

  13. // 获取留言列表
  14. app.get("/messages", (req, res) => {
  15.   res.send(messages);
  16. });

  18. // 提交留言
  19. app.post("/messages", (req, res) => {
  20.   const { name, message } = req.body;
  21.   messages.push({ name, message });
  22.   res.send({ name, message });
  23. });
复制代码


app.listen(3000, () => console.log("留言板已启动，访问 http://localhost:3000"));
这个示例使用了 Express 框架和 fetch 函数进行前后端通信。你可以根据自己的需求修改代码。

评分

参与人数 1荣誉 +1 鱼币 +1 收起 理由
琅琊王朝 + 1 + 1 感谢大佬的分享！

查看全部评分

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

琅琊王朝
 楼主| 发表于 2023-6-18 09:09:48 | 显示全部楼层
歌者文明清理员 发表于 2023-6-17 23:06
留言板通常需要前端和后端两个部分的代码，下面是一个简单的留言板实现代码示例：

前端代码（HTML/CSS/J ...

额，那后端代码怎么用
想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

歌者文明清理员
发表于 2023-6-18 10:25:22 | 显示全部楼层
琅琊王朝 发表于 2023-6-18 09:09
额，那后端代码怎么用

你需要按照以下步骤来运行后端代码：

  • 安装 Node.js
    如果你还没有安装 Node.js，请前往 https://nodejs.org/zh-cn/ 下载并安装。
  • 创建项目目录
    在你想要放置留言板代码的位置创建一个新目录，例如 guestbook。
  • 复制后端代码
    将我之前给你的后端代码复制到项目目录下，命名为 index.js。
  • 安装依赖
    打开命令行，进入项目目录，使用以下命令安装依赖：

    1. npm install express body-parser
    复制代码

    这会安装 Express 和 body-parser 两个依赖。
  • 启动服务

使用以下命令启动服务：

  1. node index.js
复制代码

这将启动一个服务器，并输出以下信息：

  1. 留言板已启动，访问 http://localhost:3000
复制代码

现在你可以打开浏览器，在地址栏输入 http://localhost:3000 进入留言板页面了。

注意：如果你需要更改端口号，请修改 app.listen(3000, ...) 中的数字。

评分

参与人数 1荣誉 +1 鱼币 +1 收起 理由
琅琊王朝 + 1 + 1 感谢楼主无私奉献！

查看全部评分

想知道小甲鱼最近在做啥？请访问 -> ilovefishc.com
回复

使用道具 举报

返回列表 发新帖
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2024-6-5 11:22

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表