Node.js/ExpressでPostgreSQLを使おう (6/6)

■レコードの追加を行う

続いて、レコードの追加を行う処理です。これは「routes」内に用意する「add.js」でフォームの表示を、「create.js」でフォーム送信後の処理（つまりフォームの内容からレコードを保存する処理）を実装します。また、「views」フォルダ内には、フォームを表示する「add.ejs」テンプレートファイルを用意する必要があるでしょう。

下のリスト欄に、３つのファイルの内容をまとめて掲載してあります。これらを参考にそれぞれのスクリプトを完成させてください。フォームに記入して送信すると、それがレコードとしてテーブルに追加されます。作成後、indexにリダイレクトされるので、表示されるレコードを確認できます。

●POSTの処理

router.post(……略……);

今回、create.jsでは、処理を組み込むのにrouter.getではなく「router.post」を使っています。POSTされた処理は、このpostメソッドを利用して処理を設定します。

●送信フォームの情報取得

var name_str = request.body["name"];
var mail_str = request.body["mail"];
var memo_str = request.body["memo"];

送信されたフォームの値は、通常のNode.jsでのやり方とはちょっと違っています。requestの「body」に値がまとめられているのです。request.paramから取り出そうとするとエラーになるので注意しましょう。

●レコードの追加
レコードの追加も、基本的には先程のselectの処理と実は変わりありません。db.connectでデータベースに接続し、そのClientオブジェクトのqueryメソッドでSQLを実行する、という流れですね。単に実行するSQLの内容が変わっただけです。

var qstr = "insert into mydata (name,mail,memo) values($1, $2, $3);";
var query = client.query(qstr,[name_str, mail_str, memo_str]);

ここでは、このようにしてinsert文を実行しています。注目したいのは、valuesの後にある「$1, $2, $3」というもの。これは、queryを実行する際に値が渡される変数です。

queryでは、第２引数に、[name_str, mail_str, memo_str]という配列が用意されていますね？　これらの値が、$1, $2, $3にそれぞれ代入されます。クエリー文のテキストに変数などの値を組み入れる場合は、このように$を使った変数を利用して下さい。

実行後、endイベントを使い、実行後にトップページにリダイレクトをしています。この部分ですね。

query.on('end', function(row,err) {
    response.redirect("/");
});

リダイレクトは、Responseオブジェクトの「redirect」を利用します。引数にはリダイレクト先のアドレスを指定するだけです。簡単ですね。

実をいえば、データベースアクセスに関する機能は、これだけです。いや、もちろんオブジェクトにあるメソッドとか細々としたものはまだ残ってますが、基本的に「connectしてqueryする。後はイベントハンドラで処理すればおしまい」という流れさえわかれば、基本的なデータベースアクセスはたいてい実装できます。

なにしろ、SQLをそのまま送るだけなんですから、「細々したことはSQL側でなんとかして！」ってことですね。

(by. SYODA-Tuyano.)

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

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

※add.ejs

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1><%= title %></h1>
    <p><%= msg %></p>
    <form method="post" action="/create">
    <table>
        <tr><td>NAME:</td><td><input type="text" name="name"></td></tr>
        <tr><td>MAIL:</td><td><input type="text" name="mail"></td></tr>
        <tr><td>MEMO:</td><td><input type="text" name="memo"></td></tr>
        <tr><td></td><td><input type="submit"></tr>
    </table>
    </form>
  </body>
</html>


※add.js

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

/* add page. */
router.get('/', function(request, response, next) {
    response.render('add', 
        {
            title: 'Add Page',
            msg: 'please type data:'
        }
    );
});

module.exports = router;


※create.js

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

/* add page. */
router.post('/', function(request, response, next) {
    var name_str = request.body["name"];
    var mail_str = request.body["mail"];
    var memo_str = request.body["memo"];
     
    var con = "tcp://postgres:admin@localhost:5432/postgres";
    pg.connect(con, function(err, client) {
        var qstr = "insert into mydata (name,mail,memo) values($1, $2, $3);";
        var query = client.query(qstr,[name_str, mail_str, memo_str]);
        query.on('end', function(row,err) {
            response.redirect("/");
        });
        query.on('error', function(error) {
            console.log("ERROR!");
            response.render('index', {
                title: "ERROR",
                data: null,
                message: "ERROR is occured!"
            });
        });
    });
});

module.exports = router;

<< 前へ　

記事のリストに戻る

PC Site G+ mail