信封預算 API：輕鬆資金管理-js教程-PHP中文網

信封預算 API：輕鬆資金管理

WBOY

發布： 2024-07-19 20:30:33

原創

829 人瀏覽過

深入研究後端 Web 開發六個月後，我很高興與大家分享一個重要的里程碑：我自己的 API，它演示了信封預算的實際應用。

該程序的作用是什麼？

API 提供了一個使用者友善的網頁，您可以在其中建立、更新、檢視和刪除信封。它還允許信封之間的預算轉移。請隨意探索其功能。（注意：由於部署在免費實例上，初始載入可能會很慢。）

Screenshot of front-end

目前的限制

總預算被硬編碼為 5000 美元，並且更改是暫時的，僅持續到伺服器重新啟動為止。未來的版本將包括資料庫層和可自訂的總預算。

技術細節

後端由 Node.js 和 Express.js 提供支持，支援以下 HTTP 方法：

取得 (1) ->顯示所有信封
取得 (2) ->顯示剩餘總預算
取得 (3) ->依名稱取得單一信封
發佈 (1) ->建立新信封並分配設定預算
發佈 (2) ->將預算從一個信封轉移到另一個信封
放置 ->將支出記錄在特定信封中
刪除 ->刪除一個信封

為了防止超支，對 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 回應狀態變更伺服器回應顯示欄位的背景顏色。不同的顏色表示驗證成功、錯誤或失敗，幫助使用者了解其操作的結果。

screenshot of front-end with failed validation check message in front of orange background

我使用 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 相結合可顯著加快學習速度。兩者缺一不可！