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

16919 ワード
SQLite3 Node.js Express Node.js テキストリンク

導入(データベース構築)

データベースを導入します。
今回は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を編集します。

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>

次にデータベースアクセスの処理を作ります。

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にアクセスするとデータが一覧で表示されます。

Expressでデータ表示(指定取得)

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

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を修正します。

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>

ワークスケジュール
SharePoint 2013開発——概要