Node.jsのフレームワークExpressを使い、Mysqlを使ったCRUDアプリケーションの作成を行う。また、テンプレートエンジンとしてEJSを利用する。
目次
１．本稿の実行環境
（１）ホストOS
Windows 10 Pro
（２）仮想環境（VirtualBox）
・ゲストOS：CentOs8（Red Hat 64-bit）
・nodejs、及びnpmはインストール済
# node -v
v10.24.0
# npm –version
6.14.11
２．CRUDアプリケーションの概要
（１）データベース
・データベース名：crud_db
・テーブル（users）
（２）画面
３．開発環境作成
WebフレームワークExpressとテンプレートエンジンEJS、およびデータベースMysqlによるアプリケーションの開発環境を作成する。
（１）Express.jsのインストール
・ディレクトリを任意の名前で作成
ここでは、”crud-app”とした。
・パッケージ情報の作成
作成したディレクトリに移動して、パッケージ情報を作成する。
# cd crud-app
# npm init -y
package.jsonファイルが作成される
・express.jsのインストール
# npm install express
（２）テンプレートエンジンEJSのインストール
$ npm install ejs
（３）MySQL接続ドライバのインストール
express.jsからMySQLへ接続するためのドライバをインストールする。
# npm install mysql
（４）データベースとテーブルの準備
データベース（crud_db）とテーブル（users）を作成する。
・Mysqlに接続
# mysql -u root -p
・データベースの作成
mysql> CREATE DATABASE crud_db;
・テーブルの作成mysql> CREATE TABLE users (id INT NOT NULL PRIMARY KEY AUTO_INCREMENT, name VARCHAR(255) NOT NULL, email VARCHAR(255) NOT NULL);
・テーブルのフィールドの確認mysql> SHOW COLUMNS FROM users;
・テーブルが作成されたことを確認する
４．CRUDアプリケーションの作成
（１）nodejsアプリ
crud_app.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
const express = require('express'); const mysql = require('mysql'); const app = express(); app.use(express.urlencoded({extended: false})); //mysqlと接続 const connection = mysql.createConnection({ host: 'localhost', user: 'root',//mysqlのインストール時の設定に合わせる password: ' ',//mysqlのインストール時の設定に合わせる database: 'crud_db' //作成したDBの名前 }); //viewsディレクトリ以下のejsファイル認識させる app.set('views', './views'); app.set('view engine', 'ejs'); //新規作成画面のルーティング app.get('/new', (req, res) => { res.render('new.ejs'); }); //新規登録 app.post('/create', (req, res) => { connection.query( 'INSERT INTO users (name, email) VALUES (?, ?)', [req.body.name, req.body.email], (error, results) => { res.redirect('/');//一覧画面へ } ); }); //一覧画面のルーティング app.get('/index', (req, res) => { connection.query( 'SELECT * FROM users', (error, results) => { res.render('index.ejs', {items: results});//検索結果をitemsというキーでviewに渡す } ); }); //編集画面のルーティング app.get('/edit/:id', (req, res) => { connection.query( 'SELECT * FROM users WHERE id = ?', [req.params.id], (error, results) => { res.render('edit.ejs', {item: results[0]}); } ); }); //更新 app.post('/update/:id', (req, res) => { connection.query( 'UPDATE users SET name = ?, email = ? WHERE id = ?',[req.body.name, req.body.email, req.params.id],(error,results)=>{ res.redirect('/'); }) }); //削除 app.post('/delete/:id', (req, res) => { connection.query( 'DELETE FROM users WHERE id = ?', [req.params.id], (error, results) => { res.redirect('/'); } ); }); //新規作成画面のルーティング app.get('/', (req, res) => { res.render('menu.ejs'); }); app.listen(3000);//3000ポートでローカルサーバーを立てる |
（解説）
・const express = require(‘express’);
require()でモジュール（オブジェクト）を呼び出す
・const app = express();
express()オブジェクトを作成する
・app.use(express.urlencoded({extended: false}));
urlencoded()メソッドでフォームデータを読めるようにする
・app.get(‘/new’, function (req, res) {
・・・})
get受信時のルーティングとコールバック関数を定義する。
・connection.query(sql,コールバック関数)
queryメソッドのコールバック関数は第一引数にクエリを文字列で指定、第二引数にはコールバック関数を指定する。
コールバック関数ではerror, results, fieldsの引数を用いることができ、errorにはクエリ実行時のエラー、resultsにはクエリ実行後の結果、fileldsにはクエリの結果のフィールドの情報が入る。
connection.query(
‘SELECT * FROM users’,
(error, results,fields ) => {
console.log(results);
resultsの内容は、
[ RowDataPacket { id: 10, name: ‘test1’, email: ‘test1@test1.com’ },
RowDataPacket { id: 11, name: ‘test2’, email: ‘test2@test2.com’ } ]
・res.render(‘index.ejs’, {items: results})
使用するテンプレートファイルの指定とテンプレートファイルに渡すデータを{キー値: ‘渡す値’}で指定する。
テンプレートの”index.ejs”内では<%= キー値 %>と記述することでデータを埋め込むことができる。
（２）テンプレートファイル
views/menu.ejs
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>メニュー</title> </head> <body> <h2>【ユーザー管理】</h2> <a href="/new">『ユーザー登録』</a><br> <a href="/index">『ユーザー一覧』</a> </body> </html> |
views/index.ejs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ユーザー一覧画面</title> </head> <body> <table> <tr> <th >名前</th> <th >EMail</th> <th >ボタン</th> <th >ボタン</th> </tr> <tr> <% items.forEach((item) => { %> <td><%= item.name %></td> <td><%= item.email %></td> <td> <a href="/edit/<%= item.id %>">編集</a> </td> <td> <form action="/delete/<%= item.id %>" method="post"> <input type="submit" value="削除"> </form> </td> </tr> <% }) %> </table> <a href="/">戻る</a> </body> </html> |
views/new.ejs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>登録</title> </head> <body> <form action="/create" method="post"> 名前：<input type="text" name="name"><br> Email：<input type="text" name="email"><br> <input type="submit" value="登録"> <a href="/">戻る</a> </form> </body> </html> |
views/edit.ejs
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>編集</title> </head> <body> <form action="/update/<%= item.id %>" method="post"> 名前：<input type="text" name="name" value="<%= item.name %>"><br> EMail：<input type="text" name="email" value="<%= item.email %>"><br> <input type="submit" value="更新"> <a href="/">戻る</a> </form> </body> </html> |
５．アプリケーションの実行
（１）Mysqlサーバの起動
# service mysqld start
（２）nodeアプリケーションの実行
crud_app.jsのディレクトリで下記コマンドを実行
# node crud_app.js
（３）ブラウザからnodeのWebサーバに接続 http://127.0.0.1:3000/
The end