So verbinden Sie HTML mit NodeJS
Mit der rasanten Entwicklung von Webanwendungen in den letzten Jahren wurde Node.js (eine leichte JavaScript-Laufzeitumgebung) auch häufig zur Entwicklung verschiedener serverseitiger Anwendungen verwendet. HTML ist die Kernsprache im Web. Wie kann man also HTML mit dem Node.js-Backend verbinden? In diesem Artikel werden sie einzeln für Sie beantwortet.
Um die Beziehung zwischen HTML und Node.js besser zu verstehen, müssen Sie zunächst verstehen, wie HTML funktioniert. HTML ist die grundlegende Sprache für das Webseitendesign. Sie beschreibt die Struktur und das Layout der Seite durch eine große Anzahl von Tags (Tags) und zeigt Inhalte durch verschiedene Mediendateien (wie Bilder, Sounds und Videos) an. Node.js ist eine auf der JavaScript-Sprache basierende Back-End-Servertechnologie, die Webanfragen verarbeiten und Webseiten an den Client zurückgeben kann. Wenn ein Client eine Webseite anfordert, ruft Node.js die erforderlichen Daten aus der Back-End-Datenbank ab und fügt sie dann dynamisch in den HTML-Code ein, um eine dynamische Webseite zu generieren.
Um die Verbindung zwischen HTML und Node.js zu erreichen, müssen einige Frameworks und Bibliotheken verwendet werden, um den Arbeitsaufwand zu reduzieren. Im Folgenden sind einige häufig verwendete Frameworks und Bibliotheken aufgeführt:
1.Express.js
Express.js ist ein Node.js-basiertes Webanwendungsframework, das Entwicklern hilft, schnell skalierbare Inhalte zu erstellen Webanwendungen. Es bietet eine Reihe von APIs, um die Anwendungsentwicklung zu vereinfachen.
Das Folgende ist ein einfaches Beispiel für die Verwendung von Express.js zum Verbinden von HTML und Node.js:
const express = require('express');
const app = express();
app.use(express.static('public'));
app.get('/', (req, res) => {
res.sendFile(__dirname + '/public/index.html');
});
app.listen(3000, () => {
console.log('App listening on port 3000!');
});Im obigen Code ist der express()</ Mit der code>-Funktion wird eine Express-Anwendungsinstanz erstellt und der Variablen <code>app zugewiesen. Die Funktion app.use() gibt an, dass der Webserver statische Dateien (z. B. CSS- und JavaScript-Dateien) im Verzeichnis public hostet. Die Funktion app.get() gibt an, dass die Datei index.html vom Server gesendet wird, wenn der URL-Pfad / ist. Die Funktion app.listen() bindet die Anwendung an Port 3000. express()函数创建一个Express应用程序实例，并将其赋值给app变量。app.use()函数指定Web服务器将静态文件（如CSS和JavaScript文件）托管在public目录下。app.get()函数指定当URL路径为/时，从服务器发送index.html文件。app.listen()函数将应用程序绑定到端口3000上。
2.Handlebars.js
Handlebars.js是一个流行的模板引擎，它可以根据页面和数据生成HTML。它与Node.js的Express.js框架集成非常好，借助于它可以更方便地连接HTML和Node.js。
以下是一个使用Handlebars.js连接HTML和Node.js的简单示例：
const express = require('express');
const exphbs = require('express-handlebars');
const app = express();
app.engine('handlebars', exphbs());
app.set('view engine', 'handlebars');
app.get('/', (req, res) => {
res.render('home', {
name: 'World'
});
});
app.listen(3000, () => {
console.log('App listening on port 3000!');
});上述代码中，exphbs()函数返回一个Handlebars.js实例，并将其赋值给app.engine()函数的第一个参数。app.set()函数指定模板引擎为Handlebars.js。app.get()函数在访问根路径时渲染home.handlebars模板并传递设置name变量为"World"。
3.Socket.IO
Socket.IO是一个Node.js和浏览器之间实时通信的库。它允许服务器与客户端之间进行双向通信，可以在HTML和Node.js之间实现实时通信。
以下是一个使用Socket.IO连接HTML和Node.js的简单示例：
服务端代码：
const express = require('express');
const app = express();
const server = require('http').createServer(app);
const io = require('socket.io')(server);
io.on('connection', (socket) => {
console.log('a user connected');
socket.on('disconnect', () => {
console.log('user disconnected');
});
socket.on('chat message', (msg) => {
console.log('message: ' + msg);
io.emit('chat message', msg);
});
});
server.listen(3000, () => {
console.log('App listening on port 3000!');
});客户端代码：
<!DOCTYPE html>
<html>
<head>
<title>Socket.IO Example</title>
<script src="/socket.io/socket.io.js"></script>
</head>
<body>
<ul id="messages"></ul>
<form id="message-form">
<input type="text" id="message-input">
<button type="submit">Send</button>
</form>
<script>
var socket = io();
var form = document.getElementById('message-form');
form.addEventListener('submit', function(e) {
e.preventDefault();
var msgInput = document.getElementById('message-input');
socket.emit('chat message', msgInput.value);
msgInput.value = '';
});
socket.on('chat message', function(msg) {
var messages = document.getElementById('messages');
var message = document.createElement('li');
message.innerHTML = msg;
messages.appendChild(message);
});
</script>
</body>
</html>上述代码中，服务端代码使用socket.io模块创建了一个Socket.IO服务器，并在客户端与服务器之间建立连接时记录日志。当接收到客户端发来的chat message消息时，服务器将该消息广播给所有当前连接的客户端。客户端使用socket.io.js
exphbs() Die Funktion code> gibt eine Instanz von Handlers.js zurück und weist sie dem ersten Parameter der Funktion <code>app.engine() zu. Die Funktion app.set() gibt die Vorlagen-Engine als Handlers.js an. Die Funktion app.get() rendert die Vorlage home.handlebars beim Zugriff auf den Stammpfad und übergibt die Namensvariable an „World“. #🎜🎜##🎜🎜#3.Socket.IO#🎜🎜##🎜🎜#Socket.IO ist eine Bibliothek für die Echtzeitkommunikation zwischen Node.js und dem Browser. Es ermöglicht eine bidirektionale Kommunikation zwischen Server und Client und ermöglicht so eine Echtzeitkommunikation zwischen HTML und Node.js. #🎜🎜##🎜🎜#Das Folgende ist ein einfaches Beispiel für die Verwendung von Socket.IO zum Verbinden von HTML und Node.js: #🎜🎜##🎜🎜#Serverseitiger Code: #🎜🎜#rrreee#🎜🎜#Client -seitiger Code: #🎜🎜#rrreee#🎜🎜#Im obigen Code verwendet der Servercode das Modul socket.io, um einen Socket.IO-Server zu erstellen und zu protokollieren, wenn eine Verbindung zwischen dem hergestellt wird Client und Server. Beim Empfang einer Chat-Nachricht-Nachricht von einem Client sendet der Server die Nachricht an alle derzeit verbundenen Clients. Der Client verwendet die Bibliothek socket.io.js, um eine Verbindung zum Socket.IO-Server herzustellen, Formularübermittlungsdaten werden an den Socket.IO-Server gesendet und Broadcast-Nachrichten werden automatisch über den Socket.IO-Client empfangen . #🎜🎜##🎜🎜#Zusammenfassend lässt sich sagen, dass durch die Verbindung zwischen HTML und Node.js die Flexibilität und Echtzeitleistung der Webanwendungsentwicklung erreicht werden kann. Während die Verwendung von Frameworks und Bibliotheken die Verbindung erleichtern kann, ist es wichtig, über ein tiefes Verständnis von HTML, Node.js und Webentwicklung zu verfügen. #🎜🎜#Das obige ist der detaillierte Inhalt vonSo verbinden Sie HTML mit NodeJS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Heiße KI -Werkzeuge
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Undress AI Tool
Ausziehbilder kostenlos
Clothoff.io
KI-Kleiderentferner
AI Hentai Generator
Erstellen Sie kostenlos Ai Hentai.
Heißer Artikel
Heiße Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Heiße Themen
1376
52
Was ist Useffizität? Wie verwenden Sie es, um Nebenwirkungen auszuführen?
Mar 19, 2025 pm 03:58 PM
In dem Artikel wird die Verwendung von UseEffect in React, einen Haken für die Verwaltung von Nebenwirkungen wie Datenabrufen und DOM -Manipulation in funktionellen Komponenten erläutert. Es erklärt die Verwendung, gemeinsame Nebenwirkungen und Reinigung, um Probleme wie Speicherlecks zu verhindern.
Erklären Sie das Konzept des faulen Ladens.
Mar 13, 2025 pm 07:47 PM
Lazy Ladeverzögerung des Ladens von Inhalten bis zur Bedarf, Verbesserung der Webleistung und Benutzererfahrung durch Reduzierung der anfänglichen Ladezeiten und des Serverlasts.
Was sind Funktionen höherer Ordnung in JavaScript und wie können sie verwendet werden, um prägnanter und wiederverwendbarer Code zu schreiben?
Mar 18, 2025 pm 01:44 PM
Funktionen höherer Ordnung in JavaScript verbessern die Übersichtlichkeit, Wiederverwendbarkeit, Modularität und Leistung von Code durch Abstraktion, gemeinsame Muster und Optimierungstechniken.
Wie funktioniert das Currying in JavaScript und wie hoch sind ihre Vorteile?
Mar 18, 2025 pm 01:45 PM
In dem Artikel wird das Currying in JavaScript, einer Technik, die Multi-Argument-Funktionen in Einzelargument-Funktionssequenzen verwandelt. Es untersucht die Implementierung von Currying, Vorteile wie teilweise Anwendungen und praktische Verwendungen, Verbesserung des Code -Lesens
Wie funktioniert der React -Versöhnungsalgorithmus?
Mar 18, 2025 pm 01:58 PM
Der Artikel erläutert den Versöhnungsalgorithmus von React, der das DOM effizient aktualisiert, indem virtuelle DOM -Bäume verglichen werden. Es werden Leistungsvorteile, Optimierungstechniken und Auswirkungen auf die Benutzererfahrung erörtert.
Wie verbinden Sie React -Komponenten mit Connect () an den Redux -Store?
Mar 21, 2025 pm 06:23 PM
In Artikel werden die Verbindungskomponenten an Redux Store mit Connect () verbinden, wobei MapStatetoprops, MapDispatchtoprops und Leistungsauswirkungen erläutert werden.
Was ist usecontext? Wie verwenden Sie es, um den Zustand zwischen Komponenten zu teilen?
Mar 19, 2025 pm 03:59 PM
Der Artikel erläutert den Usecontext in React, was das staatliche Management durch Vermeidung von Prop -Bohrungen vereinfacht. Es wird von Vorteilen wie zentraler Staat und Leistungsverbesserungen durch reduzierte Neulehre erörtert.
Wie verhindern Sie das Standardverhalten bei Ereignishandlern?
Mar 19, 2025 pm 04:10 PM
In Artikeln werden das Standardverhalten bei Ereignishandlern mithilfe von PURDDEFAULT () -Methoden, seinen Vorteilen wie verbesserten Benutzererfahrungen und potenziellen Problemen wie Barrierefreiheitsproblemen verhindern.
