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 でフォルダーを開いてノード プロジェクトを初期化することです - JavaScript Essentials: Part 6 (Mastermind in Javascript) を確認してください。
この時点で、expressというnodejsパッケージをインストールする必要があります。 Express は、API の作成に役立つライブラリです。
このパッケージは、npm i Express を実行することでインストールできます。これにより、package.json ファイルが変更され、package-lock.json ファイルと node_modules フォルダーが作成されます。 npm を使用してパッケージをインストールする方法についてのさらなる理解と情報については、抜粋「Nodejs とは」を参照してください。
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 ファイルを自由に変更でき、保存時にサーバーが再起動され、適用された負荷の変更が再ロードされます。
すでに 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 と対話する (消費、統合、またはテスト) ために使用されるツール、プログラム、またはアプリケーションです。最も一般的に使用されるのは、Postman、Insomnia、curl などです...
vscode および他のいくつかの IDE には、API クライアントに拡張機能を提供する拡張機能があります。 vscode には、そのための拡張機能がいくつかあります。ただし、REST クライアントとして知られる API クライアントを検討します。私たちのユースケースでは、心配する必要はなく、Rest Client をそのまま使用する方が簡単です。私たちはカバーされています。
注: postman またはその他の任意の API クライアントを使用しても問題ありません
{
"name": "Legion Tower 7i Gen 8 (Intel) Gaming Desktop",
"amount": 2099.99,
"date": "2024-31-12"
}
# 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 クライアントを使用して 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 開発の根本をカバーしました。このプロジェクトは非常に基本的なものです。リラックスしてもう一度目を通します。
など、さらに検討すべきことがあります。crud API = 作成、リスト、読み取り、更新、削除。これは、これらの問題にどのようにアプローチするかです。
やることリスト
電卓
通貨換算
ある通貨から別の通貨に換算しています。できるだけ多くの通貨で実行します (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 サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
