nodejsはWeb側を実装します

WBOY
リリース: 2023-05-08 13:08:38
オリジナル
791 人が閲覧しました

nodejs は、サーバー側で実行される JavaScript ランタイム環境であり、開発者が JavaScript でサーバー側のコードを記述して、Web フロントエンドと対話できるようにします。

ここ数年、効率的でスケーラブルでデプロイが簡単な開発環境を提供するため、nodejs の人気が高まっています。 LinkedIn、Walmart、PayPal など、多くの企業や組織が Nodejs を採用しています。

この記事では、nodejs を使用して Web アプリケーション、ルーティング、ミドルウェアのデプロイメント、サーバー側データをレンダリングするためのテンプレート エンジンの使用などの Web 側開発を実装する方法を紹介します。

  1. nodejs のインストール

まず、nodejs をインストールする必要があります。さまざまなオペレーティング システムのダウンロード リンクは、nodejs 公式 Web サイトで見つけることができます。

インストールが完了したら、ターミナルに「node -v」と入力して、インストールが成功したかどうかを確認できます。成功すると、nodejs のバージョン番号が表示されます。

  1. Web アプリケーションの作成

次に、nodejs を使用して簡単な Web アプリケーションを作成できます。ターミナルを開き、空のフォルダーに移動し、次のコマンドを入力します。

npm init -y
ログイン後にコピー

このコマンドは、プロジェクトのメタデータを含む新しい package.json ファイルを作成します。

次に、nodejs で最も人気のある Web アプリケーション フレームワークの 1 つである Express モジュールをインストールする必要があります。次のコマンドを使用してインストールできます。

npm install express
ログイン後にコピー

インストールが完了したら、nodejs コードを含むindex.js ファイルを作成できます。 Index.js で、express モジュールをインポートし、新しいインスタンスを作成します。

const express = require('express');  
const app = express();  
ログイン後にコピー

これは、アプリケーションが Express によって提供されるメソッドとプロパティを使用できることを意味します。次に、http リクエストを受信するためにどのポートをリッスンするかをアプリケーションに指示する必要があります。

const port = 3000; 
app.listen(port, () => {  
  console.log(`Server started on port ${port}`);  
});
ログイン後にコピー

ここでは、アプリケーションにポート 3000 をリッスンするように指示します。そして、console.log() を使用してメッセージを出力し、サーバーが起動したことを確認します。

  1. ルートの追加

アプリケーション用に基本的なフレームワークを設定したので、別のページに移動するためのルートの追加を開始する必要があります。 Express では、ルートはアプリケーションがクライアントの要求にどのように応答するかを定義します。

次のコードを使用して、単純な動的ルートを作成できます:

app.get('/', (req, res) => {  
  res.send('Hello, World!');  
})
ログイン後にコピー

このルートは、ユーザーがルート パスをリクエストしたときに「Hello, World!」メッセージを返す GET リクエストを定義します。 。

静的ルーティングを使用して、アプリケーションの静的ページとファイルを定義することもできます。

app.use(express.static('public'));  
ログイン後にコピー

ここでは、「public」フォルダーで静的ファイルを探すようにサーバーに指示します。これには、HTML、CSS、JavaScript、画像、その他の静的リソースが含まれます。

  1. ミドルウェア

ミドルウェアは、ルーティングの前後に実行されるコードです。これを使用して要求オブジェクトと応答オブジェクトを処理および変更することができるため、アプリケーションにより多くの機能が提供されます。

たとえば、次のコードを使用して、すべてのルートのロギング ミドルウェアを追加できます。

app.use((req, res, next) => {  
  console.log(`${req.method} ${req.url}`);  
  next();  
});
ログイン後にコピー

ここでは、HTTP メソッドと URL を記録する「logger」というミドルウェア関数を定義し、リクエストとレスポンスのオブジェクトを次のミドルウェアに送信します。

  1. テンプレート エンジン

ほとんどの Web アプリケーションでは、サーバー側で HTML ページを動的に生成する必要があります。この機能を実現するには、テンプレート エンジンを使用できます。

テンプレート エンジンを使用すると、クライアントからレンダリングするのではなく、サーバーから HTML をレンダリングできます。これは通常、読み込み時間が短縮され、検索エンジンの最適化 (SEO) が向上することを意味します。

nodejs では、Pug、Handlebars、EJS など、さまざまなテンプレート エンジンから選択できます。

次は、EJS テンプレート エンジンを使用して変数をレンダリングする例です。

app.set('view engine', 'ejs');  
app.get('/', (req, res) => {  
  const data = {  
    title: 'Hello, World!',  
    message: 'This is the home page.'  
  };  
  res.render('index', data);  
});
ログイン後にコピー

ここでは、まずテンプレート エンジンを EJS に設定します。次に、タイトルとメッセージを含むプロパティを持つデータ オブジェクトを定義します。最後に、res.render() メソッドを使用して「index」という名前の EJS テンプレートをレンダリングし、データ オブジェクトをテンプレートに渡します。

EJS テンプレートでは、次のコードを使用してこれらの変数にアクセスできます:

<h1><%= title %></h1>  
<p><%= message %></p>
ログイン後にコピー

ここでは、<%= %> の構文を使用して JavaScript 変数を出力します。テンプレートがレンダリングされると、これらの変数は実際のデータに置き換えられます。

  1. アプリケーションのデプロイ

Web アプリケーションの開発が完了したら、誰でもアクセスできるように Web サーバーにデプロイできます。

一般的な方法の 1 つは、アマゾン ウェブ サービス (AWS) や Microsoft Azure などのクラウド コンピューティング サービスを使用することです。これらのサービスは、Web アプリケーションの展開とホストに使用できる仮想コンピューター インスタンス、コンテナー、およびアプリケーション プラットフォームを提供します。

Heraku などのプラットフォームをデプロイメント ターゲットとして使用することもできます。これらのプラットフォームは、コードをリモート サーバーにデプロイするために使用できるシンプルなコマンド ライン ツールとデプロイメント プロセスを提供します。

概要

この記事では、nodejs を使用して Web サイド開発を実装する方法を紹介しました。基本的な Web アプリケーションを作成し、ルーティングとミドルウェアを追加し、テンプレート エンジンを使用してサーバー側データをレンダリングする方法を学びました。さらに、アプリケーションを広く使用できるように Web サーバーにアプリケーションを展開する方法についても説明しました。

以上がnodejsはWeb側を実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート