深入研究後端 Web 開發六個月後，我很高興與大家分享一個重要的里程碑：我自己的 API，它演示了信封預算的實際應用。
API 提供了一個使用者友善的網頁，您可以在其中建立、更新、檢視和刪除信封。它還允許信封之間的預算轉移。請隨意探索其功能。 （注意：由於部署在免費實例上，初始載入可能會很慢。）
總預算被硬編碼為 5000 美元，並且更改是暫時的，僅持續到伺服器重新啟動為止。未來的版本將包括資料庫層和可自訂的總預算。
後端由 Node.js 和 Express.js 提供支持，支援以下 HTTP 方法：
為了防止超支，對 POST 和 PUT 路由進行了限制檢查。對於 POST、PUT 和 DELETE，也會檢查同名信封是否已存在。如果檢查失敗，則會傳送錯誤訊息。
// Transfer budget between envelopes
app.post("/envelopes/transfer/:from/:to", (req, res) => {
const from = req.params.from;
const to = req.params.to;
const amount = Number(req.query.transfer);
if (!envelopeExists(from) || !envelopeExists(to)) {
res.status(403).send(`Operation declined. \nPlease make sure to enter names of existing envelopes to transfer money between them.`);
} else if (envelopes[from].budget >= amount) {
envelopes[from].budget -= amount;
envelopes[to].budget += amount;
res.status(201).send(`New balance: \nEnvelope "${from}" - $${envelopes[from].budget}, \nEnvelope "${to}" - $${envelopes[to].budget}`);
} else {
res.status(403).send(`Operation declined. \nNot enough money left in envelope "${from}".`);
}
});
前端是使用 HTML、CSS 和 JavaScript 開發的，以創建一個易於使用的介面來示範 API。這允許用戶與 API 交互，而無需下載程式碼或使用 Postman 等工具，因此樣式有意最小化。
前端包括驗證檢查以防止輸入欄位為空，並根據 HTTP 回應狀態變更伺服器回應顯示欄位的背景顏色。不同的顏色表示驗證成功、錯誤或失敗，幫助使用者了解其操作的結果。
我使用 JavaScript 和非同步 fetch() 請求來連接前端和後端。全端還涉及添加第四個 GET 方法來獲取 index.html 檔案並為後端正確設定 CORS。
postButton.addEventListener("click", async () => {
const envName = postName.value;
const envBudget = Number(postBudget.value);
if (envName === "" || envBudget === 0) {
serverResponseField.innerHTML = "Please enter a name and budget before clicking the CREATE button.";
alertServerResponseField("orange");
} else {
try {
const response = await fetch(`${apiUrl}/envelopes`, {
method: "post",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify({newEnv: envName, newBudget: envBudget})
});
if (response.ok || response.status === 403) {
const jsonResponse = await response.text();
clearDisplay();
serverResponseField.innerHTML = `
<h4>--- creating envelope ---</h4>
<pre class="brush:php;toolbar:false">${jsonResponse}
`;
if (response.status === 403) {
alertServerResponseField("red");
} else {
alertServerResponseField("green");
}
} else {
throw new Error("Request failed!");
}
} catch (err) {
console.log(err);
}
}
});
創建我的第一個 API 是非常有意義的。在學習了理論之後，我自己實施的實務經驗是非常寶貴的。看到 HTTP 請求成功通過是一個勝利的時刻。
我在連接前端和後端方面遇到了最大的困難，使用了一種稱為即時學習（JIT）的策略。雖然包括 ChatGPT 在內的線上資源和反覆試驗很有幫助，但在與一位高級開發人員進行簡短的輔導課程後，澄清了一些關鍵點，取得了突破。因此，我要向所有提供精選內容的人員和平台表示衷心的感謝，這些內容與 JIT 相結合可顯著加快學習速度。兩者缺一不可！
探索 GitHub 上的完整程式碼庫。
梅納特
/
信封預算 API
該 API 是使用 Node 20.11.1 建立的。
圖片來自 freepik
以上是信封預算 API：輕鬆資金管理的詳細內容。更多資訊請關注PHP中文網其他相關文章！
