Nodejs - Template Engine
3156 ワード
Template Engine
前回の授業では、Webを静的に組織したり、動的に組織したりすることができ、それぞれの違いとメリットとデメリットを理解しました.では、いろいろな方法の長所だけを利用する方法があれば便利だと思います.その役割はテンプレートエンジンです.
テンプレートエンジンはインターネット上で「テンプレートフォームと入力データを合成して結果ドキュメントを出力するソフトウェア」と呼ばれています.理解するために、もっと簡単に近づけましょう.
Webアプリケーションを作成するときに、全体的に静的に構成され、その内容が動的に構成されていると仮定します.すなわち,大きなフレームワークは不変であり,小さなコンテンツだけが変化し,画面は特定のイベントによって変化する.
この場合,静的なサービスであればhtmlの内容を変更する必要があるという不便がある.ただし、あまり変更しないページなので、動的にページを整理する必要もありません.どうすればいいの?
このようなあいまいな状況でこそ、テンプレートエンジンが役に立つ.テンプレートエンジンは、次の原理で動作します.固定使用部分をテンプレートとし、 を予め記入する.動的変更のデータのみをマージ 画面完了 テンプレートエンジンの使用方法
百聞は一見にしかず...自分で使ってみましょう.
Expressホームページにログインし、上のメニューバーのガイドリストで、テンプレートエンジンを使用する項目をクリックすると、テンプレートエンジンを使用する方法が表示されます.
ここで説明するpugは、もともとJadeというテンプレートエンジンでした.しかし商標権の問題でpugと改名した.(愛犬家らしい)
とりあえずcmdを開けてinstallしよう
作業ディレクトリに移動し、
また、マニュアルでは、アプリケーションを設定する必要があると指摘されています.
まず、テンプレートエンジンを格納するディレクトリを作成します.通常、ビューという名前が付けられます.pugテンプレートで生成されたファイルはすべてこのビューフォルダに保存されます.
その後、expressが使用するテンプレートエンジンが何であるかを伝える必要があるので、作成したコード
では、アプリケーションの設定はこれで終わります.今彼に通路を開けなければならない.つまり、テンプレートエンジンを適用するページにルータを作成する必要があります.
viewsフォルダに
このようにテストを作成し、localhost:3000/templateパスに沿って接続するだけです.
このように空の画面が現れた.今、htmlを作成してコンテンツを作成する必要はありません.空白の画面が必要です.
前回の授業では、Webを静的に組織したり、動的に組織したりすることができ、それぞれの違いとメリットとデメリットを理解しました.では、いろいろな方法の長所だけを利用する方法があれば便利だと思います.その役割はテンプレートエンジンです.
テンプレートエンジンはインターネット上で「テンプレートフォームと入力データを合成して結果ドキュメントを出力するソフトウェア」と呼ばれています.理解するために、もっと簡単に近づけましょう.
Webアプリケーションを作成するときに、全体的に静的に構成され、その内容が動的に構成されていると仮定します.すなわち,大きなフレームワークは不変であり,小さなコンテンツだけが変化し,画面は特定のイベントによって変化する.
この場合,静的なサービスであればhtmlの内容を変更する必要があるという不便がある.ただし、あまり変更しないページなので、動的にページを整理する必要もありません.どうすればいいの?
このようなあいまいな状況でこそ、テンプレートエンジンが役に立つ.テンプレートエンジンは、次の原理で動作します.
百聞は一見にしかず...自分で使ってみましょう.
Expressホームページにログインし、上のメニューバーのガイドリストで、テンプレートエンジンを使用する項目をクリックすると、テンプレートエンジンを使用する方法が表示されます.
ここで説明するpugは、もともとJadeというテンプレートエンジンでした.しかし商標権の問題でpugと改名した.(愛犬家らしい)
とりあえずcmdを開けてinstallしよう
作業ディレクトリに移動し、
npm install pug -- save
を入力し、enterを入力します.この場合、--save
を貼り付けて、package.json
にpugモジュールを依存項目として追加する.また、マニュアルでは、アプリケーションを設定する必要があると指摘されています.
まず、テンプレートエンジンを格納するディレクトリを作成します.通常、ビューという名前が付けられます.pugテンプレートで生成されたファイルはすべてこのビューフォルダに保存されます.
その後、expressが使用するテンプレートエンジンが何であるかを伝える必要があるので、作成したコード
app.js
にapp.set('view engine', 'pug');
行を追加します.では、アプリケーションの設定はこれで終わります.今彼に通路を開けなければならない.つまり、テンプレートエンジンを適用するページにルータを作成する必要があります.
app.js
ファイルに次のコードを追加します.app.js
app.get('/template', function(req, res) {
res.render('temp');
})
上記のコードは、/templateアドレスに接続されたユーザにtemp
のコンテンツを提示し、ウェブページに表示することを意味する.特に,これまでsend
メソッドでテキストを出力してきたが,template engineを用いてソースコードを介してウェブページを生成する必要があるため,render
メソッドを用いた.viewsフォルダに
temp.pug
ファイルを作成しhtmlとして記述します.このようにテストを作成し、localhost:3000/templateパスに沿って接続するだけです.
このように空の画面が現れた.今、htmlを作成してコンテンツを作成する必要はありません.空白の画面が必要です.
app.js
でサーバに接続し、テンプレートエンジンを使用する準備ができています.次の授業ではpugの様々な文法とテンプレートエンジンを勉強します.Reference
この問題について(Nodejs - Template Engine), 我々は、より多くの情報をここで見つけました https://velog.io/@kjh950330/nodejs-Template-Engineテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol