信封预算 API：轻松资金管理-js教程-PHP中文网

信封预算 API：轻松资金管理

WBOY

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

原创

780 人浏览过

深入研究后端 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 相结合可显着加快学习速度。两者缺一不可！