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

鱼C论坛

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

[已解决]留言板

[复制链接]
琅琊王朝
发表于 2023-6-17 23:06:45 | 显示全部楼层 |阅读模式
10鱼币
谁可以给我留言板代码？包括前后端，我可以花10鱼币买
最佳答案
月排行榜 / 总排行榜
歌者文明清理员
2023-6-17 23:06:46
本帖最后由 歌者文明清理员 于 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 函数进行前后端通信。你可以根据自己的需求修改代码。

最佳答案

歌者文明清理员

查看完整内容

留言板通常需要前端和后端两个部分的代码，下面是一个简单的留言板实现代码示例： 前端代码（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
<!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 函数进行前后端通信。你可以根据自己的需求修改代码。

评分

参与人数 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。
  • 安装依赖
    打开命令行，进入项目目录，使用以下命令安装依赖：
    npm install express body-parser
    这会安装 Express 和 body-parser 两个依赖。
  • 启动服务

使用以下命令启动服务：
node index.js
这将启动一个服务器，并输出以下信息：
留言板已启动，访问 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-11-23 20:30

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

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