Express を使用した基本的な CRUD API

コンテンツ

• はじめに
• プロジェクトの作成と初期化
• 単純なサーバーと GET ルートを作成する
• ルートとリクエストハンドラー
• リクエストとレスポンス
• 変更に注意してください
• POST、GET、UPDATE、および DELETE ルートを作成する
• API クライアント
• リクエストの本文、パラメータ、クエリ、ヘッダー、...
• メモリデータの操作
• 結論

導入

JavaScript Essentials: パート 7 で、API の開発を検討することを示唆しました ([0] [1])。ここからが始まりです。支出を追跡するためのシンプルな API を開発するのに何が必要かを試してみましょう。

プロジェクトの説明

この経費追跡では、購入した商品、金額、購入日を記録する必要があります。経費は次のようになります:

{
    "name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop",
    "amount": 2099.99,
    "date": "2024-31-12"
}

この時点では、実際のデータベースはまだ追加されていないため、作成するデータを保持するためにリスト (配列) を使用できます。この抜粋では、API の作成に関する主要な概念をそれぞれ説明し、後でこのアプリを改善するいくつかの方法を追加します。

このプロジェクトの上に構築することになるので、プロジェクトをクリーンな状態に保ち、できる限り探索、実験、そわそわなどをしてください。

プロジェクトの作成と初期化

いつものように、プロジェクトごとに新しい作業環境が必要なので、まず Node JS プロジェクトを作成して初期化します。よくわからない場合は、「JavaScript Essentials: Part 6 (JavaScript の首謀者)」を参照してください。

次に、次の操作を行って API の親フォルダーを作成する必要があります。

# create a folder for the project at the path of your choice
mkdir expense-tracker-simple-api

# open the project with vscode
# code expense-tracker-simple-api
code -r expense-tracker-simple-api

# open the built-in terminal and init node
npm init -y
# this should create the package.json file

# create the entry file, index.js
echo "console.log(\"expense-tracker-simple-api\");" > index.js

# run the index.js file
node index.js

このスクリプトで行っていることはすべて非常に直接的です。

• プロジェクト用のフォルダーを作成します
• vscode でフォルダーを開きました
• nodejs プロジェクトを初期化しました
• index.js ファイルにコンソール ログを追加しました。これによりファイルが作成され、コンテンツが追加されます
• index.js ファイルを実行します

別の方法は、このフォルダーを作成したい場所に移動してそこにフォルダーを作成し、vscode でフォルダーを開いてノード プロジェクトを初期化することです - JavaScript Essentials: Part 6 (Mastermind in Javascript) を確認してください。

この時点で、expressというnodejsパッケージをインストールする必要があります。 Express は、API の作成に役立つライブラリです。

このパッケージは、npm i Express を実行することでインストールできます。これにより、package.json ファイルが変更され、package-lock.json ファイルと node_modules フォルダーが作成されます。 npm を使用してパッケージをインストールする方法についてのさらなる理解と情報については、抜粋「Nodejs とは」を参照してください。

単純なサーバーと GET ルートを作成する

index.js ファイルに次のコードを追加できます。

console.log("expense-tracker-simple-api");

// import the express lib
const express = require("express");

// create an express application
const app = express();

// create a GET request on the base endpoint
app.get("/", (req, res) => res.send("Hello world"));

// create a server that listens to requests on port 3000
app.listen(3000, () =>
  console.log(`Api running on ${"http://localhost:3000"}`)
);

私たちが行ったことは、高速アプリケーションを作成し、そのアプリケーションを使用してメッセージを送信する GET リクエストを作成し、アプリケーションがポート 3000 からのリクエストをリッスンできるようにすることだけでした。

const app = express();

エクスプレス アプリケーションを作成します (? エクスプレス アプリケーションの作成方法)

app.get("/", (req, res) => res.send("Hello world"));

エクスプレス アプリケーション インスタンスを使用して GET リクエストを作成しました。 app には、HTTP メソッドを含むいくつかのメソッドとプロパティがあります。ここで http メソッドに関する例外を確認してください。

{
    "name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop",
    "amount": 2099.99,
    "date": "2024-31-12"
}

Express アプリケーションを使用してポートをリッスンし、アロー関数を使用してアプリケーションが実行中であることを開発者に伝えました。ポートについては、選択した別のポートに変更できます。ただし、一部の特別なポートは、特定のタスクのためにすでに意図されているか、使用されており、コミュニティではよく知られており、そのようなアプリケーションやプログラムが PC 上で実行されているときのデフォルトとしてサーバーとして知られています。これらをチェックしてください - 0 1 2

注: システムに付属しているため使用できないものもあれば、一部のサーバーやデータベースなど、当社がインストールするアプリケーションに付属しているものもあります。心配しないでください。すでに使用されているポートを使用するときは、アプリケーションがそれを通知します。私たちがしなければならないのは、1 を加えるか、1 を引くことだけです。汗をかきません。

ルートとリクエストハンドラー

GET リクエストを作成するには app.get(...) を使用し、POST には app.post(...) を使用します。作成するルートごとに、app.SomeMethod(...) はルートまたはパスを取得し、ユーザー クライアントがどのリソースを必要とするか、または実行したいアクションを示します。ルートの一部として、少なくとも 1 つのリクエスト ハンドラーを使用できます。これは、app.SomeMethod(path, hanlder1, handler2, ..., handlern);.

を使用できることを意味します。

上記の GET リクエストの場合、パスまたはルートは / (文字列) で、単一のリクエスト ハンドラは (req, res) => です。 res.send("Hello world")、ハンドラー関数 (コールバックまたは単純なアロー関数)。リクエスト ハンドラーはミドルウェアとコントローラーにすることができます。

リクエストとレスポンス

リクエスト ハンドラーは通常、リクエストとレスポンスという 2 つの引数を受け取り、それぞれ req と res と短縮されます (そう呼ぶ必要はありませんが、最初の引数は常にリクエストで、2 番目の引数はレスポンスです)。リクエストには、リクエストの作成者とリクエストの内容に関するデータ (または一部の情報) が保持されます。応答は、リクエストを行ったユーザーにフィードバックを提供する手段です。この場合、クライアントが / パスに GET リクエストを行うときに、「Hello world」を送信します。

ここで、ユーザー アカウントの場合のようにユーザーではなく、どのデバイスが API サーバーに HTTP リクエストを行うかという意味で、クライアントとユーザーが交換可能であることがわかります。

通常、リクエスト ハンドラーは、前のハンドラーがジョブを完了した後の次のハンドラーを指す 3 番目の引数を受け取ります。これを次と呼びます。多かれ少なかれ次のようになります:

# create a folder for the project at the path of your choice
mkdir expense-tracker-simple-api

# open the project with vscode
# code expense-tracker-simple-api
code -r expense-tracker-simple-api

# open the built-in terminal and init node
npm init -y
# this should create the package.json file

# create the entry file, index.js
echo "console.log(\"expense-tracker-simple-api\");" > index.js

# run the index.js file
node index.js

次の引数は便利です。リクエスト ハンドラーを指し、場合によっては引数、エラーを受け取ります。一般に、処理しなかったエラー、または次のリクエスト ハンドラーに「渡す」エラーを処理するエラー ハンドラーを実装します。

次に、コントロール c を使用して、(ターミナル内で) 実行されていた実行中の nodejs プロセスをキャンセルしましょう。その後、再度実行します。今回は、シンプルなサーバーと GET ルートの作成 セクションの更新された内容を使用して、コンソール (ターミナル) に次のような出力が表示されます。

{
    "name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop",
    "amount": 2099.99,
    "date": "2024-31-12"
}

ブラウザで http://localhost:3000 を開きます。何が見えますか？ Hello world ?

というテキスト

変化に注意してください

ことわざにあるように、ローマは一日にして成らず。同じことがソフトウェア開発にも当てはまります。おそらく、ここで私たちが言いたいのは、開発中に徐々に機能を追加していくのですが、この継続的なプロセスでは、サーバーを常に起動したり停止したりするのがイライラするようになる、ということです。

次に、/hello パスを含む別の GET リクエスト (ルート) と、言いたいことを伝えるリクエスト ハンドラーを追加します。幸せになってください。

そのエンドポイントからの応答を確認するには、サーバー (実行中の Nodejs プロセス) を再起動し、ブラウザで http://localhost:3000/hello にアクセスする必要があります。

これ、GET http://localhost:3000/hello はエンドポイントです。これを API コンシューマと共有します。私たちは URL 全体 (プロトコル - http、ドメイン - localhost、ポート - 3000、およびパス - /hello)。ルートは METHOD PATH、多かれ少なかれ、GET /hello.

macOS または Windows では、node --watch Index.js を実行するか、node --watch-path=./index によってエントリ ファイルだけでなくフォルダー パス全体の変更を調べることができます。 js を使用して、ファイル パスとファイル自体の変更を監視します。

現在、これが私の package.json ファイルの内容です:

# create a folder for the project at the path of your choice
mkdir expense-tracker-simple-api

# open the project with vscode
# code expense-tracker-simple-api
code -r expense-tracker-simple-api

# open the built-in terminal and init node
npm init -y
# this should create the package.json file

# create the entry file, index.js
echo "console.log(\"expense-tracker-simple-api\");" > index.js

# run the index.js file
node index.js

スクリプト セクションに dev というスクリプトを追加できます。

console.log("expense-tracker-simple-api");

// import the express lib
const express = require("express");

// create an express application
const app = express();

// create a GET request on the base endpoint
app.get("/", (req, res) => res.send("Hello world"));

// create a server that listens to requests on port 3000
app.listen(3000, () =>
  console.log(`Api running on ${"http://localhost:3000"}`)
);

control c で実行中のサーバーを停止し、npm run dev を実行します。これにより、ファイルに保存された変更が監視され、サーバーがリロードされます。

これがうまくいかない場合は、代替手段があります。ノードモン、npm i ノードモン -g をインストールします。ユーティリティ ツールとしてどこでも使用するので、パッケージの一部としてインストールする必要はありません。 nodemon Index.js を実行すると、変更を監視できます。これが機能しない場合があり、機能しない場合は、dom nodemon --exec nodeindex.js

nodemon を使用するように開発スクリプトを変更できます。

const app = express();

この時点で、.js ファイルを自由に変更でき、保存時にサーバーが再起動され、適用された負荷の変更が再ロードされます。

POST、GET、UPDATE、DELETE ルートの作成

すでに GET リクエストを作成しました。リクエストとレスポンスで詳しく説明したので、このセクションでは各メソッドの意味を簡単に説明します。

このアプリケーションでは、クライアントに 1 種類のリソースのみを提供します。それは支出です。複数のリソースを提供していると仮定すると、各リソースの下にリクエストをグループ化します。

ユーザーと支出があり、ユーザーと支出の両方に対して GET、POST、PUT、DELETE などがあるとします。

現時点では、/expenditures ルートを使用して支出リソースを表します。

• GET: これは、支出に関する記録をリストしたり、すべて取得したり、すべて取得したりするためのルートを作成することを意味します。レコードの 1 つを取得する GET リクエストを実行できます。同様の GET

を作成しました。

• POST: post メソッドはリソースの作成によく使用されます

• PUT: put メソッドはリソースを更新するために使用されます

• DELETE: delete メソッドはリソースを削除するために使用されます

これで、index.js ファイルの app.listen(3000,...) より上に次のコード行を追加できます。

{
    "name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop",
    "amount": 2099.99,
    "date": "2024-31-12"
}

ファイルを保存すると、ターミナルにログが表示されることに気づきましたか?ブラウザで支出の GET ルートをテストします。

ブラウザでは GET リクエストのみを実行できます。次に API クライアントについて説明します。

APIクライアント

この文脈における API クライアントとは、API と対話する (消費、統合、またはテスト) ために使用されるツール、プログラム、またはアプリケーションです。最も一般的に使用されるのは、Postman、Insomnia、curl などです...

vscode および他のいくつかの IDE には、API クライアントに拡張機能を提供する拡張機能があります。 vscode には、そのための拡張機能がいくつかあります。ただし、REST クライアントとして知られる API クライアントを検討します。私たちのユースケースでは、心配する必要はなく、Rest Client をそのまま使用する方が簡単です。私たちはカバーされています。

注: postman またはその他の任意の API クライアントを使用しても問題ありません

RESTクライアントの使い方

• まず、REST クライアントをインストールします。
• HTTP リクエストを作成しているので、拡張子 .http または .rest を持つファイルを作成できます - touch Expense-tracker-api.http
• expense-tracker-api.http でリクエストを定義できます
• GET リクエストを作成するには、.http ファイルに次の内容を追加します。

{
    "name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop",
    "amount": 2099.99,
    "date": "2024-31-12"
}

• 上記のようにエンドポイントが渡されます。投稿の場合、エンドポイントを更新するリクエストを入力または削除します。エンドポイントとルートの違いを覚えていますか?
• データを API に渡す必要があるリクエストの場合、データをルートの一部としてパラメーターまたは文字列クエリとして渡すか、本文で渡すことができます。

# create a folder for the project at the path of your choice
mkdir expense-tracker-simple-api

# open the project with vscode
# code expense-tracker-simple-api
code -r expense-tracker-simple-api

# open the built-in terminal and init node
npm init -y
# this should create the package.json file

# create the entry file, index.js
echo "console.log(\"expense-tracker-simple-api\");" > index.js

# run the index.js file
node index.js

• Content-Type: application/json はヘッダーの Key-Value です。これは、rest-client を使用してヘッダーを渡す方法を意味します。
• リクエストの本文については、json オブジェクトとして渡しますが、ヘッダーと本文の間には改行が必要です
• 各リクエストは、3 つのポンド記号またはアッシュ記号 ### で区切ることができます。 ### の末尾にテキストを追加して、タイトルのように見せることができます。

console.log("expense-tracker-simple-api");

// import the express lib
const express = require("express");

// create an express application
const app = express();

// create a GET request on the base endpoint
app.get("/", (req, res) => res.send("Hello world"));

// create a server that listens to requests on port 3000
app.listen(3000, () =>
  console.log(`Api running on ${"http://localhost:3000"}`)
);

演習として、支出エンドポイントのリクエストを作成します。困ったときの参考にしてください。やるべきことはまだあります。

リクエストボディ、パラメータ、クエリ、ヘッダー

この時点では、API クライアントを使用して API と通信するために JSON を使用することを強調する必要はありません。

前述したように、リクエストの本文、ヘッダー、または URL を使用してデータを API に渡すことができます。リクエスト本文とヘッダーを介してデータを渡す方法を説明しました (特定のデータを渡す方法については、別の機会に説明します)。作成されたPOSTリクエストを確認します。ここで見ていないのは、データを URL の一部として渡す方法です。

ID が 4 の支出を読み取りたいとします。追加パラメータを (URL の一部として) /expenditures/2 として渡すことができます。この要件を処理するリクエストの場合は、/expenditures/:id とします。ここで、:id は支出の ID を指します。 ID 以外の何か、たとえば名前であると仮定すると、:name を実行します。 Express はこれを処理し、手間をかけずにこの値を抽出する手段を提供します。

クエリ文字列の場合、考え方はリクエスト パラメータと似ていますが、質問の後に key1=value1&key2=value2...&keyN=valueN が続きます。ここで、キーは、指定する値の識別子です。合格したいです。非常に直接的な例は、REST クライアント URL、https://marketplace.visualstudio.com/items?itemName=humao.rest-client です。疑問符はクエリ文字列の始まりを示し、その後に続くものはキーを値にマップします。例: ?itemName=humao.rest-client.

すべての API エンドポイントをテストし、実際に試してみる良い機会となります。

リクエストボディ

次に、リクエスト本文 (POST エンドポイント) を使用してデータを渡すリクエストを処理します。

{
    "name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop",
    "amount": 2099.99,
    "date": "2024-31-12"
}

リクエスト オブジェクトには body というプロパティがあり、このプロパティには、リクエストのリクエスト本文 (req.body) で渡した値が含まれます。

これは実行されるリクエストです。

# create a folder for the project at the path of your choice
mkdir expense-tracker-simple-api

# open the project with vscode
# code expense-tracker-simple-api
code -r expense-tracker-simple-api

# open the built-in terminal and init node
npm init -y
# this should create the package.json file

# create the entry file, index.js
echo "console.log(\"expense-tracker-simple-api\");" > index.js

# run the index.js file
node index.js

これは、リクエスト本文をコンソールに記録するだけのエンドポイント実装です。

console.log("expense-tracker-simple-api");

// import the express lib
const express = require("express");

// create an express application
const app = express();

// create a GET request on the base endpoint
app.get("/", (req, res) => res.send("Hello world"));

// create a server that listens to requests on port 3000
app.listen(3000, () =>
  console.log(`Api running on ${"http://localhost:3000"}`)
);

何が起こったのですか?通常の応答が得られましたが、コンソールに未定義が記録されました。まあ、これはすべてが順調であることを意味しますが、API サーバーは受信データを JSON として解析する必要があることを認識していません。 json を覚えていますか?

この 1 行を const app =express(); の下に追加しましょう。これは受信データを json として解析する必要があります。

const app = express();

ここで、POST エンドポイントを再度テストしてみましょう。今回は何が得られましたか？これに似たものはありましたか?

app.get("/", (req, res) => res.send("Hello world"));

これで、本体からデータを取得する方法がわかりました。ここで演習として、ボディを分解し、応答でオブジェクトを渡します。したがって、ログに記録する代わりに、応答として返します。

リクエストパラメータ

ID で支出を読み取るための新しい GET エンドポイントを作成します。

これは API リクエストになります:

app.listen(3000, () =>
  console.log(`Api running on ${"http://localhost:3000"}`)
);

リクエスト オブジェクトには params というプロパティがあり、このプロパティには、リクエストのリクエスト パラメータで渡した値 - req.params.

実装はこれまでに行ったことと似ていますが、少し異なります。

app.get("/", (req, res, next) => ...);

ID に直接アクセスすることもできます。ルートの一部として渡された :id キーまたは名前が、ログに記録されたオブジェクト内のキーと一致することに気づいたと思います。ルート内の params キーの名前を変更して、出力がログに記録されることを確認してください。

リクエストクエリ（クエリ文字列）

クエリ文字列の場合、リクエスト オブジェクトのプロパティ、query があり、渡されたクエリ文字列を公開します。

これをデモンストレーションするために、クエリ文字列を渡して、返すレコードをフィルタリングします。このエンドポイントで十分です。

expense-tracker-simple-api
Api running on http://localhost:3000

実装は次のようになります:

{
  "name": "expense-tracker-simple-api",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "express": "^4.21.2"
  }
}

次に、API を実行してログを確認します。これを試してみてください。

メモリデータの操作

この時点ではまだデータベースに接続していないため、メモリからデータを操作する必要があります。ここで行うことは、配列の作成、配列への追加、配列内の要素の更新、要素の削除です。それ自体は実現可能だと思われます。それが私たちがやろうとしていることです。

以前に書かれたコード自体にいくつかの変更を加えます。自由に変更してください。最終的な抜粋は最後に共有します。

メモリ内データの初期化

const Express = require("express");の下に支出の配列 (ダミーデータ) を作成しましょう

{
    "name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop",
    "amount": 2099.99,
    "date": "2024-31-12"
}

支出をリストアップする

現在のエンドポイントは res.send(message) を使用してメッセージだけを返しますが、返したいのは json です。 .send はオブジェクトまたは json を取り込むこともできますが、ここでは res.json(obj) を使用します。

言及しませんでしたが、返されるデフォルトのステータス コードは 200 です。それに気づきましたか?別のエラーが発生するか、リクエストに問題がある場合を除き、ステータス コードは変わりません。ステータス コードの下にセクションがあるので、目を通してください。

res.status(desireStatusCode).json(obj) に目的のステータス コードを渡すことで、ステータス コードを変更できます。私はステータス コード 200 をずっと維持します。

サーバーがまだ実行中であることを確認してください

支出のリストを直接渡すことができます。

# create a folder for the project at the path of your choice
mkdir expense-tracker-simple-api

# open the project with vscode
# code expense-tracker-simple-api
code -r expense-tracker-simple-api

# open the built-in terminal and init node
npm init -y
# this should create the package.json file

# create the entry file, index.js
echo "console.log(\"expense-tracker-simple-api\");" > index.js

# run the index.js file
node index.js

受け取った応答は何ですか?ステータス コードと応答ペイロードを確認します。

経験から、また曖昧さを避けるために、私はデフォルトでステータス コード 200 を返し、メッセージまたは要求されたリソースを返すための success プロパティ、message、または data プロパティを用意することを好みます。デフォルトでは、ステータスが false の場合、メッセージが渡されます。それ以外の場合は、メッセージまたはデータが渡される可能性があります。

console.log("expense-tracker-simple-api");

// import the express lib
const express = require("express");

// create an express application
const app = express();

// create a GET request on the base endpoint
app.get("/", (req, res) => res.send("Hello world"));

// create a server that listens to requests on port 3000
app.listen(3000, () =>
  console.log(`Api running on ${"http://localhost:3000"}`)
);

ID (各行のインデックス) を表示する必要があります

const app = express();

フィルタリングを適用する

app.get("/", (req, res) => res.send("Hello world"));

マッピングの後にフィルタが実行されたのはなぜですか?

支出を読む

app.listen(3000, () =>
  console.log(`Api running on ${"http://localhost:3000"}`)
);

この実装は、マッピングの後にフィルターが行われた理由は何ですか? ?

支出の作成

app.get("/", (req, res, next) => ...);

支出を更新する

expense-tracker-simple-api
Api running on http://localhost:3000

支出の削除

{
  "name": "expense-tracker-simple-api",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "dependencies": {
    "express": "^4.21.2"
  }
}

結論

私たちはほとんどの API 開発の根本をカバーしました。このプロジェクトは非常に基本的なものです。リラックスしてもう一度目を通します。

など、さらに検討すべきことがあります。

• 検証
• 認証と認可
• ミドルウェア
• エラー処理
• SQL
• データベース統合

実践プロジェクト

crud API = 作成、リスト、読み取り、更新、削除。これは、これらの問題にどのようにアプローチするかです。

⁠やることリスト

• todo オブジェクト: { id: int、タスク: 文字列、ステータス: boolean }
• 粗悪な API
• すべてのタスクを完了としてマークするエンドポイントを追加します。成功は true または未完了とマークします

⁠電卓⁠

• すべての演算 (加算、減算、乗算、除算) のエンドポイントを作成するかどうかを決定する必要があります
• または、各操作に対応するさまざまな機能を持つ単一のエンドポイントを作成します。ユーザーは演算子と 2 つのオペランドを渡すことができる必要があります

⁠通貨換算⁠
ある通貨から別の通貨に換算しています。できるだけ多くの通貨で実行します (3 つで十分です)

• ⁠単位コンバータ⁠ ⁠- メモアプリ⁠ ⁠- 個人ブログ⁠ ⁠- クイズアプリ⁠

スニペット

余分な部分が削除されたことを確認してください。

{
    "name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop",
    "amount": 2099.99,
    "date": "2024-31-12"
}

API リクエスト

# create a folder for the project at the path of your choice
mkdir expense-tracker-simple-api

# open the project with vscode
# code expense-tracker-simple-api
code -r expense-tracker-simple-api

# open the built-in terminal and init node
npm init -y
# this should create the package.json file

# create the entry file, index.js
echo "console.log(\"expense-tracker-simple-api\");" > index.js

# run the index.js file
node index.js

以上がExpress を使用した基本的な CRUD APIの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。