ほんじゃらねっと

ダイエット中プログラマのブログ

MongoDBに保存したデータをNode.js+ExpressでWeb表示する簡単なサンプル

そろそろNode.jsスクリプト作成にも慣れてきたので、

簡単なWebアプリ作成に挑戦してみた。

Meteor、MEAN.js、Sails.jsなど色々あって迷ったけど、

まずはシンプルにExpressを使ってみる。

MongoDBコレクションに保存された情報を

Webページ上に一覧表示するスクリプトを、

Node.js+Express+MongoDBで作成した。

テンプレートには以前利用したことのあるEctを使う。

時間フォーマットにはMomentを使い、

デーモン化にはPM2を使った。

Moment本家サイト:

Moment.js | Home

ECTテンプレートエンジン本家サイト:

ectjs.com

PM2のGithubページ:

github.com

作成の流れ

プロジェクトの初期化処理:

$ npm init
$ npm install express --save-dev
$ npm install mongodb --save-dev
$ npm install moment --save-dev
$ npm install pm2 -g

MongoDB本体はあらかじめインストールしておき、

適当なコレクションに適当なサンプルデータを数件入れておく。

下記が本体スクリプト:

app.js

var express = require('express');
var ECT = require('ect');
var MongoClient = require('mongodb').MongoClient;
var moment = require('moment');

var app = express();
var ectRenderer = ECT({watch: true, root: __dirname + '/views', ext: '.ect'});

var dbUrl = 'mongodb://localhost:27017/<データベース名>';

app.engine('ect', ectRenderer.render);
app.set('view engine', 'ect');
app.use('/static', express.static('public'));

app.get('/', function (req, res) {
    MongoClient.connect(dbUrl, function (err, db) {
        if (err) {
            throw err;
        }   

        var testCollection = db.collection('<コレクション名>');

        testCollection.find({}).sort({created: -1}).limit(40).toArray(function (err, docs) {
            db.close();
            res.render('index', {docs: docs, moment: moment});
        }); 
    }); 
}); 

app.listen(3000);

下記がHTMLテンプレート:

views/index.ect

<!DOCTYPE html>
<html lang='en'>
    <head>
        <title>Sample Page</title>
    </head>
    <body>
        <table class='table table-condensed'>
            <thead>
                <tr>
                    <td>name</td>
                    <td>mail</td>
                    <td>created at</td>
                </tr>
            </thead>
            <tbody>
                <% for doc in @docs: %>
                <tr>
                    <td><%= doc.name  %></td>
                    <td><%= doc.mail  %></td>
                    <td><%= @moment(doc.created).format('MM/DD HH:mm')  %></td>
                </tr>
                <% end %>
            </tbody>
        </table>
    </body>
</html>

下記のコマンドで実行すると

$ node app.js

下記のURLにアクセスすると画面が表示される:

http://localhost:3000/

毎回nodeコマンドを実行するのが面倒な場合は、

PM2でデーモン化しておくことで落ちても再起動してくれる。

pm2 start app.js

おわり

これをテンプレートとして、

色々Webアプリを作ってみたい。