HTML･CSS｜JavaScriptとNode.jsを使ってMySQLに接続

クライアントからサーバーにアクセスしてデータベース、MySQLを操作するクライアントプログラムとサーバー側のプログラムをテストで作ってみた。

接続、取り出しのテストが目的なので、微細なチェック機能や表示の体裁は手抜きしているのと、HTMLとCSSのコードは割愛している。

開発環境

テストとはいえ、少なくてもクライアントからサーバーにアクセスが必須なので
サーバーが必要となる。

サーバー

仮想サーバーを簡単に構築できるXAMPPを使用。

XAMPPのインストールの方法はネット上に多く公開されているので
「XAMPP」等で検索すれば、簡単に見つかるはず。

MySQL

XAMPPをインストールすると同時に、MariaDBがインストールされる。

MariaDBは旧MySQLなので、MySQLだと思って間違いない。

Node.js

サーバー側で動作するJavaScript、Node.jsをインストールする。

初めてのNode.js｜Node.jsをWindowsにインストール

Node.jsとは？｜Node.jsのインストールの方法

Node.jsをインストーすると同時にNPMツールもインストールされる。

NPMはモジュールをインストール時等に必要なツール。

開発フォルダ

開発を進めるフォルダを準備する。

C:\xampp\htdocs\mydbSQL

C:\xampp\htdocs直下にmydbSQLフォルダを作る。

必要なモジュールやサーバー側プログラムをここに作る。

C:\xampp\htdocs\mydbSQL\Web

先に作成したmydbSQLの直下にWebフォルダを作る。

クライアント側プログラムをここに作る。

開発フォルダ初期化

初期化はnpmツールを使用する。

コマンドプロンプト起動。

カレントフォルダをモジュールをインストールするフォルダにする。

「C:\xampp\htdocs\mydbSQL>」

「npm init」を実行。

数回、問い合わせがあるが
全てEnterで続ければOK。

開発フォルダにモジュールインストール

必要モジュールは「express」と「mysql」だ。

早々、インストールしよう。

コマンドプロンプト起動。

初期化した開発フォルダをカレントフォルダにする。

「C:\xampp\htdocs\mydbSQL>」

「npm install express mysql -s」を実行。

時に何もしなくてOK！！。

モジュールexpressとは？

Node.jsで利用できるWebアプリケーションフレームワーク。

Webアプリケーションとは、インターネット上で利用するサービスを動かすシステム。

モジュールmysqlとは？

Node.jsでMySQLのデータベースを操作するモジュール。

Node.jsを使って簡単にmySQLの操作が可能になる。

サーバー側プログラム

サーバー側プログラムを開発するフォルダ直下に「server.js」ファイルを作る。

「C:\xampp\htdocs\mydbSQL\server.js」

定数やモジュール読み込み

プログラムの最初にコーディングする。

const   mysql           =   require("mysql");
const   express         =   require("express");
const   bodyparser      =   require("body-parser");
const   app             =   express();
const   CONSTHOST       =   "localhost";
const   CONSTUSER       =   "root";
const   CONSTDATABASE   =   "sssproduct";
const   CONSTURLYES     =   "/yes";
const   CONSTURLNO      =   "/no";
const   CONSTPORT       =   3000;

app.use(bodyparser.json());
app.use(express.static("web"));

各モジュールを読み込む。

プログラム内部で使用する定数を定義。

ミドルウェアを生成。

mySQLに接続

//  ************************************************
//  mySql接続 
//  ************************************************
function    mySQLconnect()
{
    var connection    =   mysql.createConnection(
    {
        host        : CONSTHOST,
        user        : CONSTUSER,
        database    : CONSTDATABASE
    });

    return(connection);
}

呼ばれる関数なので、取得したオブジェクトを返す。

クライアントから受信

app.postでクライアントから受信する。

SQLを実行　テーブルの内容を返す

//  ************************************************
//  SQLでテーブルの内容を返す 
//  ************************************************
app.post(CONSTURLYES,(req,res) =>
{
    // MySQL接続
    const   connection  =   mySQLconnect();
        
    //  sql実行
    connection.query(req.body.sql, function (err, rows, fields)
    {
        //  エラー処理
        if (err)
        {   console.log('err --> ' + err);  }

        //  レコードを返す
        res.json(rows);
    });

    //  mysql解放
    connection.end();
});

クライアントがURL”/yes”でサーバーに送信してきた。

送信してきたSQLはres.body.sqlで取り出せる。

取り出したテーブルの内容をクライアントに送る。

SQLを実行　テーブルの内容を返さない

//  ************************************************
//  SQLを実行するが内容は返さない
//  ************************************************
app.post(CONSTURLNO,(req,res) =>
{
    // MySQL接続
    const   connection  =   mySQLconnect();
    
    //  sql実行
    connection.query(req.body.sql, function (err, rows, fields)
    {
        //  エラー処理
        if (err)
        {   console.log('err --> ' + err);  }

        //  レコードを返す
        res.json(rows);
    });

    //  mysql解放
    connection.end();
});

基本的にはテーブルの内容を返す処理と同じである。

アクセスを区別するために分けただけ。

ポートを指定

//  ************************************************
// ポート3000でサーバを立てる
//  ************************************************
app.listen(CONSTPORT, () => console.log("Listening on port " + CONSTPORT));

このプログラムがサーバーのポート300で待ち受ける。

プログラムを実行

コマンドプロンプトを起動。

server.jsが格納されているディレクトリをカレントにする。

node server.jsをタイプして実行。

サーバーでserver.jsが常駐。

終了はCtrl+C。

クライアント側プログラム

クライアント側プログラムを作成するディレクトリに「index.js」ファイルを作成。

C:\xampp\htdocs\mydbSQL\Web\index.js

定数定義

const   ExecuteReaderPath   =   "/yes";
const   ExecuteNonQueryPath =   "/no";

プログラム内部で使用する定数を定義。

アクセスするURLを定義している。

テーブルの値を取り出す

//  ***************************************************
//  表示ボタンクリック
//  ***************************************************
function    rcddsp()
{
    var sql = sqldsp();
    var data = {sql: sql};

    fetch(ExecuteReaderPath,
    {
        method: 'POST',
        body: JSON.stringify(data),
        headers:
        {
            'Content-Type': 'application/json'
        }
    })
    .then((res) => res.json())
    .then((json) =>  
    {
        const   records =   json;

        tbldsp(records);
    })
    .catch(error => console.error('Error:', error));
}

HTMLのボタンをクリックしたら動作するファンクション。

sqldsp関数でSQLを生成。

dataオブジェクトのsql:にSQLをセット。

ExecuteReaderPathのURLでサーバーにアクセス。

POSTでbodyにdataオブジェクトをセット。

テーブルの値が戻るのでJSON形式にしHTMLに表示。

テーブルの行を削除

//  ***************************************************
//  削除ボタンクリック
//  ***************************************************
function    rcddel()
{
    var sql = sqldel();
    var data = {sql: sql};

    fetch(ExecuteNonQueryPath,
    {
        method: 'POST',
        body: JSON.stringify(data),
        headers:
        {
            'Content-Type': 'application/json'
        }
    })
    .then((res) => res.json())
    .then((json) =>  
    {
        const   records =   json;
    })
    .catch(error => console.error('Error:', error));
}