Node.jsとExpressを使用して最初のAPIをコーディングする：データベースを接続する

Node.jsとExpressを使用してRESTAPIを構築する：データベースに接続する

最初のチュートリアル「RESTfulAPIについて」では、RESTアーキテクチャとは何か、HTTPリクエストのメソッドとレスポンスとは何か、RESTfulAPIエンドポイントを理解する方法を学びました。 2番目のチュートリアル「ExpressAPIサーバーのセットアップ方法」では、両方のノードの組み込みhttpを使用してサーバーを構築する方法を学習しました。モジュールとExpressフレームワーク、および作成したアプリをさまざまなURLエンドポイントにルーティングする方法。

現在、APIエンドポイントがGETでヒットしたときに、静的データを使用してユーザー情報をJSONフィードの形式で表示しています。リクエスト。このチュートリアルでは、すべてのデータを保存するようにMySQLデータベースを設定し、Node.jsアプリからデータベースに接続し、APIがGETを使用できるようにします。、POST 、PUT 、およびDELETE 完全なAPIを作成するためのメソッド。

インストール

これまで、データベースを使用してデータを保存または操作したことはないため、データベースを設定します。このチュートリアルではMySQLを使用します。すでにMySQLがコンピューターにインストールされている場合は、次のステップに進む準備ができています。

MySQLがインストールされていない場合は、無料のローカルサーバー環境とデータベースを提供するmacOSおよびWindows用のMAMPをダウンロードできます。これをダウンロードしたら、プログラムを開いてサーバーの起動をクリックします MySQLを起動します。

MySQL自体の設定に加えて、GUIソフトウェアでデータベースとテーブルを表示する必要があります。 Macの場合はSequelProをダウンロードし、Windowsの場合はSQLyogをダウンロードします。 MySQLをダウンロードして実行したら、SequelProまたはSQLyogを使用してlocalhostに接続できます。ユーザー名root とパスワードroot ポート3306 。

ここですべてを設定したら、APIのデータベースの設定に進むことができます。

データベースのセットアップ

データベース表示ソフトウェアで、新しいデータベースを追加し、それをapiと呼びます。。 MySQLが実行されていることを確認してください。実行されていない場合、localhostに接続できません。。

apiがある場合データベースが作成されたら、そのデータベースに移動し、次のクエリを実行して新しいテーブルを作成します。

CREATE TABLE `users` (
  `id`       int(11)     unsigned NOT NULL AUTO_INCREMENT,
  `name`     varchar(30) DEFAULT '',
  `email`    varchar(50) DEFAULT '',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

このSQLクエリは、usersの構造を作成しますテーブル。各ユーザーには、自動インクリメントID、名前、および電子メールアドレスがあります。

INSERTを実行することで、静的JSON配列を介して現在表示しているものと同じデータをデータベースに入力することもできます。クエリ。

INSERT INTO users (name, email) 
     VALUES ('Richard Hendricks', '[email protected]'), 
            ('Bertram Gilfoyle',  '[email protected]');

idを入力する必要はありません自動インクリメントであるため、フィールド。この時点で、テーブルの構造と、使用するサンプルデータがいくつかあります。

MySQLへの接続

アプリに戻って、データの操作を開始するには、Node.jsからMySQLに接続する必要があります。以前、mysqlをインストールしました npmモジュール、これから使用します。

dataという名前の新しいディレクトリを作成します config.jsを作成しますファイル。

mysqlを要求することから始めます data / config.jsのモジュール。

const mysql = require('mysql');

configを作成しましょうホスト、ユーザー、パスワード、およびデータベースを含むオブジェクト。これはapiを参照する必要があります作成したデータベースで、デフォルトのローカルホスト設定を使用します。

// Set database connection credentials
const config = {
    host: 'localhost',
    user: 'root',
    password: 'root',
    database: 'api',
};

効率を上げるために、MySQLプールを作成します。これにより、複数の接続を手動で開いたり閉じたりする代わりに、一度に複数の接続を使用できます。

// Create a MySQL pool
const pool = mysql.createPool(config);

を作成します

最後に、MySQLプールをエクスポートして、アプリが使用できるようにします。

// Export the pool
module.exports = pool;

完成したデータベース構成ファイルは、GitHubリポジトリで確認できます。

MySQLに接続し、設定が完了したので、APIからデータベースとの対話に進むことができます。

MySQLからAPIデータを取得する

現在、routes.js ファイルは手動でユーザーのJSON配列を作成しています。これは次のようになります。

const users = [{ ...

静的データを使用しなくなるため、その配列全体を削除して、MySQLプールへのリンクに置き換えることができます。

// Load the MySQL pool connection
const pool = require('../data/config');

以前は、GET /usersの場合パスは静的なusersを送信していましたデータ。更新されたコードは、代わりにそのデータをデータベースに照会します。 SQLクエリを使用してSELECTを実行しますすべてusersからこのようなテーブル。

SELECT * FROM users

これが私たちの新しい/usersです get routeは、pool.query()を使用して次のようになります。メソッド。

// Display all users
app.get('/users', (request, response) => {
    pool.query('SELECT * FROM users', (error, result) => {
        if (error) throw error;

        response.send(result);
    });
});

ここでは、SELECTを実行していますクエリを実行し、結果をJSONとして/users経由でクライアントに送信します終点。サーバーを再起動して/usersに移動した場合ページには、以前と同じデータが表示されますが、現在は動的です。

URLパラメータの使用

これまでのところ、エンドポイントは静的パス（/）でした。ルートまたは/users —しかし、特定のユーザーに関するデータのみを表示したい場合はどうでしょうか。可変エンドポイントを使用する必要があります。

ユーザーの場合、一意のIDに基づいて個々のユーザーに関する情報を取得したい場合があります。これを行うには、コロン（:）を使用します）ルートパラメータであることを示します。

// Display a single user by ID
app.get('/users/:id', (request, response) => {
        ...
    });
});

で単一のユーザーを表示します

request.paramsを使用して、このパスのパラメーターを取得できます。財産。私たちの名前はidなので、それは私たちがそれを参照する方法になります。

const id = request.params.id;

次に、WHEREを追加します SELECTの句指定されたidを持つ結果のみを取得するステートメント。

?を使用します連結された文字列を作成する代わりに、SQLインジェクションを回避し、パラメータとしてIDを渡すためのプレースホルダーとして使用します。これにより、安全性が低下します。

pool.query('SELECT * FROM users WHERE id = ?', id, (error, result) => {
    if (error) throw error;

    response.send(result);
});

個々のユーザーリソースの完全なコードは次のようになります：

// Display a single user by ID
app.get('/users/:id', (request, response) => {
    const id = request.params.id;

    pool.query('SELECT * FROM users WHERE id = ?', id, (error, result) => {
        if (error) throw error;

        response.send(result);
    });
});

これで、サーバーを再起動して、https://localhost/users/2に移動できます。 Gilfoyleの情報のみを表示します。 Cannot GET /users/2のようなエラーが発生した場合、サーバーを再起動する必要があることを意味します。

このURLにアクセスすると、単一の結果が返されます。

[{
    id: 2,
    name: "Bertram Gilfoyle",
    email: "[email protected]"
}]

それが表示されている場合は、おめでとうございます。動的ルートパラメータを正常に設定できました！

POSTリクエストの送信

これまでのところ、私たちが行ってきたすべてのことはGETを使用していますリクエスト。これらのリクエストは安全です。つまり、サーバーの状態を変更することはありません。単にJSONデータを表示しているだけです。

次に、POSTを使用して、APIを真に動的にすることから始めます。新しいデータの追加をリクエストします。

「RESTについて」の記事で、addのような動詞は使用しないことを前述しました。またはdelete アクションを実行するためのURL。データベースに新しいユーザーを追加するために、POSTを実行します。それらを表示するのと同じURLに移動しますが、別のルートを設定するだけです。

// Add a new user
app.post('/users', (request, response) => {
    ...
});

を追加します

app.post()を使用していることに注意してください app.get()の代わりに今。

読み取る代わりに作成しているため、INSERTを使用しますデータベースの初期化時に行ったのと同じように、ここでクエリを実行します。 request.body全体を送信します SQLクエリまで。

pool.query('INSERT INTO users SET ?', request.body, (error, result) => {
    if (error) throw error;

また、応答のステータスを201として指定します。、Createdの略です。最後に挿入されたアイテムのIDを取得するには、insertIdを使用しますプロパティ。

response.status(201).send(`User added with ID: ${result.insertId}`);

POST全体受信コードは次のようになります。

// Add a new user
app.post('/users', (request, response) => {
    pool.query('INSERT INTO users SET ?', request.body, (error, result) => {
        if (error) throw error;

        response.status(201).send(`User added with ID: ${result.insertId}`);
    });
});

これで、POSTを送信できますを介して要求します。ほとんどの場合、POSTを送信しますリクエスト、あなたはウェブフォームを通してそれをやっています。この記事の終わりまでにそれを設定する方法を学びますが、テストを送信するための最も速くて簡単な方法POST -d (--data)を使用してcURLを使用しますフラグ。

curl -dを実行します、その後にすべてのキーと値のペアとリクエストエンドポイントを含むクエリ文字列が続きます。

curl -d "name=Dinesh Chugtai&[email protected]" http://localhost:3002/users

このリクエストを送信すると、サーバーから応答が返されます。

User added with ID: 3

http://localhost/usersに移動した場合、リストに追加された最新のエントリが表示されます。

PUTリクエストの送信

POST 新しいユーザーを追加するのに便利ですが、PUTを使用する必要があります既存のユーザーを変更します。 PUT はべき等です。つまり、同じ要求を複数回送信でき、1つのアクションのみが実行されます。これはPOSTとは異なります、新しいユーザーリクエストを複数回送信すると、新しいユーザーが作成され続けるためです。

APIについては、PUTを設定します 1人のユーザーの編集を処理できるようにするために、:idを使用します。今回はルートパラメータ。

UPDATEを作成しましょうクエリを実行し、WHEREを使用してリクエストされたIDにのみ適用されることを確認します句。 2つの?を使用していますプレースホルダー、および渡す値は順番に表示されます。

// Update an existing user
app.put('/users/:id', (request, response) => {
    const id = request.params.id;

    pool.query('UPDATE users SET ? WHERE id = ?', [request.body, id], (error, result) => {
        if (error) throw error;

        response.send('User updated successfully.');
    });
});

テストでは、ユーザー2を編集しますメールアドレスを[email protected]から[email protected]に更新します。 [-X (--request)]を使用して、cURLを再度使用できますフラグ。PUTリクエストを送信することを明示的に指定します。

curl -X PUT -d "name=Bertram Gilfoyle" -d "[email protected]" http://localhost:3002/users/2

リクエストを送信する前に、必ずサーバーを再起動してください。そうしないと、Cannot PUT /users/2が表示されます。エラー。

これが表示されるはずです：

User updated successfully.

IDが2のユーザーデータ更新する必要があります。

DELETEリクエストの送信

APIのCRUD機能を完了するための最後のタスクは、データベースからユーザーを削除するためのオプションを作成することです。このリクエストはDELETEを使用します WHEREを使用したSQLクエリ、ルートパラメータで指定された個々のユーザーを削除します。

// Delete a user
app.delete('/users/:id', (request, response) => {
    const id = request.params.id;

    pool.query('DELETE FROM users WHERE id = ?', id, (error, result) => {
        if (error) throw error;

        response.send('User deleted.');
    });
});

-Xを使用できます再度cURLを使用して、削除を送信します。作成した最新のユーザーを削除しましょう。

curl -X DELETE http://localhost:3002/users/3

成功のメッセージが表示されます。

User deleted.

http://localhost:3002に移動します、そして現在2人のユーザーしかないことがわかります。

おめでとう！この時点で、APIは完成しています。 GitHubリポジトリにアクセスして、 routers.jsの完全なコードを確認してください。

`request`を介したリクエストの送信モジュール

この記事の冒頭で、4つの依存関係をインストールしましたが、そのうちの1つはrequestでした。モジュール。 cURLリクエストを使用する代わりに、すべてのデータを含む新しいファイルを作成して送信することができます。 post.jsというファイルを作成します POSTを介して新しいユーザーを作成します。

const request = require('request');

const json = {
    "name": "Dinesh Chugtai",
    "email": "[email protected]",
};

request.post({
    url: 'http://localhost:3002/users',
    body: json,
    json: true,
}, function (error, response, body) {
    console.log(body);
});

これは、node post.jsを使用して呼び出すことができますサーバーの実行中に新しいターミナルウィンドウで表示され、cURLを使用した場合と同じ効果があります。何かがcURLで機能していない場合は、request モジュールは、エラー、応答、および本文を表示できるので便利です。

Webフォームを介したリクエストの送信

通常、POST サーバーの状態を変更するその他のHTTPメソッドは、HTMLフォームを使用して送信されます。この非常に単純な例では、 index.htmlを作成できます。どこにでもファイルし、名前とメールアドレスのフィールドを作成します。フォームのアクションはリソース、この場合はhttp//localhost:3002/usersを指します。、メソッドをpostとして指定します。

index.htmlを作成します次のコードを追加します：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Node.js Express REST API</title>
</head>

<body>
    <form action="http://localhost:3002/users" method="post">
        <label for="name">Name</label>
        <input type="text" name="name">
        <label for="email">Email</label>
        <input type="email" name="email">
        <input type="submit">
    </form>
</body>

</html>

この静的HTMLファイルをブラウザで開き、入力して、サーバーがターミナルで実行されている間に送信します。 User added with ID: 4の応答が表示されます。、そして新しいユーザーリストを表示できるはずです。