Maison > Article > interface Web > Parlons de la façon dont nodejs ajoute du HTML à la page de requête

Parlons de la façon dont nodejs ajoute du HTML à la page de requête

PHPzoriginal: 2023-04-07 09:30:32728parcourir

Node.js est un runtime JavaScript basé sur le moteur Chrome V8 qui facilite la création d'applications Web hautes performances et évolutives. Dans Node.js, nous pouvons utiliser divers modules et packages pour étendre nos applications afin d'obtenir des fonctionnalités plus puissantes. Dans cet article, nous expliquerons comment ajouter du HTML à la page de requête.

Utiliser un moteur de modèles

Un moteur de modèles est un outil qui combine des données et des modèles pour générer du HTML. Il existe de nombreux moteurs de modèles parmi lesquels choisir dans Node.js, tels que EJS, Guidon et Pug. Utilisez-les pour restituer facilement les données de manière dynamique dans des pages HTML.

Voici un exemple d'utilisation du moteur de template EJS :

Tout d'abord, installez le module EJS :

npm install ejs

Ensuite, ajoutez EJS à votre application en utilisant le code suivant :

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

Dans le code, nous utilisons app .set pour définir EJS comme moteur d'affichage afin que les modèles EJS puissent être utilisés dans l'application. app.set方法来定义EJS作为我们的视图引擎，这样就可以在应用程序中使用EJS模板了。

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

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

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

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

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

使用流

在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);

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

Ensuite, nous pouvons créer un modèle EJS simple pour restituer les données en HTML :

rrreee

Dans le modèle EJS, nous pouvons accéder aux variables et à la logique JavaScript via "<%= %>". Dans cet exemple, « titre » et « message » sont les données transmises au modèle depuis le serveur.

Enfin, nous pouvons restituer les données dans la vue en utilisant le code suivant : 🎜rrreee

createReadStream

pipe

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Découvrez comment accélérer votre installation de Node.jsArticle suivant：Découvrez comment accélérer votre installation de Node.js

Articles Liés

Voir plus