「webで何か」作るブログ

35歳という遅すぎるスタートをなんとかする為のブログです。基本的に自分にとっての役立ちメモ。

DBを読み込んで表示させる。Nodeで簡易な品目メモを作るシリーズ。

前回でDB書き込みまで行ったので、今度はDBの内容を表示したい。

 

pochiweb.hatenablog.com

 

とりあえずURLはルート(localhost:9000/)でやるので、

  • routes/index.js
  • views/index.jade

の二カ所に変更を加える。

routes/index.jsの編集

今回はトップページにアクセスすると、DBから読み込んだ内容を表示するので、index.jsにgetがあったら〜〜する、という処理を加える必要がある。

これをしたいときはとりあえずrouter.get。

router.get('/←対応させたいアクセス先', function(req, res, next) {
 
 
 ◆ここにしたい処理書く
 req:リクエストから色々渡されてくる
 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に変えるだけで、だいたい一緒。

思考としては、やっぱり出力したいものから逆算して考えるのかな。

  1. DBの中身表示したい!
  2. viewsに渡さなきゃ
  3. DBの中身出さなきゃ
  4. クエリ書かなきゃ
  5. DB接続しなきゃ
  6. DBの接続情報入れなきゃ

views/index.jadeの編集 

 DBから取得した内容がrender関数でitemListオブジェクトとして渡されてくるので、views/index.jadeで使いたい。

当然いくつあるかわからないので、繰り返し処理をする。今回はeachで。

jadeでeachを使う

特に難しいことはなくて、以下のような使い方。

ul
each item in itemList
li #{item.itemName}: #{item.quantity}

未確認だけど、DBのカラムの名称で入ってくるっぽい。

とりあえずざっくりこんな感じ。