Lassen Sie uns darüber sprechen, wie nodejs der Anforderungsseite HTML hinzufügt-Front-End-Fragen und Antworten-php.cn

Lassen Sie uns darüber sprechen, wie nodejs der Anforderungsseite HTML hinzufügt

PHPz

Freigeben： 2023-04-07 10:45:19

Original

757 Leute haben es durchsucht

Node.js ist eine JavaScript-Laufzeitumgebung, die auf der Chrome V8-Engine basiert und die einfache Erstellung leistungsstarker, skalierbarer Webanwendungen ermöglicht. In Node.js können wir verschiedene Module und Pakete verwenden, um unsere Anwendungen zu erweitern und eine leistungsfähigere Funktionalität zu erreichen. In diesem Artikel erklären wir, wie man HTML zur Anfrageseite hinzufügt.

Verwenden Sie eine Template-Engine

Eine Template-Engine ist ein Tool, das Daten und Vorlagen kombiniert, um HTML zu generieren. In Node.js stehen viele Template-Engines zur Auswahl, z. B. EJS, Handlers und Pug. Verwenden Sie sie, um Daten einfach dynamisch in HTML-Seiten zu rendern.

Hier ist ein Beispiel für die Verwendung der EJS-Vorlagen-Engine:

Installieren Sie zunächst das EJS-Modul:

npm install ejs

Nach dem Login kopieren

Fügen Sie dann EJS zu Ihrer Anwendung hinzu, indem Sie den folgenden Code verwenden:

const express = require('express');
const app = express();
const ejs = require('ejs');
app.set('view engine', 'ejs');

Nach dem Login kopieren

Im Code verwenden wir app .set-Methode, um EJS als unsere Ansichts-Engine zu definieren, damit EJS-Vorlagen in der Anwendung verwendet werden können. app.set方法来定义EJS作为我们的视图引擎，这样就可以在应用程序中使用EJS模板了。

接下来，我们可以创建一个简单的EJS模板来渲染数据到HTML中：

<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
</head>
<body>
    <h1><%= message %></h1>
</body>
</html>

Nach dem Login kopieren

在EJS模板中，我们可以通过“<%= %>”来访问JavaScript变量和逻辑。在这个例子中，“title”和“message”是从服务器传递到模板中的数据。

最后，我们可以使用以下代码将数据渲染到视图中：

app.get('/', (req, res) => {
    res.render('index', { title: 'Node.js', message: 'Hello World!' });
});

Nach dem Login kopieren

使用流

在Node.js中，我们可以使用流来将数据动态添加到HTML文档中。其中，Readable流用来从源头读取数据，然后Writable流用来写入数据到目标。通过这种方式我们可以很容易地将HTML文档转化为可读取流，并且将需要插入的HTML数据到可写入流中。

以下是一个简单的示例：

const http = require('http');
const fs = require('fs');

http.createServer(function (req, res) {
  res.writeHead(200, { 'Content-Type': 'text/html' });
  const readable = fs.createReadStream(__dirname + '/index.html');
  readable.pipe(res);
}).listen(3000);

Nach dem Login kopieren

在上述示例中，我们首先使用createReadStream方法创建一个可读取流，然后将HTML文档传递到流中。然后我们使用pipe

Als nächstes können wir eine einfache EJS-Vorlage erstellen, um Daten in HTML zu rendern:

rrreee

In der EJS-Vorlage können wir über „<%= %>“ auf JavaScript-Variablen und -Logik zugreifen. In diesem Beispiel sind „Titel“ und „Nachricht“ die Daten, die vom Server an die Vorlage übergeben werden.

Schließlich können wir die Daten mit dem folgenden Code in die Ansicht rendern: 🎜rrreee

createReadStream

pipe

Das obige ist der detaillierte Inhalt vonLassen Sie uns darüber sprechen, wie nodejs der Anforderungsseite HTML hinzufügt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!