ExpressでWebアプリケーションを自動生成する (6/6)

■「helo」ページを作ってみよう

では、この基本的な仕組みを使って、新しいページを作ってみましょう。今回は、/heloにアクセスして表示されるページを作成してみます。必要なものを整理しましょう。

・「routes」内のhelo.js
/heloの処理を記述するスクリプトファイルとして、「routes」フォルダ内に「helo.js」ファイルを作成します。この中で、router.getで'/'にレンダリングする処理を設定しておきました。また簡単なサンプルとして、titleとdataをテンプレートに渡して処理するようにしてあります。

・「views」内のhelo.ejs
/heloで表示するテンプレートファイルですね。ここでは、<%= title %>でtitleを出力する文と、変数data内のキーと値を<table>にまとめて出力する文を記述してあります。

・app.js
メインプログラム内では、helo = require('./routes/helo')でhelo.js内のexportsを変数heloに代入し、app.use('/helo', helo);で/heloへのアクセス処理をheloオブジェクトのheloメソッドに設定しています。

・「public」内の「stylesheets」内のstyle.css
最後に<table>のスタイルシートを追加しておきます。スタイルシートは、「public」内の「stylesheets」フォルダに保管されます。この中の「style.css」を開き、<table>のスタイルを記述しておけばよいでしょう。

――ひと通りの編集が終わったら、Node.jsでapp.jsを実行し、http://localhost:3000/heloにアクセスしてみましょう。作ったページがちゃんと表示されましたか？

(by. SYODA-Tuyano.)

※リストが表示されない場合

AddBlockなどの広告ブロックツールがONになっているとリストなどが表示されない場合があります。これらのツールをOFFにしてみてください。

※「routes」内のhelo.js

var express = require('express');
var router = express.Router();

/* GET helo page. */
router.get('/', function(req, res, next) {
    res.render('helo', {
        title: 'Helo',
        data: {
            '太郎':'taro@yamada',
            '花子':'hanako@flower',
            'つやの':'syoda@tuyano.com'
        }
    });
});

module.exports = router;


※「views」内のhelo.ejs

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <table>
    <% for(var key in data){ %>
        <tr><td><%= key %></td>
        <td><%= data[key] %></td></tr>
    <% } %>
    </table>
  </body>
</html>


※app.jsの追記する文

// 冒頭のrequire文のところに以下を追記
var helo = require('./routes/helo');

// app.use文のところに以下を追記
app.use('/helo', helo);


※「public」内の「stylesheets」内にあるstyle.cssに以下を追記

table tr td{
    background-color:#eeeeff;
    padding: 3px;
}

<< 前へ　

記事のリストに戻る

PC Site G+ mail