expressを試してみた　EJSファイルの読み込み＆引数を用いる

今回は、ejsで記述したファイルをexpressで実行し、更に引数も用いてみる。

インストール

まずは、ejsをインストールする。npmコマンドで--saveを加えた上でejsをインストールする。

これでejsがインストールされたはずなので、package.jsonを確認してみる。すると、以下のコードが表示された。これで、ejsのインストールが完了したことが確認できた。

表示してみる

早速表示してみる。まずは、viewsというディレクトリを作り、その中にejsファイルを入れる。今回扱うejsファイルは、

ir604.hatenablog.com

のHTMLファイルと同じものである。また、cssというディレクトリも作成し、そこにスタイルシートを置く。

そして、jsコード内に、

var ejs = require("ejs");
app.engine('ejs',ejs.renderFile);

を追加し、ejsを用いることができるようにする。そして、sendFileだった箇所をrenderに変え、第一引数にejsファイル、第二引数に、ejsファイルにて用いる引数一覧を定義した。

すると、前回作成したものと同じものが表示された。

ejsで引数を用いる

次は、ファイル内でjsファイルからの引数を用いて、内容を操作する。

まずは、main.jsの以下の部分を書き換えた。<%-引数名%>で引数を用いている。

 <div class="box2-1">
                    <%-title%>
                </div>

この状態で再度実行すると、以下のように表示された。これで、引数を用いて表示することができた。

クエリパラメーターを用いた値を挿入

これから、URLの?contents=???の???の値を挿入する。

まずは、main.ejsのURLの部分を

 <div class="box2-2">
                    Hello World!
                    <br>I love Iketani Ran.
                    <br><a href ='/another?content=OK'>another page.</a>
                </div>

とし、another.ejsは、

 
<div class="box2-2">
                    Congraturation!
                    <br>You have accessed another page!
                    <br><%-content%>
                </div>

の部分を変更した。そして、jsファイルの方では、anotherページにcontent変数を用意し、そこにquery.???でクエリを取得できるようにする。そして、それをそのままcontent引数に用いるような処理を行うように書き換えた。