Nodejs がリクエストページに HTML を追加する方法について話しましょう-フロントエンドQ&A-php.cn

Nodejs がリクエストページに HTML を追加する方法について話しましょう

PHPz

リリース： 2023-04-07 10:45:19

オリジナル

704 人が閲覧しました

Node.js は、Chrome V8 エンジンに基づく JavaScript ランタイムで、高性能でスケーラブルな Web アプリケーションの構築を簡単にします。 Node.js では、さまざまなモジュールやパッケージを使用してアプリケーションを拡張し、より強力な機能を実現できます。今回はリクエストページにHTMLを追加する方法を解説します。

テンプレートエンジンの使用

テンプレートエンジンは、データとテンプレートを組み合わせて HTML を生成するツールです。 Node.js には、EJS、Handlebars、Pug など、多数のテンプレートエンジンから選択できます。これらを使用すると、データを HTML ページに動的に簡単にレンダリングできます。

次に、EJS テンプレートエンジンの使用例を示します。

まず、EJS モジュールをインストールします。

npm install ejs

ログイン後にコピー

次に、次のコードを使用してアプリケーションに EJS を追加します。 :

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

ログイン後にコピー

コードでは、app.set メソッドを使用して EJS をビューエンジンとして定義し、アプリケーションで EJS テンプレートを使用できるようにします。

次に、データを HTML にレンダリングするための単純な EJS テンプレートを作成できます:

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

ログイン後にコピー

EJS テンプレートでは、「<%= %>」JavaScript 変数と論理。この例では、「タイトル」と「メッセージ」はサーバーからテンプレートに渡されるデータです。

最後に、次のコードを使用してデータをビューにレンダリングできます。

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 メソッドを使用してストリームを応答に書き込み、それによって HTML ファイルのコンテンツを要求されたページに動的に追加します。

概要:

Node.js を使用すると、要求されたページに HTML を簡単に追加できます。テンプレートエンジンメソッドを使用すると、データを HTML ページに動的にレンダリングできます。一方、ストリームを使用すると、要求されたページに HTML ファイルを動的に追加できます。ニーズに応じて、タスクを完了するための適切な方法を選択できます。

以上がNodejs がリクエストページに HTML を追加する方法について話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。