高橋  花子

高橋 花子

1656536400

NodeJSでAJAXを使用してMySQLデータベースからデータを取得する

 MySQLはSQL–構造化クエリ言語に基づくリレーショナルデータベース管理システムであり、MySQLでのデータ管理はそれほど難しくありません。

この詳細なガイドでは、NodejsアプリでAJAXを使用してMySQLデータベースからデータを取得する方法について説明します。データベースからレコードを取得するHTMLドロップダウン要素を作成します。

NPMレジストリからいくつかのパッケージをインストールします。これらのパッケージは、NodeをMySQLデータベースに接続し、データベースと対話するAPIルートを構築するのに役立ちます。

さらに、ノードサーバーの実行に役立つノードスクリプトを作成します。

ノード環境を介してMySQLデータベースを操作する方法を見てみましょう。

NodeJsとjQueryAjaxを使用してMySQLデータベースからデータを取得する方法

  • ステップ1:ノードアプリを作成する
  • ステップ2: NPMモジュールを追加する
  • ステップ3:データベースにテーブルを作成する
  • ステップ4:データベース接続
  • ステップ5:サーバーファイルを作成する
  • ステップ6: HTMLでデータをレンダリングして表示する
  • ステップ7:サーブノードプロジェクト

ノードアプリを作成する

mkdirコマンドに続けてプロジェクト名を入力し、Enterキーを押して新しいフォルダーを作成します。

mkdir node-vlog

次に、アプリケーションフォルダに移動します。

cd node-vlog

npm initコマンドを使用します。このコマンドは、プロジェクトのメタ情報が保持されるpackage.jsonファイルを作成します。

npm init

プロジェクトのルートでapp.jsファイルを作成し、スクリプトセクションにファイル名を登録して、コマンドラインツールを使用してこのノードスクリプトを呼び出せるようにします。

{
  "main": "app.js",
}

NPMモジュールを追加する

npmレジストリから以下のパッケージをインストールし、コマンドを実行して、モジュールを同時にインストールします。

npm install ejs express cors mysql body-parser nodemon

データベースにテーブルを作成する

データベースには、データベースからデータを取得できるように、いくつかのレコードを含むテーブルが必要です。

テーブルを作成していない場合は、[SQL]タブから特定のSQLコマンドを実行します。

CREATE DATABASE nodedb;

CREATE TABLE Country (
  id int not null,
  name varchar(150) not null);
INSERT INTO country VALUES(1,'Colombia');
INSERT INTO country VALUES(2,'Estonia');
INSERT INTO country VALUES(3,'Belgium');
INSERT INTO country VALUES(4,'Austria');
INSERT INTO country VALUES(5,'Denmark');</code></pre>

データベース接続

ノードプロジェクトで、database.jsファイルを作成し、指定されたコード内にデータベースのクレデンシャルを追加して、データベースをノードアプリに接続します。

var mysql = require('mysql')
var connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: '',
  database: 'test'
})
connection.connect((err) => {
  if (err) {
    console.log(err)
    return
  }
  console.log('Database connected')
})
module.exports = connection

サーバーファイルの作成

app.jsスクリプトファイルを開き、このファイルに指定されたコードを入力します。

var express = require('express')
var path = require('path')
var createError = require('http-errors')
var cors = require('cors')
var bodyParser = require('body-parser')
var app = express()

var dbMySQLNode = require('./database')
// view engine setup
app.set('views', path.join(__dirname, '/'))
app.set('view engine', 'ejs')
app.use(bodyParser.json())
app.use(
  bodyParser.urlencoded({
    extended: true,
  }),
)

app.use(cors())
app.get('/', (req, res) => {
  res.render('index')
})
app.get('/fetch-countries', function (req, res) {
  dbMySQLNode.query('SELECT * FROM Country ORDER BY id desc', function (
    error,
    response,
  ) {
    if (error) {
      res.json({
        msg: error,
      })
    } else {
      res.json({
        msg: 'Data successfully fetched',
        country: response,
      })
    }
  })
})
app.listen(5555, function () {
  console.log('Node app is being served on port: 5555')
})
module.exports = app

次のスクリプトは、ejsビューエンジンのセットアップ、cors設定の定義、データベースと通信するルートの宣言、およびアプリケーションポートの定義を担当します。

HTMLでデータをレンダリングして表示する

アプリケーションのルートで、index.ejsファイルを作成します。このファイルは、ノードアプリのビューを処理します。データベースから取得したレコードが表示されます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>
    <div class="container">
      <h2 class="mb-4">Node js Ajax Get Data from MySQL Example</h2>
      <div class="form-group">
        <label><strong>Countries</strong></label>
        <select class="form-control" id="dynamicDropdown"></select>
      </div>
    </div>
    <script>
      $(document).ready(function () {
        function showCountryCollection() {
          var count_id = this.value;
          $("#dynamicDropdown").html("");
          $.ajax({
            url: "http://localhost:5555/fetch-countries",
            type: "GET",
            dataType: "json",
            success: function (res) {
              console.log(res);
              $("#dynamicDropdown").html('<option value="">Select</option>');
              $.each(res.Country, function (key, value) {
                $("#dynamicDropdown").append(
                  '<option value="' + value.id + '">' + value.name + "</option>"
                );
              });
            },
          });
        }
        showCountryCollection();
      });
    </script>
  </body>
</html>

サーブノードプロジェクト

最終的に、ノードアプリケーションを起動するには、提案されたコマンドを呼び出す必要があります。

nodemon

アプリをテストするには、次のURLを使用する必要があります。

http://localhost/:5555

 

結論

このガイドでは、MySQLデータベースからNodejsアプリに結果を取得するプロセスについて説明しました。

MySQLデータベースからデータをフェッチし、外部依存関係を使用してNodejsアプリのHTML選択ドロップダウンにレコードを表示する方法について説明しました。

このガイドが気に入って、他の人と共有していただければ幸いです。 

ソース:https ://www.positronx.io/node-ajax-retrieve-records-from-mysql-database-tutorial/

#mysql #database #node #ajax 

What is GEEK

Buddha Community

NodeJSでAJAXを使用してMySQLデータベースからデータを取得する
高橋  花子

高橋 花子

1656536400

NodeJSでAJAXを使用してMySQLデータベースからデータを取得する

 MySQLはSQL–構造化クエリ言語に基づくリレーショナルデータベース管理システムであり、MySQLでのデータ管理はそれほど難しくありません。

この詳細なガイドでは、NodejsアプリでAJAXを使用してMySQLデータベースからデータを取得する方法について説明します。データベースからレコードを取得するHTMLドロップダウン要素を作成します。

NPMレジストリからいくつかのパッケージをインストールします。これらのパッケージは、NodeをMySQLデータベースに接続し、データベースと対話するAPIルートを構築するのに役立ちます。

さらに、ノードサーバーの実行に役立つノードスクリプトを作成します。

ノード環境を介してMySQLデータベースを操作する方法を見てみましょう。

NodeJsとjQueryAjaxを使用してMySQLデータベースからデータを取得する方法

  • ステップ1:ノードアプリを作成する
  • ステップ2: NPMモジュールを追加する
  • ステップ3:データベースにテーブルを作成する
  • ステップ4:データベース接続
  • ステップ5:サーバーファイルを作成する
  • ステップ6: HTMLでデータをレンダリングして表示する
  • ステップ7:サーブノードプロジェクト

ノードアプリを作成する

mkdirコマンドに続けてプロジェクト名を入力し、Enterキーを押して新しいフォルダーを作成します。

mkdir node-vlog

次に、アプリケーションフォルダに移動します。

cd node-vlog

npm initコマンドを使用します。このコマンドは、プロジェクトのメタ情報が保持されるpackage.jsonファイルを作成します。

npm init

プロジェクトのルートでapp.jsファイルを作成し、スクリプトセクションにファイル名を登録して、コマンドラインツールを使用してこのノードスクリプトを呼び出せるようにします。

{
  "main": "app.js",
}

NPMモジュールを追加する

npmレジストリから以下のパッケージをインストールし、コマンドを実行して、モジュールを同時にインストールします。

npm install ejs express cors mysql body-parser nodemon

データベースにテーブルを作成する

データベースには、データベースからデータを取得できるように、いくつかのレコードを含むテーブルが必要です。

テーブルを作成していない場合は、[SQL]タブから特定のSQLコマンドを実行します。

CREATE DATABASE nodedb;

CREATE TABLE Country (
  id int not null,
  name varchar(150) not null);
INSERT INTO country VALUES(1,'Colombia');
INSERT INTO country VALUES(2,'Estonia');
INSERT INTO country VALUES(3,'Belgium');
INSERT INTO country VALUES(4,'Austria');
INSERT INTO country VALUES(5,'Denmark');</code></pre>

データベース接続

ノードプロジェクトで、database.jsファイルを作成し、指定されたコード内にデータベースのクレデンシャルを追加して、データベースをノードアプリに接続します。

var mysql = require('mysql')
var connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: '',
  database: 'test'
})
connection.connect((err) => {
  if (err) {
    console.log(err)
    return
  }
  console.log('Database connected')
})
module.exports = connection

サーバーファイルの作成

app.jsスクリプトファイルを開き、このファイルに指定されたコードを入力します。

var express = require('express')
var path = require('path')
var createError = require('http-errors')
var cors = require('cors')
var bodyParser = require('body-parser')
var app = express()

var dbMySQLNode = require('./database')
// view engine setup
app.set('views', path.join(__dirname, '/'))
app.set('view engine', 'ejs')
app.use(bodyParser.json())
app.use(
  bodyParser.urlencoded({
    extended: true,
  }),
)

app.use(cors())
app.get('/', (req, res) => {
  res.render('index')
})
app.get('/fetch-countries', function (req, res) {
  dbMySQLNode.query('SELECT * FROM Country ORDER BY id desc', function (
    error,
    response,
  ) {
    if (error) {
      res.json({
        msg: error,
      })
    } else {
      res.json({
        msg: 'Data successfully fetched',
        country: response,
      })
    }
  })
})
app.listen(5555, function () {
  console.log('Node app is being served on port: 5555')
})
module.exports = app

次のスクリプトは、ejsビューエンジンのセットアップ、cors設定の定義、データベースと通信するルートの宣言、およびアプリケーションポートの定義を担当します。

HTMLでデータをレンダリングして表示する

アプリケーションのルートで、index.ejsファイルを作成します。このファイルは、ノードアプリのビューを処理します。データベースから取得したレコードが表示されます。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>
    <div class="container">
      <h2 class="mb-4">Node js Ajax Get Data from MySQL Example</h2>
      <div class="form-group">
        <label><strong>Countries</strong></label>
        <select class="form-control" id="dynamicDropdown"></select>
      </div>
    </div>
    <script>
      $(document).ready(function () {
        function showCountryCollection() {
          var count_id = this.value;
          $("#dynamicDropdown").html("");
          $.ajax({
            url: "http://localhost:5555/fetch-countries",
            type: "GET",
            dataType: "json",
            success: function (res) {
              console.log(res);
              $("#dynamicDropdown").html('<option value="">Select</option>');
              $.each(res.Country, function (key, value) {
                $("#dynamicDropdown").append(
                  '<option value="' + value.id + '">' + value.name + "</option>"
                );
              });
            },
          });
        }
        showCountryCollection();
      });
    </script>
  </body>
</html>

サーブノードプロジェクト

最終的に、ノードアプリケーションを起動するには、提案されたコマンドを呼び出す必要があります。

nodemon

アプリをテストするには、次のURLを使用する必要があります。

http://localhost/:5555

 

結論

このガイドでは、MySQLデータベースからNodejsアプリに結果を取得するプロセスについて説明しました。

MySQLデータベースからデータをフェッチし、外部依存関係を使用してNodejsアプリのHTML選択ドロップダウンにレコードを表示する方法について説明しました。

このガイドが気に入って、他の人と共有していただければ幸いです。 

ソース:https ://www.positronx.io/node-ajax-retrieve-records-from-mysql-database-tutorial/

#mysql #database #node #ajax