Comment créer un frontend Vue et le connecter à un backend ?

dans ce tutoriel, vous allez créer une application de liste de tâches en utilisant vue et la connecter à un service backend géré ce guide est parfait pour vous si vous souhaitez maîtriser les opérations crud essentielles (créer, lire, mettre à jour, supprimer) et construire une interface utilisateur intuitive à la fin, votre application interagira pleinement avec un backend alimenté par back4app développer une application full stack peut impliquer des configurations backend complexes, la gestion de bases de données et l'authentification des utilisateurs pour vous permettre de vous concentrer sur la création d'un excellent frontend vue, nous utiliserons back4app pour gérer le backend sans effort back4app fournit une base de données prête à l'emploi, une authentification, du cloud code pour une logique serveur personnalisée, et des sdk pour s'intégrer à votre application cela vous permet de déployer des applications évolutives sans les tracas de la maintenance des serveurs points clés à retenir en suivant ce tutoriel, vous allez configurer un projet vue moderne en utilisant des outils standard de l'industrie intégrer sans effort 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 via 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 vérifiez les installations avec node v et npm v connaissances de base en vue , y compris les composants, les données réactives et la gestion des événements une familiarité avec l'api de composition de vue 3 est bénéfique un compte back4app pour gérer vos services backend inscrivez vous sur back4app https //www back4app com/ si ce n'est pas déjà fait avec cela en place, vous êtes prêt à configurer votre projet configuration du projet commencez par préparer votre environnement de développement local et initialiser votre projet vue avec vite pour une expérience de construction rapide et moderne vérifiez que vous avez 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 vue en exécutant npm create vite\@latest todo app 3\ changez de répertoire pour votre projet cd todo app 4\ installez les dépendances npm install 5\ lancez le serveur de développement pour vous assurer que tout fonctionne npm run dev ouvrez l'url fournie dans votre navigateur avec votre frontend vue prêt, l'étape suivante consiste à configurer votre backend sur back4app création du backend todo back4app propose un service backend entièrement géré alimenté par parse , complet avec une base de données nosql, une authentification des utilisateurs, du cloud code et une génération automatique d'api suivez ces étapes pour créer un 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 allez à "base de données" > "navigateur" , cliquez sur "créer une classe" , et sélectionnez "personnalisé" nommez la classe tâche et définissez les autorisations pour permettre la lecture et l'écriture publiques (vous pourrez affiner cela 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) – quand la tâche est due cliquez sur "enregistrer" pour créer le schéma intégration de back4app avec vue vous utiliserez le parse javascript sdk pour communiquer entre votre frontend vue et le backend back4app installez le sdk parse npm install parse configurez le sdk en modifiant src/main js importez le sdk et initialisez le avec votre id d'application et clé javascript depuis le tableau de bord back4app (trouvé sous paramètres de l'application > sécurité & clés ) import { createapp } from 'vue'; import app from ' /app vue'; 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; createapp(app) mount('#app'); avec votre backend connecté, vous pouvez maintenant construire l'interface de la liste de tâches et intégrer les opérations crud développement du frontend votre application vue se composera de composants pour ajouter, afficher, mettre à jour et supprimer des tâches vous tirerez parti de la réactivité de vue pour gérer l'état et garantir des mises à jour fluides structuration de vos composants créez un dossier components à l'intérieur de src pour abriter vos composants vue mkdir src/components touch src/components/taskform vue src/components/tasklist vue src/components/taskitem vue taskform vue ce composant gère l'ajout de nouvelles tâches il utilise un formulaire contrôlé pour capturer l'entrée de l'utilisateur \<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', props \['fetchtasks'], 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 fetchtasks(); this title = ''; this description = ''; } catch (error) { console error('error adding task ', error); } } } }; \</script> tasklist vue ce composant affiche la liste des tâches et intègre les actions sur les tâches \<template> \<div> \<p v if="!tasks length">no tasks available\</p> \<taskitem v for="task in tasks" \ key="task id" \ task="task" \ fetchtasks="fetchtasks" /> \</div> \</template> \<script> import taskitem from ' /taskitem vue'; export default { name 'tasklist', components { taskitem }, props \['tasks', 'fetchtasks'] }; \</script> taskitem vue ce composant représente une tâche individuelle et inclut des actions pour marquer comme complété ou supprimer \<template> \<div \ class="\['task item', { completed task completed }]"> \<div> \<h3>{{ task title }}\</h3> \<p>{{ task description }}\</p> \</div> \<div> \<button @click="handlecomplete"> {{ task completed ? 'undo' 'complete' }} \</button> \<button @click="handledelete">delete\</button> \</div> \</div> \</template> \<script> import parse from 'parse/dist/parse min js'; export default { name 'taskitem', props \['task', 'fetchtasks'], methods { async handlecomplete() { 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 fetchtasks(); } catch (error) { console error('error updating task ', error); } }, async handledelete() { try { const query = new parse query('task'); const tasktodelete = await query get(this task id); await tasktodelete destroy(); this fetchtasks(); } catch (error) { console error('error deleting task ', error); } } } }; \</script> gestion de l'état dans app vue dans votre composant principal, vous gérerez la liste des tâches en utilisant les données réactives de vue et les hooks de cycle de vie \<template> \<div class="container"> \<h1>to do list\</h1> \<taskform \ fetchtasks="fetchtasks" /> \<tasklist \ tasks="tasks" \ fetchtasks="fetchtasks" /> \</div> \</template> \<script> import { ref, onmounted } from 'vue'; import parse from 'parse/dist/parse min js'; import taskform from ' /components/taskform vue'; import tasklist from ' /components/tasklist vue'; export default { name 'app', components { taskform, tasklist }, setup() { const tasks = ref(\[]); const fetchtasks = async () => { try { const task = parse object extend('task'); const query = new parse query(task); const results = await query find(); tasks value = results map(task => ({ id task id, task tojson() })); } catch (error) { console error('error fetching tasks ', error); } }; onmounted(fetchtasks); return { tasks, fetchtasks }; } }; \</script> styliser l'application créez un styles css fichier dans src pour ajouter un style de base container { max width 600px; margin 40px auto; padding 0 20px; text align center; font family sans serif; } container 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; } } importez la feuille de style dans main js import ' /styles css'; déployer le frontend sur le déploiement web back4app le déploiement web back4app vous permet de conteneuriser votre application vue pour la production avec docker configurer vite pour la production ajustez vite config js pour définir correctement le chemin de base pour un environnement conteneurisé import { defineconfig } from 'vite'; import vue from '@vitejs/plugin vue'; export default defineconfig({ plugins \[vue()], base ' /', }); générez la build de production npm run build créer un dockerfile créer un dockerfile dans le répertoire racine \# stage 1 build the vue app from node 18 alpine as build workdir /app copy package json package lock json / run npm install copy run npm run build \# 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 visitez http //localhost 8080 pour vérifier que votre application vue est servie correctement déploiement sur back4app initialisez un dépôt git, ajoutez vos fichiers 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 un nom de projet et sélectionnez dépôt github autorisez back4app à accéder à votre dépôt et choisissez déploiement dockerfile confirmez les paramètres de construction et cliquez sur "déployer" pour déclencher la première construction 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 l'utilisation des ressources et les redémarrages de conteneurs redéployer sur de nouveaux commits en utilisant le "déclencher la construction" option configurer des domaines personnalisés si nécessaire accédez à l'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, assurez vous que votre frontend vue communique correctement avec le backend back4app vérifier les appels api ouvrez les outils de développement de votre navigateur (f12 → réseau) pour inspecter les requêtes api ajouter et récupérer des tâches utilisez l'interface de l'application pour ajouter des tâches et vérifier le navigateur de base de données back4app opérations crud testez la complétion et la suppression des tâches, puis confirmez les changements dans le backend cas limites validez les entrées de formulaire et simulez des conditions de réseau lent (en utilisant chrome devtools) pour évaluer les performances dépannage des problèmes courants erreurs cors mettez à jour les en têtes et domaines autorisés dans back4app (tableau de bord > paramètres de l'application > sécurité et clés) pour inclure votre url frontend erreurs d'authentification (401) confirmez que votre id d'application et votre clé javascript sont corrects problèmes de déploiement backend vérifiez les journaux de conteneur dans le tableau de bord back4app et redémarrez le conteneur si nécessaire meilleures pratiques pour utiliser back4app avec vue pour optimiser votre application requêtes de données efficaces utilisez des requêtes par lot pour plusieurs opérations const tasks = \[task1, task2, task3]; parse object saveall(tasks); optimiser les requêtes demander uniquement les champs nécessaires query select('title', 'completed'); variables d'environnement stocker les clés sensibles dans un env fichier vite parse app id=your app id vite parse js key=your js key sécurité utiliser des acl pour restreindre l'accès task setacl(new parse acl(parse user current())); code cloud décharger la logique complexe vers des fonctions backend pour réduire l'exposition de l'api conclusion vous avez réussi à construire une application de liste de tâches full stack en configurant un frontend vue, en l'intégrant avec le backend de back4app et en le déployant via des workflows conteneurisés ce tutoriel a démontré un chemin simplifié du développement local au déploiement dans le cloud, garantissant une interaction fluide entre votre interface utilisateur vue et les services backend en regardant vers l'avenir, envisagez des améliorations telles que la gestion avancée des utilisateurs, les mises à jour en temps réel et l'intégration de services tiers pour plus d'informations, visitez la documentation back4app https //www back4app com/docs et explorez les ressources de la communauté