ホームページ >ウェブフロントエンド >フロントエンドQ&A >Nodejs がリクエスト ページに HTML を追加する方法について話しましょう
Nodejs がリクエスト ページに HTML を追加する方法について話しましょう
- PHPzオリジナル
- 2023-04-07 09:30:32756ブラウズ
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 サイトの他の関連記事を参照してください。