node.js超入門ノート5(データベース データ表示編)

# 導入(データベース構築)
データベースを導入します。
今回はSQLite3を使用するので以下のコマンドでインストールします。

```
apt -y update
apt -y install sqlite3
```
次にファイルを作成します。

```
sqlite3 mydb.sqlite3
```

次のコマンドでテーブル、カラムを作成します。

```
create table mydata(id integer not null primary key autoincrement unique, name text not null, mail text not null,age integer);
```
次のコマンドでデータを挿入します。

```
insert into mydata values(1, 'taro', 'taro@yamada', 39);
insert into mydata values(2, 'hanako', 'hanako@flower', 28);
insert into mydata values(3, 'sachiko', 'sachiko@happy', 17);
insert into mydata values(4, 'jiro', 'jiro@change', 6);
```
データベース構築はひとまず終わったのでctrl+Dでデータベースから抜けます。

# Expressでデータ表示(全件取得)
ExpressでSQLiteを操作するため以下のコマンドでパッケージをインストールします。

```
npm install sqlite3
```
viewsフォルダのhello.ejsを編集します。

```html:views/hello.ejs
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="content-type" content="text/html">
        <title><%= title %></title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous">
        <link rel="stylesheet" href="/stylesheets/style.css" />
    </head>

    <body class="container">
        <header>
            <h1 class="display-4">
                <%= title %>
            </h1>
        </header>
        <div role="main">
            <table class="table">
                <% for(var i in content) { %>
                    <tr>
                        <% var obj = content[i]; %>
                        <th><%= obj.id %></th>
                        <td><%= obj.name %></td>
                        <td><%= obj.mail %></td>
                        <td><%= obj.age %></td>
                    </tr>
                <% } %>
            </table>
        </div>
    </body>
</html>
```
次にデータベースアクセスの処理を作ります。

```javascript:routes/hello.js
const express = require('express');
const router = express.Router();

const sqlite3 = require('sqlite3');

// データベースオブジェクトの取得
const db = new sqlite3.Database('mydb.sqlite3');

router.get('/', (req, res, next) => {
    db.serialize(() => {
        // レコードを全て取り出す
        db.all("select * from mydata", (err, rows) => {
            // データベースアクセス完了時の処理
            if (!err) {
                var data = {
                    title: 'Hello!',
                    content: rows // 取得したレコードデータ
                };
                res.render('hello', data);
            }
        });
    });
});

module.exports = router;
```

以下のURLにアクセスするとデータが一覧で表示されます。

http://localhost:3000/hello

# Expressでデータ表示(指定取得)
次はnode.js側で指定したデータのみ取り出します。
hello.jsを以下のように修正します。

```javascript:routes/hello.js
const express = require('express');
const router = express.Router();

const sqlite3 = require('sqlite3');

// データベースオブジェクトの取得
const db = new sqlite3.Database('mydb.sqlite3');

router.get('/', (req, res, next) => {
    db.serialize(() => {
        var rows = "";
        db.each("select * from mydata", (err, row) => {
            //一つ取り出された際の処理
            if (!err) {
                rows += "<tr><th>" + row.id + "</th><td>" + row.name + "</td><td></tr>";
            }
           // 終了時の処理(countは取り出したレコード数)
        }, (err, count) => {
            if (!err){
                var data = {
                    title: 'Hello!',
                    content: rows // 取得したレコードデータ
                };
                res.render('hello', data);
            }
        });
    });
});

module.exports = router;
```
次にhello.ejsを修正します。

```html:views/hello.ejs
<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="content-type" content="text/html">
        <title><%= title %></title>
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" crossorigin="anonymous">
        <link rel="stylesheet" href="/stylesheets/style.css" />
    </head>

    <body class="container">
        <header>
            <h1 class="display-4">
                <%= title %>
            </h1>
        </header>
        <div role="main">
            <table class="table">
                <%- content %>
            </table>
        </div>
    </body>
</html>
```

https://qiita.com/Glider2355/items/f97fdf6c421887dc4652