Mit zunehmender Reife und Entwicklung von Webanwendungen beginnen immer mehr Entwickler, Node.js zum Erstellen von Back-End-Anwendungen zu verwenden. Node.js ist eine serverseitige Open-Source-JavaScript-Umgebung zum Erstellen leistungsstarker und skalierbarer Webanwendungen. Es bietet einige sehr nützliche Module und Bibliotheken, einschließlich einer Template-Engine, die HTML generieren kann.
In diesem Artikel erfahren Sie, wie Sie HTML mithilfe von Node.js dynamisch ändern. Wir stellen zunächst einige häufig verwendete Template-Engines vor und besprechen dann deren Verwendung mit Node.js. Abschließend zeigen wir einige praktische Beispiele, die Ihnen helfen, diese Techniken besser zu verstehen und zu üben.
Häufig verwendete Template-Engines
Bevor wir mit der Verwendung von Template-Engines beginnen, müssen wir die Unterschiede zwischen verschiedenen Template-Engines und ihre Vor- und Nachteile verstehen. Im Folgenden sind einige häufig verwendete Template-Engines aufgeführt:
Template-Engines mit Node.js verwenden
Da wir nun die verschiedenen Template-Engines verstanden haben, können wir damit beginnen, sie zum dynamischen Ändern von HTML zu verwenden. Hier sind einige Schritte zur Verwendung einer Template-Engine mit Node.js:
npm install ejs --save
const express = require('express');
const app = express();
app.set('views', './views');
app.set('view engine', 'ejs');
app.get('/users', (req, res) => {
const users = [
{ name: 'Alice', email: 'alice@example.com' },
{ name: 'Bob', email: 'bob@example.com' },
{ name: 'Charlie', email: 'charlie@example.com' },
];
res.render('users', { users });
});
app.listen(3000, () => {
console.log('listening on port 3000');
});In dieser Anwendung richten wir das Ansichtsverzeichnis und die Ansichts-Engine der Anwendung ein und stellen einen einfachen Routenhandler bereit, der eine Ansicht namens „users“ rendert und ein Objekt an die Ansicht übergibt, das ein Array mit dem Namen enthält „Benutzer“.
<!doctype html>
<html>
<head>
<title>Users</title>
</head>
<body>
<h1>Users</h1>
<ul>
<% users.forEach(user => { %>
<li><%= user.name %> - <%= user.email %></li>
<% }); %>
</ul>
</body>
</html>In dieser Ansichtsdatei verwenden wir die Syntax der EJS-Vorlagen-Engine, um dynamische Daten einzubetten. Wir haben eine forEach-Schleife verwendet, um das Benutzerarray zu durchlaufen, und das <% %>-Tag im HTML-Code verwendet, um den JavaScript-Code auszuführen. Wir verwenden auch das Tag <%= %>, um Benutzerdaten einzubetten.
node app.js
Öffnen Sie dann einen Browser und besuchen Sie http://localhost:3000/users. Sie sollten eine Seite mit drei Benutzern sehen können, von denen jeder einen Namen und eine E-Mail-Adresse enthält.
Zusammenfassung
In diesem Artikel haben wir untersucht, wie man HTML mithilfe von Node.js und einer Template-Engine dynamisch ändert. Wir stellten einige häufig verwendete Template-Engines vor und zeigten, wie man sie mit EJS kombiniert. Durch den Einsatz dieser Technologien können Sie ganz einfach dynamisches HTML aus Ihren Webanwendungen generieren und ein leistungsstarkes Benutzererlebnis bieten.
Das obige ist der detaillierte Inhalt vonSo ändern Sie HTML in NodeJS dynamisch. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Treiber für Laptop-Soundkarte
Detaillierte Erläuterung der Verwendung der Oracle-Substr-Funktion
Der Unterschied zwischen CSS3.0 und CSS2.0
So verwenden Sie die Notnull-Annotation
So kaufen Sie echte Ripple-Münzen
Datenanalysemethoden
Verwendung des Oracle-Cursors
So stellen Sie mit sqlplus eine Verbindung zur Datenbank her
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
