Waplusテックチームブログ

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

stap4.データベースの内容を表示する

by · 2019年5月1日

step3の続きです。

routes/index.jsに追記します

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);
  var todoObject = new todoModel(req.body);
  todoObject.save();

  res.render('index', { title: 'Express' });
});

module.exports = router;

今回は最終的にすべてルートにリダイレクトして1ページで完結させます。
なので一覧表示はルートに記述します。

/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});

ここに書き変えていきます。

/* GET home page. */
router.get('/', function(req, res, next) {
  todoModel.find({}, function(err, docs) {
    res.render('index', { docs: docs });
  });
});

こんな感じです。

次にviews/index.ejsに送ったdocsを表示する記述をします。

<!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>

formタグのの下に書き足して行きましょう

<% for (var i = 0; i < docs.length; i++) { %>

<% } %>

上記の記述でdocs配列の長さだけfor分が繰り返されます。
このfor分の中に一覧表示させていきます。

    <table border="1">
      <% for (var i = 0; i < docs.length; i++) { %>
        <tr>
          <th>name</th>
          <td><%- docs[i].name %></td>
          <th>age</th>
          <td><%- docs[i].age %></td>
        </tr>
      <% } %>
    </table>

1つのtableに中身を追加する感じなので上記のような記述になります。

少し成形してindex.ejsの中身は下記のようにしました。

<!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>

<hr >

<table border="1">
<% for (var i = 0; i < docs.length; i++) { %>
<tr>
<th>name</th>
<td><%- docs[i].name %></td>
<th>age</th>
<td><%- docs[i].age %></td>
</tr>
<% } %>
</table>

</body>
</html>

新しくデータを追加してみてください。

エラーになると思います。

これはroutes/index.jsの/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' });
});

ここでres.renderでtitleを渡していますが、titleは既に使っていません。

更にエラーの原因はindex.ejsでdocsの連想配列を使っているせいです。

/insertではdocsの連想配列は渡していません。
なのでejs側でエラーになったわけです。

これを解決するために下記のように記述しても構いません

router.post('/insert', function(req, res, next) {
  console.log(req.body);
  var todoObject = new todoModel(req.body);
  todoObject.save();

  todoModel.find({}, function(err, docs) {
    res.render('index', { docs: docs });
  });
});

ですがもっと簡単な方法があります。

router.post('/insert', function(req, res, next) {
  console.log(req.body);
  var todoObject = new todoModel(req.body);
  todoObject.save();

  res.redirect('/');
});

これで自動的にルートのindexページに移動して一覧表示からしてくれます。

基本的に他の機能もリダイレクトさせる方法をとります。

しかしこの方法では100点とは言えません。

このままではデータがsaveしている間にリダイレクトしてしまいます。
これは非同期処理されるためです。
タイミングによってはデータの保存が完了する前にリダイレクト処理が先に走ってしまい。
一覧に表示されない場合があります。

router.post('/insert', function(req, res, next) {
  console.log(req.body);
  var todoObject = new todoModel(req.body);
  todoObject.save(function (err) {
    if (err) return handleError(err);
    res.redirect('/');
  });
});

これでsaveが終わってからリダイレクトされます。

次は削除ボタンを作ります。

タグ:

おすすめ