Node+Mysqlでブラウザにデータを表示させてみる

NodeとMysqlを使ってブラウザにデータを表示させてみようと思います。

大まかな流れとしましては

1. mysqlに接続
2. データを取得
3. viewファイルにデータを渡す
4. viewファイルでデータの整形をして表示させる

ディレクトリ構成はこのようになります。

root
 ├ index.js
 ├ views
 |  ├ css
 |     style.css
 |  └ index.pug
 └ package.json

まずはじめにプロジェクトフォルダを作成し、移動します。

そこでnpm init -yと実行し、package.jsonファイルが作成されます。

その後、必要なパッケージをインストールします。

npm i -D mysql pug express

{
  "name": "express_sample",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "express": "^4.16.3",
    "mysql": "^2.15.0",
    "pug": "^2.0.1"
  }
}

index.jsファイルにmysqlのからテーブルのデータの取得、ルーティングの設定をしたいと思います。

const express = require('express');
const app = express();
const mysql = require('mysql');

const connection = mysql.createConnection({
  host     : 'localhost',
  user     : 'hoge',
  password : 'password',
  database : 'sample_db'
});

app.set('view engine', 'pug');
app.use(express.static('views'));

const recordLog = function (req, res, next) {
  console.log('localhost:3000にアクセスしました');
  next();
};

app.use(recordLog);

app.get('/', function (req, res) {
  let sql = 'select * from sample_db.personal';
  connection.query(sql, (err, rows, fields) => {
    if (err) throw err;
    res.render('index', { title: 'node + mysql practice', PesoralDatas: rows});
  });
});

app.listen(3000);

あらかじめmysqlにデータベースとテーブルを作成しておきました。

データベース名はsample_dbでテーブル名がpersonalとなります。

ファイルの中身を解説していきます。

const connection = mysql.createConnection({
  host     : 'localhost',
  user     : 'hoge',
  password : 'password',
  database : 'sample_db'
});

host・・・データベースのホスト名
user・・・データベースにログインしているユーザー名
password・・・パスワード
database・・・データベース名

app.set('view engine', 'pug');
app.use(express.static('views'));

こちらhtmlのテンプレートエンジンとしてpugを使用することを宣言しています。 静的アセットディレクトリーをviewsと指定しています。

app.get('/', function (req, res) {
  let sql = 'select * from sample_db.personal';
  connection.query(sql, (err, rows, fields) => {
    if (err) throw err;
    res.render('index', { title: 'node + mysql practice', PesoralDatas: rows});
  });
});

localhost:3000でアクセスした時にsample_dbにあるpersonalテーブルに接続します。 その後、index.pugファイルにこちら側で指定したタイトルの値とカラムのデータを渡しています。

viewsディレクトリ直下にindex.pugファイルを作成します。

html
  head
    title #{title}
    link(rel="stylesheet" href="css/style.css")
  body
    h1 Person Datas
    each person in PesoralDatas
      .person
        p.person__id id #{person.id}
        p.person__old old #{person.old}
        p.person__name name #{person.name}

pugではeach文が使用できるので、受け取ったデータを整形して表示させます。

cssファイルはこちらになります。

.person {
    border: 1px solid #323232;
    padding: 10px;
}
.person + .person {
    margin-top: 30px;
}

これで準備が整いました。
プロジェクトフォルダ直下でnode index.jsと実行してください。

その後、localhost:3000にアクセスしてみてください。

このように表示できれば成功です！！ フロントからデータベースまで一通り触ることができました。

全体を通じてexpressは本当に手軽に利用できるものだと思いました。ルーティングからローカルサーバーの起動、テンプレートエンジンの設定(nodeで動いているのでejsも利用可能)など視覚的でわかりやすいです。

mysqlは全く触ったことがなかったのですが、ユーザーを作成し、実際にテーブルにカラムデータを入れるところまで行いました。

使用したコマンドを備忘録として残しておいたのでよかったら参考にしてみてください。

top-men.hatenablog.com

簡単ではありますが以上になります。