Hinweis:
Browser V8 ist die Front-End-Ausführungsumgebung für JavaScript.
Node.js ist die Back-End-Ausführungsumgebung für JavaScript.
Im Browser integrierte APIs wie DOM und BOM können in Node.js nicht aufgerufen werden.
Dieser Hausaufgabenkoffer besteht aus 2 Teilen:
Der erste Teil ist das Frontend
Front-End vervollständigt Schnittstelleninhalt + CSS-Framework
Der zweite Teil ist das Backend
Vollständige Speicherung und Rückgabe von Benutzernachrichten
1. Erstellen Sie ein Ordnerverzeichnis
Der Einfachheit halber habe ich es im Back-End-MyApp-Verzeichnis abgelegt und einen neuen Ordner erstellt, um die Front-End-Dateien abzulegen.
Normalerweise sollten Front-End-Dateien (einschließlich HTML, CSS und Front-End-JavaScript) und Back-End-Dateien (einschließlich Back-End-JavaScript, Serverkonfiguration usw.) zur Unterscheidung und Verwaltung in unterschiedlichen Ordnern abgelegt werden.
Die Ordnerstruktur kann auf folgende Arten organisiert werden:
- 网站项目文件夹 -
-backend
server.js
myapp.js
- frontend
index.html
style.css
script.js - Das Obige ist ein Beispiel für eine gängige Ordnerstruktur, bei der backendOrdner zum Speichern von Back-End-Dateien (z. B. server.js) und frontendOrdner zum Speichern von Front-End-Dateien (z. B. index.html, style.cssusw. script.js) verwendet werden.
Bitte beachten Sie, dass es sich hierbei lediglich um eine Beispielordnerstruktur handelt, die Sie je nach Bedarf und Projektgröße anpassen und erweitern können.
2. Beginnen Sie mit dem Schreiben von Front-End-Code
Der Code im HTML ruft den entsprechenden CSS-Code über den Pfad auf. Wenn kein CSS-Code vorhanden ist, müssen Sie ihn nicht verwenden!
Erstellen Sie eine index.html
Dieses Mal verwenden wir py, um das Projekt zu öffnen, damit wir die Code-Eingabeaufforderungen leicht sehen können.
<!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. Backend-Code
Erstellen Sie eine neue XXXX- .js Datei und kopieren Sie den folgenden Code hinein:
Dieses Skript ist ein Backend-Skript! In JavaScript geschrieben
<!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>
Klicken Sie dann mit der rechten Maustaste in py, um das Back-End-JS-Skript auszuführen ( wenn Sie es nicht mit py geöffnet haben), müssen Sie das Befehlsfenster (CMD ) verwenden.
Eine sehr hässliche Message-Board-Website ist aufgetaucht!
( Wenn Sie es nicht mit py geöffnet haben), müssen Sie das Befehlsfenster (CMD ) verwenden.
