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

    提示：

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

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

    第一部分是前端

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

    第二部分是后端

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

    1.创建好文件夹目录

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

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

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

    1. - 网站项目文件夹 -
    2.  
    3.  -backend 
    4.  
    5.     server.js 
    6.  
    7.     myapp.js
    8.  
    9. - frontend 
    10.  
    11.   index.html
    12.  
    13.   style.css
    14.  
    15.   script.js - 

    以上是一种常见的文件夹结构示例，其中backend文件夹用于存放后端文件（如server.js），而frontend文件夹则用于存放前端文件（如index.html、style.css和script.js等）。

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

    2.开始写前端代码

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

    创建一个index.html

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

    1. html>
    2. <html>
    3. <head>
    4.   <meta charset="utf-8">
    5.   <title>留言板title>
    6. head>
    7. <body>
    8.   <h1>留言板h1>
    9.  
    10.   <div id="messages-container">div>
    11.  
    12.   <form id="message-form">
    13.     <input type="text" id="message-input" placeholder="输入留言">
    14.     <button type="submit">发送button>
    15.   form>
    16.  
    17.   <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.4.0/socket.io.js">script>
    18.   <script>
    19.     const socket = io();
    20.  
    21.     // 显示已有的留言
    22.     function displayMessages(messages) {
    23.       const messagesContainer = document.getElementById('messages-container');
    24.  
    25.       messages.forEach((message) => {
    26.         const messageElement = document.createElement('p');
    27.         messageElement.textContent = message;
    28.         messagesContainer.appendChild(messageElement);
    29.       });
    30.     }
    31.  
    32.     // 监听初始留言事件，显示已有的留言
    33.     socket.on('initial_messages', (messages) => {
    34.       displayMessages(messages);
    35.     });
    36.  
    37.     // 监听广播的新留言事件，显示新的留言
    38.     socket.on('broadcast_message', (message) => {
    39.       const messagesContainer = document.getElementById('messages-container');
    40.       const messageElement = document.createElement('p');
    41.       messageElement.textContent = message;
    42.       messagesContainer.appendChild(messageElement);
    43.     });
    44.  
    45.     // 监听表单提交事件，发送新留言到服务器
    46.     document.getElementById('message-form').addEventListener('submit', (event) => {
    47.       event.preventDefault();
    48.       const messageInput = document.getElementById('message-input');
    49.       const message = messageInput.value.trim();
    50.  
    51.       if (message !== '') {
    52.         socket.emit('new_message', message);
    53.         messageInput.value = '';
    54.       }
    55.     });
    56.   script>
    57. body>
    58. html>

    3.后端代码

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

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

    1. DOCTYPE html>
    4.   
    5.   留言板
    8.   
      留言板
    9.  
    10.   
    11.  
    12.   
    13.     
    14.     
    15.   
    16.  
    17.   
    18.

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

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

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

    恭喜，第一次感受到前端和后端协调工作的结果！
  • 相关阅读:
    LL库实现正交编码器数据采集
    Redis线程模型
    1009HW
    有上下界的最小(最大)流| INIT: up[][]为容量上界； low[][]为容量下界；
    大促场景下，如何做好网关高可用防护
    mysql-面试50题-5
    Linux三剑客命令---grep
    C++类与结构体、this指针（二）
    SpringBoot 整合 MongoDB 实战解说
    实操客群分层｜无监督训练与有监督评估，面试中这两大类风控模型最会被问到的问题
  • 原文地址：https://blog.csdn.net/leoysq/article/details/133314401