サーバーサイドJavaScriptの図書室 5冊目 express+pg+ejsでCRUD実装、R編

サーバーサイドJavaScriptの図書室

5冊目 express+pg+ejsでCRUD実装、R編

express+pg+ejsでCRUD(クラッド)にチャレンジします。
CRUDとは、C(作成)、R(読取)、U(更新)、D(削除)の頭文字をつなげたもの
今回はデータを取得して一覧表示(R)するものをつくろうと思います。

[1] 実験環境

今回の環境は以下のとおりです。

名前	バージョン	補足
Ubuntu	14.04	OS
node.js	v0.10.28	サーバーサイドJavaScript
express	v4.2.0	Webフレームワーク
ejs	v0.8.8	テンプレートエンジン
pg	v3.1.0	データベース

ファイルの状態は以下のとおりです。太くなっているのはいじったファイルです。

express01
┣ app.js
┣ bin
┣ node_modules
┣ package.json
┣ public
┃ ┣ images
┃ ┣ javascripts
┃ ┗ styleshetts
┣ routes
┃ ┣ index.js
┃ ┣ setting.js
┃ ┗ users.js
┣ views
┃ ┣ index.ejs
┗ ┗ error.ejs

[2] ソースコード

一覧表示のために作成というか変更したソースコードの紹介です。
本当にたいしたことやってないけど

/routes/settings.js

このファイルは新たに追加しました。設定ファイルのつもりです。

// exportsを使って書いておくと他のファイルでrequireして参照できる
exports.pgdb = "tcp://postgres:postgres@localhost:5432/test";

/routes/index.js

app.jsで/アクセスしたときに実行されるファイルです。

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

// postgresqlモジュール読み込み
var pg = require('pg');

// 外部ファイルの読み込み(自作のときはパスを指定する。拡張子は省略可)
// exportsを使っているので参照することができる
var settings = require('./settings');
var connectionString = settings.pgdb;

// localhost:3000/ でアクセスされたときのルーティング処理
// なので/userとか書けば、localhost:3000/userでアクセスしたときの処理となる。
router.get('/', function(req, res) {
  // postgresqlの処理
  pg.connect(connectionString, function(err, client){
    client.query("SELECT id, name FROM test ", function(err, result){
      // ejs に対する処理
      res.render('index', {
         title : "ユーザー情報取得",
         result : result,
         data : result.rows.length
      });
    });
  });
});

/views/index.ejs

ejsファイルで<% ここに制御文が書ける %>と書くとJSのコーディングができるようです。
これを使って取得したデータだけ表示をすることができます。

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p>User Count <%= data %></p>
    <% for(var i = 0; i < result.rows.length; i++) { %>
     <li>id=<%= result.rows[i].id %> name=<%= result.rows[i].name %></li>
    <% } %>
  </body>
</html>

とここまで直してから、起動して確認いたしますと以下のように表示されています。

実行結果

こんな感じで複数のモジュールを組み合わせていけばいろいろとできそうです。
表示ができたから、追加(C)、更新(U)、削除(D)なんかもやってみたいところです。

[3] メインスクリプトファイル(app.js)

expressは、app.jsと言うファイルが起点になっており
このファイルから各ファイルへ振り分けをおこなっています。
全て記載すると長いので、重要だと思った所だけ抜粋します。

// expressを読み込み
var express = require('express');

// オブジェクトの作成
var app = express();

// routes/index.jsファイル（自作ファイル）の読み込み
var routes = require('./routes/index');

// テンプレートエンジンの設定
// viewsフォルダを使う
app.set('views', path.join(__dirname, 'views'));

// テンプレートにejsを使う。
app.set('view engine', 'ejs');

// ミドルウェアの登録（とても重要な概念。ちょっとぴんときてないけど）
// これをたくさん書いて記載されている順番に確認する。
// 該当するものに一致したらその処理を行います。
app.use('/', routes);

とりあえずわかったのは、app.jsに自作ファイルをrequireしてapp.useする。
これだけやっておけばファイル分割できるみたい。以下のようなイメージです。

// routes/test.jsファイルの読み込み
var routes = require('./routes/test');

// ミドルウェアの登録
// localhost:3000/test とアクセスした時に ./routes/test.jsファイルで処理をする。
// app.jsと外部ファイルを結びつける
app.use('/test', test);

今のところの理解はこのくらいです。
これで今後どのようにファイルを追加して連携していけばいいのかわかった。