この記事では、Node.js と Express.js を使用した Web サイトの構(gòu)築について詳しく説明します。 Express.js は、Node.js 上に堅牢でスケーラブルな Web アプリケーションを作成するための重要なフレームワークです。今日は、ルーティング、ミドルウェア、テンプレート エンジン、およびCookieセッション。

コンセプトのハイライト:

app.use(コールバック)
app.use(パス, コールバック)
取得、投稿、配置、削除
エクスプレスミドルウェア
スタック內(nèi)の次のミドルウェアを呼び出す
Express Router の使用
Cookie セッション管理ミドルウェア
テンプレート変數(shù)
EJS

1.app.use(コールバック)

Express.js の app.use(callback) メソッドは、ミドルウェア関數(shù)をマウントするために使用されます。このミドルウェアは、HTTP メソッドや URL に関係なく、アプリケーションに対して行われるすべてのリクエストに対して実行されます。

例) この例では、ミドルウェアは受信リクエストごとに実行され、メッセージをコンソールに記録します。

const express = require('express'); 
const app = express();

app.use((req, res, next) => {
  console.log('Middleware running for every request.');
  next();
});

2.app.use(パス、コールバック)

この方法では、特定のルートにミドルウェアをマウントできます。ミドルウェアは、リクエストが指定されたパスと一致する場合にのみ実行されます。

例) この例では、ミドルウェアは /users で始まるルートに対してのみトリガーされます。

app.use('/users', (req, res, next) => {
  console.log('Middleware only for /users route.');
  next();
});

3. 取得、投稿、挿入、削除

これらのメソッドを使用すると、特定のルートで特定の HTTP メソッド (GET、POST、PUT、DELETE など) を処理できます。ここで Web アプリケーションの動作を定義します。

例) 各メソッドは、ユーザー管理のための CRUD 操作 (作成、読み取り、更新、削除) の異なる部分を処理します。

app.get('/users', (req, ress) => {
  res.send('Fetching all users');
});

app.post('/users', (req, res) => {
  res.send('Creating a new user');
});

app.put('/users/:id', (req, res) => {
  res.send(`Updating user with ID: ${req.params.id}`);
});

app.delete('/users/:id', (req, res) => {
  res.send('Deleting user with ID: ${req.params.id}`);
});

4. エクスプレスミドルウェア

Express.js のミドルウェア関數(shù)は、リクエスト (req) オブジェクトとレスポンス (res) オブジェクトにアクセスでき、コードを?qū)g行したり、変更を加えたり、リクエストとレスポンスのサイクルを終了したりできます。

主な特徴:

• コードの実行: 任意のロジックまたは操作を?qū)g行できます。
• リクエスト/レスポンスの変更: ミドルウェアは、ヘッダーを更新したり、req にデータを追加したり、res オブジェクトを変更したりできます。
• リクエスト/レスポンス サイクルの終了: ミドルウェアはデータをクライアントに送り返し、サイクルを終了できます。

例) この例では、ミドルウェアがカスタム データをリクエスト オブジェクトに追加し、ルート ハンドラーがそれにアクセスします。

app.use((req, res, next) => {
  req.customData = 'Some custom data';
  next();
});

app.get('/', (req, res) => {
  res.send(`Data from middleware: ${req.customData}`);
});

5. 次のミドルウェアの呼び出し

上記の例では、 next() を使用して、次のミドルウェアまたはルート ハンドラーに制御を渡します。 next() を呼び出さないと、サイクルが先に進まないため、リクエストはハングします。

例) これにより、各ミドルウェアがチェーン內(nèi)の次のミドルウェアに制御を渡すことができます。

const express = require('express'); 
const app = express();

app.use((req, res, next) => {
  console.log('Middleware running for every request.');
  next();
});

6. Express Routerの使用

Express Router は、モジュール型アプリケーションでルートを整理するための優(yōu)れたツールです。これは、ルートをより小さく管理しやすい部分に分割するのに役立ちます。

例) この例では、ルーターは /users にマウントされており、/users/profile へのリクエストはルーターのルートによって処理されます。

app.use('/users', (req, res, next) => {
  console.log('Middleware only for /users route.');
  next();
});

7. Cookieセッション管理ミドルウェア

セッションと Cookie の処理は、ユーザーの認証と狀態(tài)を管理するために非常に重要です。 Express.js は、セッション データを管理するためのミドルウェアを提供します。

例) Express-session を使用して、セッションを初期化し、ユーザーのセッション全體でアクセスできるセッション データを設(shè)定します。

app.get('/users', (req, ress) => {
  res.send('Fetching all users');
});

app.post('/users', (req, res) => {
  res.send('Creating a new user');
});

app.put('/users/:id', (req, res) => {
  res.send(`Updating user with ID: ${req.params.id}`);
});

app.delete('/users/:id', (req, res) => {
  res.send('Deleting user with ID: ${req.params.id}`);
});

8. テンプレート変數(shù)

テンプレート エンジンを使用してビューをレンダリングする場合、変數(shù)を渡してコンテンツを動的に生成できます。たとえば、EJS では、レンダリングのために変數(shù)をビューに渡すことができます。

例) この例では、タイトル変數(shù)とメッセージ変數(shù)を EJS テンプレートに渡します。

app.use((req, res, next) => {
  req.customData = 'Some custom data';
  next();
});

app.get('/', (req, res) => {
  res.send(`Data from middleware: ${req.customData}`);
});

9. EJS (埋め込みJavaScript)

EJS は、HTML を記述し、HTML 構(gòu)造內(nèi)に JavaScript を直接埋め込むことができる人気のテンプレート エンジンです。シンプルですが強力で、動的 Web ページ用の Express.js とうまく統(tǒng)合されます。

例) 構(gòu)文は、JavaScript 式を HTML に挿入するために使用されます。

app.use((req, res, next) => {
  console.log('First middleware');
  next();
});

app.use((req, res, next) => {
  console.log('Second middlware');
});

以上がNode.js と Express.js を使用した Web サイトの構(gòu)築の詳細內(nèi)容です。詳細については、PHP 中國語 Web サイトの他の関連記事を參照してください。