ミミウサ
「Node.js + Express + MySql」初心者です。
”フォームに値を入力した値でDB内を検索し、DBから取り出す”だけのシンプルなコードありませんか？
本記事では、「Node.js + Express + MySql」によるフォームとデータベースへの接続について初心者向けに説明しています。
「フォームに入力した値でDBを検索し、値を含む行を表示する」ということだけがしたかったのですが、これが情報がなかなかなく試行錯誤しました。
同じようにNode.js・Express・MySqlを学びはじめた方のために、「入力した値で検索してDBから取り出す」ソースコードを共有します。
入力した値で検索してDBから取り出す
入力した値で検索してDBから取り出すだけのコードを示します。
app.jsの内容
app.jsは、静的Webサイトで言うところのindex.htmlに相当するファイル。
メインとなるjsファイルです。
次のように記載します。
var createError = require('http-errors');
var createError = require('http-errors');
var express = require('express');var path = require('path');
var cookieParser = require('cookie-parser');
var logger = require('morgan');
var bodyParser = require('body-parser');
var indexRouter = require('./routes/index');
var usersRouter = require('./routes/users');
var app = express();
// view engineの設定
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs'); //'ejs'というテンプレートファイルをviewsディレクトリに作成
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use(bodyParser.json()); //Node.jsでフォームを簡単に使うためのモジュールbodyParserを呼び出し。
app.use(bodyParser.urlencoded({extended: false}));
app.use('/', indexRouter);
app.use('/users', usersRouter);
// 404 エラー時エラー返す
app.use(function(req, res, next) {
next(createError(404));
});
app.use(function(err, req, res, next) {
res.locals.message = err.message;
res.locals.error = req.app.get('env') === 'development' ? err : {};
// views/error.ejsへエラー内容を表示する
res.status(err.status || 500);
res.render('error');
});
module.exports = app; //モジュールをexportし他のファイルでも利用できるように
db.jsの内容
db.jsはデフォルトにはないファイルですが、MySqlのテーブルへのアクセスを担うファイルとして作成する必要があります。
var mysql = require('mysql'); //mysqlを要求
var connection = mysql.createConnection({ //hostの情報でDBへアクセス
host: 'localhost', port : 3306, user: 'root',
password: '****', database: 'expressdb'
});
exports.connection = connection;
connection.connect((err) => { //DB接続テスト用。アクセス成功でメッセージ返す。
if(err){ console.log('Error connecting to Db');
console.error(err);
}
else{ console.log('Connection established');}
});
routes/index.jsの内容
routes/index.jsは、ルーティング部分のメインとなるjsファイル。
index.ejsと連携しているファイルです。
var express = require('express');
var router = express.Router();
var app = require('../db.js'); //db.jsを呼び出し。
var ejs = require("ejs");
var array = { title: null , users: null, content: null};
//index.ejs上title/users/contentという変数を定義、中身はnull空として定義。
router.get('/', function (req, res) {
app.connection.query('select * from employees', function (err, rows) {
array.users = rows; //連想配列arrayの変数usersにDBの行rowsを入力
array.title = 'Express Users'; //連想配列arrayの変数titleに値を入力
array.content = 'データを検索したい方の名前を入力してください。';
//連想配列arrayの変数contentに値を入力
res.render('index', array); //index.ejsに配列arrayを表示する。
tablerows= rows;
//以下の検索部分でDBのrowsの値を再度使用するため別の変数tablerowsに代入しておく。
});
});
router.post('/',(req, res) => { // POST送信の処理
app.connection.query(
'select * from employees where name = ?',
//table employeesからnameに？（何か）が入っている行を取り出す。
//? はプレースホルダーであとから「?」の中身を指定するという意味
//where句は完全一致のため、大文字小文字区別した名前全体が「?」に入るべき文字となる。
[req.body.message],
function (err, rows) {
array.users = rows;
array.content = '「<b>' + req.body.message + '</b>」さんについての情報を表示します。';
res.render('index', array)
}
);
});
module.exports = router;
views/index.ejsの内容
views/index.ejsは、ブラウザへの表示を担うjsファイルです。
<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
//index.js上でタイトル表示用として定義した変数titleの値をタイトルバーへ表示
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<table id="table" >
<thead>
<tr>
<th>id</th>
<th>Username</th>
<th>Location</th>
</tr>
</thead>
<tbody>
<% users.forEach(function (user) { %>
//table userに対し、行を繰り返し
<tr>
<td><%= user.name %></td> //table userからname列の値を表示
<td><%= user.location %></td> //table userからlocation列の値を表示
</tr>
<% }) %>
</tbody>
</table>
<div>
<p><%- content %></p> //index.js上連想配列array.contentの内容を表示する。
<form method="post" action= '/'>
<input type="text" name="message">
<input type="submit" value="Click" >
</form>
</div>
</body>
</html>
おわりに
「フォームに入力した値でDBを検索し、値を含む行を表示する」”だけ”のシンプルなコードを共有させていただきました。
同じように「Node.js + Express + MySql」を学びはじめた方のお役に立てていたのなら幸いです。
