Waplusテックチームブログ

よく参照するのをわかりやすくまとめよう！

Waplusテックチームブログ

step3.データベースにsaveする

by · 2019年5月1日

ステップ2の続きです。

本格的にDBからデータを取り出したりしていきます。

ステップ1-expressでプロジェクトを作成
step2-mongooseを用意しよう

データベースへ追加する。

まずはデータベースへデータを追加する機能を作っていきましょう。

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に表示します。

タグ:

おすすめ