【Node.js+Express+MySql】フォームに値入力でDB検索して該当行表示する方法

ミミウサ
ミミウサ

「Node.js + Express + MySql」初心者です。
ミニData Baseを作っています。
”フォームに値を入力しDBから取り出す”だけのシンプルなコードありませんか?

「Node.js + Express + MySql」によるフォームとData Baseのコントロールについてです。

「フォームに入力した値でDBを検索し、値を含む行を表示する」ということだけがしたかったのですが、これが情報がなかなかなく試行錯誤しました。

同じように「Node.js + Express + MySql」を学びはじめた方のために、ソースコードを共有します。

入力した値で検索してDBから取り出す

入力した値で検索してDBから取り出すだけのコードを示します。

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の内容

デフォルトにはないが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の内容

ルーティング部分のメインとなる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の内容

ブラウザへの表示を担う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」を学びはじめた方のお役に立てていたのなら幸いです。

PR プログラミング&Webデザイン奮闘記

なんだかんだでプログラミングまたはWebデザイン関係のスクールは3校ほど受講しました。
その質はばらつきが激しいと痛感。

3校の様子をレビューしますね。

通学型:料金は高いですが、対面なので先生は気合い入れて教えてくれるし、なにより同士となる生徒とのコミュニケーションは通学型でしか手に入らないと思いました。
仕事で悩みがあったのかいきなり泣き出す生徒さんに出会ったこともあり、そんな人間臭い出会いも良い思い出です。

オンライン型:オンライン型のスクールは私はこちら↓の侍エンジニア塾さんにお世話になりました。
私は当時、長期では通えなかったので侍エンジニア塾さんは1ヶ月コースがある点が良かったです。

私には都合が良いスクールでしたが契約する前に必ず体験を勧めます
詳しくは、以下の侍エンジニア塾さんの公式ページをご確認くださいね。

侍エンジニア塾での体験談は以下の記事でまとめています。
ご興味がある方は参考にしていただけると嬉しいです。

タイトルとURLをコピーしました