ホームページ > 記事 > ウェブフロントエンド > Nodejs Express EJSのインストール
Node.js は、開発者が JavaScript 言語を使用して高性能のバックエンド アプリケーションを開発できるようにする、人気のある JavaScript ランタイム環境です。 Node.js には、シンプルで柔軟な Web アプリケーション フレームワークである Express.js が付属しており、開発者が美しく保守しやすい Web アプリケーションを作成するのに役立つ強力なテンプレート エンジン EJS も提供します。
この記事では、Node.js、Express.js、および EJS をインストールする方法と、それらを組み合わせて使用して単純な Web アプリケーションを作成する方法について説明します。
始める前に、コンピューターに Node.js ランタイム環境がインストールされていることを確認してください。まだインストールしていない場合は、以下の手順に従ってインストールしてください。
インストールが完了したら、ターミナル (またはコマンド ライン ウィンドウ) を開き、次のコマンドを入力して Node.js が正しくインストールされているかどうかを確認します:
node -v
If Node.js正常にインストールされると「Node.jsのバージョン情報を表示します」と表示されます。
Node.js をインストールした後、npm コマンド (Node.js に付属のパッケージ マネージャー) を使用して Express.js をインストールできます。 。インストールするには、以下の手順に従ってください。
ターミナル (またはコマンド ライン ウィンドウ) を開き、次のコマンドを入力します。
npm init
このコマンドは、新しい Node.js プロジェクト。プロンプトに従って段階的に入力してください。
初期化が完了したら、次のコマンドを入力して Express.js をインストールします。
npm install express --save
このコマンドは、npm リポジトリから最新バージョンの Express.js をインストールします。それを依存関係としてプロジェクトに追加します。
app.js
という名前の新しいファイルを作成します。これは、Express.js アプリケーションへの主要なエントリ ポイントです。 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!」を含む文字列を返します。
app.js
ファイルを保存した後、ターミナル (またはコマンド ライン ウィンドウ) に切り替え、作業ディレクトリを app.js# に切り替えます。 ## ファイル ディレクトリに移動し、次のコマンドを実行します。
node app.jsすべてがうまくいけば、ターミナル出力「サーバーはポート 3000 をリッスンしています!」が表示されるはずです。これは、Express.js アプリケーションが実行中であり、http://localhost:3000/ にアクセスすることでアクセスできることを示しています。
npm install ejs --saveこのコマンドは、次の最新バージョンをインストールします。 npm リポジトリ EJS を作成し、それを依存関係としてプロジェクトに追加します。
という新しいフォルダーを作成します。これは、Express.js アプリケーションが EJS テンプレート ファイルを保存する場所になります。
フォルダーに、
index.ejs という名前の新しいファイルを作成します。これは、Web ページのメインのテンプレート ファイルになります。
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 の例!」、および現在の日付と時刻を含む段落。
app.js ファイルに戻り、ヘッダーに次のコードを追加して、Express.js アプリケーションに EJS テンプレート ファイルの場所を指示します。
app.set('views', './views'); app.set('view engine', 'ejs');
app.js ファイルで、
app.get メソッドを次のコードに置き換えます:
app.get('/', (req, res) => { res.render('index'); });This メソッドEJS を介して渡されます。テンプレート エンジンは
views/index.ejs ファイルをレンダリングし、クライアント ブラウザに送り返します。
app.js および
index.ejs ファイルを保存した後、ターミナル (またはコマンド ライン ウィンドウ) に切り替えて、作業内容を切り替えます。ディレクトリを
app.js ファイルのあるディレクトリに変更し、次のコマンドを実行します:
node app.jsすべてがうまくいけば、ターミナル出力「サーバーはポート 3000 をリッスンしています!」が表示されるはずです。 」。これは、Express.js アプリケーションが実行中であり、http://localhost:3000/ にアクセスすることでアクセスできることを示しています。 リンクをクリックすると、現在の日付と時刻が記載された Web ページが表示されます。
以上がNodejs Express EJSのインストールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。