Heim > Artikel > Web-Frontend > So verbinden Sie HTML mit NodeJS

So verbinden Sie HTML mit NodeJS

PHPzOriginal: 2023-05-13 17:10:381418Durchsuche

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

2.Handlebars.js

Handlebars.js ist eine beliebte Template-Engine, die HTML basierend auf Seiten und Daten generieren kann. Es lässt sich sehr gut in das Express.js-Framework für Node.js integrieren, mit dessen Hilfe Sie HTML und Node.js bequemer verbinden können. #🎜🎜##🎜🎜#Das Folgende ist ein einfaches Beispiel für die Verwendung von Handlers.js zum Verbinden von HTML und Node.js: #🎜🎜#rrreee#🎜🎜#Im obigen Code ist der

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!

JavaScript node.js css html express public JS 数据库

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Welches Unternehmen stellt NodeJS her?Nächster Artikel：Welches Unternehmen stellt NodeJS her?

In Verbindung stehende Artikel

Mehr sehen