step3.データベースにsaveする
ステップ2の続きです。
本格的にDBからデータを取り出したりしていきます。
データベースへ追加する。
まずはデータベースへデータを追加する機能を作っていきましょう。
views/index.ejsを編集する
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1><%= title %></h1>
<p>Welcome to <%= title %></p>
</body>
</html>
デフォルトだとこんな感じです。
ここにformタグを追記してサーバーにデータを送信出来るようにします。
<!DOCTYPE html>
<html>
<head>
<title>ToDoリスト</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<h1>ToDoリスト</h1>
<form action="/insert" method="post">
<table border="1">
<tr>
<th>name(文字列)</th>
<td><input type="text" name="name" value="" /></td>
</tr>
<tr>
<th>age(数字のみ)</th>
<td><input type="text" name="age" value="" /></td>
</tr>
<tr>
<th>ボタン</th>
<td><button>登録</button></td>
</tr>
</table>
</form>
</body>
</html>
こんな感じでしょうか。
次はroutes/index.jsに/insertへpostされたときの処理を記述します。
routers/index.jsに処理を記述する
router.getのルートの下ぐらいに作りましょう。
var express = require('express');
var router = express.Router();
var mongoose = require('mongoose');
var Schema = mongoose.Schema;
var Docs = new Schema({
name: String,
age: Number,
date: {
default: Date.now,
type: Date,
}
});
var todoModel = mongoose.model('docs', Docs);
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { title: 'Express' });
});
router.post('/insert', function(req, res, next) {
console.log(req.body);
res.render('index', { title: 'Express' });
});
module.exports = router;
とりあえずルートのrouter.getをコピーして/insertの処理を作ります。
console.log()でフォームからデータが飛んできているか確認します。
質素なwebフォームですが送信してみてデータが飛んでいるか確認してみてください。
うまくいけばVSCodeの下にあるデバッグコンソールに表示されるはずです。
Object {name: Array(2)}
index.js:24name:Array(2) ["あいうえお", "35"]
ちゃんと表示されました。
それではinsertしてみましょう。
データベースにinsertする
先ほど作った/insertに追記します。
router.post('/insert', function(req, res, next) {
console.log(req.body);
var todoObject = new todoModel(req.body);
todoObject.save();
res.render('index', { title: 'Express' });
});
もうconsole.log()は要らないですがとりあえず置いておきます。
todoModel()の中にreq.bodyをそのまま格納してtodoObjectに渡します。
あとは.save()するだけです。
実際にフォームから登録してみてください。
デバッグコンソールにエラーが無ければ保存出来たはずです。
これだと本当に登録出来ているかわかりません(^_^;
mongoを覗いてみましょう
$ mongo
> use todolist
switched to db todolist
> show collections
docs
> db.docs.find()
{ "_id" : ObjectId("5cc95a71950be59ad927ae6d"), "name" : "あいう", "age" : 123, "date" : ISODate("2019-05-01T08:36:01.374Z"), "__v" : 0 }
入ってました。良かった。
次はデータベースの内容をindexに表示します。
