express + pugを使ってMariaDB(MySQL)と連携する

前提

  • 予めexpress-generatorなどを用いてexpress環境が出来ている事
  • MySQL環境(データベース、テーブル)は準備済みである事
  • pugのレイアウト分け、インポート等はなんとなく理解した上で分けている事

テストテーブル

手始めにこんな感じのシンプルなテーブルを用意した。

id name other_name
1 tony_stark IRON-MAN
2 steve_rogers Captain America

下準備

 mysqlパッケージインストール

npmでmysqlパッケージをインストール

node環境変数にMySQL接続情報をセット

予めnode_envにユーザ名やパスワードを格納しておく。
node.jsの起動時やdotenvを使って記録しておくなど何でもよい。
詳しいことはググって。次の内容からいきなり読み出しています。

app.js

 

まず、①でデータベースに接続するコンフィグを定義し、mysql.createPoolによってPoolオブジェクトを生成している。app.jsのこの位置に記載する事によってどのリクエストもデータベースとコネクションを開始する。

場合によっては記載する位置を変えて別モジュールから読み出させるなどで、必要に応じてデータベースにつなぎに行く回数を減らしてもいいのかもしれない。というかそうするべきである。

app.setによって各ルーターからコネクションに介入する事が出来る。

 

index.js

続いてindexルーター。
②は、①の最後でセットしておいたコネクション情報を読み出し。

③でqueryメソッドを実行する。コールバック関数の2つ目「results」に結果が格納されるので、res.renderの第二引数のオブジェクトに設置してテンプレートエンジンにレンダリングさせる。

index.pug

最後にフロントエンド側。 node.jsでこねくり回したデータ、オブジェクトはここで表示する。
#{results}とすれば[Object object]としか表示されないので、一件ずつ解いていくやり方にした。

 

pugの書き方で each ~ inというのがあって、node.jsでいう for ~ of と同じニュアンスで使えるような記法がある。今回はそれを使って pugで受け取っているオブジェクトを1つずつ取り出し、HTMLに吐き出す事とした。

 


今までサーバサイドからフロントエンドにデータを受け渡しするのはsocket.ioにJSONオブジェクトとして乗っけてしまえる所に頼ってしまっていたので、res.renderを使ってpugに表示させるやり方の理解に躓いた。

pugもpugで、javascriptが埋め込める分、console.log()とか使ってデバッグをしてもサーバ側でプリントされてしまうのでブラウザコンソールで表示させるのはどうしたらええんやと躓いた。

/以上

 

 

コメントを残す

メールアドレスが公開されることはありません。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください