🤔

初心者の【Node.js】 js+MySQLでユーザー管理機能を作る

2022/09/27に公開

MySQL

本記事では「Node.js」を利用したユーザー管理機能を作成しながらMySQLとの連携方法をまとめました。
※Node.js、MySQLの各環境準備は完了しているものとします。

使用した環境

Windows 10
Node.js 16.14.2
MySQL 5.7.37

手順1 画面を表示させる

開発用のフォルダを作成する。(場所やファイル名は自由に設定する)
パッケージを準備する。
①コマンドプロンプトを開き、作成した開発フォルダに移動する。
cd C:\develop\node\test1

②設定ファイルを作成する。
npm init
※幾つか入力を求められるが、何も入力せずにEnterを押下する。

※「package.json」が生成されている。

③必要なパッケージをインストールする。
npm install express --save

npm install ejs --save
画面表示用のファイルを作成する。

jsファイル(‪C:\develop\node\test1\test.js)

test.js

var { render } = require('ejs');
var express = require('express');
var test = express();
test.get('/', (req, res) => {
    res.render('test.ejs');
});
test.listen(3000);

ejsファイル(C:\develop\node\test1\views\test.ejs)

test.ejs

<h1>作成画面</h1>
<form>
    <div>ユーザー名<input type="text" name="name" style="size: 20px"></div>
    <div>パスワード<input type="password" name="pass" style="size: 20px"></div>
    <div>
        <input type="button" value="戻る">
        <input type="button" value="登録する">
    </div>
</form>

サーバ起動し、画面表示する。
node test.js

http://localhost:3000/にアクセス

上記の画面が表示されれば、「手順1」としては完了となります。
nodeコマンドはCtrl+CでSTOPさせておきます。

手順2 MySQLと連携させる

パッケージを準備する。
①必要なパッケージをインストールする。
npm install mysql
環境準備用のSQLを叩くファイルを作成する。
※連携のみを実験的に確認する為、今回使用するDBとテーブル作成用のSQLを叩くファイルを作成。

jsファイル(‪C:\develop\node\test1\init.js)

init.js

var mysql = require('mysql');

var connection = mysql.createConnection({
  user: 'username',
  password: 'password'
});
connection.query('CREATE DATABASE test', function(err) {
  if (err && err.number != mysql.ERROR_DB_CREATE_EXISTS) {
    throw err;
  }
});
connection.query('USE test');
connection.query(
  'CREATE TABLE user ' +
  '(id INT AUTO_INCREMENT, ' +
  'name VARCHAR(100) UNIQUE NOT NULL, ' +
  'pass VARCHAR(100) NOT NULL, ' +
  'PRIMARY KEY (id));'
);
connection.end();

※DB名、テーブル名、ユーザー名、パスワードはご自身の環境に合わせて書き換えをお願いします。

サーバ起動する。
node init.js
コマンドなどでDB、テーブルの作成を確認する。

「手順2」としては完了となります。

手順3 ユーザー管理機能を作る

画面表示用jsファイルを用意する。

メニュー画面(‪C:\develop\node\test1\views\menu.js)

menu.js

<button onClick="create();">ユーザー作成</button>
<button onClick="auth();">ユーザー認証</button>

<script>
    function create() {
        location.href = '/create.ejs';
    }

    function auth() {
        location.href = '/auth.ejs';
    }
</script>

作成画面(‪C:\develop\node\test1\views\create.js)
※手順1で作成したtest.jsを書き換える。

create.js

<h1>作成画面</h1>
<form action="create" method="post">
    <div>ユーザー名<input type="text" name="name" style="size: 20px"></div>
    <div>パスワード<input type="password" name="pass" style="size: 20px"></div>
    <div>
        <input type="button" value="戻る" onClick="cancel();">
        <input type="submit" value="登録する">
    </div>
</form>

<script>
    function cancel() {
        location.href = '/';
    }
</script>

認証画面(‪C:\develop\node\test1\views\auth.js)

auth.js

<h1>認証画面</h1>
<form action="auth" method="post">
    <div>ユーザー名<input type="text" name="name" style="size: 20px"></div>
    <div>パスワード<input type="password" name="pass" style="size: 20px"></div>
    <div>
        <input type="button" value="戻る" onClick="cancel();">
        <input type="submit" value="認証する">
    </div>
</form>
<div id="msg" style="color: red;"></div>

<script>
    window.onload = function() {
        const url = window.location.href;
        if (!url || !url.split("msg=")[1]) {
            return;
        }
        var msg = document.getElementById("msg");
        msg.innerHTML = decodeURIComponent(url.split("msg=")[1]);
        return;
    }

    function cancel() {
        location.href = '/';
    }
</script>

処理用ejsファイルを用意する。
※手順1で作成したtest.jsを書き換える。

処理機能(‪‪C:\develop\node\test1\test.js)

test.js

var { render } = require('ejs');
var express = require('express');
var test = express();

test.get('/', (req, res) => {
    res.render('menu.ejs');
});
test.get('/create.ejs', (req, res) => {
    res.render('create.ejs');
});
test.get('/auth.ejs', (req, res) => {
    res.render('auth.ejs');
});
test.listen(3000);

test.post('/create', (req, res) => {
    var data = '';
    req.on('data', function(chunk) {
        data += chunk;
    }).on('end', function() {
        create(data.split('&'));
    })
});

var flg = false;
test.post('/auth', (req, res) => {
    var data = '';
    req.on('data', function(chunk) {
        data += chunk;
    }).on('end', function() {
        auth(data.split('&'));
        setTimeout(function () {
            if (flg) {
                res.redirect('auth.ejs?msg=認証OK！');
            } else {
                res.redirect('auth.ejs');
            }
        }, 1000);
    })
});

// ユーザー登録
function create (param) {
    var name = param[0].split('=')[1];
    var pass = param[1].split('=')[1];

    var mysql = require('mysql');
    var connection = mysql.createConnection({
        user: 'username',
        password: 'password'
    });
    connection.query('USE test');
    connection.query(
        'INSERT INTO user (name, pass) VALUES ("' +
        name +
        '", "' +
        pass +
        '");'
    );
    connection.end();
    return;
}

// ユーザー認証
function auth (param) {
    var name = param[0].split('=')[1];
    var pass = param[1].split('=')[1];

    var mysql = require('mysql');
    var connection = mysql.createConnection({
        user: 'username',
        password: 'password'
    });
    connection.query('USE test');
    connection.query(
        'SELECT name FROM user WHERE name = "' +
        name +
        '" AND pass = "' +
        pass +
        '";'
    , function (err, result, fields) {
        if (err || !result || result.length == 0 || result.affectedRows == 0 || !result[0] || !result[0].name || result[0].name != name) {
            flg = false;
            return;
        }
    });
    connection.end();
    flg = true;
    return;
}

※DB名、テーブル名は手順2で作成した命名に、ユーザー名、パスワードはご自身の環境に合わせて書き換えをお願いします。

基本機能としてはこれで完了となります。
①node test.jsでサーバ起動
②「作成画面」でユーザー情報を作成
③「認証画面」で作成したユーザーを入力
とした際に認証画面に「認証OK！」が表示される事を確認できます。
(未登録のユーザーを入力すると「認証OK！」は表示されない。)

その他、登録時にも「完了」「失敗」のメッセージ表示をさせたり、登録や認証時の「入力文字チェック」を付けたり、Error処理も可能です。

以上、Node.jsとMySQLの連携方法の備忘用のまとめでした。

使用した環境

手順1 画面を表示させる

手順2 MySQLと連携させる

手順3 ユーザー管理機能を作る

Discussion