DBを読み込んで表示させる。Nodeで簡易な品目メモを作るシリーズ。
前回でDB書き込みまで行ったので、今度はDBの内容を表示したい。
とりあえずURLはルート(localhost:9000/)でやるので、
- routes/index.js
- views/index.jade
の二カ所に変更を加える。
routes/index.jsの編集
今回はトップページにアクセスすると、DBから読み込んだ内容を表示するので、index.jsにgetがあったら〜〜する、という処理を加える必要がある。
これをしたいときはとりあえずrouter.get。
router.get('/←対応させたいアクセス先', function(req, res, next) {
◆ここにしたい処理書く◆
res:返したいレスポンス書くときに使う
next:まだわからない
});
なので最終的にこんな感じ。
router.get('/', function(req, res, next) {
var query = 'SELECT * FROM itemList';
connect.query(query,function(err,rows){
console.log(rows);
res.render('index', {
title: 'アイテムリスト',
itemList:rows
});
})
});
postのときはgetをpostに変えるだけで、だいたい一緒。
思考としては、やっぱり出力したいものから逆算して考えるのかな。
- DBの中身表示したい!
- viewsに渡さなきゃ
- DBの中身出さなきゃ
- クエリ書かなきゃ
- DB接続しなきゃ
- DBの接続情報入れなきゃ
views/index.jadeの編集
DBから取得した内容がrender関数でitemListオブジェクトとして渡されてくるので、views/index.jadeで使いたい。
当然いくつあるかわからないので、繰り返し処理をする。今回はeachで。
jadeでeachを使う
特に難しいことはなくて、以下のような使い方。
ul
each item in itemList
li #{item.itemName}: #{item.quantity}
未確認だけど、DBのカラムの名称で入ってくるっぽい。
とりあえずざっくりこんな感じ。