So ändern Sie HTML in NodeJS dynamisch-Front-End-Fragen und Antworten-php.cn

So ändern Sie HTML in NodeJS dynamisch

PHPz

Freigeben： 2023-04-26 09:56:19

Original

772 Leute haben es durchsucht

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:

EJS: EJS ist eine JavaScript-basierte Template-Engine, die uns dabei helfen kann, dynamische Daten mithilfe der JavaScript-Syntax in HTML-Code einzubetten. Sein Hauptvorteil besteht darin, dass es einfach zu erlernen und zu verwenden ist und Sie es auch für clientseitiges und serverseitiges Rendering verwenden können.
Handlebars: Handlebars ist eine weitere JavaScript-basierte Template-Engine, die es uns ermöglicht, dynamische Daten mithilfe der Handlebars-Syntax in HTML-Code einzubetten. Seine Hauptvorteile sind die hohe Kompatibilität, da es sowohl für clientseitiges als auch serverseitiges Rendering verwendet werden kann und eine sehr gute Leistung aufweist.
Jade: Jade ist eine zeichenbasierte Vorlagen-Engine, die uns hilft, dynamische Daten mithilfe von Einrückungen und Leerzeichen in HTML-Code einzubetten. Seine Vorteile sind eine übersichtliche Syntax und eine einfache Wartung.

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:

Installieren Sie die Template-Engine: Sie müssen zunächst die Template-Engine Ihrer Wahl installieren. In diesem Beispiel verwenden wir EJS als unsere Template-Engine. Um EJS zu installieren, führen Sie den folgenden Befehl aus:

npm install ejs --save

Nach dem Login kopieren

Express-Anwendung konfigurieren: Um unsere Anwendung zu erstellen, verwenden wir das Express-Framework für Node.js. Um Express verwenden zu können, müssen Sie es installieren und dann in Ihrer Anwendung einrichten. Hier ist der Beispielcode:

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');
});

Nach dem Login kopieren

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“.

Ansichtsdatei erstellen: Als nächstes müssen wir eine Ansichtsdatei mit dem Namen „users.ejs“ erstellen. Diese Datei enthält dynamische Daten und HTML-Code. Das Folgende ist der Beispielcode:

<!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>

Nach dem Login kopieren

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.

Führen Sie die Anwendung aus: Schließlich müssen wir unsere Anwendung ausführen. Um die Anwendung auszuführen, führen Sie den folgenden Befehl aus:

node app.js

Nach dem Login kopieren

Ö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!