API Belanjawan Sampul Surat: Pengurusan Wang Mudah

Selepas enam bulan menyelam ke dalam Pembangunan Web Back-End, saya teruja untuk berkongsi pencapaian penting: API saya sendiri yang menunjukkan Belanjawan Sampul dalam tindakan.

Apa yang program itu lakukan?

API menyediakan halaman web mesra pengguna di mana anda boleh membuat, mengemas kini, melihat dan memadam sampul surat. Ia juga membenarkan pemindahan belanjawan antara sampul surat. Sila terokai ciri-cirinya. (Nota: Pemuatan awal mungkin lambat disebabkan oleh penggunaan pada contoh percuma.)

Had Semasa

Jumlah belanjawan dikodkan keras kepada $5000 dan perubahan adalah sementara, hanya bertahan sehingga pelayan dimulakan semula. Versi akan datang akan termasuk lapisan pangkalan data dan jumlah belanjawan yang boleh disesuaikan.

Butiran Teknikal

Bahagian belakang dikuasakan oleh Node.js dan Express.js, menyokong kaedah HTTP berikut:

• DAPATKAN (1) -> memaparkan semua sampul surat
• DAPATKAN (2) -> memaparkan baki jumlah belanjawan
• DAPATKAN (3) -> mengambil sampul surat individu dengan nama
• SIARAN (1) -> mencipta sampul baharu dan menetapkan bajet yang ditetapkan
• SIARAN (2) -> memindahkan belanjawan dari satu sampul ke sampul lain
• LETAK -> mencatatkan perbelanjaan dalam sampul surat tertentu
• PADAM -> memadamkan sampul surat

Untuk mengelakkan lebihan perbelanjaan, terdapat semakan had untuk laluan POST dan PUT. Untuk POST, PUT, dan DELETE, terdapat juga semakan jika sampul dengan nama yang sama sudah wujud. Jika semakan gagal, mesej ralat dihantar.

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

Halaman hadapan dibangunkan menggunakan HTML, CSS dan JavaScript untuk mencipta antara muka yang mudah digunakan untuk menunjukkan API. Ini membolehkan pengguna berinteraksi dengan API tanpa memuat turun kod atau menggunakan alatan seperti Posman, jadi penggayaan adalah minima dengan sengaja.

Halaman hadapan termasuk semakan pengesahan untuk mengelakkan medan input kosong dan menukar warna latar belakang medan paparan respons pelayan berdasarkan status respons HTTP. Warna yang berbeza menunjukkan kejayaan, ralat atau pengesahan yang gagal, membantu pengguna memahami hasil tindakan mereka.

Saya menggunakan JavaScript dan permintaan asynchronous fetch() untuk menyambungkan bahagian hadapan dan bahagian belakang. Melangkah tindanan penuh juga melibatkan penambahan kaedah GET keempat untuk mengambil fail index.html dan menyediakan CORS dengan betul untuk bahagian belakang.

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

Kesimpulan

Mewujudkan API pertama saya adalah sangat bermanfaat. Pengalaman praktikal melaksanakannya sendiri, selepas mempelajari teori, adalah tidak ternilai. Melihat permintaan HTTP berjaya dilalui adalah detik kejayaan.

Ucapan terima kasih

Saya paling bergelut dengan menyambung bahagian depan dan belakang, menggunakan taktik yang dipanggil Just-in-Time Learning (JIT). Walaupun sumber dalam talian, termasuk ChatGPT, dan percubaan-dan-ralat membantu, satu kejayaan datang selepas sesi bimbingan singkat dengan pembangun kanan yang menjelaskan beberapa perkara penting. Jadi, seruan dan terima kasih yang tidak terhingga kepada semua orang dan platform yang menyediakan kandungan susun atur, yang mempercepatkan pembelajaran dengan ketara apabila digabungkan dengan JIT. Kedua-duanya adalah penting!

Muat Turun Pautan

Terokai pangkalan kod penuh di GitHub.

s-mehnert / Envelope-Budgeting-API

Ketahui cara Belanjawan Sampul berfungsi dengan menggunakan Envelope-Budgeting-API melalui front-end yang disediakan.

API telah dibuat menggunakan Node 20.11.1.

Imej oleh freepik

Atas ialah kandungan terperinci API Belanjawan Sampul Surat: Pengurusan Wang Mudah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!