帶有 Express 的基本 CRUD API

內容

• 簡介
• 專案建立與初始化
• 建立一個簡單的伺服器和 GET 路由
• 路由與請求處理程序
• 請求與回應
• 注意變化
• 建立 POST、GET、UPDATE 和 DELETE 路由
• API 客戶端
• 請求正文、參數、查詢、標頭...
• 操作記憶體資料
• 結論

介紹

JavaScript 基礎：第 7 部分

麥可‧奧圖 ・ 2024 年 11 月 2 日

#javascript #api #初學者 ＃節點

什麼是 API

麥可‧奧圖 ・ 2024 年 2 月 24 日

#javascript #打字稿 ＃節點 #api

什麼是 REST API

麥可‧奧圖 ・24 年 3 月 1 日

#javascript #打字稿 ＃節點 #api

JavaScript 基礎：第 6 部分（Javascript 大師）

麥可‧奧圖 ・2024 年 10 月 28 日

#javascript #初學者 #api ＃節點

什麼是 Nodejs

麥可‧奧圖 ・ 2024 年 7 月 31 日

#javascript #打字稿 ＃節點 #api

請求與回應

麥可‧奧圖 ・ 2024 年 3 月 14 日

#javascript ＃節點 #程式設計 ＃教程

什麼是 JSON

麥可‧奧圖 ・ 24 年 3 月 9 日

#javascript #打字稿 ＃節點 #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：第 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：第6 部分（Javascript 中的Mastermind）。

此時，我們需要安裝一個名為express的nodejs套件。 Express 是一個可以幫助我們建立 API 的函式庫。

我們可以透過執行 npm iexpress 來安裝這個套件。這應該修改 package.json 文件，並建立 package-lock.json 檔案和 node_modules 資料夾。請參閱摘錄《什麼是 Nodejs》，以進一步了解如何使用 npm 安裝軟體包的資訊。

建立一個簡單的伺服器和一個 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"}`)
);

我們所做的就是建立一個 Express 應用程序，使用該應用程式建立一個 GET 請求來發送訊息，並讓應用程式監聽來自連接埠 3000 的請求。

const app = express();

建立一個快速應用程式（？如何建立快速應用程式）

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

我們使用 Express 應用程式實例來建立 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

注意：有些是不允許的，因為您的系統附帶它們，還有一些是我們安裝的應用程式附帶的，例如一些伺服器和資料庫等。不用擔心，當我們使用已在使用的連接埠時，我們的應用程式會讓我們知道。我們要做的就是加一或減一。沒有汗水。

路由和請求處理程序

要建立 GET 請求，請使用 app.get(...)，對於 POST，請使用 app.post(...) 等等。對於我們要建立的每個路由，app.SomeMethod(...) 將採用一條路由或路徑，指示使用者客戶端所需的資源或他們要執行的操作。作為路由的一部分，它可以至少採用一個請求處理程序。這表示我們可以有 app.SomeMethod(path, hanlder1, handler2, ..., handlern);.

對於上面的GET 請求，路徑或路由是/ （字串），我們擁有的單一請求處理程序是(req, res) => res.send("Hello world")，一個處理函數（回呼或簡單的箭頭函數）。請求處理程序可以是中間件和控制器。

請求和回應

請求處理程序通常接受兩個參數，請求和回應，分別縮寫為 req 和 res （您不必這樣稱呼它們，但第一個始終是請求，第二個是回應）。該請求保存有關誰發出請求以及他們想要什麼的資料（或一些資訊）。回應是向提出請求的使用者提供回饋的一種方式。在本例中，當客戶端向 / 路徑發出 GET 請求時，我們發送「Hello world」。

在這裡，您會注意到客戶端和使用者是可以互換的，即哪個裝置向我們的 api 伺服器而不是使用者（如使用者帳戶）發出 HTTP 請求。

通常，請求處理程序將採用第三個參數，該參數將在前一個處理程序完成其工作後指向下一個處理程序。我們接下來稱之為。它看起來或多或少像：

# 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

下一個參數很有用，它指向請求處理程序，有時它需要一個參數，一個錯誤。我們將實作一個錯誤處理程序來通常處理我們未處理的錯誤或我們「傳遞」到下一個請求處理程序的錯誤。

現在讓我們使用control c 取消正在運行的nodejs 進程（在終端機中）。然後再次運行它。這次使用 建立一個簡單的伺服器和 GET 路由 部分的更新內容，我們應該在控制台（終端）中看到類似
的輸出

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

在瀏覽器中開啟http://localhost:3000。你看到了什麼？一條文字：你好世界 ?

留意變化

俗話說羅馬不是一天造成的。這同樣適用於軟體開發。也許這裡我們的意思是，隨著我們的開發，我們會逐漸添加更多的功能，在這個持續的過程中，一直啟動和停止伺服器變得很煩人。

繼續，新增另一個帶有 /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 在整個資料夾路徑中尋找更改。使用 Node.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。這將監視我們文件中保存的更改並重新加載伺服器。

因此，如果這不適合您，我們還有其他選擇。我們將安裝nodemone，npm i nodemon -g。我們會在任何地方使用它作為實用工具，因此我們不必將它作為軟體包的一部分安裝。我們可以透過執行nodemon index.js來觀察變化。在某些情況下這不起作用，當不起作用時， dom nodemon --exec node index.js

我們可以修改我們的開發腳本以使用nodemon，

const app = express();

此時，您可以自由修改 .js 文件，儲存後，伺服器將重新啟動以重新載入所應用的負載變更。

建立 POST、GET、UPDATE、DELETE 路由

我們已經建立了一個 GET 請求。在本節中，我們將簡要了解每種方法的含義，因為我們已經在請求和回應中詳細討論了它們。

在這個應用程式中，我們只提供客戶一種資源，那就是支出。假設我們正在服務多個資源，那麼我們會將每個資源下的請求分組。

所以假設我們有使用者和支出，我們對使用者和支出都有 GET、POST、PUT、DELETE 等。

目前，我們使用 /expenditures 路徑來表示支出資源。

• GET：這表示我們將建立一個路由來列出、取得所有、取得所有支出記錄等。我們可以使用 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 副檔名的檔案 - touchexpense-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的請求，我們可以將資料作為路由的一部分作為參數或字串查詢傳遞，也可以在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

• Content-Type：application/json 是標頭鍵值。這意味著這就是您使用rest-client 傳遞標頭的方式。
• 對於請求正文，我們將其作為 json 物件傳遞 - 不過，標頭和正文之間需要換行符
• 每個請求可以用三個井號或灰燼符號 ### 分隔。可以在 ### 末尾添加文本，使其看起來像標題。

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"}`)
);

作為練習，建立支出端點的請求。當你遇到困難的時候可以參考一下。我們還有更多事要做。

請求體、參數、查詢、標頭

此時，我不必強調我們將使用 JSON 來使用 API 客戶端與我們的 api 進行通訊。

如前所述，我們可以使用請求的正文、標頭或 URL 將資料傳遞到我們的 api。我們已經了解瞭如何透過請求正文和標頭傳遞資料（我們將在其他時間研究傳遞一些特定資料）。檢查已建立的 POST 請求。我們還沒有研究如何將資料作為 URL 的一部分傳遞。

假設我們想要讀取 id 為 4 的支出，我們可以傳遞新增參數（作為 URL 的一部分），例如 /expenditures/2。對於將處理此要求的請求，我們執行 /expenditures/:id，其中 :id 指支出的 ID。假設它是 id 以外的其他內容，比如說一個名稱，那麼我們會執行 :name。 Express 將對此進行處理，並為我們提供一種毫不費力地提取此值的方法。

現在，對於查詢字串，其想法類似於請求參數，但是，它出現在問題之後，後跟key1=value1&key2=value2...&keyN=valueN，其中key 是您要查詢的值的標識符想要通過。一個很直接的例子是 REST-Client 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 嗎？

讓我們在 const app = express(); 下面新增這一行這應該可以解決將傳入資料解析為 json 的問題。

const app = express();

現在，讓我們再次測試 POST 端點。這次你得到了什麼？你有沒有收到類似的東西？

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

現在你知道如何從body中取得資料了。現在作為練習，解構身體並在回應中傳遞一個物件。因此，不要記錄它，而是將其作為回應返回。

請求參數

我們將建立一個新的 GET 端點來按 ID 讀取支出。

這將是我們的 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 屬性、訊息或資料屬性來傳回訊息或請求的資源。預設情況下，當 status 為 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，任務：字串，狀態：布林值 }
• crud api
• 新增端點以將所有任務標記為已完成，成功為 true 或未完成

⁠計算機⁠

• 您必須決定是否為所有運算（加法、減法、乘法、除法）建立端點
• 或您將建立一個具有與每個操作相對應的不同功能的單一端點。使用者應該能夠傳遞運算符和兩個操作數

⁠貨幣轉換器⁠
您正在從一種貨幣轉換為另一種貨幣。盡可能選擇貨幣（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中文網其他相關文章！