Comment construire un frontend Nuxt.js et le connecter à un backend ?

dans ce tutoriel, vous allez créer une application de liste de tâches en utilisant nuxt js et la connecter à un service backend géré alimenté par back4app ce guide est conçu pour vous si vous souhaitez maîtriser les opérations crud essentielles (créer, lire, mettre à jour, supprimer) et créer une interface dynamique et réactive en utilisant nuxt js à la fin de ce tutoriel, votre application interagira sans effort avec un backend qui gère le stockage des données, l'authentification, et plus encore développer une application full stack peut être difficile en raison de la configuration du backend et de la gestion de la base de données pour simplifier votre processus, nous utilisons back4app— un puissant backend en tant que service —vous permettant de vous concentrer sur le développement d'un frontend nuxt js riche en fonctionnalités back4app fournit une base de données nosql entièrement gérée, une authentification des utilisateurs, du cloud code pour une logique personnalisée, et des sdk pour une intégration sans effort cela vous permet de construire et de déployer des applications évolutives sans gérer l'infrastructure serveur points clés à retenir en suivant ce tutoriel, vous allez initialiser un projet nuxt js moderne en utilisant le nuxt cli intégrer un service backend pour gérer les données de votre application mettre en œuvre des opérations crud essentielles pour une dynamique liste de tâches déployer votre application entièrement fonctionnelle en utilisant des workflows conteneurisés sur back4app conditions préalables avant de commencer, assurez vous d'avoir node js et npm installés sur votre machine confirmez les installations avec node v et npm v connaissances de base en nuxt js , y compris les composants, les pages et la récupération de données asynchrones un compte back4app pour gérer vos services backend inscrivez vous sur back4app https //www back4app com/ si vous ne l'avez pas déjà fait avec ces conditions préalables en place, vous êtes prêt à commencer à construire votre projet configuration du projet commencez par configurer votre environnement de développement local et initialiser un nouveau projet nuxt js assurez vous d'avoir node js (version lts) installé si ce n'est pas le cas, téléchargez le depuis nodejs org https //nodejs org/ créez votre projet nuxt js en utilisant le nuxt cli npx nuxi init todo app naviguez dans votre répertoire de projet cd todo app installez les dépendances nécessaires npm install démarrez le serveur de développement pour vérifier la configuration npm run dev ouvrez l'url fournie dans votre navigateur pour voir votre application nuxt js en action avec votre frontend prêt, procédez à la création de votre backend sur back4app création du backend todo back4app propose un service backend entièrement géré alimenté par parse , qui comprend une base de données nosql, une authentification, du cloud code et des api auto générées suivez ces étapes pour configurer votre backend connectez vous à votre tableau de bord back4app https //www back4app com/ et cliquez sur "créer une nouvelle application " nommez votre application (par exemple, todoapp ) et sélectionnez nodejs/parse comme type de backend accédez à "base de données" > "navigateur" , cliquez sur "créer une classe" , et choisissez "personnalisé" nommez la classe tâche et définissez ses autorisations pour permettre la lecture et l'écriture publiques (vous pouvez affiner ces paramètres plus tard) dans la classe tâche , ajoutez les champs suivants titre (string) – le titre de la tâche description (string) – détails sur la tâche terminé (boolean) – état d'achèvement de la tâche datelimite (date) – la date limite pour la tâche cliquez sur "enregistrer" pour créer le schéma intégration de back4app avec nuxt js vous utiliserez le parse javascript sdk pour connecter votre application nuxt js au backend de back4app installez le sdk parse npm install parse configurez le sdk en créant un module dédié par exemple, créez plugins/parse client js avec le contenu suivant import parse from 'parse/dist/parse min js'; const parse app id = 'your application id'; const parse js key = 'your javascript key'; const parse server url = 'https //parseapi back4app com/'; parse initialize(parse app id, parse js key); parse serverurl = parse server url; export default parse; ensuite, enregistrez ce plugin dans votre nuxt config ts (ou nuxt config js ) export default { plugins \[ { src ' /plugins/parse client js', mode 'client' } ] } vous pouvez maintenant importer parse dans vos pages ou composants pour interagir avec le backend développement du frontend votre application nuxt js sera composée de pages et de composants pour ajouter, afficher, mettre à jour et supprimer des tâches profitez du routage basé sur les fichiers de nuxt et de la récupération de données asynchrones pour créer une liste de tâches dynamique structuration de vos composants créez un components dossier dans votre projet pour organiser vos composants ui mkdir components vous allez créer les composants suivants taskform vue – pour ajouter de nouvelles tâches tasklist vue – pour afficher la liste des tâches taskitem vue – pour représenter des tâches individuelles taskform vue ce composant rend un formulaire qui capture les détails de la tâche et les soumet à back4app \<template> \<form @submit prevent="handlesubmit"> \<input type="text" placeholder="task title" v model="title" required /> \<input type="text" placeholder="description" v model="description" required /> \<button type="submit">add task\</button> \</form> \</template> \<script> import parse from 'parse/dist/parse min js'; export default { name 'taskform', data() { return { title '', description '' }; }, methods { async handlesubmit() { try { const task = parse object extend('task'); const task = new task(); task set('title', this title); task set('description', this description); task set('completed', false); await task save(); this $emit('refresh'); this title = ''; this description = ''; } catch (error) { console error('error adding task ', error); } } } }; \</script> taskitem vue ce composant représente une tâche individuelle et fournit des boutons pour basculer son statut d'achèvement ou supprimer la tâche \<template> \<div \ class="\['task item', { completed task completed }]"> \<div> \<h3>{{ task title }}\</h3> \<p>{{ task description }}\</p> \</div> \<div> \<button @click="togglecomplete"> {{ task completed ? 'undo' 'complete' }} \</button> \<button @click="deletetask">delete\</button> \</div> \</div> \</template> \<script> import parse from 'parse/dist/parse min js'; export default { name 'taskitem', props \['task'], methods { async togglecomplete() { try { const query = new parse query('task'); const tasktoupdate = await query get(this task id); tasktoupdate set('completed', !this task completed); await tasktoupdate save(); this $emit('refresh'); } catch (error) { console error('error updating task ', error); } }, async deletetask() { try { const query = new parse query('task'); const tasktodelete = await query get(this task id); await tasktodelete destroy(); this $emit('refresh'); } catch (error) { console error('error deleting task ', error); } } } }; \</script> tasklist vue ce composant affiche la liste des tâches en itérant sur un tableau et en rendant chaque tâche à l'aide du composant taskitem \<template> \<div> \<p v if="tasks length === 0">no tasks available\</p> \<taskitem v for="task in tasks" \ key="task id" \ task="task" @refresh="refreshtasks" /> \</div> \</template> \<script> import taskitem from ' /taskitem vue'; export default { name 'tasklist', props \['tasks'], methods { refreshtasks() { this $emit('refresh'); } }, components { taskitem } }; \</script> intégration de la page dans votre page principale (par exemple, pages/index vue ), gérez l'état des tâches et intégrez vos composants \<template> \<div class="container"> \<h1>to do list\</h1> \<taskform @refresh="fetchtasks" /> \<tasklist \ tasks="tasks" @refresh="fetchtasks" /> \</div> \</template> \<script> import taskform from ' /components/taskform vue'; import tasklist from ' /components/tasklist vue'; import parse from 'parse/dist/parse min js'; export default { components { taskform, tasklist }, data() { return { tasks \[] }; }, methods { async fetchtasks() { try { const task = parse object extend("task"); const query = new parse query(task); const results = await query find(); this tasks = results map((task) => ({ id task id, task tojson() })); } catch (error) { console error("error fetching tasks ", error); } }, }, mounted() { this fetchtasks(); } }; \</script> styliser l'application créez une feuille de style globale (par exemple, assets/css/main css ) pour ajouter un style de base container { max width 600px; margin 40px auto; padding 0 20px; text align center; font family sans serif; } h1 { margin bottom 20px; } form { display flex; flex direction column; align items center; gap 10px; margin bottom 20px; } form input\[type="text"] { width 80%; max width 400px; padding 8px; box sizing border box; font size 1rem; } form button { padding 8px 16px; cursor pointer; font size 1rem; border none; background color #eaeaea; transition background color 0 2s ease; } form button\ hover { background color #ccc; } task item { display flex; flex direction column; align items center; justify content center; gap 12px; border 1px solid #ccc; border radius 6px; padding 15px; margin 10px 0; background color #fafafa; text align center; transition background color 0 2s ease; } task item completed h3, task item completed p { text decoration line through; color #888; } task item h3 { margin 0; font size 1 1rem; } task item p { margin 0; font size 1rem; } task item button { padding 6px 12px; border none; background color #eaeaea; cursor pointer; font size 0 9rem; } task item button\ hover { background color #ccc; } @media (min width 600px) { task item { flex direction row; } } incluez cette feuille de style dans votre configuration nuxt en l'ajoutant au css tableau dans nuxt config ts export default { css \[' /assets/css/main css'] } déployer le frontend sur le déploiement web back4app le déploiement web back4app offre un environnement conteneurisé pour héberger votre application nuxt js configurer nuxt js pour la production mettez à jour votre nuxt config ts si nécessaire pour définir le chemin de base pour le déploiement export default { router { base ' /' } } générer la build de production npm run build npm run generate création d'un dockerfile créez un dockerfile à la racine de votre projet avec le contenu suivant # stage 1 build the nuxt js app from node 18 alpine as build workdir /app copy package json package lock json / run npm install copy run npm run build run npm run generate \# stage 2 serve the app using nginx from nginx\ alpine copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] tester le conteneur docker localement construisez votre image docker docker build t todo frontend exécutez le conteneur docker run p 8080 80 todo frontend ouvrez http //localhost 8080 dans votre navigateur pour vérifier que votre application nuxt js est servie correctement déploiement sur back4app initialisez un dépôt git, ajoutez vos fichiers de projet et validez git init git add git commit m "initial commit for back4app deployment" git branch m main git remote add origin \<your github repository url> git push u origin main connectez vous à back4app web deployment https //www back4app com/containers cliquez sur "créer une nouvelle application" , fournissez le nom de votre projet et sélectionnez votre dépôt github autorisez back4app et choisissez dockerfile deployment confirmez les paramètres de construction et cliquez sur "déployer" pour initier le déploiement surveillance de votre déploiement après le déploiement, utilisez le tableau de bord back4app pour voir les journaux pour le débogage surveiller les performances des conteneurs et l'utilisation des ressources déclencher des reconstructions sur de nouveaux commits configurer des domaines personnalisés si nécessaire accédez à votre application en direct à https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ https //todoapp ku5ofg8s b4a run/ tests et débogage après le déploiement, confirmez que votre frontend nuxt js communique correctement avec le backend back4app vérification de l'api utilisez les outils de développement de votre navigateur (f12 → réseau) pour inspecter les appels api opérations de tâches ajoutez, complétez et supprimez des tâches via l'interface utilisateur et vérifiez les mises à jour dans le navigateur de base de données back4app gestion des erreurs vérifiez les journaux de la console pour les erreurs et testez les cas limites tels que les soumissions vides tests de performance simulez des conditions de réseau lentes en utilisant les outils du navigateur pour évaluer la réactivité meilleures pratiques pour utiliser back4app avec nuxt js pour optimiser votre application requêtes efficaces utilisez des opérations par lot pour gérer plusieurs tâches const tasks = \[task1, task2, task3]; parse object saveall(tasks); requêtes optimisées récupérer uniquement les champs nécessaires query select('title', 'completed'); gestion de l'environnement stocker les clés sensibles dans des variables d'environnement nuxt public parse app id=your app id nuxt public parse js key=your js key sécurité utiliser des acl pour restreindre l'accès task setacl(new parse acl(parse user current())); déchargement backend utiliser le cloud code pour une logique complexe afin de réduire l'exposition de l'api conclusion vous avez maintenant construit une application de liste de tâches full stack en créant un frontend nuxt js, en l'intégrant avec le backend de back4app, et en le déployant en utilisant des workflows conteneurisés ce tutoriel vous a guidé à travers chaque étape—du développement local au déploiement dans le cloud—assurant une interaction fluide entre votre interface utilisateur nuxt js et les services backend en regardant vers l'avenir, envisagez des améliorations telles que des mises à jour en temps réel, une authentification améliorée et des intégrations tierces pour un apprentissage supplémentaire, visitez la documentation back4app https //www back4app com/docs et explorez les ressources communautaires