自学WEB后端02-基于Express框架完成一个交互留言板!

提示:

浏览器V8是JavaScript的前端运行环境
Node.js 是JavaScript 的后端运行环境
Node.js 中无法调用 DOM 和 BOM等浏览器内置 API

这个作业案例包含2部分内容,

第一部分是前端

前端完成界面内容+CSS框架

第二部分是后端

完成用户留言存储,并返回

1.创建好文件夹目录

我这里为了方便放在了后端myapp目录里,创建了新文件夹放前端文件

通常情况下,前端文件(包括HTML、CSS和前端JavaScript)和后端文件(包括后端JavaScript、服务器配置等)应该放在不同的文件夹中,以便进行区分和管理。

可以按照以下方式组织文件夹结构:

- 网站项目文件夹 -

 -backend 

    server.js 

    myapp.js

- frontend 

  index.html

  style.css

  script.js - 

以上是一种常见的文件夹结构示例,其中backend文件夹用于存放后端文件(如server.js),而frontend文件夹则用于存放前端文件(如index.htmlstyle.cssscript.js等)。

请注意,这只是一种示例文件夹结构,你可以根据自己的需求和项目规模进行调整和扩展。

2.开始写前端代码

HTML 里面代码会通过路径调用对应CSS代码。如果没有CSS代码,也可以不用!

创建一个index.html

这次我们用py打开项目方便看到代码提示

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>留言板</title>
</head>
<body>
  <h1>留言板</h1>

  <div id="messages-container"></div>

  <form id="message-form">
    <input type="text" id="message-input" placeholder="输入留言">
    <button type="submit">发送</button>
  </form>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.0/socket.io.js"></script>
  <script>
    const socket = io();

    // 显示已有的留言
    function displayMessages(messages) {
      const messagesContainer = document.getElementById('messages-container');

      messages.forEach((message) => {
        const messageElement = document.createElement('p');
        messageElement.textContent = message;
        messagesContainer.appendChild(messageElement);
      });
    }

    // 监听初始留言事件,显示已有的留言
    socket.on('initial_messages', (messages) => {
      displayMessages(messages);
    });

    // 监听广播的新留言事件,显示新的留言
    socket.on('broadcast_message', (message) => {
      const messagesContainer = document.getElementById('messages-container');
      const messageElement = document.createElement('p');
      messageElement.textContent = message;
      messagesContainer.appendChild(messageElement);
    });

    // 监听表单提交事件,发送新留言到服务器
    document.getElementById('message-form').addEventListener('submit', (event) => {
      event.preventDefault();
      const messageInput = document.getElementById('message-input');
      const message = messageInput.value.trim();

      if (message !== '') {
        socket.emit('new_message', message);
        messageInput.value = '';
      }
    });
  </script>
</body>
</html>

3.后端代码

创建一个新的 XXXX.js 文件,并将以下代码复制到其中:

这个脚本是后端的脚本!由JavaScript编写

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>留言板</title>
</head>
<body>
  <h1>留言板</h1>

  <div id="messages-container"></div>

  <form id="message-form">
    <input type="text" id="message-input" placeholder="输入留言">
    <button type="submit">发送</button>
  </form>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.0/socket.io.js"></script>
  <script>
    const socket = io();

    // 显示已有的留言
    function displayMessages(messages) {
      const messagesContainer = document.getElementById('messages-container');

      messages.forEach((message) => {
        const messageElement = document.createElement('p');
        messageElement.textContent = message;
        messagesContainer.appendChild(messageElement);
      });
    }

    // 监听初始留言事件,显示已有的留言
    socket.on('initial_messages', (messages) => {
      displayMessages(messages);
    });

    // 监听广播的新留言事件,显示新的留言
    socket.on('broadcast_message', (message) => {
      const messagesContainer = document.getElementById('messages-container');
      const messageElement = document.createElement('p');
      messageElement.textContent = message;
      messagesContainer.appendChild(messageElement);
    });

    // 监听表单提交事件,发送新留言到服务器
    document.getElementById('message-form').addEventListener('submit', (event) => {
      event.preventDefault();
      const messageInput = document.getElementById('message-input');
      const message = messageInput.value.trim();

      if (message !== '') {
        socket.emit('new_message', message);
        messageInput.value = '';
      }
    });
  </script>
</body>
</html>

然后在py中右键运行这个后端js脚本(如果你没有用py打开)那么就需要用命令窗口(CMD

一个非常丑的留言板网站就出现了!

 (如果你没有用py打开)那么就需要用命令窗口(CMD

恭喜,第一次感受到前端和后端协调工作的结果!