ホームページ  >  記事  >  ウェブフロントエンド  >  Nodejs Express EJSのインストール

Nodejs Express EJSのインストール

WBOY
WBOYオリジナル
2023-05-11 18:35:07672ブラウズ

Node.js は、開発者が JavaScript 言語を使用して高性能のバックエンド アプリケーションを開発できるようにする、人気のある JavaScript ランタイム環境です。 Node.js には、シンプルで柔軟な Web アプリケーション フレームワークである Express.js が付属しており、開発者が美しく保守しやすい Web アプリケーションを作成するのに役立つ強力なテンプレート エンジン EJS も提供します。

この記事では、Node.js、Express.js、および EJS をインストールする方法と、それらを組み合わせて使用​​して単純な Web アプリケーションを作成する方法について説明します。

Node.js のインストール

始める前に、コンピューターに Node.js ランタイム環境がインストールされていることを確認してください。まだインストールしていない場合は、以下の手順に従ってインストールしてください。

  1. [Node.js 公式 Web サイト](https://nodejs.org/) を開き、「ダウンロード」をクリックします。 」ボタンをクリックし、ダウンロードするシステムバージョンに合った操作を選択してください。
  2. ダウンロードが完了したら、インストール パッケージをダブルクリックしてインストールします。インストール ウィザードの手順に従うだけです。
  3. インストールが完了したら、ターミナル (またはコマンド ライン ウィンドウ) を開き、次のコマンドを入力して Node.js が正しくインストールされているかどうかを確認します:

    node -v

    If Node.js正常にインストールされると「Node.jsのバージョン情報を表示します」と表示されます。

Express.js のインストール

Node.js をインストールした後、npm コマンド (Node.js に付属のパッケージ マネージャー) を使用して Express.js をインストールできます。 。インストールするには、以下の手順に従ってください。

  1. ターミナル (またはコマンド ライン ウィンドウ) を開き、次のコマンドを入力します。

    npm init

    このコマンドは、新しい Node.js プロジェクト。プロンプトに従って段階的に入力してください。

  2. 初期化が完了したら、次のコマンドを入力して Express.js をインストールします。

    npm install express --save

    このコマンドは、npm リポジトリから最新バージョンの Express.js をインストールします。それを依存関係としてプロジェクトに追加します。

  3. インストールが成功したら、プロジェクトのルート ディレクトリに app.js という名前の新しいファイルを作成します。これは、Express.js アプリケーションへの主要なエントリ ポイントです。
  4. app.js ファイルに次のコードを入力して、単純な Express.js アプリケーションを作成します。

    const express = require('express');
    const app = express();
    
    app.get('/', (req, res) => {
      res.send('Hello World!');
    });
    
    app.listen(3000, () => {
      console.log('Server listening on port 3000!');
    });

    このアプリケーションは、すべてからのリクエストに応答します。クライアント ブラウザからの HTTP GET リクエストは、「Hello World!」を含む文字列を返します。

  5. app.js ファイルを保存した後、ターミナル (またはコマンド ライン ウィンドウ) に切り替え、作業ディレクトリを app.js# に切り替えます。 ## ファイル ディレクトリに移動し、次のコマンドを実行します。

    node app.js

    すべてがうまくいけば、ターミナル出力「サーバーはポート 3000 をリッスンしています!」が表示されるはずです。これは、Express.js アプリケーションが実行中であり、http://localhost:3000/ にアクセスすることでアクセスできることを示しています。

EJS のインストール

EJS は、Express.js アプリケーションで動的コンテンツを含む Web ページを作成するのに役立つ、シンプルで使いやすいテンプレート エンジンです。以下の手順に従ってインストールしてください:

  1. ターミナル (またはコマンド ライン ウィンドウ) を開き、次のコマンドを入力します:

    npm install ejs --save

    このコマンドは、次の最新バージョンをインストールします。 npm リポジトリ EJS を作成し、それを依存関係としてプロジェクトに追加します。

  2. アプリケーションのルート ディレクトリに、
  3. views という新しいフォルダーを作成します。これは、Express.js アプリケーションが EJS テンプレート ファイルを保存する場所になります。
  4. views フォルダーに、index.ejs という名前の新しいファイルを作成します。これは、Web ページのメインのテンプレート ファイルになります。
  5. index.ejs ファイルに次のコードを入力して、簡単な Web ページを作成します。

    <!DOCTYPE html>
    <html>
    <head>
      <title>EJS Example</title>
    </head>
    <body>
      <h1>Welcome to the EJS Example!</h1>
      <p>The current date and time is <%= new Date().toString() %>.</p>
    </body>
    </html>

    このテンプレートには、「ようこそ」というタイトルが表示されます。 EJS の例!」、および現在の日付と時刻を含む段落。

  6. app.js ファイルに戻り、ヘッダーに次のコードを追加して、Express.js アプリケーションに EJS テンプレート ファイルの場所を指示します。

    app.set('views', './views');
    app.set('view engine', 'ejs');

  7. app.js ファイルで、app.get メソッドを次のコードに置き換えます:

    app.get('/', (req, res) => {
      res.render('index');
    });

    This メソッドEJS を介して渡されます。テンプレート エンジンは

    views/index.ejs ファイルをレンダリングし、クライアント ブラウザに送り返します。

  8. app.js および index.ejs ファイルを保存した後、ターミナル (またはコマンド ライン ウィンドウ) に切り替えて、作業内容を切り替えます。ディレクトリを app.js ファイルのあるディレクトリに変更し、次のコマンドを実行します:

    node app.js

    すべてがうまくいけば、ターミナル出力「サーバーはポート 3000 をリッスンしています!」が表示されるはずです。 」。これは、Express.js アプリケーションが実行中であり、http://localhost:3000/ にアクセスすることでアクセスできることを示しています。

    リンクをクリックすると、現在の日付と時刻が記載された Web ページが表示されます。

結論

この記事では、Node.js、Express.js、EJS をインストールし、簡単な Web アプリケーションを作成する方法を学びました。次の記事では、Express.js と EJS を使用して、より複雑で強力な Web アプリケーションを作成する方法について詳しく説明します。

以上がNodejs Express EJSのインストールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。