Comment créer une appli CRUD avec Vue.js?

introduction dans ce guide, vous découvrirez comment créer une application crud (créer, lire, mettre à jour, supprimer) entièrement fonctionnelle en utilisant vue js nous tirerons parti de la puissance de back4app pour gérer votre backend sans effort ce tutoriel vous guide à travers la configuration d'un projet back4app, la création d'un modèle de données dynamique et la mise en œuvre des opérations crud avec vue js dans un premier temps, vous configurerez un projet back4app nommé basic crud app vue , fournissant une base de données non relationnelle robuste pour votre application vous concevrez votre modèle de données en configurant manuellement des collections et des champs ou en utilisant l'agent ia intelligent de back4app ensuite, vous gérerez vos données avec l'application admin de back4app—une interface conviviale, par glisser déposer—vous permettant de créer, lire, mettre à jour et supprimer des enregistrements avec facilité enfin, vous intégrerez votre frontend vue js avec back4app via des appels api rest (en utilisant axios) pour exécuter des opérations crud sécurisées et efficaces à la fin de ce tutoriel, vous aurez une application vue js prête pour la production qui effectue des fonctions crud essentielles ainsi qu'une authentification utilisateur sécurisée et une gestion des données points clés à retenir apprenez à construire une application crud basée sur vue js soutenue par un backend évolutif comprenez comment structurer un backend flexible et le connecter à votre projet vue js découvrez comment utiliser l'application admin intuitive de back4app pour des opérations crud sans faille explorez les techniques de déploiement, y compris la conteneurisation docker, pour votre application vue js prérequis avant de commencer, assurez vous d'avoir un compte back4app avec un nouveau projet configuré besoin d'aide ? voir commencer avec back4app https //www back4app com/docs/get started/new parse app un environnement de développement vue js utilisez le vue cli ou votre ide préféré comme vscode des connaissances de base en vue js, javascript moderne et api rest rafraîchissez vos connaissances sur la documentation vue js https //vuejs org/guide/introduction html si nécessaire étape 1 – configuration du projet création d'un nouveau projet back4app connectez vous à votre compte back4app cliquez sur le bouton “nouvelle application” depuis votre tableau de bord nommez votre projet basic crud app vue et suivez les instructions pour compléter la configuration créer un nouveau projet après avoir créé le projet, il apparaîtra dans votre tableau de bord, posant les bases de votre backend étape 2 – conception du modèle de données structuration de vos données pour cette application crud, vous définirez plusieurs collections au sein de votre projet back4app les exemples ci dessous illustrent les collections principales et leurs champs nécessaires pour la fonctionnalité crud 1 collection d'articles cette collection stocke les détails de chaque article champ type de données description id identifiant d'objet identifiant unique généré automatiquement titre chaîne le nom de l'article description chaîne un bref résumé de l'article créé à date horodatage de la création de l'élément mis à jour le date horodatage de la dernière mise à jour 2 collection des utilisateurs cette collection gère les identifiants et les données d'authentification des utilisateurs champ type de données description id identifiant d'objet identifiant unique généré automatiquement nom d'utilisateur chaîne nom d'utilisateur unique pour l'utilisateur email chaîne adresse e mail unique hashdemotdepasse chaîne mot de passe crypté pour la connexion créé à date horodatage de création du compte mis à jour le date dernière mise à jour du compte vous pouvez ajouter ces collections et champs manuellement dans le tableau de bord back4app créer une nouvelle classe vous pouvez ajouter des champs en sélectionnant le type de données, en fournissant le nom du champ, en définissant une valeur par défaut et en le marquant comme requis si nécessaire créer une colonne utilisation de l'agent ai back4app pour la configuration du schéma l'agent ai intégré de back4app peut générer automatiquement votre schéma de données en fonction de votre description cet outil accélère la configuration et garantit que votre modèle répond aux exigences crud comment utiliser l'agent ai ouvrez l'agent ai connectez vous à votre tableau de bord back4app et accédez à l'agent ai dans les paramètres de votre projet décrivez votre modèle de données entrez une invite détaillée décrivant les collections et les champs dont vous avez besoin examinez et confirmez une fois que l'agent ai génère un schéma proposé, examinez le et confirmez pour mettre en œuvre la configuration exemple de prompt create the following collections in my back4app project 1\) collection items \ fields \ id objectid (auto generated) \ title string \ description string \ createdat date (auto generated) \ updatedat date (auto updated) 2\) collection users \ fields \ id objectid (auto generated) \ username string (unique) \ email string (unique) \ passwordhash string \ createdat date (auto generated) \ updatedat date (auto updated) cette approche pilotée par l'ia permet de gagner du temps et garantit un modèle de données optimisé et cohérent étape 3 – activation de l'application admin et gestion des opérations crud aperçu de l'application admin l'application admin de back4app fournit une interface sans code pour la gestion du backend avec ses fonctionnalités de glisser déposer, vous pouvez facilement effectuer des opérations crud telles que créer, lire, mettre à jour et supprimer des enregistrements activation de l'application admin allez dans le menu “plus” dans votre tableau de bord back4app sélectionnez “admin app” et cliquez sur “activer l'application admin ” configurez les identifiants administratifs en créant votre premier compte administrateur ce processus établit également des rôles (comme b4aadminuser ) et des collections système activer l'application admin après l'activation, connectez vous à l'application admin pour commencer à gérer vos données tableau de bord de l'application admin gestion des opérations crud via l'application admin dans l'application admin, vous pouvez créer de nouveaux enregistrements cliquez sur “ajouter un enregistrement” dans n'importe quelle collection (par exemple, articles) pour insérer de nouvelles données modifier ou afficher des enregistrements sélectionnez un enregistrement pour voir ses détails ou modifier ses champs supprimer des enregistrements supprimez les enregistrements qui ne sont plus nécessaires cette interface simplifie la gestion des données et améliore l'expérience utilisateur globale étape 4 – connecter votre application vue js avec back4app une fois votre backend prêt, il est temps de lier votre application vue js avec back4app utiliser des appels api rest avec axios nous allons utiliser des appels api rest via axios pour effectuer des opérations crud installer axios exécutez la commande suivante dans votre répertoire de projet npm install axios configurer axios créez une instance axios dans un fichier (par exemple, api js ) // api js import axios from 'axios'; const apiclient = axios create({ baseurl 'https //parseapi back4app com', headers { 'x parse application id' 'votre id application', 'x parse rest api key' 'votre cle api rest', 'content type' 'application/json' } }); export default apiclient; implémenter des méthodes crud dans les composants vue voici un exemple de la façon de récupérer et de créer des éléments // itemsservice js import apiclient from ' /api'; export default { fetchitems() { return apiclient get('/classes/items') then(response => response data results) catch(error => console error('erreur lors de la récupération des éléments ', error)); }, additem(title, description) { return apiclient post('/classes/items', { title, description }) then(response => response data) catch(error => console error('erreur lors de l’ajout de l’élément ', error)); }, updateitem(objectid, title, description) { return apiclient put(`/classes/items/${objectid}`, { title, description }) then(response => response data) catch(error => console error('erreur lors de la mise à jour de l’élément ', error)); }, deleteitem(objectid) { return apiclient delete(`/classes/items/${objectid}`) then(response => response data) catch(error => console error('erreur lors de la suppression de l’élément ', error)); } }; intégrez ces méthodes api dans vos composants vue pour gérer les données de votre application étape 5 – sécuriser votre backend configurer les listes de contrôle d'accès (acl) protégez vos données en configurant des acl pour vos enregistrements par exemple, pour créer un élément que seul son propriétaire peut voir ou modifier import apiclient from ' /api'; export function createprivateitem(title, description, userid) { const acl = { " " { "read" false, "write" false }, \[userid] { "read" true, "write" true } }; return apiclient post('/classes/items', { title, description, acl acl }) then(response => response data) catch(error => console error('error creating private item ', error)); } configurer les autorisations au niveau de la classe (clp) utilisez votre tableau de bord back4app pour configurer les clp afin que seuls les utilisateurs authentifiés puissent accéder à certaines collections cela garantit que votre backend reste sécurisé par défaut étape 6 – mise en œuvre de l'authentification des utilisateurs configurer l'inscription et la connexion des utilisateurs back4app utilise une collection d'utilisateurs intégrée pour l'authentification dans votre application vue js, vous pouvez gérer l'inscription et la connexion des utilisateurs en utilisant des appels d'api rest voici comment // authservice js import apiclient from ' /api'; export default { register(username, password, email) { return apiclient post('/users', { username, password, email }) then(response => response data) catch(error => console error('registration error ', error)); }, login(username, password) { return apiclient get('/login', { params { username, password } }) then(response => response data) catch(error => console error('login error ', error)); } }; cette configuration vous permet également de gérer la gestion des sessions, les réinitialisations de mot de passe et d'autres fonctionnalités d'authentification étape 7 – déploiement de votre application vue js back4app simplifie le processus de déploiement vous pouvez déployer votre application vue js en utilisant diverses méthodes, y compris la conteneurisation docker 7 1 construction de votre application vue js compiler et regrouper utilisez le vue cli pour compiler votre application npm run build vérifiez la construction confirmez que le dossier de sortie (généralement dist/ ) contient tous les fichiers nécessaires 7 2 aperçu de la structure du projet une structure de projet vue js courante pourrait ressembler à basic crud app vue/ \| public/ \| src/ \| | components/ \| | | itemlist vue \| | | itemform vue \| | services/ \| | | api js \| | | itemsservice js \| | | authservice js \| | app vue \| | main js \| package json \| readme md 7 3 dockerisation de votre application vue js si vous préférez un déploiement conteneurisé, incluez un dockerfile à la racine de votre projet # use a node image for building the app from node 16 as build \# set the working directory workdir /app \# install dependencies and build the app copy package json / run npm install copy run npm run build \# use an nginx image to serve the app from nginx\ alpine copy from=build /app/dist /usr/share/nginx/html expose 80 cmd \["nginx", " g", "daemon off;"] 7 4 déploiement avec le déploiement web back4app connectez votre dépôt github assurez vous que votre projet vue js est hébergé sur github configurer le déploiement dans le tableau de bord back4app, sélectionnez l' déploiement web option, liez votre dépôt (par exemple, basic crud app vue ), et choisissez la branche souhaitée définir les commandes de construction spécifiez votre commande de construction (par exemple, npm run build ) et indiquez le dossier de sortie (par exemple, dist ) déployer cliquez sur déployer et regardez les journaux jusqu'à ce que votre application soit en ligne étape 8 – dernières réflexions et prochaines étapes félicitations ! vous avez construit une application crud basée sur vue js intégrée avec back4app vous avez configuré un projet nommé basic crud app vue , mis en place des collections pour les articles et les utilisateurs, et utilisé l'application d'administration back4app pour la gestion des données de plus, vous avez connecté votre frontend vue js via des appels api rest et établi des mesures de sécurité prochaines étapes développez votre application incorporez des fonctionnalités telles que le filtrage avancé, des vues détaillées des articles ou des mises à jour en direct améliorez la fonctionnalité du backend explorez les fonctions cloud, intégrez des api externes ou mettez en œuvre des contrôles d'accès basés sur les rôles continuez à apprendre référez vous à la documentation de back4app https //www back4app com/docs et à d'autres ressources pour affiner davantage votre application bon codage et profitez de la construction de votre application crud vue js !