API de budgétisation d'enveloppe : gestion facile de l'argent-js tutoriel-php.cn

API de budgétisation d'enveloppe : gestion facile de l'argent

WBOY

Libérer： 2024-07-19 20:30:33

original

854 Les gens l'ont consulté

Après six mois de plongée dans le développement Web back-end, je suis ravi de partager une étape importante : ma propre API qui démontre la budgétisation d'enveloppe en action.

Que fait le programme ?

L'API fournit une page Web conviviale sur laquelle vous pouvez créer, mettre à jour, afficher et supprimer des enveloppes. Il permet également les transferts budgétaires entre enveloppes. N'hésitez pas à explorer ses fonctionnalités. (Remarque : le chargement initial peut être lent en raison du déploiement sur une instance gratuite.)

Screenshot of front-end

Limites actuelles

Le budget total est codé en dur à 5 000 $ et les modifications sont temporaires et ne durent que jusqu'au redémarrage du serveur. Les futures versions incluront une couche de base de données et des budgets totaux personnalisables.

Détails techniques

Le back-end est alimenté par Node.js et Express.js, prenant en charge les méthodes HTTP suivantes :

OBTENIR (1) -> affiche toutes les enveloppes
OBTENIR (2) -> affiche le budget total restant
OBTENIR (3) -> récupère l'enveloppe individuelle par nom
POST (1) -> crée une nouvelle enveloppe et attribue un budget défini
POST (2) -> transfère le budget d'une enveloppe à une autre
METTRE -> enregistre les dépenses dans une enveloppe particulière
SUPPRIMER -> supprime une enveloppe

Pour éviter les dépenses excessives, un contrôle de limite est en place pour les itinéraires POST et PUT. Pour POST, PUT et DELETE, il est également vérifié si une enveloppe portant le même nom existe déjà. Si une vérification échoue, un message d'erreur est envoyé.

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

Copier après la connexion

Le front-end a été développé en utilisant HTML, CSS et JavaScript pour créer une interface facile à utiliser pour démontrer l'API. Cela permet aux utilisateurs d'interagir avec l'API sans télécharger de code ni utiliser d'outils comme Postman, le style est donc intentionnellement minimal.

Le frontal inclut des contrôles de validation pour éviter les champs de saisie vides et modifie la couleur d'arrière-plan du champ d'affichage de la réponse du serveur en fonction de l'état de la réponse HTTP. Différentes couleurs indiquent le succès, les erreurs ou les échecs de validation, aidant ainsi les utilisateurs à comprendre les résultats de leurs actions.

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

J'ai utilisé des requêtes JavaScript et asynchrones fetch() pour connecter le front-end et le back-end. Passer au full-stack impliquait également l'ajout d'une quatrième méthode GET pour récupérer le fichier index.html et configurer correctement CORS pour le back-end.

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

Copier après la connexion

Conclusion

Créer ma première API a été incroyablement enrichissant. L’expérience pratique de sa mise en œuvre moi-même, après avoir étudié la théorie, a été inestimable. Voir une requête HTTP aboutir a été un moment de triomphe.

Remerciements

J'ai eu le plus de mal à connecter le front-end et le back-end, en utilisant une tactique appelée Just-in-Time Learning (JIT). Bien que les ressources en ligne, notamment ChatGPT, et les essais et erreurs aient été utiles, une avancée décisive est survenue après une courte séance de coaching avec un développeur senior qui a clarifié certains points clés. Un grand merci donc à toutes les personnes et plateformes qui fournissent du contenu organisé, qui accélère considérablement l'apprentissage lorsqu'il est combiné avec le JIT. Les deux sont essentiels !