動的にページを作る - だら＄ちっぷす

node.jsでシステム作り中。

ユーザページを作りたい。

表示するデータはユーザごとに異なるようにしたいんで、テンプレートで変数を埋め込んで処理できへんかなー。

調べたところ、いろいろあるみたい。今回はejsってのを使ってみる。

モジュールをインストールしておく

> npm install ejs

初期化の部分

　const app = express();        //expressアプリを生成する
　app.set('view engine', 'ejs');     //テンプレートエンジン

htmlに埋め込むパラメータをセットしてページを表示
（当然、サーバが起動してたら、localhost/mypage で表示できる）

app.get('/mypage', async (req, res) =>
{
    var data = {};

    //--- ユーザ情報 ---
    data.user = {};
    data.user.name = "万丈";
    data.user.attribute = "ぬいぐるみスキー";

    //--- まるの情報 ---
    data.maru = {};
    data.maru.bodycolor = "#ffffff";
    data.maru.ribboncolor = "#ff0000";

    //--- ばつの情報 ---
    data.batu = {};
    data.batu.bodycolor = "#ff69b4";
    data.batu.ribboncolor = "#000000";

    //--- その他の子たち ---
    data.others = [
        {name: "なまけもの"}, 
        {name: "ひらめ"},
        {name:"シャッポ団長"},
        {name: "アノマロカリス"}
    ];

    // レンダリングを行う
    res.render("./user.ejs", data);
});

テンプレートの書き方
普通にHTMLを書いて、パラメータを埋め込みたいところを<%- %>で書く

【user.ejs】

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>ユーザページ</title>
</head>
<body>
    <div>
        <%- user.name %>さんのページ
    </div>
    <div>
        属性　<%- user.attribute %>
    </div>
    <div style="margin-top:6px;border:solid 2px #ff00ff;">
        <div>
            まる
        </div>
        <div>
            <%- maru.bodycolor %><BR>
            <%- maru.ribboncolor %><BR>
        </div>
        <div>
            ばつ
        </div>
        <div>
            <%- batu.bodycolor %><BR>
            <%- batu.ribboncolor %><BR>
        </div>
    </div>
    <div style="margin-top:6px;border:solid 2px #ff00ff;">
        <% for (let other of others) { %>
            <%- other.name %><BR>
        <% } %>
    </div>
</body>
</html>

※この文章で試してないので、どっか不備があるかも。