Vue. js 3 & Firebase pour débutants | Chris Dixon | Skillshare
Menu
Recherche

Vitesse de lecture


  • 0.5x
  • 1 x (normale)
  • 1.25x
  • 1.5x
  • 2x

Vue. js 3 & Firebase pour débutants

teacher avatar Chris Dixon, Web Developer & Online Teacher

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Regardez ce cours et des milliers d'autres

Bénéficiez d'un accès illimité à tous les cours
Suivez des cours enseignés par des leaders de l'industrie et des professionnels
Explorez divers sujets comme l'illustration, le graphisme, la photographie et bien d'autres

Leçons de ce cours

    • 1.

      Bienvenue au cours !

      1:31

    • 2.

      Ce dont vous aurez besoin

      1:38

    • 3.

      Configurer l'outil avec Vite

      5:42

    • 4.

      Images de projet

      2:16

    • 5.

      Vues Ou Composants ?

      1:39

    • 6.

      Vues et itinéraires

      6:29

    • 7.

      RouterLink et routerView

      6:16

    • 8.

      Routes nommées

      2:15

    • 9.

      Routes imbriquées

      4:23

    • 10.

      Le compte et les composantes enfant

      9:10

    • 11.

      Vues nommées

      6:20

    • 12.

      UI-

      0:25

    • 13.

      L'interface utilisateur

      4:14

    • 14.

      L'interface utilisateur

      3:03

    • 15.

      Polices et styles de base

      7:31

    • 16.

      Menu et panier

      5:37

    • 17.

      Stylage d'en-tête

      4:34

    • 18.

      Admin : ajouter un nouveau formulaire

      5:54

    • 19.

      Admin : Composante pizzas

      3:36

    • 20.

      Admin : volet ordres d'inscription

      4:25

    • 21.

      Vue à domicile

      7:33

    • 22.

      Stylage de forme et de table

      10:26

    • 23.

      Options Ou Composition ?

      3:37

    • 24.

      L'objet et le liage de données NewPizza

      5:46

    • 25.

      Ref’s & Ajout au panier

      7:33

    • 26.

      Boucler les pizzas

      5:30

    • 27.

      Vérifier les articles de panier

      4:30

    • 28.

      Éliminer et changer la quantité

      4:18

    • 29.

      Propriétés calculées

      3:34

    • 30.

      Fichiers composables

      5:12

    • 31.

      Qu'est-ce que la base de feu ?

      1:48

    • 32.

      Configuration de la base de feu

      7:30

    • 33.

      Ajouter des pizzas à la base de données

      7:30

    • 34.

      Obtenir des pizzas

      9:17

    • 35.

      Listing & Suppression pizzas dans Admin

      11:01

    • 36.

      Créer des ordres

      8:15

    • 37.

      Recherche des ordres

      7:57

    • 38.

      Passer les commandes

      4:24

    • 39.

      Suppression des commandes

      4:43

    • 40.

      Afficher et masquer les blocs d'administration

      5:07

    • 41.

      La fonction d'inscription

      7:27

    • 42.

      Créer le formulaire d'inscription

      8:57

    • 43.

      Stylage modal

      8:41

    • 44.

      Basculer modal

      4:16

    • 45.

      Se connecter et sortir

      9:34

    • 46.

      Détection des changements auth

      5:07

    • 47.

      Styler l'aperçu

      5:18

    • 48.

      Terminer l'aperçu administrateur

      4:55

    • 49.

      Restriction de nouvelles pizzas

      2:14

    • 50.

      Ajouter l'utilisateur aux commandes

      6:45

    • 51.

      Filtres et propriétés mondiales

      8:52

    • 52.

      Mises à jour en temps réel

      4:53

    • 53.

      Mises à jour en temps réel

      2:30

    • 54.

      Se désabonner des mises à jour

      2:49

    • 55.

      Ajout de nouveaux utilisateurs

      7:37

    • 56.

      Récupérer les utilisateurs d'administrateur

      5:37

    • 57.

      Mettre à jour les utilisateurs réguliers

      10:48

    • 58.

      Mettre à jour les utilisateurs réguliers

      6:42

    • 59.

      Règles de Firebase

      17:10

  • --
  • Niveau débutant
  • Niveau intermédiaire
  • Niveau avancé
  • Tous niveaux

Généré par la communauté

Le niveau est déterminé par l'opinion majoritaire des apprenants qui ont évalué ce cours. La recommandation de l'enseignant est affichée jusqu'à ce qu'au moins 5 réponses d'apprenants soient collectées.

171

apprenants

3

projets

À propos de ce cours

Vue 3 est un cadre étonnant pour créer des applications Web ! Apprenez-en tout à ce sujet dans ce cours sur la version 3. Ce cours est entièrement basé sur les projets et, ensemble, nous créons une application de pizza !

Découvrez tout ce que vous devez savoir, de la structuration d'une application en utilisant les pages et les composants aux dernières fonctionnalités telles que l'API de composition et la configuration de script. Vous découvrirez la réactivité de la vue 3 et comment utiliser les nouvelles fonctionnalités et les fonctionnalités existantes, y compris les crochets du cycle de vie, les horlogers et les propriétés calculées.

Vous trouverez les images de projet ici.

Si vous vous enfermez, vous pouvez comparer votre code au projet final à différents stades en suivant le lien suivant :

https://github.com/chrisdixon161/vue3-firebase-pour-débutants-project-stages

Le cours est conçu pour être convivial pour les développeurs nouveaux à Vue.js ou Firebase. Cependant, les connaissances générales en développement Web sont nécessaires pour tirer le meilleur parti de ce cours. Vous devriez avoir une expérience avec JavaScript, JavaScript régulière, ou expérimenter avec un autre cadre comme React ou Vue 2.

Nous couvrerons le routage pour basculer entre les pages, comment activer les itinéraires enfants et utiliser de multiples composantes de vue nommés.

Nous utilisons aussi Firebase comme service back-end pour notre projet. Nous avons créé une base de données pour stocker nos commandes, nos rubriques de menu et nos données utilisateur en utilisant la dernière version Web 9 (modulaire). Cette base de données sera également en temps réel, ce qui signifie que notre projet est tenu à jour avec les changements à la base de données au fur et à mesure qu'ils se produisent. Vous découvrirez de nombreuses méthodes pour créer, lire, mettre à jour et supprimer les données.

L'authentification Firebase sera également mise en place pour gérer nos utilisateurs. Nous allons permettre les comptes utilisateurs et les niveaux d'accès multiples. Cela permettra aux utilisateurs réguliers de passer les ordres et les utilisateurs d'administration pour gérer les éléments de menu, les ordres et d'autres utilisateurs.

Rencontrez votre enseignant·e

Teacher Profile Image

Chris Dixon

Web Developer & Online Teacher

Top Teacher

Hello, My name is Chris and I am a Web Developer from the UK. I am an experienced trainer leading web development bootcamps and also teaching online courses.

My main areas of interest are Vue.js, WordPress, Shopify, Javascript, eCommerce, and business. I am passionate about what I do and about teaching others. 

Whatever your reason for learning to build websites you have made an excellent career choice.

My personal motivation was to become my own boss and have more freedom and flexibility in my life. I also enjoy the technical challenge it provides and the way it constantly evolves. I built my first website back in 1999 and I have watched the web evolve into what it is today.

I try to make my courses enjoyable and try to remember what it was like wh... Voir le profil complet

Level: Intermediate

Notes attribuées au cours

Les attentes sont-elles satisfaites ?
    Dépassées !
  • 0%
  • Oui
  • 0%
  • En partie
  • 0%
  • Pas vraiment
  • 0%

Pourquoi s'inscrire à Skillshare ?

Suivez des cours Skillshare Original primés

Chaque cours comprend de courtes leçons et des travaux pratiques

Votre abonnement soutient les enseignants Skillshare

Apprenez, où que vous soyez

Suivez des cours où que vous soyez avec l'application Skillshare. Suivez-les en streaming ou téléchargez-les pour les regarder dans l'avion, dans le métro ou tout autre endroit où vous aimez apprendre.

Transcription

1. Bienvenue au cours !: [MUSIQUE] Vue.js est un framework frontal incroyable et facile à utiliser pour créer des applications Web. Dans ce cours, nous allons l'utiliser pour créer une application de pizzeria pleine de fonctionnalités. Nous allons découvrir toutes les nouvelles fonctionnalités de Vue Version 3 lors de la construction de ce projet. De plus, nous associerons notre projet à Firebase, afin d'appliquer un backend à notre application. Cela nous donne une base de données en temps réel pour stocker nos utilisateurs, nos commandes et les pizzas du menu. Il sera également utilisé pour fournir des comptes utilisateurs et des authentifications, y compris les administrateurs et les utilisateurs réguliers. Le projet comporte de nombreuses fonctionnalités telles qu'un menu et un panier, ajout d'articles et la possibilité de passer des commandes. Nous avons une zone d'administration où les utilisateurs autorisés peuvent ajouter et supprimer des pizzas du menu. Vos commandes peuvent être affichées et supprimées, tout comme la possibilité de définir d'autres éléments comme le font les administrateurs. Toutes ces données proviennent de notre base de données. Bonjour. Je m'appelle Chris et je suis un développeur Web expérimenté. J'ai également enseigné à plus de 100 000 étudiants, à la fois en ligne et en personne. Si vous souhaitez créer de superbes applications frontales avec la version 3 de Vue et utiliser la base de données et l'authentification Firebase, ce cours est fait pour vous. J'ai hâte de vous voir lors de la première leçon. 2. Ce dont vous aurez besoin: Pour ce cluster, vous n'aurez aucun achat supplémentaire à effectuer. Tous les logiciels que nous allons utiliser seront gratuits et open source. Alors il n'y a en fait que peu choses dont nous aurons besoin. Mais avant de le faire, examinons maintenant exigences afin de ne pas être trop débordés. Comme il s'agit d'un cours de développement Web, vous devez au moins connaître les bases et on supposera que vous connaissez assez bien le HTML et le CSS et que à l'aise avec JavaScript. Vous n'avez pas besoin d'être un expert, mais vous devez au moins connaître les bases. J'ai des cours disponibles sur chacun d'entre eux si vous devez d'abord vous rafraîchir. De plus, si vous avez de l'expérience d'autres frameworks ou bibliothèques JavaScript tels que Angular ou React, ou même la version 1 ou 2 de Vue, ce sera un avantage considérable, mais pas essentiel. De plus, nous n' utiliserons que peu le terminal, mais si vous ne l'avez pas utilisé par le passé, ne vous en mais si vous ne l'avez pas utilisé par le passé, ne vous en faites pas. Nous n' utiliserons que quelques commandes simples. Visual Studio Code, ce sera l'éditeur de texte que je vais utiliser tout au long de ce cours. Il est actuellement très populaire dans le monde du développement Web, mais vous pouvez utiliser n'importe quel autre éditeur de votre choix. Si vous en avez besoin, le lien de téléchargement est disponible ci-dessous, et il est également totalement gratuit. Un autre avantage est qu'il est livré avec un terminal intégré, que nous utiliserons pour configurer notre projet et installer les packages dont vous pourriez avoir besoin. Mais aussi, si vous êtes à l'aise avec le terminal et que vous avez peut-être vos propres terminaux externes, tels que Item, vous pouvez également l'utiliser. Dans cet esprit, passons à la vidéo suivante où nous verrons comment configurer notre projet à l'aide de Vite. 3. Créez un outil avec du vite: Pour commencer notre projet, nous allons commencer par une configuration locale. Nous pouvons exécuter Vue.js sur notre propre ordinateur. Pour cela, nous utiliserons un outil de construction appelé Vite. Vite a en fait été créé par Evan You qui a également créé Vue.js. Cet outil de création nous permettra d'utiliser les composants d'un seul fichier, c' est-à-dire d'écrire une partie de notre site Web appelée les composants dans un seul fichier. Cela nous permettra de garder les choses bien organisées lors de la création de notre projet. Mais cela signifie également que nous aurons besoin d'un outil de création pour rassembler tous ces composants distincts et les regrouper pour créer notre application. Vites nous offre également de nombreux autres avantages, tels qu'un serveur de développement, le remplacement du module actif, qui mettra instantanément à jour le projet dans le navigateur sans avoir à actualiser la page, nous apporterons une modification. Il existe également de nombreux autres avantages. Vous devrez installer Node.js si ce n'est pas déjà fait. Vous pouvez le faire depuis nodejs.org. Allez-y et téléchargez la dernière version pour votre système d'exploitation. J'utilise un livre Mac si vous utilisez Windows, il devrait également le détecter automatiquement. Si ce n'est pas le cas, cliquez simplement sur l'autre téléchargement. Ce téléchargement inclura également npm, que nous utiliserons pour configurer notre projet et également ajouter des packages selon nos besoins. Ensuite, passez au terminal, que vous pouvez utiliser en tant que terminal autonome si vous préférez. Vous pouvez également utiliser celui intégré à Visual Studio Code. La simplicité, c'est celle que je vais utiliser. Accédez au code Visual Studio, aux options, au terminal, puis au nouveau terminal. Nous allons maintenant avoir ce terminal en bas, que nous pouvons utiliser pour écrire des commandes. Si vous utilisez le terminal pour la première fois, ne vous inquiétez pas, nous avons juste besoin quelques commandes simples. Vous pouvez utiliser un terminal pour parcourir les fichiers et les dossiers de votre ordinateur, comme vous pouvez le faire avec la souris en cliquant à l'intérieur d'une fenêtre. Ici, cependant, nous utilisons des commandes, mais nous devrons naviguer jusqu'à l'endroit où nous voulons ajouter notre projet. Je veux rester simple et l'ajouter au bureau pour un accès facile. Je suis actuellement dans le répertoire personnel de mon utilisateur. Nous pouvons utiliser la commande LS pour répertorier tous les fichiers et dossiers de ce répertoire. Ensuite, nous pouvons utiliser la commande cd pour accéder à l'un de ces répertoires que vous souhaitez. Pour moi, cela va vers le bureau, que nous pouvons voir dans la liste ici. cd pour le changer sur le bureau. Cela distingue également les majuscules des minuscules. Appuyez sur « Enter ». Nous pouvons maintenant voir que nous sommes dans le répertoire Desktop. Mais si vous le souhaitez, vous pouvez accéder à n'importe quel autre répertoire de votre choix. Mais juste avant de créer le projet, nous devons vérifier que les nœuds et npm sont correctement installés. Pour ce faire, nous allons taper node dash v, qui signifie version. Le numéro de version installé sera renvoyé . Ma version actuelle est la numéro 18. Vous aurez besoin d'au moins la version 15 du nœud pour continuer. De toute évidence, pour tout numéro de version supérieur à 15, vous serez prêt à partir. Mais si vous voyez un message d'erreur ou un avertissement, vous devrez revenir en arrière et vous assurer que nœud est correctement installé. Ensuite, nous pouvons vérifier npm, donc npm dash v. Nous ne voyons aucun problème ici. Pour créer un projet View JS à l'aide de Vite, nous devons exécuter cette commande. C'est du npm dedans. Afficher. Au plus tard. C'est une entrée. Il nous demande d'installer les packages suivants, savoir Create View. C'est très bien. Appuyez sur « Y » ou appuyez sur « Entrée ». Nous avons ensuite posé une série de questions. Tout d'abord, le nom du projet, le mien sera Pizza Planet. Vous pouvez le modifier si nous le souhaitons. Nous n'allons pas utiliser TypeScript. Nous allons appuyer sur Non, nous n'avons pas besoin du support JSX, donc nous allons opter pour « Non ». Voulez-vous ajouter le routeur de visualisation ? Oui, nous le faisons. Nous y jetterons un coup d'œil bientôt. Si vous voulez une gestion d'état, nous allons sélectionner Non car nous utilisons une gestion d'état dans des fichiers composables. Nous verrons également comment procéder tout au long du cours. Nous ne couvrirons pas l'intestin, alors nous allons appuyer sur Non et Non. Oui Longueur. Cela peut être oui. C'est à vous de décider. Plus jolie ? Oui Bien, et nous avons maintenant terminé. N'oubliez pas qu'auparavant, nous utilisions la commande cd pour accéder au répertoire du bureau. Maintenant, nous avons créé un nouveau répertoire appelé pizza planet, se trouve maintenant dans notre bureau. Ce que nous devons faire, comme indiqué ici, c'est maintenant passer au répertoire Pizza Planet, donc cd, pizza dash planet ou le nom du projet de votre choix. Nous devons ensuite exécuter npm install, qui installera tous les packages dont nous avons besoin pour nos projets Vue. Bien, les packages sont maintenant tous installés. Pour démarrer notre serveur de développement, nous devons exécuter npm, exécuter dev. C'est Enter. Cela nous donnera ensuite une adresse Web à ouvrir dans le navigateur. Nous pouvons le copier ou cliquer sur Commande ou Contrôle, ce qui l'ouvrira dans le navigateur. C'est le point de départ de notre projet, ce qui signifie que tout fonctionne correctement. Depuis que nous avons configuré le routeur de visualisation, nous en reparlerons un peu plus tard. Nous verrons également un lien Accueil et un lien À propos pour passer de l'un à l'autre. 4. Images de projet: Tout au long de ce projet, nous utiliserons certaines images du projet. Vous pouvez télécharger le vôtre si vous préférez, ou vous pouvez utiliser exactement les mêmes que ceux que j'utilise. Si vous voulez suivre et utiliser les mêmes, dans GitHub, j'ai ce référentiel qui est disponible sur github.com/, mon nom d'utilisateur, qui est chrisdixon161/pizza-planet-v3-images avec un tiret entre chaque mot. Il s'agit d'un référentiel simple. Tout ce que nous avons à l'intérieur est ce dossier d'images avec les six images que nous allons ajouter à notre projet. Si vous souhaitez les utiliser, cliquez simplement sur le bouton Code. Téléchargez le fichier zip. Une fois que c'est terminé, vous pouvez cliquer dessus pour l'ouvrir. Ensuite, nous devons l'ajouter à notre projet. Tout d'abord, accédez à Visual Studio Code ou à votre éditeur de texte. Ce que nous devons faire, c'est ouvrir notre projet à l'intérieur d'ici. Faites glisser le pointeur sur le dossier du projet que nous avons créé dans la vidéo précédente. Le mien est stocké sur le bureau. Faites-le glisser dans Visual Studio Code. Nous voyons maintenant tous les fichiers et dossiers de notre projet V dans la barre latérale. Il se peut également que nous devions rouvrir le terminal. Le terminal, puis accédez à Nouveau. Nous participons actuellement à un projet pizza-planet. Nous pouvons exécuter npm, exécuter dev, qui l'ouvrira à nouveau avec ce lien. Clic de commande ou de contrôle. Bien. Tout va bien. Ensuite, si nous allons dans nos images, puis dans notre dossier de projet, que nous venons d' ouvrir dans Visual Studio, allons dans le dossier source, dans les ressources, puis nous pouvons faire glisser le dossier des images à l'intérieur. Maintenez ça enfoncé. Nous pouvons également les voir dans une barre latérale si nous ouvrons la source, dans les ressources, et voici nos images que nous allons utiliser pour ce projet. Encore une fois, si vous souhaitez utiliser vos propres images, vous pouvez les ajouter à un dossier d' images à l'intérieur et les utiliser au fur et à mesure de l' avancement du projet. Mais maintenant que nous pouvons les utiliser, nous allons passer à la section de routage, où nous verrons comment passer d'une page à l'autre. 5. Vues Ou Composants ?: Dans cette section, nous allons examiner quelques routage de base qui nous permettront de basculer entre les différentes pages de notre application. Mais juste avant de le faire, je voudrais jeter un coup d'œil à deux fichiers différents que nous allons utiliser. Il s'agit de vues et de composants. Voyons quelle est la différence entre les deux. Tout d'abord, nous avons la notion de points de vue. Il s'agit de fichiers qui contiennent le contenu de chaque page affichée. Une application ou un site Web classique utilise des liens tels que Accueil, À propos de nous et Contactez-nous, et chacun de ces liens renvoie vers une nouvelle page. C'est ainsi que nous utiliserons les points de vue. Ensuite, les composants sont généralement des éléments plus petits de notre application, qui peuvent être soit un élément autonome, soit réutilisés sur les composants sont généralement des éléments plus petits de notre application, qui peuvent être soit un élément autonome, soit plusieurs pages de vues. Un composant peut être n'importe quel bloc de contenu tel qu'une carte de localisation, un produit sur une boutique ou même un simple bloc de texte. Les composants peuvent également être réutilisés soit en répétant le contenu sur plusieurs pages, soit en transmettant les données dynamiques d'un composant. Les fichiers de composants et les fichiers de vue sont identiques. Ils ont également le même contenu et structure puisqu'ils sont tous deux des composants de vue. Mais les avoir dans des dossiers différents permet de mieux organiser les choses. En résumé, une vue est une page nous pouvons utiliser pour passer d'une page à l'autre sur notre application. En général, un composant est une partie plus petite souvent plus réutilisable de notre page. Nous les stockons généralement dans leurs propres dossiers appelés vues et composants afin de les rendre plus organisés. C'est ce que nous allons examiner ensuite. 6. Vues et itinéraires: Dans le navigateur, notre projet est ouvert. Nous avons brièvement examiné cette page d'accueil et les liens À propos qui y sont fournis. Nous passons d' une page à l'autre ou ces deux vues que nous venons de découvrir. Nous pouvons voir ces deux fichiers de vue dans l'éditeur. Accédez au code de Visual Studio avec le projet ouvert dans le dossier source où nous écrirons tout notre code. Nous avons ce dossier appelé views. Il y a le About et le HomeView entre lesquels nous passons simplement de l'un à l'autre dans le projet. L'intérieur de ces fichiers vous semblera assez familier si vous avez déjà utilisé Vue.js par le passé. Ce ne sont que des fichiers de composants dans lesquels se trouve la section script, dans laquelle nous écrivons tout notre code JavaScript et importons tous les fichiers dont vous pourriez avoir besoin. Puis aussi une zone de modèles juste ici. C'est dans cette zone que nous écrivons notre code HTML. Nous pouvons également avoir une section de style que nous pouvons voir si nous accédons à AboutView. Au-dessus, dans le dossier source, nous avons ce dossier du routeur avec une page index.js. Nous l'avons puisque nous avons choisi d'installer le package de routeur Vue lors de la première configuration de ce projet. La clé se trouve en haut du fichier dans lequel nous importons n'importe laquelle de nos vues. Ici, nous pouvons voir que nous importons le HomeView depuis le dossier Views. Ensuite, en dessous, à l'intérieur de CreateRouter se trouve ce tableau de routes. Chacun de ces itinéraires est un objet, comme nous le voyons ici. Nous voyons le chemin du fichier, qui est une barre oblique. Il s'agit du répertoire personnel. Nous pouvons donner le nom de ce routeur, auquel nous ferons référence au cours de notre projet. Liez ensuite ceci à un composant de vue particulier que nous venons d'importer. Ensuite, nous avons également la section À propos. Vous vous demandez peut-être pourquoi nous n'avons pas importé le AboutView en haut à côté du HomeView. Eh bien, nous faisions souvent cela et l'AboutView était également important, tout comme nous l'avons fait avec les composants Home. Mais au lieu de cela, cela démontre une approche légèrement différente où nous utilisons ce que l'on appelle le chargement différé. Nous chargeons la page en différé pour ne télécharger le contenu de la page que lorsque l' utilisateur en a réellement besoin. Cet aperçu de la page du routeur, nous allons maintenant créer les vues dont nous avons besoin pour notre projet , puis nous pouvons revenir et les ajouter à notre tableau. Dans la source, dans le dossier Views, nous pouvons toujours utiliser HomeView et AboutView pour nos projets. Effacons simplement le contenu qui se trouve à l'intérieur pour ne pas avoir besoin des composants de bienvenue. Comme nous l'avons supprimé , nous pouvons également supprimer la référence à celui-ci ici. Au lieu de placer un titre de niveau 3, envoyez peut-être un SMS à une maison. Nous reviendrons et ajouterons du contenu à ces vues, mais pour l'instant, nous pouvons utiliser le titre de niveau 3 pour voir à quelle page nous passons. The AboutView, supprimez le style. Nous n'avons pas de section de script. Nous avons l'emballage, H3, et le texte d'environ. Dans les vues, nous avons besoin de deux fichiers supplémentaires. Cliquez sur l'icône « Fichier » située à peu près en haut. Nous avons également besoin de l'AdminView, qui utilise l'extension .vue. Créez un modèle, un titre. C'est pour l'administrateur. Nous archivons la vue finale que nous allons utiliser est le MenuView. Celui-ci sera utilisé pour afficher toutes les pizzas que nous avons dans notre base de données ainsi qu'un panier d'achats. Un autre modèle, l'en-tête du menu. Ensuite, nous pouvons les fermer et les importer dans notre routeur, donc l'index du routeur. Ils se trouvent tous dans le même répertoire qu'un HomeView. Copions et collons ceci trois fois de plus. Le Menu et le MenuView. Le suivant est l'administrateur de l'AdminView et le dernier est celui de About. Comme nous les avons importés en haut de notre fichier, nous pouvons essentiellement dupliquer la section Accueil. Juste en dessous, créez un nouvel objet, séparez-le par une virgule. Le chemin que nous voulons utiliser est une chaîne et ce sera un menu à barres obliques. Cela signifie que si nous entrons dans notre projet et qu'à la toute fin, en tapant le menu à barres obliques, nous verrons le menu dans le navigateur. Ensuite, le nom, qui est le lien du menu. Nous l'utiliserons bientôt dans notre projet. Le composant que nous voulons afficher est le menu que nous avons importé juste au-dessus. Ensuite, nous avons l'administrateur, écrit un nouvel objet et le sépare par une virgule. Celui-ci veut accéder à l'intérieur du navigateur avec la barre oblique admin, le nom du lien d'administration et les composants d'administration. Bien. Le dernier dont nous avons besoin est About. La voie à suivre et l'ordre dans lequel nous les plaçons ne font aucune différence pour notre projet. Le nom de ce lien, le lien À propos et enfin les composants. Bien. Tout cela est fait. Assurez-vous d'avoir une virgule entre chacun de ces itinéraires. Faites une sauvegarde. Si nous passons maintenant au navigateur, actualisons. le menu à barres obliques, nous avons les textes du menu de nos composants. Nous avons également Admin. Vous voyez le texte de l'administrateur, À propos, puis la barre oblique correspondant au répertoire de base. Actuellement, nous voyons toujours le contenu de nos quatre vues côté du contenu existant sur la gauche. Comment notre application sait-elle où nous voulons que ces vues s'affichent ? Eh bien, la réponse se trouve dans le RouterView, que nous allons examiner ensuite en ajoutant ces nouvelles vues à nos liens de navigation. 7. RouterLink et RouterView: Dans notre dossier source du projet, ouvrez le fichier App.vue. À l'intérieur de ce fichier, il y a deux choses principales à noter. L'un d'eux est que nous avons cette zone de navigation, qui contient deux liens de routeur. Il contient le texte de la page d'accueil et aussi celui de about, et voici les deux liens que nous voyons à l'intérieur de notre projet. La première chose à faire est ces liens ne sont pas les huit éléments habituels , comme nous le verrons dans le code HTML normal. Au lieu de cela, ils sont entourés à l'intérieur de cette liaison de routeur. C'est ainsi que le routeur de visualisation gère les liens vers d'autres pages ou composants. Il les utilise à la place des éléments a afin que le routeur puisse modifier les URL de la page sans recharger la page. Nous pouvons également contrôler l' URL à laquelle nous associons pour inclure des itinéraires dynamiques, qui peuvent inclure des variables, plutôt que de simplement avoir les textes en clair comme ici, nous pouvons également insérer des variables. De plus, vous verrez ce routeur afficher le composant en bas. C'est le point de vente qui affiche le contenu de notre page, que nous avons à l'intérieur des vues. C'est là que le contenu de notre page est affiché, qui nous donne un contrôle total plutôt que de simplement remplacer le contenu complet de la page. Nous voyons ici que ce composant d'affichage du routeur est placé à côté de l'en-tête. C'est pourquoi nous les voyons côte à côte dans le navigateur. Vous remarquerez également que si vous remontez en haut du fichier, le lien du routeur et la vue du routeur sont importés à partir du package view router. Avec ces connaissances, nous pouvons supprimer le code standard d'ici et créer nos propres liens à l'intérieur des composants d'en-tête. Nettoyons cette App.vue. Nous allons supprimer le lien de notre routeur, nous n'en avons plus besoin. Supprimez également ce contenu d'en-tête. Nous n'avons pas besoin de cet exemple HelloWorld dans notre projet, mais nous pouvons réutiliser ce fichier et le convertir en composant d'en-tête. Nous appellerons cela l'en-tête de l'application, renommerons le fichier AppHeader.vue. Ensuite, dans le modèle, nous pouvons placer cet AppHeader exactement là où nous voulons qu'il soit. Étant donné que ce fichier App.vue est le composant principal de notre projet, nous pouvons l'utiliser pour lui donner une certaine structure. Dans nos projets, nous voulons toujours que cette vue du routeur affiche la page. Mais juste au-dessus de cela, nous pouvons également placer dans l'AppHeader. Cela signifie que sur chaque page de notre projet, l'en-tête sera en haut, suivi du contenu de la page. Ensuite, n'oubliez pas que nous avons changé ce nom de fichier pour qu'il soit AppHeader.vue. Cela se trouve dans le dossier des composants. Saute à l'intérieur d'ici. Renommez ensuite l'exemple HelloWorld en AppHeader. Nous pouvons également supprimer ces icônes. [inaudible] a créé le projet. Nous n'en avons pas besoin pour notre projet. Passons à ce fichier AppHeader.vue. Nous effaçons tout le contenu. Nous n'avons pas besoin de script pour le moment. Nous allons le supprimer. Supprimez tous les styles par défaut. Tout le contenu se trouve entre les modèles. Je vais le remplacer par un en-tête HTML. En-tête de ligne, placez-le à l'intérieur d'un élément de niveau 1 avec le titre de soulignement de classe. Plutôt que de simplement ajouter le texte de pizza planet pour le titre de notre site, nous pouvons également le placer dans le lien du routeur. Il possède une étiquette d'ouverture et de fermeture. Puis, à l'intérieur des icônes Tilder, le texte de Pizza Planet. Vous pouvez voir que nous avons cette donnée sous-jacente qui est une erreur avec ce composant. C'est parce que nous devons ajouter les deux accessoires en tant qu'attribut. Comme il s'agit du titre du site, il s' agit simplement d'un lien vers la page d'accueil, qui est une barre oblique. Ensuite, une section de navigation avec nos liens de navigation. Ces liens de navigation renverront à nos points de vue. Nous nous dirigeons juste en dessous de notre niveau 1 . Les éléments de navigation. Il s'agit d'une série de liens relatifs. La classe de lien que nous associerons très bientôt à notre CSS. Les deux attributs. Ce sera le lien d'accueil, afin que nous puissions créer un lien vers la barre oblique et le texte d'affichage de la page d'accueil. Dupliquez cela trois fois de plus. La suivante concerne le menu, qui renvoie vers /menu. La dernière consiste à créer un lien vers l'administrateur sous la navigation et à placer le titre de niveau 2 avec le texte de la pizza numéro 1 . Sauvegardons-le et vérifions-le. Tout fonctionne. Nous avons maintenant l'en-tête de l'application en haut , puis nous devrions voir le contenu de l'affichage du routeur juste en dessous. Rafraîchir. Voici notre rubrique de niveau 1. Nous avons nos liens, nous avons le titre de niveau 2, mais nous avons toujours le contenu de cette page à côté. Le contenu dans lequel nous voulons qu'il s'affiche, mais nous n'avons pas le style requis. Cela se produit en raison du style qui est configuré par défaut dans notre projet VP. Nous pourrions le supprimer et utiliser le nôtre. Dans la barre latérale. Accédez au dossier des ressources, contient différentes feuilles de style. Supprimons le fichier base.css. Nous pouvons également supprimer le logo, mais nous ne pouvons pas utiliser ce fichier CSS principal, mais nous allons effacer le contenu et ajouter le nôtre. Sélectionnez tout le contenu et supprimez ce fichier. Il est enregistré dans le navigateur. Il s'agit de notre section d'en-tête. Maintenant au sommet. Maintenant, j'ai le contenu de la page juste en dessous ou nous pouvons également basculer entre le contenu de cette page avec ces liens d'en-tête. 8. Itinéraires nommés: Comme nous venons de le découvrir à l'intérieur du lien du routeur, nous avons créé des liens vers différentes pages présentant ces deux attributs. Puis à l'intérieur, placé dans une URL codée en dur vers laquelle créer un lien. Cela fonctionne très bien, mais nous avons également quelque chose appelé routes nominatives. itinéraire du nom peut être un avantage si nous utilisons le même lien plusieurs fois. Imaginez que notre projet contienne de nombreux liens vers cette page de menu, mais qu' nombreux liens vers cette page de menu, à l'avenir, si nous voulions changer cette URL du menu à barres obliques pour en faire pizza avec barre oblique directe, nous devrons modifier tous ces liens manuellement. Nous pouvons également créer un lien vers le nom que nous lui avons donné dans le fichier du routeur, accédant ainsi au routeur dans le fichier index.js. N'oubliez pas que chacun de ces liens porte un nom spécifique. Nous pouvons le transmettre sous forme d'objet, au lieu de la barre oblique, en plaçant les accolades pour créer un objet. Le nom de propriété, qui est égal à domicile. Comme pour tout autre attribut View Js, si nous y insérons des données dynamiques, telles que notre nom, nous devons également les placer entre les deux points, qui sont une liaison en v pour les rendre dynamiques. Cela indique à un routeur de visualisation qu'il ne doit pas être lu comme une chaîne de texte, mais qu'il doit plutôt rechercher nom que nous avons dans notre fichier de routeur. Nous pouvons également le faire avec le reste des liens. Copiez-le et nous pourrons le placer en haut de notre titre. Le second. C'était pour notre MenuLink, qui correspond au nom contenu dans le fichier de notre routeur. Le numéro trois. C' était le AboutLink. Enfin, le AdminLink. Enregistrez-le et accédez à notre projet. Il devrait être automatiquement mis à jour puisque nous utilisons Vite pour notre serveur de développement. Cliquez sur tous les liens et tout fonctionne toujours comme avant, mais maintenant, nous utilisons ces noms de routes. 9. Routes imbriquées: Notre configuration actuelle permet une structure de routeur comme celle-ci. Nous avons nos RouterLinks dans l'en-tête, puis nous avons remplacé le contenu de ces vues là où nous le voulions en utilisant le RouterView. Cela conduit à une structure d'URL assez simple. Nous aurions notre URL principale et chaque vue ajouterait à la fin le nom de admin, menu ou about, par exemple. Mais parfois, notre structure peut avoir besoin d'aller encore plus loin. L'une de ces vues peut également nécessiter des liens et un emplacement pour afficher le contenu. page « À propos de nous » de nos projets en est un exemple. Sur la gauche se trouve la vue À propos de nous, que nous pouvons placer dans le contenu de notre choix. De plus, nous pouvons également fournir des liens supplémentaires, comme nous le voyons ici, avec l'historique, livraison et les emplacements. Sur la droite, nous avons la structure souhaitée, qui serait la vue À propos de nous, puis les liens imbriqués relatifs à l'historique, livraison et aux emplacements suivants. Pour structurer cela, nous devons à nouveau utiliser le routeur de vue à l'aide des RouterLinks et du RouterView pour placer le contenu sur la page À propos de nous exactement là où nous le souhaitons. Passons au projet et nous pouvons commencer à mettre les choses en place. Ces sections d'historique, de localisation et de livraison que nous venons de voir seront toutes des composants entre lesquels nous pourrons basculer. Configurons-les dans le dossier des composants. Nous avons déjà cette configuration, alors créez un nouveau fichier, et celui-ci sera Delivery.vue. La prochaine, ce sera History.vue. Ensuite, le suivant concerne les emplacements, tous avec l'extension .vue, et nous pouvons également supprimer les composants dont vous n'avez pas besoin, savoir TheWelcome.vue, déplacer celui-ci et WelcomeItem. Bien. Passons maintenant à nos trois nouveaux composants, et nous pouvons ajouter une structure de base. Nous avons besoin du modèle et chacun de ces trois composants sera assez simple. Nous allons simplement créer un emballage. Nous ajouterons un titre en haut, une image et un peu de texte aléatoire. Le div, regardez la classe C de info_block. Cela sera ajouté à ces trois nouveaux composants, h3. Je vais utiliser les icônes de tilde et voici Delivery Info. Ensuite, une source d'image. Passons au dossier des ressources où se trouvera notre dossier d'images , puis à l'image que vous voulez se trouve le fichier box.jpg. Encore une fois, vous pouvez utiliser vos propres images si vous le souhaitez. Remplacez simplement l'un d' entre eux que vous souhaitez. Le texte alternatif, pizza dans la boîte. Puis aussi une classe de info_img. Juste après l'image, nous ajouterons du texte dans les éléments p, et vous pourrez le remplacer par le texte de votre choix. Mais pour simplifier, je vais juste ajouter du texte aléatoire de lorem ipsum. Si vous utilisez Visual Studio, vous pouvez simplement taper le mot lorem, puis appuyer sur « Entrée ». Cela nous donnera un texte factice que nous pourrons placer dans notre projet. Pour que les choses restent cohérentes, copions tous ces contenus, puis entrons dans l'historique. Collez-le et tout ce que nous avons à faire ici est de changer le titre de livraison en historique. L'image, celle-ci, c'est le chef image.jpg. Le texte alternatif du chef préparant une pizza. Faites une sauvegarde. La question suivante portait sur les locations. Collez à nouveau le contenu et modifiez le titre. L'image de celui-ci est constituée de tableaux. Modifiez également le texte alternatif. Voici les tables d'extérieur. Bien. Ce sont les trois composants que nous utiliserons pour passer l'autre dans la vue à propos et c'est ce que nous allons examiner ensuite. 10. Les composantes de vue et d'enfant: Passons maintenant à la page À propos où nous pouvons désormais utiliser un routeur pour basculer entre nos trois nouveaux composants. Nous avons également besoin d'une structure et d'un contenu sur cette page, ainsi que des liens du routeur et de la vue du routeur. Supprimons le titre du niveau 3 et placez-le dans un div avec la classe about. Ce sera l'emballage de ces composants, puis nous les placerons dans différentes sections. La partie supérieure, si nous allons à peu près, sera placée en deux zones. Si nous passons à la vue « à propos », elle sera divisée en deux sections. La section supérieure sera une introduction propos de cette page où nous trouverons quelques textes sur la pizza, l'histoire, que nous placerons dans une image, puis en dessous, nous ajouterons une deuxième section qui contiendra nos liens de routage pour basculer entre nos composants Freedom. la première section, avec la classe d'intro, et imbriquée à l'intérieur, nous aurons deux choses. Tout d'abord, il y a un div, et ensuite, l'image. Le div va contenir le texte, puis nous ajouterons l'image juste en dessous, puis nous ajouterons une nouvelle section en bas, et celle-ci contiendra nos liens. Commençons par ce premier div en lui donnant une classe de texte d' information (le trait de soulignement entre chaque mot). Rubrique de niveau 3 avec le titre de pizza de qualité depuis 30 ans. Allons voir ça. Il y a notre titre, puis en dessous de notre titre de niveau 3, placez en p des éléments avec le texte uniquement des ingrédients de la meilleure qualité dans une atmosphère conviviale. voilà, placés dans une classe afin pouvoir ajouter du CSS plus tard à du texte d'information. Ensuite, l'image. Tout d'abord, une nouvelle classe pour le style de info_image ou img. La source se trouve dans le dossier des ressources où se trouve notre dossier d' images, et celle-ci est dirigée vers le fichier calzone.jpg. L'ancienne image en gros plan du texte Calzone. Nous y voilà. Il s'agit de la section supérieure maintenant terminée. Bien sûr, nous allons bientôt l' améliorer un peu avec un peu de style, mais pour l'instant, passons à notre deuxième section, qui sera consacrée à nos liens. Cela nécessite une classe d'emballage plus d'informations, un titre de niveau 3, et cela signifie que vous devez cliquer sur les liens ci-dessous pour plus d'informations. Ensuite, nous pouvons commencer à construire nos liens dans les éléments de navigation HTML, liste non ordonnée. Chacune de ces liaisons sera placée à l'intérieur de la liaison du routeur. Chacun aura la classe de lien, mais notre style. Nous utilisons les deux points parce que nous allons dynamiser les deux attributs en les plaçant dans un objet, et cet objet va pointer vers le nom, que nous allons supposer attribuer à chacun de ces composants. Ce premier sera le lien vers l'historique et le texte d'affichage de notre histoire. Dupliquons cela deux fois de plus. Le second sera pour le lien de livraison. Un texte de livraison. Le numéro 3 sera le lien de localisation. N'importe quel texte de lieux. Bien. C'est tout ce dont nous avons besoin, maintenant nous avons nos liens gratuits dessous de toutes nos informations en haut . Allons voir ça. Accédez à la page À propos. Le contenu disparaît, peut-être simplement parce que nos noms ne correspondent pas, parce que nous ne l'avons pas encore créé. Passons simplement à la console et nous pourrons vérifier cela. Notre nom ne correspond pas, alors passons au routeur et faisons-le maintenant. Le routeur index.js. Nous devons d'abord importer nos trois composants, à savoir l' historique, les emplacements et la livraison. En haut, importez la livraison, cette fois dans le dossier des composants, le composant est delivery.vue. Dupliquez ceci deux fois de plus. La prochaine concerne l'histoire. Le dernier concerne les emplacements. Comme pour tous nos autres itinéraires, nous devons ajouter ces trois composants à un chemin. Mais n'oubliez pas que le chemin de ceux-ci sera imbriqué dans le lien À propos, donc c'est ce que nous voulons. En fait, nous pouvons simplement supprimer le second environ. Nous avons le nom du composant, c'est à peu près pour pouvoir simplement supprimer celui qui a été placé par défaut. Nous avons ce lien À propos et ce que nous voulons, c'est le chemin à suivre, puis la barre oblique, nous voulons les lieux, livraison et aussi l'historique. Comment s'y prendre ? Eh bien, actuellement, la barre oblique concernant le lien ne pointe que vers un seul composant. Nous pouvons également imbriquer plusieurs composants en ajoutant la propriété réservée aux enfants. Pour la propriété children, étant donné que nous liens vers plusieurs composants, doit être placée à l'intérieur d'un tableau. Chaque tableau contient un objet qui est structuré exactement comme chacun de ces itinéraires. Nous allons donc insérer le chemin, le nom et les composants. Pour que le premier soit lié à l'histoire, nous plaçons le nom du composant dans le chemin de l' histoire. Ce nom de composant doit correspondre exactement à celui que nous avons placé dans les liens de notre routeur. J'ai un lien vers l'historique, un lien de livraison et un lien vers les emplacements. Celui-ci est pour le lien vers l'historique. Ensuite, les composants historiques. Séparez-les par une virgule. Fermez ça. Séparez-les par une virgule et placez-les sur leur propre ligne séparée. Dupliquons ceci, copiez-collez ceci deux fois de plus. Le second concerne la livraison, lien vers le lien de livraison sur le composant de livraison. Ensuite, les emplacements. Essayons ça. Nous devons accéder à la page À propos de nous et ensuite vérifier exactement à quoi cela ressemblera. Actuellement, nous sommes sur une barre oblique, essayons nos liens en bas, nous avons l'historique. Nous parlons maintenant de l'historique des barres obliques, de la livraison, cela est ajouté à la fin et il en va de même pour les sites. Une chose que vous pensez peut-être, c'est que nous avons actuellement une barre oblique que nous avons placée à l'intérieur de ce chemin ici, puis nous avons également des emplacements de la barre oblique vers l'avant. Tout d'abord, lorsque nous avons configuré les itinéraires pour les enfants, nous n'avons pas ajouté de barre oblique avant chacun de ces chemins. Eh bien, si nous le faisions, il sera traité comme un chemin racine. Voyons exactement ce que nous entendons par là. Si nous ajoutons la barre oblique à chacune d' entre elles puis que nous accédons à la section À propos. Désormais, au lieu d'avoir une barre oblique, si nous cliquons sur l'un de nos liens, l'URL complète sera remplacée par ce lien vers l'historique de livraison ou les localisations. Mais comme nous voulons les ajouter à la fin du lien À propos, nous pouvons simplement les utiliser sans la barre oblique. Enfin, pour voir le contenu ci-dessous de chacun de ces composants, nous devons ajouter une vue du routeur. Accédez à la vue À propos, puis juste en dessous de la navigation et placez la vue du routeur. Ceci et vérifions-le. Nous avons la section supérieure , puis la zone des emplacements en bas, l'historique et aussi la livraison. 11. Vues nommées: Cette page À propos de nous comporte trois éléments entre lesquels nous pouvons basculer. Comme nous le savons, nous pouvons cliquer sur l'historique, les emplacements et également les composants de livraison. Comme nous l'avons déjà vu, nous pouvons utiliser des composants et les réutiliser dans n'importe quel fichier de votre choix. Par exemple, dans app.vue, nous pouvons suivre la méthode traditionnelle en important un composant, puis le rendant dans le modèle. Une autre méthode de rendu d'un composant consiste à utiliser le routeur Vue. Jusqu'à présent, nous avons utilisé les RouterViews pour afficher une page telle que celle-ci juste ici. Il en va de même dans la vue ci-dessus, que nous venons d'ajouter dans la vidéo précédente, nous avons utilisé le RouterView. Cela peut afficher la page de niveau supérieur ou n'importe quel composant secondaire, comme nous le faisons ici avec la page à propos. Nous pouvons également insérer autant de RouterViews que nous le souhaitons et chaque RouterViews supplémentaire agira comme prise avec différents composants. Si vous deviez insérer d'autres RouterViews, nous devons également leur donner des noms afin que le routeur sache quels composants afficher dans chacun d'eux. Supposons que nous souhaitions afficher des informations supplémentaires en bas de la page d'accueil, telles que les composants de livraison et d'historique. Nous avons ici un développeur. La clé ici est que nous avons deux RouterViews supplémentaires. Chacun d'entre eux possède un nom attributs qui seront importants dans un instant. Notez que le RouterView en haut n'a pas de nom. Il s'agit d'un emplacement par défaut. Cette valeur par défaut, ainsi que les deux noms sont définis dans la page d'index du routeur. La gauche montre ce que nous avons actuellement configuré pour la page d'accueil à l'aide d' un seul composant. Cependant, lorsque nous avons plusieurs RouterViews avec des noms, nous devons le modifier pour utiliser un objet de composants, comme nous le voyons sur la droite. premier est l'emplacement par défaut, qui est le RouterView sans nom. Ensuite, les deux noms suivants correspondront aux deux noms que nous avons donnés aux RouterViews. Accédez au projet et nous pourrons le configurer. Passez au composant principal de niveau supérieur, qui est le fichier app.vue, puis juste en dessous du RouterView, nous placerons dans un div. Ce div, le style et la mise en page auront la classe de wrapper de blocs d'informations. Ensuite, à l'intérieur, nous pouvons placer un RouterViews supplémentaire pour afficher n'importe lequel de nos composants. Pour cet exemple, je vais afficher la livraison ainsi que les composants de l'historique dans cette page principale. Placer un RouterView, les attributs du nom, qui seront égaux à la livraison. Copiez et collez ceci. Le second sera consacré à l'histoire. Nous souhaitons uniquement que ces deux composants s'affichent sur la page d'accueil. Pour cela, passons à la page d'index des routeurs et passons à la section d'accueil. Actuellement, le routeur domestique n'affiche qu' un seul composant de la vue d'accueil. Mais pour afficher plusieurs composants, nous pouvons modifier le composant pour qu'il ait un s à la fin. Supprimez-le, transmettez un objet. Comme nous l'avons vu avec les diapositives, nous devons ajouter la vue par défaut, qui est celle qui est affichée dans la vue du routeur sans nom. Celui-ci est la vue d'accueil, le nom de la livraison. Cela affichera les composants de livraison et le suivant sera destiné à l'historique. Juste pour récapituler, nous avons le composant par défaut, qui est la vue d'accueil à l'intérieur de l'application. Cela s'affichera dans la vue du routeur, qui n'a pas de nom. Ensuite, nous avons les composants de livraison et d'historique, qui correspondront au nom de nos deux vues de routeur supplémentaires. Maintenant, View Router sait quels composants afficher à chaque emplacement. ces deux composantes de la livraison ont déjà histoire, ces deux composantes de la livraison ont déjà été importées en haut de la page, donc tout devrait maintenant être prêt à partir. Enregistrez ce fichier, accédez à la page d'accueil. Du haut, nous avons cette entrée de niveau 3, que nous pouvons voir de l'intérieur de notre champ de vision. Ce que nous avons ici est ce titre, puis ci-dessous, nous avons nos composants de livraison et l'historique. Juste pour confirmer qu'ils ne s' affichent que sur la page d'accueil, nous pouvons accéder aux liens supplémentaires et nous ne devrions pas voir ces composants s'afficher. Pour terminer, revenons à notre application app.vue et ajoutons un petit style pour les faire apparaître côte à côte sur la vue plus grande , puis empilées verticalement sur le plus petit écran. App.vue. Nous avons cette classe de wrapper de blocs d'informations. Copions ceci dans la section style. Type d'affichage de Flex. Nous allons commencer par la vue sur petit écran, ce qui signifie que nous devons modifier la direction de flexion pour qu'elle soit en colonne. Cela permettra de garder notre contenu empilé verticalement sur le plus petit écran. Pour que cette modification soit côte à côte, nous devons modifier la direction de flexion pour qu'elle soit alignée sur un écran plus grand. Nous pouvons le faire en ajoutant une requête multimédia. En fait, nous pouvons également supprimer tout le reste du style. Je n'ai pas besoin de tout ça. Configurez toutes les requêtes multimédia avec nos médias. Nous voulons que cela cible les écrans d'une largeur minimale de 900 pixels. Prenons notre emballage de blocs d'informations. Nous allons modifier la direction de flexion pour qu'elle soit égale à la ligne. Sur les écrans plus grands (900), vous les placez dans une rangée , puis cela descend sur le plus petit écran. Il s'agit d'une autre méthode d' utilisation des composants plutôt que la méthode traditionnelle d'importation d'un composant dans un autre fichier à afficher. Nous pouvons également autoriser le routeur Vue à les placer dans une vue du routeur. 12. Projet UI- Section Intro: Cette nouvelle section est consacrée à l'introduction contenu dans notre application. Nous allons créer toute la structure dont nous avons besoin en créant différentes pages et composants. Plus tard, dans les prochaines sections, nous les dynamiserons en insérant diverses informations provenant d'une base de données, telles que nos commandes, nos utilisateurs et nos pizzas. Mais ensuite, nous allons commencer par créer les composants du menu. 13. L'interface utilisateur du menu: La page d'affichage du menu, que nous allons maintenant créer, sera divisée en deux sections. Sur la gauche, nous allons inclure le menu, qui inclura toutes les pizzas dans une liste. Ensuite, dans la section suivante, nous créerons la section panier sur la droite, qui listera tout le contenu que l'utilisateur ajoute au panier. Passons aux composants de notre vue de menu et commençons à travailler dessus Dans les vues dans la vue du menu. Nous allons déplacer le titre du niveau 3 pour le moment, puis créer un div, qui servira de wrapper à nos deux sections. Il s'agit de la classe de wrapper de soulignement de menu. Ensuite, deux autres divs, qui seront imbriqués à l'intérieur. La première concernera le contenu sur le côté gauche, qui sera notre menu. Je vais lui donner la classe de menu, puis créer un deuxième div, qui sera destiné à notre panier. Donne-nous la classe de basket. Passez ensuite à la section du menu et placez-la dans un titre de niveau 3. Utilisez les utilitaires pour tous les textes d'authentiques pizzas faites à la main. Pour notre deuxième division, qui est le panier. Encore une fois, un niveau 3 en tête des utilitaires. Celui-ci est pour le panier. Comme mentionné précédemment, pour l'instant, nous allons simplement travailler dans cette section de menu, qui sera un tableau HTML. Cette table ne contiendra qu' une seule pizza pour le moment. Mais nous y reviendrons lorsque nous commencerons à travailler avec la base de données Firebase afin de pouvoir parcourir en boucle toutes les pizzas stockées, puis les afficher dans ce tableau. Pour l'instant, nous allons configurer notre modèle indiquant à quoi cela ressemblera à l'intérieur du corps du tableau. Ensuite, à l'élément TR pour la première ligne de notre tableau. Tout le contenu de notre pizza sera placé dans cette seule rangée du tableau. Les cellules saisissent certaines données du tableau. Ce sera pour le nom de la pizza. Le nom de la pizza sera placé à l'intérieur des étiquettes robustes et figurera dans n'importe quel nom de pizza, tel que Margarita. dessous de cette première ligne du tableau, En dessous de cette première ligne du tableau, nous allons ajouter une deuxième ligne. Celui-ci contiendra la description dans les données du tableau. Les petites étiquettes et la description d'une délicieuse pizza à la pâte de tomates garnie de mozzarella. Faites défiler l'écran vers le bas et juste cette ligne du tableau pour ajouter une troisième ligne. Celui-ci concernera les options disponibles. Pour chaque pizza, nous allons créer deux tailles différentes , une de neuf pouces et une de 12 pouces. Plus tard, au cours de ce cours, nous aborderons cette question en boucle et le ferons à la fois pour les pizzas de 12 et de 9 pouces, mais pour l'instant, comme nous ne faisons que créer notre structure et ajouter quelques exemples de données, je vais simplement les placer dans une seule taille, qui sera pour la pizza de 9 pouces. Cela sera suivi par le prix. Ensuite, la troisième section sera un bouton qui sera utilisé pour ajouter la pizza au panier. Placez-le dans un bouton HTML à l'intérieur. Type de bouton. Ensuite, pour sortir, le symbole plus utilisera une entité HTML, qui est le code des esperluettes, le hachage 43 et un point-virgule. Le navigateur nous permet de voir à quoi cela ressemble. Nous avons notre première ligne, qui est le titre, la deuxième ligne, qui est une description et la troisième section sera notre option. Comme mentionné précédemment, nous passerons en revue cette troisième section, qui nous présentera nos différentes options. Voici notre table pour notre pizza, maintenant prête . Ensuite, dans la vidéo à venir , nous passerons à la section suivante, qui est le panier. 14. L'interface utilisateur du panier: la continuité de la vidéo précédente, où nous avons ajouté la section de menu sur la gauche, nous allons maintenant passer à la zone des paniers. Ce panier sera également un tableau présentant les pizzas que l'utilisateur sélectionnera en cliquant sur le bouton Ajouter juste ici. Suivi d'une commande, d'une section complète et d'un bouton pour passer la commande. À l'avenir, ce bouton de commande sera lié à notre code JavaScript pour ensuite transférer cette commande dans notre base de données. Pour le tableau, les sections contiendront une seule ligne. Cette ligne comportera la quantité et un bouton chaque côté pour augmenter ou diminuer la quantité. Vous aurez le nom de la pizza sélectionnée ainsi que le prix. Sous notre rubrique de niveau 3 pour les paniers, créez un div. Ce div contiendra la structure de tous les paniers, qui sera un tableau tout en haut, puis le texte, qui sera le total de la commande. Mais maintenant, entrez la valeur que vous souhaitez. Cela sera mis à jour et calculé avec JavaScript. Ensuite, un bouton qui sera chargé ultérieurement de passer la commande. Un peu de texte convient pour le moment. Voyons à quoi cela ressemble. Voici l'un de nos contenus. Nous pouvons maintenant passer à la section du tableau. Le tableau contiendra une seule ligne de tableau. Dans la première cellule de données du tableau, il y aura deux boutons et également la quantité. Nous aurons la quantité au milieu, puis un bouton de diminution sur la gauche et un bouton d'augmentation sur la droite. Le premier bouton avec la classe quantity_button, le type, qui est également bouton, puis l'entité HTML, qui correspond aux esperluettes, le hachage 8722 suivi du point-virgule. Cela nous donnera le symbole négatif, puis nous ajouterons la quantité, puis à droite un bouton avec le symbole plus. Pour la quantité qui se trouvera au milieu, placez-la dans n'importe quelle quantité pour le moment. Copiez notre bouton et collez-le en bas et remplacez simplement le numéro de code par 43. Les dates figurant sur ces boutons seront utilisées pour augmenter et diminuer cette valeur. Avant de l'ajouter au panier, nous mettrons également à jour le total de la commande au fur et à mesure que nous modifierons les choses. Il s'agit de notre première donnée tabulaire. Le second portera sur le nom de la pizza et aussi sur la taille de l'option et le troisième. C'est le prix de la pizza. Enregistrez et transférez dans le navigateur. Ce sont toutes les informations dont nous avons besoin pour le panier. Maintenant que tout ce contenu est en place, nous allons maintenant envisager d'ajouter un petit style pour le rendre un peu plus beau et améliorer la mise en page. 15. Polices et styles de base: À l'intérieur de notre projet, nous avons ce fichier main.js. Il s'agit du fichier qui est responsable de la création de notre application. Nous l'importons depuis la bibliothèque Vue. Nous importons également les principaux composants de l'application, dont celui-ci se trouve ici. Il s'agit du composant d'entrée principal et tout le reste sera imbriqué à l'intérieur. Nous transmettons ce fichier pour créer une application, puis nous montons l'application dans le DOM avec l'identifiant de l'application. plus, il inclut également une importation haut avec un fichier main.css, qui se trouve à l'intérieur de ce dossier d'actifs. La façon dont nous structurons notre style dépend entièrement de nous lorsqu' il s'agit d'une application Vue. Mais je vais l'utiliser comme une sorte de fichier de style général contenant des fichier de style général contenant styles de base tels que des polices et des réinitialisations. Nous pouvons toujours ajouter des composants spécifiques ou un style de page dans des composants individuels des fichiers Vue. Mais tout d'abord, nous devons choisir les polices que nous allons utiliser pour le projet. Pour cela, je vais utiliser les polices de Google. Rendez-vous donc sur fonts.google.com. Je vais utiliser deux polices distinctes. L'un d'eux sera destiné à nos titres et à notre titre, et l'autre au texte général. Cliquez donc sur Rechercher. Le premier s'appelle Marck script et celui-ci s'appelle M-A-R-C-K, et c'est celui pour nos en-têtes et notre titre. Sélectionnez donc ceci. Faites défiler vers le bas. Celui-ci ne contient que les textes habituels, ce qui est bien. Cliquez sur l' icône plus pour l'ajouter à nos familles sélectionnées, ainsi que celle-ci. Cherchons notre deuxième. Revenons à la recherche. Pour le texte général, je vais utiliser Roboto. C'est celui dont nous avons besoin ici. Passons à une sélection de polices. Donc 300, qui est un texte léger, le 400, qui est un poids normal, et aussi un 500. Ajoutez les trois à la famille. Cliquez sur ces familles sélectionnées et nous aurons les informations dont nous avons besoin pour importer dans notre projet. Nous avons donc un lien que nous pouvons utiliser ou nous pouvons utiliser la syntaxe d'importation. Pour l'importer, allons le dossier Assets et dans le fichier main.css. Ce champ est actuellement vide. Nous pouvons ajouter cette règle d'importation. Copiez donc tout ce qui se trouve à l'intérieur des balises de style. Collez ceci dedans. Comme nous l'avons déjà vu dans le fichier principal dot js, nous avons l'identifiant de l'application, que nous pouvons sélectionner comme wrapper principal pour notre projet. Sélectionnez donc ceci avec le hachage. À l'intérieur, nous pouvons définir la famille de polices comme Roboto en copiant cette deuxième ligne ici. Ce serait notre texte général et nous le remplacerons par le script Marck lorsque nous en aurons besoin. Entrez dans le corps. Nous ajoutons simplement des styles généraux à l'intérieur, vous vous souvenez ? Nous allons donc ajouter une marge pour centrer notre projet, en la réglant sur zéro en haut et en bas, ainsi que sur la gauche et la droite. Le texte de la ligne de couleur RGB, avec une valeur de 76 pour le rouge, le vert et le bleu. Juste après le corps, nous ciblerons les rubriques h1, h2, h3, h4, h5 et h6. N'oubliez pas que la famille de polices nous allons utiliser pour celle-ci est l'autre que nous obtenons des polices de Google. Copiez donc cette section, collez-la. Supprimez toute marge par défaut appliquée à l'un de nos titres avec le navigateur. Je place la couleur, qui est une valeur RGB de 76 76,76. Cela nous donne notre style de titre général, mais nous utiliserons le titre de niveau 3 à plusieurs endroits. Nous allons donc l'utiliser avec les en-têtes de page et de composants. Nous allons donc définir la taille de police pour qu'elle soit plus grande, soit 2,2 rems. Placez également une marge en haut et en bas d'un rem et zéro à gauche et à droite. Ensuite, la liste non ordonnée, les éléments UL. Réinitialisez tout espace appliqué par le navigateur, afin que la marge par défaut puisse être supprimée à zéro et que le rembourrage soit également remis à zéro. Les éléments de la liste, et en fait, les liens contenant les éléments a hériteront de la couleur. Cela supprimera cette couleur de lien violette, que nous avons par défaut dans le navigateur. Réinitialisez également la décoration de texte pour qu'elle soit nulle, ainsi que le style de liste. Cela garantira qu'aucun de nos liens ou éléments de notre liste ne soit souligné, et qu'aucun des points situés sur le côté du lien ne soit également souligné. Pour ce qui est des styles plus généraux, nous allons passer à nos éléments d' image et nous assurer que la largeur maximale de chaque image ne dépasse pas 100 %. Passons maintenant à nos cours sur nos liens routeurs Si vous vous en souvenez très tôt, nous avons ces liens nous avons ces liens tout en haut et vous pouvez déjà commencer à voir notre style prendre forme. Nous avons ces liens de menu en haut, que vous pouvez voir si nous accédons aux composants , puis à l'en-tête de l'application. Chacune de ces liaisons de routeur possède cette classe de liaison. Prenons ceci, un point puisqu'il s'agit d'une classe, une marge d'un rem pour lui donner un peu d'espacement, et nous allons également nous assurer que chacun d'entre eux change de couleur lorsque nous les survolons. Pour ce faire, nous allons à nouveau cibler notre lien. Nous allons utiliser le sélecteur de survol modifier la couleur du texte pour qu'elle prenne une valeur RGB de 161. Donc le rouge, le vert du 132 et le 132 aussi pour le bleu. Enfin, pour tous les boutons présents sur notre site, nous définirons également le style par défaut pour chacun d'entre eux. Le bouton supprimera donc l'arrière-plan, la couleur par défaut, en la réglant sur aucune. Une bordure très fine de 0,5 pixel, une ligne continue, et la couleur de cette ligne sera une valeur RGB de 202 pour chacune d'entre elles. rayon de bordure de 0,3 rems, un peu de rembourrage pour agrandir un peu le bouton. Donc un demi-rem en haut et en bas et un rem à gauche et à droite. Je dois indiquer à l'utilisateur qu'il peut cliquer sur ces boutons pour transformer le curseur en pointeur. Donc, si nous examinons notre projet, nous pouvons constater que certains d'entre eux ont pris effet. Mais n'oubliez pas qu'il ne s'agit que de styles généraux pour notre projet, et nous ajouterons des styles plus spécifiques à chacune de nos pages et composants individuels. 16. Menu et panier Styling: Ensuite, nous allons accéder au fichier d'affichage du menu et ajouter un style spécifique aux composants de cette vue . Ouvre ça. Ensuite, juste en dessous des modèles, nous ajouterons le style et ajouterons ces attributs étendus. Si vous n'avez jamais utilisé l'attribut scoped auparavant, cela signifie que tous les styles ne s'appliqueront qu'à ces composants, c'est-à-dire aux modèles que nous avons créés ci-dessus. Pour les voir en action, nous allons passer à la section du menu. Rends-le un peu plus petit. En haut, nous avons un titre de niveau 3, qui est celui-ci juste ici. Prenons ceci et définissons l'alignement du texte pour qu'il soit au centre. Cela vaut également pour notre panier. Cette section supérieure et cette section inférieure seront bientôt appliquées à gauche et à droite sur la vue d'ensemble. Mais nous allons d'abord commencer par la mise en page mobile, qui est le petit écran. Passons juste en dessous de notre h3 et disons la mise en page mobile. Pour passer d'une mise en page à l'autre, nous allons utiliser la flexbox. Si nous allons tout en haut, vous pouvez voir que ce div a la classe de wrapper de menu. Ce sera lui qui sera chargé de contrôler l'orientation de notre menu et également de notre panier. Ces deux divs sont les éléments enfants de l'enveloppe de menus. Si nous descendons et que nous sélectionnons cette option, nous pouvons utiliser la flexbox. Emballage de menus. L'écran sera le Flex. Vous pouvez voir la direction de flexion par défaut lorsque vous utilisez les zones flexibles dans une rangée. Ils seront placés côte à côte sur la page. Il s'agit de la disposition que vous souhaitez voir sur la vue plus large. Mais pour une vue plus petite, nous devons remplacer cette valeur par la direction de flexion de la colonne. Et aussi, la couleur. La couleur de police sera une valeur RGB de 80, 96 et 112. Ensuite, nous avons les deux sections qui se trouvaient à l'intérieur et que nous venons de regarder, à savoir la section menu en haut, puis la section panier. Chacune d'entre elles possède sa propre classe correspondante. Nous avons .menu et aussi .basket. Nous avons défini une couleur hexadécimale pour chacune de ces sections. Celui que je vais choisir est faf1e2. Rayon de bordure pour chacune de ces sections, petite valeur de trois pixels. La hauteur, au cas où nous n'aurions pas beaucoup de contenu, nous nous assurerons que chacune de ces sections représente au moins 100 % de la hauteur de la fenêtre d'affichage. Ensuite, un peu de rembourrage à l' intérieur de ces éléments pour vous laisser un peu d'espace par rapport au bord de l'écran. C'est la direction que nous avons pour la vue mobile. Si nous l'étendons un peu plus loin, nous voulons l' inverser pour que la direction de flexion soit une rangée. Nous pouvons le faire dans une requête multimédia, où je souhaite que l'écran ait une largeur minimale de 900 pixels. Prenez effet, s'il vous plaît. Maintenant, ce que nous allons faire, c'est récupérer la section d'emballage du menu, copier, la coller dedans. Nous avons déjà défini le type d'affichage sur Flex. Nous allons le supprimer. J'ai déjà défini la couleur. Nous allons le supprimer. Tout ce que nous avons à faire ici est de définir la direction de flexion pour qu'elle soit alignée. Ajoutez de l'espace entre les deux en justifiant le contenu. Ensuite, nous devons décider de l'espace chacune de ces sections va occuper. La section pizza aura probablement besoin d'un peu plus d'espace. Nous pouvons utiliser la direction de flexion pour nous donner plus d'espace que le panier. Pour une vue plus large, prenons la section du menu définissons la valeur de flexion sur deux. Ensuite, pour notre panier, nous définirons la valeur de flexibilité à un. Cela signifie que cela essaiera d'occuper deux fois plus d'espace disponible que la section du panier. Vous pouvez voir que cela se reflète dans le navigateur. Nous pouvons faire la différence entre ces deux sections. Nous allons ajouter une bordure à droite de ce menu pour ajouter une ligne verticale au centre. Dans le menu, définissez la bordure à droite d'un pixel, une ligne continue et la couleur RGB 202 pour chaque valeur. Nous y voilà. Nous avons presque terminé cette section, mais ce que je vais faire pour ces deux boutons , c'est supprimer la bordure, les réduire un peu. Si nous montons dans la section, nous voyons que chacun de ces boutons a la classe quantity_button. Nous pouvons le faire dans la section générale, juste au-dessus de la requête multimédia. Quantité_ btn. Supprimez la bordure. Réglons le rembourrage sur une valeur de 0,4 rems. Cela réduit désormais le rembourrage de ces deux boutons de quantité. Ensuite, nous allons continuer avec le thème du style. Nous allons ajouter du style à notre section d'en-tête. 17. Styling d'entête: Nous allons sûrement passer à l' ajout de nouveaux composants et de nouveaux éléments à notre site. Mais rapidement, juste avant de le faire, nous allons appliquer un style à cette section d'en-tête. Ouvrons la barre latérale, passons à nos composants, puis à l'AppHeader. L'AppHeader a besoin de la section de style en bas, et la section de style sera limitée à ces composants particuliers. Jetons un coup d' œil à ce que nous avons. Nous avons la classe de titre du site tout en haut. Commençons par ceci. Titre_site. Commencez par la taille de police du titre de notre site et nous opterons pour 3,6 rems. Faites-le assez grand. La couleur bleue d'Alice. Nous ne pouvons pas trop le voir pour le moment , mais très bientôt, nous allons ajouter une couleur de fond à cette section d'en-tête pour la faire ressortir encore plus. Nous allons ajouter une transformation pour faire pivoter cette valeur à une certaine valeur en ajoutant la fonction de rotation. Indiquez le nombre de degrés selon lequel vous souhaitez le faire pivoter, et il peut s'agir d'un nombre positif ou négatif. Huit degrés. Vous pouvez voir que cette valeur est désormais inclinée et vous pouvez augmenter ou diminuer cette valeur. Pour lui donner un peu d'espace par rapport au contenu ci-dessous, ajoutez une marge au bas des éléments. Allons-y pour deux Rems. Ensuite, nous pouvons récupérer notre en-tête qui est l'enveloppe de cette section complète. L'en-tête va utiliser la CSS Flexbox pour mettre en page les choses. Pour les affichages d'écran plus petits et plus grands, ces contenus seront placés verticalement dans le sens flexible de la colonne. Définissez le type d'affichage. N'oubliez pas que la direction de flexion par défaut est ligne qui se trouve de gauche à droite sur la page. Nous pouvons inverser cela pour utiliser la colonne. Pour placer le contenu au centre, utilisez la propriété flex de align-items. Nous pouvons voir que le contenu se trouve à peu près en haut et en bas de l'en-tête. Nous allons ajouter de l'espace avec une valeur de remplissage d' un rem en haut et en bas et de zéro à gauche et à droite. Pour les liens du menu, nous allons faire correspondre la couleur bleue d'Alice , puis les placer dans l'image d'arrière-plan. Car l' image d'arrière-plan pointera vers une URL qui est stockée dans notre projet. Entrons dans le dossier des ressources, dans le dossier Images, puis à l'intérieur, nous avons une image appelée main-bg. Il s'agit d'une barre oblique à points, accédez au dossier des ressources, des images, de l'arrière-plan principal. Nous souhaitons également que cela ne se reproduise pas. Comme nous avons ajouté un arrière-plan, nous souhaitons également ajouter à la propriété de hauteur et la définir comme une valeur fixe de 650 pixels. La taille de l'arrière-plan, nous allons la régler pour la couvrir. Ensuite, si nous regardons cette image dans le dossier des images, le main-bg, nous pouvons voir que cette image n'est pas centrée, elle est coupée sur le côté droit. Corrigons ce problème et revenons à notre CSS. Utilisez la propriété appelée Background Position. Mets-le au centre. Cette image sera désormais toujours centrée sur différentes tailles d'écran. Ensuite, une petite ombre technique à chacun de ces caractères d'un pixel, un pixel, de trois pixels, et la couleur à appliquer à cette ombre technique sera une valeur RGB de 20, 20, 20. La prochaine chose à faire est de passer au niveau du titre, qui est le texte du restaurant numéro 1 pour les pizzas. Nous pouvons le récupérer avec le sélecteur h2 et ajouter un peu d'espacement. Propriété de marge de deux rems en haut et en bas et de zéro à gauche et à droite. Une couleur de texte blanc antique et la taille de police de deux rems. Bien. Voici notre style maintenant terminé pour l'en-tête. Notre site est un peu plus beau. Ensuite, nous allons passer à la page d'administration et créer un nouveau formulaire de pizza. 18. Admin : ajouter un nouveau formulaire de pizza: Dans notre vue d'administration, très bientôt, cela sera divisé en plusieurs zones. Il est judicieux d' organiser toutes ces zones en différents composants et de placer ces composants dans un dossier d'administration. Passons à la barre latérale. Dans les composants, et à l'intérieur d'ici. Créez un nouveau dossier avec cette nouvelle icône de dossier appelée admin, et nous regrouperons tous les composants liés à l'administration. À l'intérieur, créez un nouveau fichier. Celui-ci sera le premier élément pour notre administrateur, qui sera un formulaire pour créer une nouvelle pizza. Nous l'appellerons NewPizza.vue. Créez le modèle dont nous avons besoin pour cette section et le wrapper de section. Cela aura la classe admin_section. Elle sera divisée pour avoir une section d'en-tête avec un titre et également le formulaire pour ajouter notre nouvelle pizza. L'en-tête de cette section, la classe de admin_section_header, h3. Texte de l'ajout d'une nouvelle pizza. Avant d'aller plus loin avec tout autre contenu, voyons à quoi cela ressemble dans le navigateur, mais nous devons d'abord l'importer dans notre interface administrateur. Accédez aux vues et à la vue d'administration. Tout en haut, placez-le dans notre script pour importer notre fichier. Ce que nous allons faire ici, c'est ajouter un attribut appelé setup. Nous reviendrons sur cette configuration très bientôt dans ce cours, mais pour l'instant, nous allons importer le composant que nous avons créé, qui s' appellera new pizza. Je vais l'importer depuis le répertoire @ pour accéder à l'itinéraire, au dossier des composants, à l'administrateur et au nom de fichier de la nouvelle pizza. Nous avons atteint le niveau 3. Pour l'instant, nous pouvons importer nos composants et le placer ci-dessous. Instantanément, dès que nous aurons enregistré, nous verrons que cela est ajouté à la section d'administration Accédez donc au lien d'administration et voici le titre que nous avons ajouté aux nouveaux composants de la pizza. En continuant sur le titre et en dessous, créez notre formulaire. Nous supprimerons l'action car elle est alimentée en gérant tous les JavaScript nécessaires. Chacune de nos sections, comme le nom de la pizza, la description et les différentes options, était entourée d'un style div. Ce div aura la classe form_group. Ensuite, il y aura une étiquette et une entrée. L'étiquette, le texte du nom, l'entrée. Le premier nom de la pizza aura le type de texte et l'identifiant du nom qui correspondront à notre étiquette. Copions cette section div. Nous allons le dupliquer et le coller ci-dessous. Le second sera pour la description. Pour celui-ci, nous n'avons pas besoin de saisie, nous allons utiliser une zone de texte, nous pouvons donc avoir plusieurs lignes de texte ou une longue description. Nous allons déplacer tout son contenu à l'intérieur d'ici. Nettoyons cela et ajouterons les lignes dont nous avons besoin. Réglons la valeur par défaut sur cinq ainsi qu'un identifiant de description, qui correspondra à l' étiquette juste au-dessus. Enregistrez ceci, et nous pouvons voir que nos entrées apparaissent maintenant à l'écran. Ensuite, nous allons créer deux nouvelles sections , destinées à nos première et deuxième options de pizza. Cela va nous donner deux options différentes pour la taille de la pizza. Le texte à l'intérieur des éléments P les transformera en éléments forts pour les rendre plus gras. Option 1. Ensuite, nous pouvons continuer avec nos éléments de formulaire. Nous allons copier le groupe de polices d'avant, le plus haut, l'écrire dedans, et celui-ci sera pour la taille. Ce sera en pouces. L'étiquette de la taille 1. Le type de texte est tout à fait correct, et nous allons également faire correspondre son identifiant à l'étiquette. dessous, nous devons également créer un nouveau groupe de formulaires, et celui-ci est toujours lié à l'option 1, et c'est le prix de cette taille particulière. Le texte du prix, l'étiquette du prix 1, l'identifiant correspondant. Ensuite, nous dupliquerons soigneusement cette section en ce qui concerne le prix , la taille et le texte. Copiez ceci. Collez-le ci-dessous pour créer une deuxième section. Celui-ci est pour l'option 2. Modifions les noms de propriété de chacun de ces attributs pour qu'ils soient de taille 2. Pareil pour le prix. Enregistrez ceci et passez au navigateur. Nous avons maintenant deux sections pour remplir les tailles. La dernière section sera consacrée à un bouton permettant de soumettre ce formulaire. Encore une fois, placez-le dans un div avec la classe du groupe de formulaires. Cela permettra de maintenir la cohérence du style. Ajoutez un bouton avec le texte d'ajout. Vous allez maintenant ajouter un nouveau formulaire de pizza maintenant rempli. Nous y reviendrons plus tard pour améliorer le style. Mais ensuite, nous allons passer à un autre composant d'administration, qui consiste à afficher les pizzas. 19. Admin : Composant de pizzas: Nous avons donc ajouté de nouveaux composants à pizza dans l'interface administrateur. Le prochain composant d'administration que nous allons créer est un composant pizzas, qui affichera toutes les pizzas disponibles dans le menu. Je vais accéder à la barre latérale et créer à nouveau un nouveau fichier Vue.js dans l' administrateur pour que tout reste organisé. Ce sera simplement Pizzas.vue. Comme toujours, fermez la barre latérale et créez un modèle pour stocker notre code HTML. Une section, qui aura la classe admin_section. Jetez également un œil au nouveau composant pizza que nous avons créé précédemment. Cela correspond également à cette même section. Nous pouvons donc appliquer le même style CSS. Cela comportera également un en-tête. Encore une fois, faites correspondre dans cet en-tête juste ici le même nom de classe. La classe était donc admin_section_header. Cela nous donnera un style cohérent pour tous nos blocs d'administration, titre de niveau 3 avec le texte du menu. C'est donc tout ce dont nous avons besoin pour la section d'en-tête. Passons en dessous de l'en-tête et créons notre tableau, qui listera toutes les pizzas disponibles dans le menu. La section du fil, ou l'en-tête du tableau, placée dans une rangée, puis le septième élément pour créer vos deux en-têtes. Nous allons donc faire en sorte que cela reste assez simple. Tout ce que nous faisons est d'ajouter un nom de pizza sur la gauche, puis sur la droite de la table, nous ajouterons un bouton pour supprimer cette pizza du menu. Ainsi, le titre de la pizza et le second seront le texte de suppression du menu. Je vais configurer une fonction plus tard pour ce faire. Sous le fil, créez la section du corps. La première rangée, qui se trouvera en dessous de nos rubriques. La première chose qui se trouve ici est le nom de la pizza dans les éléments de données du tableau, et nous allons simplement ajouter un exemple de texte à l'intérieur pour nom de notre pizza et nous le lierons à notre base de données plus tard. Ensuite, la cellule suivante à l'intérieur des données du tableau est un bouton qui va supprimer la pizza du menu. Le bouton possède le type de bouton et également une classe pour notre style de btn_remove. Ensuite, à l'intérieur d'une entité HTML, qui sera la croix. Il s'agit de l'esperluette, le mot des temps, suivi d'un point-virgule. C'est tout le contenu dont nous avons besoin pour le moment et plus tard, nous créerons une boucle pour parcourir toutes les pizzas disponibles et dupliquer chacune de ces lignes. De plus, comme pour les nouveaux composants de pizza, nous devons les importer dans la vue d'administration, ici. Dupliquez ceci et celui-ci sera pour toutes les pizzas. Il se trouve dans le même dossier d'administration. Nous changeons donc le nom, et je vais le mettre en bas du fichier dans le navigateur. Voici notre table avec notre seule rangée et notre pizza unique. Ensuite, nous allons créer les derniers composants d'administration pour répertorier toutes les commandes des clients. 20. Admin : composant des ordres de liste: Les derniers composants d'administration dont nous avons besoin seront utilisés pour répertorier les commandes en cours. Encore une fois, j'ai juste ces composants dans le dossier d'administration pour que tout reste organisé. Créez un nouveau fichier et celui-ci sera le orders.vue. Cela suivra également un modèle similaire aux précédents : nous créons un modèle, nous créons une section avec la section de classe d'administrateur, nous créons un en-tête, puis un tableau pour répertorier toutes les commandes. Commençons par le modèle et la section tout en haut. C'est notre emballage. La section doit également avoir une classe d'en-tête de section d'administration. Encore une fois, cela correspond aux composants d'administration précédents que nous avons créés, tout comme l'en-tête en haut, la classe, et si je pouvais simplement utiliser le mauvais composant en haut. Copions ceci. Celle-ci doit être l'en-tête de la section d'administration et la section doit être la classe de la section d'administration. Bien. Nous sommes maintenant de retour sur la bonne voie et nous pouvons créer à l'intérieur de l'en-tête notre rubrique de niveau 3 avec le texte des commandes en cours. De plus, tout comme les composants de la pizza que nous venons de créer, plus tard, lorsque nous l' associerons à Firebase, toutes nos informations seront extraites de notre base de données. Cela signifie que ce sera dynamique. Pour l'instant, nous allons simplement saisir quelques données fictives et ajouter cinq commandes en cours augmenteront et diminueront en fonction nombre de commandes que nous avons réellement dans notre base de données. Ensuite, la section du tableau, la ligne du tableau, les balises du titre. Les commandes indiqueront l'article, qui sera le nom de la pizza. N'oubliez pas que chaque pizza a deux tailles différentes, nous devons donc également la répertorier. Nous devons connaître la quantité et le prix. Nous ajouterons entre parenthèses le mot «  total » , car il s' agira de la valeur totale, qui sera le nombre de pizzas multiplié par le prix. Ensuite, en dessous de la première ligne de notre tableau, ajoutez la deuxième ligne et, pour l'instant, nous allons passer un exemple de commande. La première cellule à l'intérieur de l' élément de données du tableau sera réservée au numéro de commande. Cette cellule contiendra également deux informations. premier est le numéro de commande réel, augmentera en fonction du nombre de commandes que nous avons, et nous ajouterons également un bouton pour supprimer cette commande de la base de données, qui sera utile une fois la commande terminée. À l'intérieur des balises fortes, nous ajouterons le numéro de commande. Passons au numéro 1 pour le moment. Le bouton, l'entité HTML, qui sera l'esperluette et les heures, suivie d'un point-virgule, et ce sera une petite croix pour supprimer de notre base de données, la classe pour le style btn_remove, ainsi que le type de bouton. Ce numéro de commande et ce bouton Supprimer figureront sur ligne indépendante, puis la troisième ligne, que nous ajouterons juste en dessous, comportera toutes les valeurs situées sous nos en-têtes. Par conséquent, la première donnée du tableau dont nous avons besoin est l'élément. Ce sera le nom de la pizza, suivi de la taille, de la quantité. Toutes les valeurs sont correctes pour le moment à l'intérieur d'ici. La dernière chose dont nous avons besoin est le prix. Pour voir cela, accédez à notre vue d'administration. Nous pouvons maintenant l'importer en haut de notre fichier. Celui-ci, ce sont les ordres. Je vais le placer en bas du modèle. Faites défiler vers le bas. Bien. Nous avons une grande partie de l'interface utilisateur, donc la section d'administration est maintenant en place, et tout est maintenant configuré pour ajouter des données dynamiques à partir de notre base de données. Mais ensuite, nous allons passer à une autre de nos vues, à une autre de nos vues, la vue d'accueil, et commencer à ajouter notre contenu. 21. Vue d'accueil: Ensuite, nous allons travailler sur cette vue d'accueil, qui sera composée de nouveaux composants, et qui sera remplacée par le routeur de visualisation. N'oubliez pas que nous avons cette section d'en-tête en haut. Ensuite, en bas, nous avons déjà deux prises distinctes placées via le RouterView. Nous avons les sections relatives à la livraison et à l'historique, qui figureront toujours au bas de notre modèle. N'oubliez pas que juste au-dessus, nous aurons notre RouterView, qui affichera tous les composants de notre dossier de vues. Notre vue d'accueil est déjà configurée. Nous avons un modèle simple avec le texte de la page d'accueil. Nous pouvons le voir juste ici. N'oubliez pas que nos deux composants bas, qui sont placés dans le RouterView, ne s'afficheront que sur cette page d'accueil, car si nous accédons au routeur et à la page d'index, nous les avons configurés en tant que composants de livraison et historique et en tant que composants par défaut, qui sera la vue d'accueil. Ce sera cette section en haut. Passons maintenant à la vue d' accueil. Ensuite, nous pouvons nous mettre au travail en ajoutant du contenu pour notre style. Nous pouvons configurer la classe hot, puis juste en dessous, créer une nouvelle section div, qui aura la classe hot_text. Déplacez-vous vers le haut, un cap de niveau 3. Cela affichera le texte «  chaud sorti du four ». Nous y voilà. Une section de cette page d'accueil contiendra également du texte et comportera également une hot_pizza végétarienne, ainsi qu'une image que nous avons dans le dossier des images, qui se trouve à l'intérieur des ressources. Nous avons besoin de ce fichier fire.jpg. d'abord le texte sous le titre du niveau 3, puis ajoutez un élément p à votre texte. Celui-ci aura la classe hot_pizza_name. Le nom de la pizza est végétarienne chaude. Petit texte. Celui-ci aura la classe hot_pizza_description. Ensuite, le texte de notre plat végétarien emblématique, mais avec une touche d'originalité. Ensuite, en dessous de ce texte, nous pouvons placer un lien vers un routeur, qui redirigera vers notre menu. Le composant RouterLink, le texte de Let's Order. Ensuite, comme toujours, avec notre RouterLink, nous devons transmettre les deux attributs avec les deux points, puisque ceux-ci contiendront des données dynamiques, transmettre nos objets dynamiques où nous créerons un transmettre nos objets dynamiques où nous créerons lien vers le nom de MenuLink. Ce MenuLink est le même que celui que nous avons configuré dans le fichier du routeur, que nous pouvons voir dans le routeur, puis dans le fichier index.js. Ce sont les noms uniques que nous avons ajoutés à chacun de ces chemins. On y est presque. Nous avons maintenant cette section div, puis juste en dessous, nous la placerons dans notre image. Je vais vous montrer l'image que nous venons de regarder, qui se trouvait dans le dossier des ressources. Nous utiliserons../pour monter un niveau dans notre répertoire vers les ressources, images et le fichier fire.jpg. Le style de classe peut être hot_img, puis également le texte alternatif. Tout notre contenu est en place. Vérifions simplement que ce lien fonctionne. Cela permet d'accéder à notre section de menu, ce qui est bien. Nous pouvons descendre en dessous notre modèle et ajouter la section de style. Cela doit être sculpté sur ce composant. Nous allons commencer par la section principale avec la classe de hot, et voici le wrapper de cette section complète. Cela sera chargé de modifier la mise en page sur le petit et le grand écran. Pour ce faire, nous allons utiliser le type d'affichage Flex. Comme nous allons commencer par la première vue sur mobile, nous pouvons réduire la taille du navigateur, puis modifier la direction des colonnes sur un écran plus petit. La direction flexible est égale à la colonne. Cela placera notre contenu verticalement. Ensuite, dans une requête multimédia sur un écran plus grand, nous allons inverser cette option pour utiliser la ligne. Nous allons maintenant le faire avec @media, où nous ciblerons une largeur d'écran minimale de 900 pixels. Encore une fois, nous allons saisir la classe de chaleur et modifier la direction de flexion pour qu'elle soit égale à la ligne. Le petit écran, agrandissez-le, et maintenant deux éléments apparaissent côte à côte. Le premier élément était ce div, et le second est notre image. Placez-le au centre en alignant les éléments. En fait, cela veut simplement entrer dans la première section mobile, donc des fournitures pour le petit écran. En dehors de la requête multimédia, nous utiliserons le hot_image, ainsi que le hot_text. C'est une classe, ils la placeront entre les points. Nous avons la classe hot_text ainsi que notre image, qui constitue nos deux sections principales. Cela ciblera nos deux zones de contenu, et nous leur donnerons la même taille en définissant le flex comme une valeur de deux rems. Ensuite, l'alignement du texte par rapport au centre. Ensuite, nous avons le titre, qui n'a pas de classe Nous pouvons donc cibler un titre de niveau 3, qui est un enfant du hot_text. Le wrapper de hot_text sélectionnera le h3, qui est imbriqué à l'intérieur, et définira la couleur comme une valeur hexadécimale bb2118. qui nous donne cette jolie couleur rouge, que nous pouvons voir ici. Ensuite, le hot_pizza_name, qui est la hot_pizza végétarienne. Agrandissez-le un peu en réglant la taille de la police. Essayons 2.2 rems. Un peu plus petit aussi. 1,8. Ensuite, pour le texte suivant, il s'agit de la classe hot_pizza_description. Copiez ceci. Placez-le dedans. Le style de police doit être en italique, le poids de police doit être un peu plus léger, optons pour 300. Vérifions-le également sur l' écran plus grand. C'est très bien. Pour l'instant, nous pouvons procéder quelques ajustements selon vos goûts si vous le souhaitez. Mais ensuite, je vais continuer avec le style de ce projet. Nous allons notamment ajouter du style à nos tableaux, ainsi qu'à nos entrées de formulaire. 22. Forme et tableau Styling: Pour terminer cette section, passons maintenant au fichier main.CSS, où nous pouvons commencer à appliquer des styles partagés entre nos formulaires et nos tableaux, ainsi que des styles CSS généraux. À partir de là, en particulier au sein de l'administration, nous avons certaines zones qui incluent des classes partagées. Par exemple, si nous allons dans les composants et dans le dossier admin, nous avons cette nouvelle pizza. Il y a le wrapper de section de la section admin, puis nous avons cette section d'en-tête cohérente avec la même classe dans ces trois composants. Nous l'avons ici en haut des commandes et également en haut des pizzas. Nous avons également un formulaire auquel nous allons ajouter du style. Nous avons différents tableaux pour le menu et les commandes en cours, et nous avons également un tableau dans la vue du menu. Nous avons différents styles qui sont partagés entre plusieurs composants. Plutôt que de les placer dans des composants individuels, nous allons entrer dans le fichier main.CSS et y ajouter le code partagé. En plus des principaux wrappers formulaires et des tableaux, nous avons également quelques petits détails, tels que le bouton de suppression qui se trouve dans le menu, ainsi que dans les commandes en cours. Nous lui avons donné la classe btn_remove. Nous allons maintenant les ajouter à notre feuille de style. Entrez dans la source, dans les ressources, et nous aurons ce fichier CSS principal. Nous avons déjà ajouté du contenu à l'intérieur, donc allons tout en bas, en dessous du bouton, et nous allons continuer à partir de ce bouton et aller juste dessous et ajouter la classe btn_remove, que nous venons de rechercher auparavant. Puisque nous allons supprimer quelque chose avec cela, nous voudrions probablement ajouter une couleur rouge. La teinte que je vais choisir est une valeur RGB de 180 lignes, 67 et 67. Vous pouvez le voir instantanément dès que vous enregistrez ces deux boutons en bas et que vous changez de couleur. Nous pouvons également supprimer cette bordure en la définissant sur aucune, et la rendre un peu plus visible en augmentant la taille de la police à 1,2 rems. Cette section de menu ainsi que les commandes en cours sont contenues dans un tableau HTML. Pour l'élément principal du tableau, ajoutons un style. Nous pouvons placer dans un rayon de bordure, juste un rayon de bordure subtil de 0,3 rems. Nous le verrons plus clairement lorsque nous ajouterons des couleurs différentes. Nous pouvons également régler l' alignement du texte pour qu'il soit sur la gauche. Cela poussera tout le texte vers la gauche de chacune des cellules individuelles. Une largeur de 100 % affiche la largeur totale disponible. Ensuite, nous passerons aux cellules individuelles qui se trouvent à l'intérieur du th, pour l' en-tête de notre tableau et également td pour les données de notre tableau. À l'espacement, nous ajouterons un peu de rembourrage ou un espacement à l'intérieur de l' élément de 0,6 rems. Ensuite, nous travaillerons sur ce formulaire pour la section Ajouter une nouvelle pizza. Prenez l'emballage du formulaire principal, un espace vide en haut et en bas et un rem à gauche et à droite. Nous allons également faire correspondre le rayon de bordure du tableau en l'ajoutant également au formulaire. Encore une fois, nous verrons cela plus clairement plus tard. Dans la nouvelle pizza, nous verrons que chacun de ces éléments de formulaire, tels que le nom et la description, est intégré dans ce div avec la classe du groupe de formulaires. Cela est cohérent pour chacune de ces sections. Prends ça. Il s' agit donc de form_group. peu d'espace de remplissage pour chacun de ces groupes et nous ajouterons un rem verticalement en haut et en bas et zéro à gauche et à droite. Utilisez la Flex Box avec l'écran Flex. Nous allons aligner les objets au centre. Aligner les éléments au centre comme vous pouvez le voir donnera cet alignement vertical afin que le texte reste au milieu de chacune de ces sections. Si nous ne l'avons pas, vous pouvez voir que le texte est aligné tout en haut de cet élément. Nous ajouterons une bordure tout en bas de 0,5 rems pour l'épaisseur, une ligne continue et la couleur de la ligne aura une valeur RGB de 202 pour chacune des couleurs. Oups, c'est un peu trop épais. Cela veut juste être de 0,5 pixel. Ensuite, nous supprimerons le soulignement de la partie inférieure. Encore une fois, saisissez notre form_group, sélectionnez le dernier type qui est la toute dernière occurrence, qui est notre bouton, puis nous supprimerons la bordure inférieure en réglant sur none. Ensuite, nous allons donner à ces étiquettes et à nos entrées une taille constante à l'aide de la boîte flexible. L'étiquette leur donnera une valeur de flexion constante de 1 afin qu'ils restent tous identiques. Ensuite, comme nous voulons que l'entrée soit un peu plus grande, nous pouvons cibler toutes les entrées ainsi que la zone de texte et leur attribuer une valeur flexible de 3. Cela signifie que toutes nos entrées sur la zone de texte essaieront d'occuper trois fois plus d' espace disponible que nos étiquettes. Travaillons maintenant avec les bordures pour chacune de nos entrées. Juste en dessous de la valeur de flexion de 3, définissez la bordure. Cela prendra la même valeur que notre bordure inférieure. Nous pouvons le copier, le coller. Cela nous donne simplement une bordure plus claire et plus subtile pour chacune de nos entrées. rayon de bordure de 0,3 rems, un peu de rembourrage pour les agrandir légèrement de 0,6 rems. Par défaut, les entrées de formulaire HTML et les zones de texte n'héritent pas de la police et de la couleur par défaut. Nous devons donc les définir manuellement en configurant la famille de polices pour qu'elle hérite du parent et en faisant de même pour la couleur. Comme nous l'avons déjà vu, chacun de ces composants d'administration, comme la nouvelle pizza, possède cette classe de section d'administration, puis cet en-tête de section d'administration. Passons à notre style et nous pourrons les cibler. Tout d'abord, le wrapper principal qui est la section d'administration. Marge de 1 rem pour espacer tous nos composants. La couleur d'arrière-plan, qui est une valeur hexadécimale de faf1e2, et enfin, pour cette section un rayon de bordure de 0,3 rems. Ensuite, la section d'en-tête de chacun de ces composants et mémorisez-les contient la classe admin_section_header. Définissez le type d'affichage sur Flex. Faites une sauvegarde. Celle-ci a l'air bien et, tout comme celle-ci, nous aurons un petit problème, mais ajoutez une nouvelle pizza. Cela ne devrait pas être côte à côte. Nous avons de nouvelles pizzas, nous avons l'emballage, l'en-tête, le formulaire. Et en fait, nous devons juste nous assurer que cet en-tête est fermé. Découpez donc la balise de fermeture de l'en-tête et collez-la juste après notre h3. Cela semble maintenant meilleur et cela nous permet de rester plus cohérents avec le reste de ces sections. Revenons au style. Et vous vous demandez peut-être pourquoi exactement nous avons configuré la boîte flexible alors que nous n'avons qu'un seul élément à l'intérieur. Eh bien, c'est parce que plus tard, nous allons également ajouter une petite icône sur la droite pour fermer chacune de ces sections si nous n'en avons pas besoin. Par conséquent, comme nous aurons plusieurs sections, nous pouvons ajouter du contenu de justification pour ajouter de l'espace entre chacune d'entre elles. De plus, pour maintenir ces éléments alignés verticalement, alignez les éléments au centre. Enfin, un rembourrage d'un rem qui jouera sur tous les côtés de ce titre. Nous arrivons maintenant à quelque chose en ce qui concerne le style. Cela devrait également s'appliquer à notre section de menu. Ensuite, la dernière section à laquelle nous ajouterons du style dans cette vidéo, à l'intérieur de la section d'accueil, est composée de chacun de ces blocs d'informations situés en bas. Ils ont la classe info_block, que vous pouvez voir si nous entrons dans les composants principaux , à savoir l'App.vue. Cela rend notre livraison et nos composants historiques , alors passez à la livraison. Cela a la classe de bloc d'informations , tout comme le composant historique. Revenons à notre info_block de style. Le type d'affichage du flex, la direction de flexion de la colonne, l' alignement des éléments au centre, ajout d'un peu de rembourrage à chacun des rem, ainsi qu'une couleur d' arrière-plan différente pour chacun de nos blocs et la valeur hexadécimale de faf1e2. Sauvegardons ceci et voyons à quoi cela ressemble. Dans le navigateur, nous pouvons voir sur la plus petite vue ils sont empilés verticalement les uns sur les autres. Nous allons les étendre plus largement. Les deux composants sont côte à côte et nous avons cette direction de flexion de la colonne pour chacun d'eux. Le contenu est aligné au centre, un peu de rembourrage et la couleur d'arrière-plan. Il existe encore d'autres styles à appliquer à des composants individuels, mais nous les ajouterons au fur et à mesure du cours. Mais maintenant, nous avons beaucoup de contenu en place. Dans la section suivante, nous ajouterons du code JavaScript et verrons comment utiliser l' API de composition VueJS. 23. Options Ou Composition ?: L'API Options est quelque chose que vous connaissez peut-être si vous avez créé avec Vue.js dans le passé, dans Vue version 1 ou Vue version 2. La bonne nouvelle, c'est que dans la version 3 de Vue, l'API Options est toujours là pour rester. Mais nous avons une approche différente que nous pouvons également utiliser, appelée API de composition. L'API Options est quelque chose que vous connaissez peut-être si vous avez déjà créé avec Vue version 1 ou 2. Il s'agit d'une méthode traditionnelle de création d'applications Vue.js. La bonne nouvelle, c'est que Vue 3 n'est partie nulle part. L'API Options ressemble à ceci. À l'intérieur du script et de l'exportation par défaut, nous avions différentes sections, telles qu'une section de données. Cela contenait toutes les données ou états des composants, que vous pouvez considérer comme des variables. Il existe également des méthodes. C'est ici que nous pouvons ajouter nos fonctions JavaScript et les appeler selon nos besoins. Parmi les sections qui ne sont pas présentées ici citons les crochets, les montres et les accessoires à cycle de vie calculés . Encore une fois, tous sont toujours valables pour être utilisés dans Vue 3. Cependant, pour ce projet, je vais utiliser l'API de composition Vue 3. L'API Composition nous permet d'écrire du code qui ressemble davantage à du JavaScript normal. Cela ressemble à une variable JavaScript normale, un délai d'attente et à une fonction. Cela peut désormais être écrit dans les applications Vue.js, remplacez-le comme l'API Options dans une valeur d' exportation par défaut, puis dans une fonction de configuration, qui est mise en évidence ici. Les éléments contenus ici, tels que les variables et les fonctions, peuvent être mis à la disposition du modèle en les renvoyant en bas de la page. Il convient également de noter que nous pouvons utiliser la fonction de configuration parallèlement à l'API Options existante. Ici, la section des données sera transmise, mais toute autre section de l'API Options peut également être ajoutée. est aussi beaucoup plus que cela, car nous pouvons organiser le code dans des fichiers séparés et réutiliser le chemin si nécessaire, et bien d'autres choses que nous utiliserons selon nos besoins. Outre le JavaScript classique, nous pouvons également utiliser la réactivité de Vue. Ici, nous importons une référence à partir du package Vue et y incorporons la valeur de toutes les variables. Une référence est utilisée pour transformer le contenu en objet réactif. Cela signifie que toutes les parties de notre application qui en dépendent changeront si les données qu'elle contient changent. Cela signifie essentiellement qu'aucun composant n'est tenu à jour en cas de modification des données. Nous y reviendrons également très bientôt. En plus de ref, nous pouvons également importer à partir du package Vue des éléments tels que les propriétés de l' ordinateur et des montres, qui sont disponibles avec l'API Options. Enfin, nous avons également une méthode plus courte écrire du code de composition , à savoir la configuration du script. Sur la gauche se trouve l' exemple similaire au précédent, où nous avons une section de configuration et renvoyons toute Vue que nous voulons utiliser dans le modèle ou le code HTML. Ensuite, sur la droite, c'est exactement la même chose en utilisant la configuration des scripts. Il ajoute un attribut de configuration à nos balises de script pour raccourcir le code. Notez également que nous n'avons pas besoin la section des retours car toutes les données que nous souhaitons utiliser dans le modèle sont automatiquement mises à disposition. La configuration du script sera l'approche que nous utiliserons dans ce projet de classe, car elle est plus propre, plus courte et offre également de meilleures performances en interne. 24. L'objet et la liaison de données NewPizza: Passons maintenant au nouveau fichier Pizza.view. Nous pouvons commencer à ajouter des scripts JavaScript en utilisant la configuration des scripts que nous venons de voir. Nous pouvons ajouter des objets NewPizza, qui constitueront la structure de toutes nos pizzas dans notre application. Juste au-dessus du modèle, ajoutez les balises de script à placer dans les attributs de configuration. Ensuite, comme nous venons de le voir, nous devons importer notre référence, et nous l'importons depuis le package de vue, qui se trouve dans les modules de nœud. Ensuite, nous pouvons créer nos objets NewPizza, qui sont inclus dans cette référence. Cette référence va créer un objet réactif que nous pouvons utiliser dans toute notre application et dont utiliser dans toute notre application l'état sera mis à jour. Commençons par une constante ou une variable appelée NewPizza, configurons notre référence comme wrapper. Ensuite, nous pouvons y transmettre n'importe quel type de données. Cela peut être une chaîne, un tableau. Mais pour notre cas d'utilisation, nous devons créer un objet possédant toutes les propriétés de Pizza. Ces propriétés comprennent le nom de Pizza, on peut dire Margherita. Mais juste pour cela, je vais ajouter Eg. La raison en est que ce sera l' état initial de notre forme. Je vais entrer dans notre interface administrateur, jetons un coup d'œil et nous verrons ce nom. Cela va être lié à notre objet. La propriété de nom ici utilisant modèle V sera liée à notre nom. Nous lierons également la description à la propriété suivante. Lorsque nous enregistrons ce formulaire pour la première fois, le texte qu'il contient reflétera ce que nous voyons ici. Cela permet simplement à l'utilisateur de savoir exactement ce qu'il doit écrire pour créer notre nouvelle pizza. Ensuite, une description. Encore une fois, nous allons donner l'exemple d' une délicieuse pizza à base de tomates garnie de mozzarella. Séparés par des virgules, nous pouvons ensuite ajouter nos options, qui seront un tableau. Les placer dans un tableau nous permettra de créer différentes options, telles que notre taille. Chacun d'entre eux sera un objet. Nous allons avoir deux objets, juste comme celui-ci côte à côte. Chacune d'entre elles aura une propriété de taille, disons neuf pouces pour la toute première, et aussi un prix. même pour notre deuxième objet, va de même pour notre deuxième objet, mais celui-ci coûtera une pizza de 12 pouces et aussi un prix. N'oubliez pas que toutes ces valeurs ne sont que des valeurs de départ. Toutes ces valeurs d'objet peuvent être remplacées par les valeurs de ce nouveau formulaire à pizza. Ils seront mis à jour avant de les ajouter à la base de données. Pour lier les entrées de notre formulaire aux propriétés de nos objets, nous allons utiliser le modèle. Le modèle nous permet de créer on appelle une liaison de données bidirectionnelle, ce qui, comme indiqué, signifie que les valeurs de notre objet apparaîtront dans les entrées du formulaire. Dans toutes les entrées de formulaire que nous saisissons, nous pouvons ensuite les mettre à jour pour remplacer ces entrées de formulaire. Cela se reflétera à l'intérieur de notre objet. Pour ce faire, commençons par le nom. Accédez à nos entrées de formulaire, où nous saisissons le nom. Nous pouvons utiliser v-model en transmettant en tant qu'attribut. Nous voulons lier cela à notre objet, qui s'appelle NewPizza, et nous pouvons accéder à la propriété name, donc NewPizza.name. Copions ceci. Descendez dans la zone de texte, et nous pouvons la lier à la description. Après la description, nous avons ensuite des options, et nous devons les lier à chacune de ces valeurs de tableau. N'oubliez pas que les tableaux commencent à la position zéro du numéro d' index. Celui-ci sera zéro, et celui-ci sera le numéro d'index 1. Allons-y et nous pouvons ajouter ces options. Nous avons la taille numéro 1, collez-la dedans, NewPizza.options. Sélectionnez la première valeur dont le numéro d'index zéro dans la propriété appelée taille. Copions ceci, collons-le dans celui avec l'identifiant du prix numéro 1, les changements étant le prix. ensuite à notre option 2 dans la taille, il s'agit de l'indice numéro 1. Encore une fois, indiquez le prix numéro 1 et modifiez également la propriété de l'objet pour qu'elle soit le prix 2. Maintenant, si nous l' enregistrons dans notre formulaire, nous pouvons voir toutes les données initiales à l'intérieur de chacune d' elles et vous pouvez voir que l' option est également correctement définie. Nous avons le 9 pouces et aussi le 12 pouces. Consultez également la liaison de données bidirectionnelle et vérifiez que l'objet est mis à jour à partir de ce formulaire. Nous pouvons maintenant accéder à nos modèles. N'importe où à l'intérieur d'ici, nous pouvons afficher la valeur de NewPizza. Nous pouvons le voir en haut. Supprimons tout ce qui se trouve dans ces entrées. Ceci est maintenant mis à jour. Pareil pour la description, cela fonctionne. Essayons de mettre à jour le prix. Notre deuxième option est également liée à. Nous pouvons maintenant le supprimer en toute sécurité et passer à la vidéo suivante. Nous examinerons les références plus en détail et verrons comment ajouter des articles au panier. 25. Ref’s & Ajout au panier: Précédemment, dans ce nouveau composant pour pizza, nous avons brièvement examiné ce que l'on appelle une référence. Une référence est un wrapper pour une valeur. Dans notre cas, la valeur est la pizza. Dans la prochaine vidéo, nous utiliserons également une référence comme emballage ou panier, lequel l'utilisateur pourra ajouter des pizzas avant de les acheter. Pour ce faire, il convertit la valeur en objet réactif. L'avantage est que chaque fois que cet objet réactif est mis à jour, tous les composants qui s'appuient sur ces données seront également mis à jour. Passons à la vue du menu pour commencer à les utiliser et examinons les références plus en détail. Dans la vue du menu en dehors du modèle, créez notre script avec l'attribut setup. Créez notre importation, comme nous l'avons vu précédemment, où nous importerons la référence à partir du package Vue.js. Nous devons également créer une constante ou une variable pour notre panier. Enroulez-le dans un radeau pour rendre le contenu réactif et définissez la valeur initiale d'un tableau vide. Nous devons également créer une fonction qui va mettre à jour le panier. Appelons cela AddToBasket. Comme nous l'avons mentionné précédemment, lorsque nous utilisons la configuration de scripts, cela nous permet d'accéder directement à l'une de ces variables ou fonctions à l'intérieur de notre modèle. Passons à notre modèle et localisons notre bouton Ajouter, en nous assurant que nous sommes dans le menu. Nous pouvons maintenant répertorier les clics en utilisant @click et le configurer pour déclencher notre fonction appelée AddToBasket. Vérifiez que cela fonctionne. Nous le publierons dans un journal de console. N'importe quelle chaîne de texte convient. Saute dans la console. Cliquez sur le bouton et notre texte est maintenant mis à jour. Juste avant d'ajouter du code à notre fonction, je souhaite rapidement revenir à notre référence et voir comment cela fonctionne plus en détail. Pour cela, je vais créer un objet simple appelé user avec la propriété name et également une propriété likes. Vous vous demandez peut-être pourquoi je viens de saisir un objet utilisateur sans rapport à l'intérieur. Eh bien, le contenu de cet objet n'est pas important. La chose importante à noter ici est les objets JavaScript ont des propriétés. Dans notre cas, nous avons la propriété appelée name et la propriété appelée likes. Souvenez-vous plus tôt lorsque j'ai dit que lorsque nous utilisons une référence, Vue.js transforme en coulisses le contenu contient en un objet réactif. Comme nous venons de le voir, tout type d' objet possède ces propriétés. Comme notre panier est transformé en un objet en arrière-plan, valeur lui est également attribuée. Cette propriété de valeur nous permet de mettre à jour ou de lire le contenu qu' il Cette propriété de valeur nous permet contient. Tapons rapidement ceci et je vais vous montrer exactement ce que nous voulons dire. Pour l'instant, nous allons simplement commenter notre panier. Nous allons créer un panier connu, qui n' utilisera pas de référence. Ce ne sera qu'un objet simple. Encore une fois, juste pour renforcer cela, dans les coulisses, notre panier est transformé en un objet similaire à celui-ci puis une propriété de valeur lui Ainsi, lorsqu'il s'agit de mettre à jour une référence, tout comme notre panier, non seulement nous la mettons à jour en du nom de variable, tel que basket, mais nous devons également mettre à jour la valeur imbriquée à l'intérieur. Par exemple, lorsque nous appelons notre fonction AddToBasket, nous accédons d'abord au nom de notre variable ou de notre constante, puis à la valeur qu'elle contient. Ou nous pouvons utiliser quelque chose comme la méthode push pour pousser un nouvel objet. Le nom, n'importe quel contenu convient, le prix. Tout cela n'est qu'un exemple de code, peu importe la taille de 12. Comme il s'agit d'un panier, nous devons également connaître la quantité. Pour vérifier que cela fonctionne, vérifiez que nous mettons à jour la valeur qu'il contient, nous pouvons accéder à notre modèle et afficher la valeur de notre panier. Sauvegardons ça. Passons au menu. Nous pouvons voir que nous avons la propriété value qui est vide. Cliquez sur « Plus » et nous ne voyons pas que cela soit mis à jour. Cependant, si nous le mettons à jour pour utiliser une référence , décommentez-le. Cliquez sur le bouton. Nous pouvons voir que cet objet est désormais réactif et que toute mise à jour notre panier est désormais transmise à notre modèle. Un point clé à noter ici est que lorsque nous utilisons le panier contenu dans le modèle, tout comme ici, nous n'avons pas besoin d'accéder à basket.value. Cela se fait automatiquement pour nous. Cependant, comme nous pouvons le voir dans notre script, lorsque nous accédons ou mettons à jour l'une de nos références, nous devons utiliser la propriété value pour mettre à jour ou lire les données imbriquées à l'intérieur. Bien sûr, nous ne voulons pas sortir le panier de cette façon. Ce que nous voulons faire, c'est accéder à la section de notre panier et afficher le contenu dans notre tableau sans notre ligne de tableau. Nous pouvons l'ajouter à l'intérieur du corps de la table, remettre à l'intérieur, puis nous pouvons le placer en boucle sur notre panier avec une boucle Vue.js V4. Entre crochets, nous pouvons accéder au nom de la variable de l'élément ainsi qu'au numéro d'index de chaque boucle. C'est dans le panier, puis Vue.js, lors de la mise en boucle, a également besoin d'une clé unique. Maintenant, nous n'avons plus de clé unique unique que nous puissions utiliser. Mais à titre de mesure temporaire, nous pouvons transmettre le numéro d'indice. Plus tard, lorsque la pizza stockée dans la base de données, nous mettrons à jour cette clé pour utiliser l' identifiant unique pour chaque valeur. Désormais, chaque pizza contenue dans le panier est stockée dans la variable item. Nous pouvons mettre à jour la quantité, donc item.quantity, le nom de la pizza, c'est item.name, la taille, item.size, et aussi le prix vers le bas. Si nous le voulions, nous pourrions simplement ajouter item.price. Mais comme nous pouvons commander plusieurs pizzas, nous allons multiplier ce prix par la quantité d'articles pour afficher un total pour chaque ligne. Enregistrer. Faites un peu plus d'espace. Désormais, chaque fois que nous ajoutons une nouvelle pizza, le panier est mis à jour et affiché dans notre tableau. Ensuite, nous allons améliorer cela en passant en boucle les pizzas et en ajoutant le nom exact de la pizza au panier, plutôt que les exemples de données dont nous disposons actuellement. 26. Boucle de pizzas: heure actuelle, comme nous le savons, notre base de données n'est pas encore configurée pour stocker nos pizzas. Pour l'instant, à titre de mesure temporaire, nous allons créer une référence laquelle nous pourrons envoyer nos pizzas. Cela nous permettra ensuite de parcourir ces pizzas en boucle et de les exposer sur une table. Pour cela, allez dans le fichier MenuView, puis en haut, nous allons créer une nouvelle constante appelée AllPizzas. AllPizzas sera entouré d'un récif. Eh bien, la valeur initiale sera un tableau vide. Passons ensuite aux nouveaux composants pizza.view, qui se trouvent dans l'interface d'administration. Cela permet de gagner un peu de temps. Ce que nous allons faire ici, c'est sélectionner l'objet pizza complet. Il s'agit de l'objet de démonstration juste ici à l'intérieur de la référence. Copiez tout, y compris les bretelles frisées. Nous le copions parce que cela nous donnera la structure cohérente dont nous avons besoin pour ajouter de nouvelles pizzas à la base de données. Retournez dans la vue du menu et à l'intérieur de l' ancienne gamme de pizzas, collez-la deux fois. Veillez à ce que chacun soit séparé par une virgule. Changeons un peu les choses. Nous allons supprimer l'Eg. Margherita. Le second, Pepperoni, retirez l'Eg. On dirait garni de mozzarella et de pepperoni. Augmentez simplement le prix pour le rendre un peu différent. Maintenant, cela peut être parcouru en boucle dans le tableau des menus. Ils exposent chacune des pizzas. Passons maintenant au modèle. Insérez ce menu puis le tableau dans le corps du tableau. Nous ferons exactement la même chose que pour le panier créant une boucle v-for et les données là où nous en avons besoin. Revenez au corps du tableau de la section du menu v-for. Entre parenthèses, nous pouvons sélectionner la pizza ainsi que le numéro d'index. Cela fait partie de notre ancienne gamme de pizzas. Ensuite, insérez une clé, qui sera le numéro d' index pour le moment. Comme nous l'avons dit pour le panier, nous y reviendrons plus tard et utiliserons la clé unique que la base de données fournira. Génial. Nous avons désormais accès à toutes les pizzas et, au lieu d'afficher le nom codé en dur de la pizza, ouvrez les doubles crochets et nous pouvons accéder à nos objets, à savoir pizza.name. La description, la pizza, la description. Disons ceci et passons au menu. Voici nos deux pizzas. Nous avons notre Margherita et le pepperoni, qui correspondent à notre référence dans la section des scripts. Mais nous n'en avons pas encore fini avec celui-ci, car nous devons également ajouter les options de pizza. Nous devons adapter la taille et le prix des pizzas à la plupart des options qui s'offriront à chacune de ces pizzas. Pour cela, nous devons à nouveau descendre à notre table. Nous avons ici cette ligne de tableau, qui correspond à chacune de nos options. Nous devons créer une boucle supplémentaire à l'intérieur de celui-ci pour parcourir nos deux options, donc v-for. La valeur variable de l'option et nous la prendrons également dans l'index. Nous devons faire une boucle sur notre objet à pizza, qui est celui de la boucle initiale. Nous devrons accéder à nos options. La clé de cette option de transfert unique. Ensuite, entre crochets, nous pouvons sélectionner la première ou la deuxième valeur avec le numéro d'index. Pour la première boucle, cela sélectionnera la première option, et la deuxième boucle sélectionnera la deuxième option. Pour la taille de l'option, les accolades doubles, l'option et la propriété de taille même dans le symbole monétaire, l'option.price. Testons cela dans le navigateur. Nous avons maintenant notre boucle qui crée nos deux options, et chacune a une taille et un prix uniques. Bien. Nous faisons de bons progrès, mais maintenant, lorsque nous voulons ajouter chacune de ces pizzas au panier, nous devons également transmettre ces informations à la fonction. Ce bouton que vous avez ici ne nous permet pas seulement d' appeler AddToBasket, mais nous devons également ajouter les crochets et transmettre la pizza, ainsi que l' option jusqu'à la fonction, où nous pouvons recevoir ces valeurs, donc l'article et l'option. Maintenant, au lieu d'avoir le nom sous forme de chaîne, nous pouvons le transmettre dans le nom de la variable item.name. Le prix, qui est stocké dans l'option, est option.price. La taille, option.size. Essayons ça. Essayons la Margherita de neuf pouces. Ça a l'air bien. Un pepperoni de 12 pouces, tout cela semble parfaitement fonctionner. Ensuite, nous nous occuperons de la mise à jour de la quantité contenue dans ce panier si la même pizza est sélectionnée plusieurs fois. 27. Vérifier les articles de panier en double: Pour le moment, nous ajouterons une nouvelle pizza à notre panier. Tout fonctionne bien mais nous commençons à avoir un problème si nous ajoutons la même valeur plusieurs fois. Par exemple, si nous essayons d'ajouter la pizza de neuf pouces plus d'une fois, nous l'avons déjà tout en haut Au lieu d'augmenter la quantité à deux, nous obtenons un nouvel élément en bas. Il en va de même pour toutes nos pizzas. Plutôt que d'ajouter un nouvel article, nous voulons plutôt augmenter la quantité à chaque fois. Pour cela, avant de mettre notre nouvelle pizza dans le panier, nous devons d'abord vérifier si la nouvelle pizza existe déjà dans ce panier. Pour ce faire, tout en haut de notre fonction, nous pouvons accéder à notre panier, la valeur puisqu'il s'agit d'une référence, et utiliser la méthode de recherche JavaScript. La méthode find exécutera une fonction pour chaque valeur de notre panier. S'il y a des pizzas dans le panier, nous les stockerons dans une variable appelée pizza, puis nous pourrons travailler avec chaque pizza individuellement. Ce que nous voulons faire ici, c'est vérifier si le nom de la pizza et la taille de la pizza correspondent. N'oubliez pas que si nous ajoutons à notre menu, comme le Margherita, nous pouvons ajouter deux tailles différentes. Nous pouvons avoir deux noms de pizza distincts, mais ils ne correspondent pas. Nous devons également vérifier le nom de la pizza ainsi que la valeur de l'option. La méthode JavaScript find renverra la toute première valeur, dans notre cas, la pizza, qui correspond à une certaine condition. Nous voulons revenir à vrai si une certaine condition est remplie. Dans notre cas, nous voulons vérifier si le pizza.name est égal au item.name. agit de vérifier si la pizza qui se trouve actuellement dans le panier a un nom égal au nom de la pizza que nous essayons d'ajouter. Il devrait y avoir un triple égal et, en utilisant la double esperluette, nous devons également effectuer une deuxième vérification. La deuxième vérification consiste à savoir si la pizza est de la taille, il s'agit bien de la pizza qui est rangée dans le panier. Nous voulons savoir si cela est égal à l'option.size. Encore une fois, il s'agit de la taille de l' option de la pizza que nous essayons d'ajouter. Si les deux correspondent, cette affirmation est vraie et cette méthode de recherche renverra alors la pizza que nous trouvons dans le panier. Nous pouvons le stocker dans une constante ou une pizza existe et avant d'aller plus loin, nous allons vérifier en nous connectant à la console. Enregistrez la valeur de notre pizza constante, sauvegardez et transférez dans le navigateur. Sautez dans la console pour ne pas avoir de copains de pizzas à l'intérieur, en plus, ce n'est pas défini, les différentes valeurs ne le sont pas non plus. Mais si nous essayons de cliquer une seconde fois sur une pizza, nous retrouvons la pizza, qui correspond au panier. Nous voyons que c'est une pizza de neuf pouces, essayons-la avec les 12, celle-ci fonctionne aussi. Essayons simplement le pepperoni. La toute première fois n'est pas définie et si nous l'avons déjà dans le panier, il retournera la pizza qu'il a trouvée. Avec ces informations, nous pouvons maintenant placer une instruction if et vérifier si notre pizza se trouve avec cette constante. S'il souhaite accéder à la pizza, sélectionnez la propriété de quantité et augmentez-la de la valeur 1. De plus, si cela est vrai, nous voulons revenir en arrière, modifier cette fonction car nous ne voulons pas ajouter pizza supplémentaire à notre panier. Essayons maintenant ceci. Rechargez ça. Notre première Margherita, notre deuxième Margherita augmente maintenant la quantité. Essayons le pepperoni. Deux nouvelles lignes et un doublon et chaque fois que je clique sur un doublon, la quantité est augmentée de la valeur d'un. Ensuite, nous allons également revenir à notre panier et nous en tenir à la question de la quantité en connectant nos boutons d'augmentation et de diminution, ainsi qu'une fonction permettant de retirer une pizza du panier. 28. Éliminer et changer la quantité de panier: Comme nous l'avons découvert dans la vidéo précédente, lorsque nous ajoutons l'une de nos pizzas au panier, toutes nos pizzas sont désormais affichées sur la droite. Nous voyons également la quantité qui est la valeur par défaut d'un. Nous avons également ces boutons pour augmenter et diminuer la quantité. C'est avec cela que nous allons travailler maintenant. Accédez à la vue du menu, accédez à la section des modèles et faites défiler l'écran jusqu'à la zone du panier. À l'intérieur des paniers, nous avons notre corps de table, qui crée notre boucle pour toutes les pizzas. Ici, à l'intérieur de la boucle, nous avons accès à l'article dont vous souhaitez modifier la quantité. Ensuite, nous avons ici nos boutons pour augmenter et diminuer les valeurs. Pour la première, qui correspond à la diminution, nous pouvons ajouter un écouteur de clics, qui déclenchera ensuite une fonction. Nous allons transmettre cet article à la fonction, puis modifier la quantité. À l'intérieur du bouton d'ouverture, @click, et nous appellerons cette fonction quantité réduite. Passez l'élément pour que nous sachions quel élément réduire , puis passez au deuxième bouton, qui consiste à augmenter. Nous appellerons cela IncreaseQuantity. Encore une fois, cela nécessite également l'accès à l'élément que nous voulons modifier. Nous allons commencer par cette fonction IncreaseQuantity. Je vais faire défiler la page vers le haut. N'oubliez pas que si nous examinons cette méthode de poussée ici, nous pouvons voir la structure de nos paniers. Tout ce que nous devons faire est d'augmenter la propriété de quantité sur l'objet. Créez une fonction, IncreaseQuantity, récupérez l'élément qui lui est transmis, sélectionnez-le. Nous voulons uniquement travailler avec le champ de quantité, et nous allons l'incrémenter de la valeur un. Ensuite, la fonction permettant de diminuer la quantité. Prend également en compte l' article, item.quantity. Je vais le déduire de la valeur de un. C'est la première chose que nous devons faire pour la fonction de diminution. La deuxième chose est de vérifier si la quantité est nulle. Si c'est le cas, nous ne voulons pas qu' un article apparaisse dans le panier avec la quantité zéro. Nous souhaitons plutôt le supprimer du panier. Nous pouvons le placer dans une section F pour vérifier si la valeur item.quantity est égale à zéro. Si c'est le cas, nous souhaitons le supprimer du panier. Si nous le voulions, nous pourrions insérer le code à l' intérieur pour le faire. Mais au lieu de cela, je vais sous-traiter cela à une fonction autonome qui s' appellera RemoveFromBasket. Nous devrons également récupérer l'article que nous voulons supprimer, puis le créer en bas, la fonction RemoveFromBasket, transmettre l'article que vous souhaitez supprimer. abord, nous devons accéder à nos paniers complets et, comme il s'agit d'une référence, nous accédons à la propriété value. Ensuite, nous pouvons utiliser la méthode d'épissage JavaScript. Splice va supprimer un élément de notre tableau à la première personne à la position de départ. Nous devons donc récupérer le numéro d' index de cet article. Pour ce faire, accédez au basket.value. Voici le panier complet. Ensuite, nous pouvons récupérer le numéro d'index avec indexof. Nous avons besoin de connaître le numéro d'index de notre article. C'est juste du JavaScript normal. Cela n'a rien à voir avec Vue js. Nous trouvons la position d'index de notre élément particulier à l'intérieur de ce tableau, séparée par une virgule. Nous ne voulons supprimer qu' un seul élément. Maintenant, sauvegardons cela et vérifions que cela fonctionne. Cliquez sur n'importe quelle pizza. Si nous continuons à l'augmenter la valeur augmentera également. Essayons plus. Cela fonctionne bien. Négatif, cela va baisser. Ensuite, une fois que nous aurons atteint zéro, cet élément devrait être supprimé. Il s'agit d'une bonne fonctionnalité qui a été créée avec des fonctions assez petites. Ensuite, nous allons rester dans ce panier et commencer à mettre à jour le total de la commande à l'aide de propriétés calculées. 29. Propriétés calculées: Si vous avez déjà utilisé View Dress et utilisé des propriétés informatiques, la bonne nouvelle, c'est qu'elles sont là pour durer. Ils sont toujours entièrement pris en charge dans View Free, fois lors de l'utilisation de l'API de composition et de l'API d'options. Ils constitueront un cas d'utilisation idéal pour calculer le coût de toutes les pizzas contenues dans les paniers. Au bas du panier, nous avons actuellement cette valeur codée en dur, qui est disponible dans la vue du menu. Faisons défiler la page vers le bas et trouvons ceci. Ceci se trouve en bas de notre modèle. Nous pourrions utiliser des fonctions ordinaires pour calculer le coût à l'intérieur de ce panier, mais le problème avec une fonction est qu'elle ne s' exécute qu'une seule fois à chaque fois que nous l'appelons. Si nous écrivons plutôt ce calcul dans une propriété calculée, chaque fois que les données qu'il contient changent, dans notre cas, les paniers, dans notre cas, les paniers, sa valeur sera recalculée pour nous. Pour ce faire, rendez-vous en haut du fichier. Nous devons importer des données calculées à partir du package View. Computed agit comme un wrapper. Si nous décomposons les choses, nous pouvons d'abord créer une fonction anonyme pour calculer le niveau de nos paniers. En bas de notre script. Nous allons d'abord créer une fonction qui n'a pas besoin de nom à ce stade. Ce que nous allons faire, c'est créer une variable appelée coût total qui sera initialement nulle, puis nous pouvons parcourir tous les paniers et appuyer sur le champ de quantité de chacune de nos pizzas. C'est le coût total. Paniers, encore une fois, c'est un let Nous utilisons donc la boucle de valeur pour chacun d'entre eux. Pour chacune d'entre elles, nous exécuterons une fonction pour chaque valeur contenue dans les paniers et stockerons chacune d'elles dans l'article. Ensuite, nous pouvons récupérer notre variable vide appelée coût total. Utilisez l'opérateur plus égal pour ajouter une nouvelle valeur à notre coût total sur chaque boucle. Nous ne voulons pas simplement saisir le prix de l'article et le porter au total, car nous pouvons parfois avoir plusieurs pizzas. Pour cela, nous devons multiplier l'article.quantité par le prix. Nous pouvons accéder à ce coût total en dehors de la fonction. Nous devons le rendre. Ensuite, l'extérieur de la fonction crée une variable ou constante pour stocker notre valeur calculée. Nous appellerons celui-ci le total. Comme mentionné, computed agira comme un wrapper, nous devons donc le placer dans notre fonction. Découpez-le, collez-le dans l'ordinateur. Maintenant que nous avons calculé en tant que wrapper, chaque fois que le panier ou toute autre donnée qu'il contient est mis à jour, cette fonction sera réexécutée et la variable totale sera mise à jour. Ce total peut désormais être utilisé dans notre modèle. Saute vers le bas. Vous ajoutez le coût total, ajoutez un article autant que le prix puisque nous n'en avons qu'un. Augmentez la quantité. Ce chiffre est également doublé puisque dans notre valeur calculée, nous multiplions la quantité de l'article par le prix. Tout cela semble maintenant fonctionner correctement. Plus tard, nous améliorerons cela en créant un filtre de devises réutilisable pour assurer que les chiffres sont arrondis correctement. 30. Fichiers composables: Dans la section script de notre MenuView sur laquelle nous avons travaillé récemment, si nous y jetons un coup d'œil de haut en bas, cette section commence à devenir assez grande. Pour vous aider, nous pouvons déplacer le contenu dans des fichiers séparés, nous pouvons utiliser autant de ces fichiers que nous le souhaitons, ce qui permettra de garder les choses vraiment organisées. Ces fichiers sont appelés fichiers composables. Pour les garder organisés, nous allons créer un nouveau dossier appelé composables dans lequel les conserver. Ils vivront directement à l'intérieur de la source et accompagneront des éléments tels que nos actifs et nos composants. Cliquez sur la source, un nouveau dossier, le nom des composants, et si vous le souhaitez, nous pouvons modifier le nom de ce dossier, il n'est pas nécessaire qu'il s' agisse de composables, s'agit simplement d'une convention de dénomination. Une autre convention de dénomination concerne les fichiers qui se trouvent à l'intérieur. Ils ont tendance à avoir le préfixe « use », mais encore une fois, cela est totalement facultatif. Pour ceux qui n'ont aucun lien avec notre contenu, nous aurions des fichiers tels que UseBasket, UsePizza et UseOrders, qui sont tous des fichiers JavaScript ordinaires. Commençons par un fichier appelé UseBasket. Placez-le dans le fichier des composables, UseBasket, et celui-ci porte l'extension JavaScript. Ce fichier va exporter une fonction, donc exporter par défaut, une fonction appelée UseBasket. Le contenu de cette fonction sera l'ensemble des fonctionnalités liées au panier de notre MenuView ou de tout autre fichier d'ailleurs. Revenons au MenuView, examinons toutes les fonctionnalités liées au panier. Nous avons besoin du panier, découpons-le, collons-le dans notre nouveau fichier. Nous n'avons pas besoin des pizzas, elles seront placées dans un autre fichier, fonction AddToBasket, nous pouvons les prendre. Nous avons également besoin de IncreaseQuantity, de la diminution , de RemoveFromBasket, ainsi que du total , c' est-à-dire sa valeur calculée Supprimez tout cela et nous devrions simplement partir avec nos pizzas, coller dans notre fichier composable, assurant que tout est du panier, c' est-à-dire sa valeur calculée. Supprimez tout cela et nous devrions simplement partir avec nos pizzas, les coller dans notre fichier composable, en nous assurant que tout est intégré à cette fonction. Comme nous n' utilisons pas notre référence et la section calculée qu'elle contient, nous pouvons également importer les importations ou les copier. Nous pouvons voir que nous utilisons toujours notre référence dans ce fichier, mais nous n'avons pas pu supprimer Computed. Ensuite, importez-les en haut de notre fichier, juste à l'extérieur de la fonction. Maintenant, pour utiliser n'importe quelle fonction ou de ces variables dans différents fichiers, nous devons d'abord renvoyer cette fonction vers le bas. Toujours dans la balise de fermeture de notre fonction, créez notre section de retours doit renvoyer l'une de nos fonctions ou variables qui doit renvoyer l'une de nos fonctions ou variables que nous souhaitons utiliser dans d'autres fichiers. Nous avons effectivement besoin de tout à partir de là, nous avons besoin du panier, de la fonction appelée AddToBasket, nous avons besoin des deux fonctions pour augmenter et diminuer les valeurs, nous avons besoin du total. Mais une chose dont nous n'avons pas réellement besoin à ce stade est RemoveFromBasket. Cela est dû au fait que le seul endroit où cela est appelé se trouve dans cette fonction DecreaseQuantity Nous n'avons donc pas besoin de l'appeler depuis aucun fichier. Cela regroupe désormais toutes les fonctions et variables associées. N'oubliez pas que nous avons exporté ici une fonction appelée UseBasket. Pour accéder au contenu qu'il contient, nous pouvons accéder à notre MenuView et l'importer dans notre fichier. Importez, utilisez Basket. À l'aide du symbole d'ajout, nous pouvons accéder au niveau supérieur de notre source, puis accéder au dossier composable , puis au nom de fichier appelé UseBasket. Ensuite, en utilisant la déstructuration JavaScript, nous pouvons stocker toutes les valeurs renvoyées par ces fonctions dans des variables. Le panier, les fonctions de IncreaseQuantity, DecreaseQuantity, nous avons besoin de AddToBasket, ainsi que le total. Je les sélectionnais à partir de notre fonction UseBasket, que nous avons importée juste au-dessus. Toutes ces constantes peuvent désormais être utilisées dans notre modèle. Il ne reste plus qu'à enregistrer ceci, à revenir à notre projet et à vérifier que tout fonctionne toujours correctement. En fait, juste avant de faire cela, nous devons appeler cette fonction pour qu'elle soit disponible. au projet, ajoutez-les à nos paniers, les fonctions d'augmentation et de diminution fonctionnent. Nous pouvons les supprimer, et notre total fonctionne également. 31. Qu'est-ce que la base de feu ?: Alors, qu'est-ce que Firebase exactement et comment pouvons-nous l'utiliser ? Eh bien, Firebase est un service fourni par Google pour les sites Web, les applications et les jeux. Nombre d'entre eux ont besoin de services tels que l'authentification, stockage, l'hébergement et également une base de données. Firebase fournit toutes ces fonctionnalités dans une seule application. Je vais utiliser certains d'entre eux dans le cadre de notre projet. Nous utiliserons certains d'entre eux, notamment le Cloud Firestore, qui sera notre base de données, qui stockera nos pizzas et nos commandes. Le cloud Firestore est une base de données en temps réel, ce qui signifie que chaque fois que l'une de nos données stockées change, l'application est informée. Cela pourrait être un cas d'utilisation si l'administrateur devait supprimer une pizza, puis le menu serait également mis à jour. De plus, si vous avez plusieurs applications, exemple votre site Web et votre application mobile, la base de données peut être partagée et synchronisée. Nous pouvons également définir des règles et des rôles à des fins de sécurité. Mais plus d'informations à ce sujet plus tard. Il fournira également notre système d'authentification, fournissant un flux de connexion, de connexion, de déconnexion, de mot de passe oublié, ainsi que de multiples manières pour les utilisateurs de se connecter. Nous utiliserons un e-mail et un mot de passe pour vous connecter. Car d'autres services sont disponibles, tels que la connexion à Google, Twitter ou Facebook. En outre, de nombreux autres services Firebase seront ajoutés, tels que des analyses, fonctions cloud et du stockage. Alors, allez-y et créez un compte si vous ne l'avez pas encore fait. Le compte gratuit est tout ce dont nous avons besoin pour tester et créer notre projet La prochaine fois, nous le configurerons et créerons un lien vers notre projet. 32. Configuration de la base de feu: Une fois que vous avez créé un compte et que vous vous êtes connecté à Firebase, rendez-vous dans la zone de la console et vous verrez quelque chose qui ressemble à ceci. À partir de là, nous pouvons créer notre nouveau projet. Nous devons donner à ce projet le nom, eh bien, ce sera Pizza Planets. Vous pouvez appeler le vôtre Pizza Planet si vous le souhaitez, mais il s'agit de la troisième version de ce cours, donc je vais appeler la mienne V3. Cliquez sur la case à cocher, puis continuez. Google Analytics, je vais dire non à ce projet. Donnez-lui ensuite quelques instants pour terminer. Mon projet est maintenant configuré. Continuons, puis cela nous emmènera dans notre projet. À partir de là, nous pouvons obtenir les instructions pour ajouter Firebase à notre application pour iOS ou Android. Mais dans notre cas, nous cliquerons sur le lien Web. Si les choses semblent un peu différentes à ce stade, ne vous inquiétez pas, ces sites Web ont l'habitude de changer, mais le processus de configuration devrait être similaire. Nous devons maintenant enregistrer notre application en lui donnant un surnom. Je vais juste le garder de la même manière que Pizza Planets Version 3. Je ne vais pas configurer d'hébergement Firebase pour le moment. S'inscrire. Ensuite, une fois que cela sera terminé, il nous donnera quelques instructions pour le configurer. La première chose à faire est d'utiliser npm pour l' installer en tant que package de modules de nœuds. Copions ce lien, qui est npm install Firebase. Fermons le serveur. Collez ceci dedans. Nous avons maintenant quelques raisons pour lesquelles cela a été très lent aujourd'hui. Nous pouvons simplement le fermer et redémarrer le serveur avec npm run dev. Nous pouvons confirmer que cela a été installé en accédant au package.json. Ils auront Firebase comme dépendance. Retour au site Web de Firebase. La prochaine étape après l'installation consiste à copier certaines instructions. Je vais simplement le recopier et nous verrons ce que chaque étape fait dans un instant. Cela nous permettra de rester organisés en le plaçant dans un nouveau dossier JavaScript, qui se trouve directement dans le dossier source, en créant un nouveau fichier. Le fichier Firebase.js. Collez ceci dedans. La première chose à faire est d'importer et d' initialiser les fonctions de l'application, fournies par Firebase. Nous avons ensuite l'objet de configuration Firebase, qui est facilement renseigné avec toutes les informations relatives à notre application. Ensuite, tout en bas, nous utilisons les fonctions d' initialisation de l'application juste ici. Transmettez-lui ensuite les détails de configuration, qui nous donneront ensuite une référence à notre application. Nous avons maintenant la référence de l'application. Nous avons également besoin d'une référence à notre base de données Firestore afin de pouvoir ajouter et supprimer des enregistrements. À partir de là, nous devons également importer quelque chose depuis la bibliothèque Firebase. Tout en haut, nous allons créer un deuxième élément important dans lequel nous allons importer quelque chose depuis le package, à savoir Firebase. Mais cette fois, plutôt que de l'application Forward Slash, nous devons l'importer depuis la section Firestore. La fonction que vous souhaitez importer depuis cette section s'appelle GetFireStore. GetFireStore peut désormais être utilisé pour obtenir une référence à notre base de données. Pour ce faire, nous transmettons notre variable d'application. Juste celui-ci. Ceci est à l'intérieur d'une constante appelée Db , abréviation de base de données, appelée GetFireStore. Passez dans notre application. Lorsque vous travaillez avec Fire Store, il regroupe nos données dans des collections. Dans notre cas, nous aurons une collection pour les pizzas, une collection pour les commandes, et nous pouvons également en avoir une pour les utilisateurs. Pour travailler avec les collections, vous devrez également importer depuis le package Firestore. Revenez en haut de la page, obtenez package Firestore, importez la collection. Nous pouvons l'utiliser pour référencer nos collections en y ajoutant deux éléments. le premier cas, nous devons transmettre la référence de base de données que vous avez stockée juste au-dessus dans cette constante. Ensuite, ce sera le nom de notre collection, que nous n'avons pas encore créée pour le moment. Celle-ci s' appellera Pizzas. Cela nous donne maintenant une référence à une collection unique que nous pouvons utiliser pour lire des documents et ajouter de nouveaux besoins. Pour le rendre disponible dans d'autres composants, nous allons l'exporter sous forme de constante. Le nom de la constante sera DPPizzas&Ref. Copions et collons ceci. Cette deuxième référence concernera nos commandes. DBorder&Ref. Cela utilisera la même base de données, mais le nom de la collection des commandes. Cela nous permettra d'importer ces références dans d'autres fichiers de composants. Nous pourrions faire des choses comme lire le contenu ou ajouter de nouvelles données. Nous examinerons cela ensuite. La dernière étape de cette vidéo consiste à indiquer à Firebase que nous souhaitons utiliser le cloud Firestore ainsi que l'authentification. Passons à la section de présentation du projet dans le navigateur. Nous pouvons continuer sur la console. Nous n'avons pas besoin de données supplémentaires de ce point de vue. Cela nous donne la possibilité d'ajouter divers produits à Firestore. Nous pouvons faire des choses comme suivre les performances. Nous pouvons ajouter des analyses pour notre cas d'utilisation pour le moment, tout ce dont nous avons besoin est l'authentification et la base de données cloud Firestore. Commençons par l' authentification. Lancez-vous. Cela nous permettra de nous connecter à différents fournisseurs tels que Google et Facebook. Mais je vais créer un système de courrier électronique et de mot de passe. Cliquez dessus pour activer l' e-mail et le mot de passe. Maintenant, je ne vais pas activer le lien e-mail, nous allons simplement le conserver sous forme d' e-mail et de mot de passe. C'est tout ce que nous devons faire pour le moment. Ceci est actuellement activé. Revenons à l'aperçu de notre projet. Vous pouvez voir que nous avons maintenant le raccourci vers l'authentification. Ensuite, nous ajouterons le Cloud Firestore, qui apparaît également dans la barre latérale. Créez notre base de données. Nous allons commencer en mode test et nous examinerons les règles de sécurité plus tard. Mais pour l'instant, cela nous donnera un accès complet à notre base de données pour lire et écrire. Cette fonctionnalité ne devrait être autorisée qu'à des fins de test, et nous verrons comment nous pouvons l'améliorer ultérieurement. Cliquez sur Suivant. Choisissez un emplacement si vous le souhaitez et activez la base de données. Plus tard, nous activerons certaines règles de sécurité pour renforcer la sécurité de notre base de données. Bien. Nous avons maintenant configuré un mode d'authentification et nous avons également une base de données vide. fois cela en place, nous verrons ensuite Une fois cela en place, nous verrons ensuite comment ajouter de nouvelles pizzas à cette base de données vide. 33. Ajouter des pizzas à la base de données: Maintenant que la configuration est terminée, nous pouvons utiliser le DBPizzasRef que vous avez précédemment configuré ainsi que notre référence de commande pour travailler avec notre base de données. Nous allons commencer par ajouter les nouvelles pizzas à la base de données dans les nouveaux composants de pizza. Pour cela, nous devons importer deux choses. Passons donc au nouveau composant pizza, qui se trouve dans le dossier Components et dans le dossier Admin. En haut, créez nos instructions d'importation dans lesquelles nous importerons quelque chose appelé AddDoc, qui provient du nom du package, qui est Firebase/Firestore, qui est logique car il s' agit d'une fonction liée à la base de données. Le second que nous devons importer est notre DBPizzasRef. Le chemin du fichier a été facilement renseigné pour nous. Les deux seront utilisés dans une nouvelle fonction pour ajouter notre pizza. Revenons au bas de nos scripts. Cela va être asynchrone, créez une fonction appelée Ajouter. Comme nous travaillons avec une base de données et que les choses peuvent mal tourner, nous devons placer cela dans une section «  Essayer et récupérer ». Catch prend en compte l'erreur , que nous pouvons stocker dans la variable e. Pour l'instant, nous allons travailler dans la section d'essai. De là, nous pouvons appeler notre fonction, que nous venons d'importer, appelée AddDoc. À l'intérieur d'ici, nous devons passer deux choses. La première est la collection à laquelle vous souhaitez ajouter, qui est stockée dans notre DBPizzasRef. N'oubliez pas que cela fera référence à une collection appelée pizzas. L'article que vous souhaitez ajouter à la base de données sera notre NewPizza, qui est cet objet juste au-dessus. Comme cela est stocké dans une référence, nous devons accéder à la valeur. Nous pouvons désormais appeler cette fonction d'ajout lorsque nous cliquons sur le bouton Ajouter. N'oubliez pas qu'à l'intérieur de l'application et de la section d'administration, nous avons ce bouton Ajouter. Accédez au modèle. Nous y sommes. Nous allons écouter maintenant pendant un clic. Le nom de la fonction add empêchera le comportement par défaut, qui empêchera la page de se recharger et de perdre toutes les données ou le formulaire. De plus, comme nous ne savons pas combien de temps cela va prendre, puisque nous transférons certaines données vers un serveur externe, nous allons ajouter await car nous pouvons attendre que les données reviennent avant de passer à l'étape suivante. Et nous pouvons l'utiliser puisque nous avons marqué notre fonction comme asynchrone. Juste avant de le tester et de nous assurer que cela place notre NewPizza dans la base de données, nous allons ajouter un système de gestion des erreurs ainsi qu'un message à afficher dans le navigateur. Ce message peut être stocké dans une constante. Juste au-dessus de notre message NewPizza, const, stockez-le dans une référence, car nous allons le mettre à jour. Initialisez-le sous la forme d'une chaîne vide et revenez à notre fonction d'ajout où nous mettrons à jour la valeur de ce message. Puisque nous utilisons l'async, attendez, tout code exécuté ci-dessous ne se produira qu' une fois que nous aurons récupéré les informations de notre base de données. Sur la ligne suivante, nous saurons si cela a été un succès ou s'il y a eu un échec. Comme nous l'avons intégré dans une section d'essai, nous saurons que ce code ne s' exécutera qu' en cas de succès. Nous ajouterons le code d'échec à l'intérieur de la zone de capture. Ci-dessous, accédez à notre message.value, qui sera un succès. Ouvrez les backticks et nous dirons Pizza, placez-le dans un nom de variable. Nous allons placer une variable afin de pouvoir accéder à notre nouvelle pizza et le nom NewPizza.value.Name a été ajouté. Ensuite, s'il y a une erreur, passez dans la zone de saisie, nous accèderons à notre message.value et définirons cette chaîne sur laquelle il y a eu une erreur, ajouterons la pizza. Nous devons ensuite afficher ce message dans notre modèle. Je vais le faire tout en bas, juste en dessous de ce bouton, à l'intérieur d'une travée. Je vais mettre notre message et la dernière chose à faire est de le tester dans le navigateur. N'oubliez pas que notre base de données est actuellement vide. Dans Admin, nous allons ajouter une Margherita. Nous allons déplacer l'exemple de code. Cliquez sur le bouton Ajouter pour activer notre fonction. Ça y est, les choses commencent à aller bien. Nous avons Pizza Margherita qui a été ajoutée à la base de données et actualisée. Cela semble prometteur. Nous avons notre collection de pizzas, que nous avons créée dans notre configuration Firebase, qui se trouve ici. Nous avons ensuite utilisé dans NewPizza une méthode appelée AddDoc, et cette méthode AddDoc a ensuite référencé notre collection, qui est Pizzas, et la valeur est NewPizza.value. Dans la base de données, cette collection Pizzas contient un identifiant de document unique, puis tout le contenu de notre nouvelle pizza. Essayons-en un autre, Pepperoni. Ajoutez ceci. Nous y voilà. Nous savons comment documenter références et si nous cliquons sur celle-ci, celle-ci est désormais le Pepperoni. Pourquoi pas ? Nous en ajouterons une autre à notre nouveau formulaire de pizza. Végétarien Dites mozzarella, poivrons, oignons, champignons. Cela n'a pas vraiment d' importance à ce stade. Nous mettrons à jour le prix, disons 8 et 14. Ajoutez ceci. Nous avons également atteint notre objectif pour cette vidéo, qui est d'ajouter une nouvelle pizza à notre base de données. Mais si nous jetons un coup d'œil ce texte juste ici, nous avons également besoin d'un peu d'espace à gauche du message. Dans le fichier NewPizza, descendez vers le bas. Ajoutez une section de style. Nous allons lui donner une classe ou un span, une classe de message, y accéder et définir une marge sur la gauche, 1rem devrait convenir. Nous devons ajouter une nouvelle pizza pour pouvoir voir cela. Nous irons manger un festin de viande. Modifiez la description, pepperoni, salami, bœuf et jambon. Changez le prix. Nous y voilà. Nous verrons ensuite comment récupérer ces pizzas de la base de données et les afficher dans notre menu. 34. Obtenir des pizzas: Pour récupérer des pizzas depuis notre base de données Firestore, Firebase fournit une fonction appelée GetDocs. De plus, comme nous souhaitons utiliser ces pizzas à la fois dans le menu et dans la section d'administration, nous pouvons créer un fichier composable partagé pour ce faire. Créons un nouveau fichier dans la barre latérale. Dans les composables, nous allons créer un nouveau fichier appelé usePizzas.js. Cela suivra un modèle similaire à l'autre composable que nous avons créé. Nous allons exporter une fonction que nous pouvons importer dans n'importe quel autre fichier. Exportez la fonction par défaut appelée UsePizzas et créez le corps de la fonction qui contiendra tout le code que vous souhaitez rendre disponible. À l'extérieur, nous pouvons ajouter nos importations en haut du fichier. Nous devons importer la référence depuis Vue. La raison pour laquelle nous en avons besoin est que nous avons besoin d'une constante qui contiendra toutes les pizzas locales. Const AllPizzas est égal à une référence et il s'agira d'un éventail de toutes les pizzas. Maintenant, pour obtenir les pizzas, nous devons importer certains objets depuis Firebase. Le premier package dont nous avons besoin est celui que nous avons déjà mentionné , à savoir GetDocs. Celui-ci provient de Firebase/Firestore. Ensuite, nous devons également importer la référence que nous avons créée dans le fichier Firebase pour avoir accès à cette collection de pizzas. Nous devons donc importer le DBPizzasRef à partir de ce fichier Firebase. Importez le fichier DBPizzaRef à partir de ce chemin de fichier. Ensuite, juste en dessous, là où toutes les pizzas sont constantes, nous allons créer une fonction qui sera chargée récupérer nos pizzas de la base de données. Cette fonction sera marquée comme asynchrone car nous devons attendre le retour des données sur les pizzas avant de pouvoir utiliser cette fonction appelée GetPizzas. Ensuite, nous pouvons appeler notre méthode ci-dessus que nous venons d'importer appelée GetDocs, transmettre dans notre référence de collection, qui est DBPizzasRef. Nous allons stocker la valeur de retour dans une constante appelée docs et nous attendrons également que ces données nous reviennent. Exécutez ensuite cette fonction et obtenez la pizza de la base de données. Nous avons deux options différentes. Nous pouvons le déclencher manuellement en appelant GetPizzas ou nous pouvons déclencher lorsqu' un composant est monté à l'aide du hook de cycle de vie OnMounted . À partir du package vue, nous allons le faire avec OnMounted. Ensuite, dès que ce code ou ce composant sera monté sur le DOM, OnMounted sera appelé, qui appellera alors notre fonction appelée GetPizzas. Cela évite d'avoir à appeler cette fonction manuellement et cela signifie qu'elle le fera automatiquement en arrière-plan dès que le composant sera chargé. Si nous passons au projet et que nous accédons à la console, nous pouvons le tester en créant un journal de console pour la valeur renvoyée dans la documentation. Actualisez et nous ne voyons toujours rien dans la console car ce code n'est actuellement pas importé dans les composants. Le hook OnMounted Lifecycle n'est pas appelé. Alors allons-y, mais d'abord, nous allons renvoyer les valeurs que nous devons importer. Tout ce dont nous avons besoin actuellement, c'est de cette référence à AllPizzas. Nous allons commencer par l'importer dans notre MenuView qui se trouve dans la section Affichage. Ensuite, comme nous l'avons fait avec le composable UseBasket, nous devons d'abord l'importer Nous allons donc importer UsePizzas à partir de notre fichier composable, puis en utilisant cette structuration, nous importerons notre référence AllPizzas à partir de cette fonction. Const AllPizzas est égal à la valeur renvoyée par UsePizzas. Nous avons maintenant constaté une erreur puisque nous doublons cette référence AllPizzas, nous l'importons depuis notre composable. Nous avons également cet exemple de code ici. Nous n'avons plus besoin de tout cela. Nous pouvons supprimer cette section. Comme c'est le seul code qui utilise ref, nous pouvons également le supprimer du script. Si nous rechargeons, rien n' est encore connecté à la console. effet, pour que cela soit réellement monté et que notre fonction puisse être appelée, nous devons accéder au composant menu. Sélectionnez cette option, nous verrons alors un journal dans la console. Ouvrez cet objet et de nombreuses informations sont renvoyées par la base de données. Nous n'avons pas besoin d'une grande partie de ces informations à ce stade, mais une chose qui nous intéresse, c'est cette propriété documentaire. Ouvrez-le, et à l'intérieur se trouve un tableau contenant chaque document de pizza que nous avons créé. Jetons un coup d'œil à l'intérieur. Encore une fois, il y a beaucoup d'informations ici. Nous pouvons voir l'identifiant du document. Nous pouvons examiner les documents et les données et explorer les valeurs des données, y compris le nom, les options et la description. Ce que nous pouvons faire maintenant, c'est parcourir en boucle toutes les valeurs contenues dans les documents. Malheureusement, nous n'avons pas besoin d' approfondir tous ces niveaux de notre objet. Au lieu de cela, nous pouvons appeler des documents en tant que fonction. Cela permettra d'extraire tous les champs dont nous avons besoin et de les rendre accessibles à l'intérieur de notre script. Revenez dans notre composable. Nous pouvons déplacer le journal, accéder à nos documents renvoyés et l'appeler pour chaque boucle. Pour chacune, nous allons exécuter une fonction pour chacune de nos valeurs. Dans mon cas, j' ai actuellement quatre pizzas en stock. Ensuite, pour filtrer toutes ces données inutiles, je vais créer un nouvel objet avec une structure plus simple, donc const pizza. À l'intérieur, nous pouvons structurer ce nouvel objet avec uniquement les données dont nous avons besoin. Comme nous l'avons vu, chacun d'entre eux possède un identifiant unique. Nous pouvons le voir si nous fermons cet identifiant, donc nous le définissons. Pour accéder aux informations sur les pizzas sur chaque boucle, nous devons également transmettre une variable à notre fonction. Dans la première boucle, doc sera égal à notre première pizza. la deuxième boucle, ce sera notre deuxième pizza, et ainsi de suite. Nous y accédons et sélectionnons la propriété ID. Ensuite, nous devons transmettre les données que nous aurions vues, qui sont stockées dans les documents, .data.value. Nous devons maintenant accéder à tous ces champs. Comme nous l'avons mentionné, nous n'avons pas besoin d'approfondir tous ces champs Nous pouvons accéder à nos documents et appeler la fonction de données. À l'aide de l'opérateur de diffusion JavaScript, nous pouvons également extraire les valeurs dont nous avons besoin à certains endroits directement à l'intérieur de notre objet pizza, à côté de notre identifiant. Enfin, à chaque boucle, nous voulons attribuer la valeur de cette pizza à notre référence AllPizzas. Il suffit de supprimer cet objet, d'accéder à AllPizzas.value, puis d'utiliser la méthode JavaScript push pour envoyer chacune de nos pizzas. C'est tout ce dont nous avons besoin aujourd'hui. Revenons à notre fichier de menu. N'oubliez pas que nous avons importé toutes les pizzas de notre composable. De plus, le nom de cette variable est également le même que celui que nous utilisions précédemment. Maintenant, si nous l'enregistrons et le rechargeons, la table est maintenant remplie avec les pizzas de notre base de données. Une autre chose que nous pouvons maintenant faire puisque nous avons accès à un identifiant unique pour chacune de nos pizzas est de modifier la clé unique pour chaque valeur de cette boucle. Plutôt que d' utiliser l'index, nous pouvons accéder à notre pizza.id. Nous n'avons plus besoin de cet index, nous pouvons donc simplement référencer notre pizza. Il en va de même pour les options. Les options doivent comprendre deux éléments. Le premier, encore une fois, est pizza.id et comme la pizza a deux options, nous l'ajouterons également à notre option.size. Encore une fois, nous pouvons déplacer l' index et le tour est joué, tout est maintenant terminé. Ensuite, nous allons continuer avec un thème similaire en utilisant également ces pizzas dans la section d'administration et nous découvrirons également comment supprimer ces pizzas de notre base de données. 35. Liste et suppression de pizzas dans Admin: Comme nous l'avons découvert dans la vidéo précédente, si nous accédons à ce lien d'administration, nous avons également les composants de ce menu que nous avons créés précédemment. Comme nous l'avons également fait avec le menu de la vidéo précédente, nous devons maintenant extraire nos pizzas de la base de données et les afficher dans l'interface d'administration. Nous veillerons également à ce que cette croix rouge, que nous avons répertoriée à côté de chacune de nos pizzas, supprime également cet article de la base de données. Passons à notre utilisation du fichier pizzas.js. Il s'agit du composable que nous avons configuré dans la vidéo précédente. Nous devons importer deux éléments supplémentaires depuis Firebase, en particulier le package firestore. Ce dont nous avons besoin, c'est de quelque chose appelé delete doc, qui, comme supprimera un élément d'une collection ainsi que le document. Nous allons utiliser doc pour faire référence à tout document particulier que vous souhaitez sélectionner. Ensuite, cela est transmis à Delete Doc pour le supprimer réellement. Nous allons créer une nouvelle fonction à l'intérieur de cet objet juste en dessous de onmounted Elle sera asynchrone appelée delete pizza. sera également transmis à cette fonction de suppression de pizza ID sera également transmis à cette fonction de suppression de pizza lors de son appel. Parce que, bien sûr, nous devons savoir quelle pizza nous voulons supprimer pour pouvoir accéder à ce document que nous venons d'importer depuis Firestore. Doc va prendre en compte deux choses. La première est la référence de la collection de base de données, que nous avons toujours stockée dans DB pizzas ref , puis elle doit prendre en compte l'idée de la pizza réelle que nous voulons supprimer. Ce n'est pas réellement responsable la suppression d'une pizza, tout ce que nous faisons ici est d'obtenir une référence à un document en particulier. Nous réduisons cette ville par collection , puis par carte d'identité. Nous pouvons ensuite utiliser cette référence pour transmettre, supprimer le document. En ce qui concerne les passes, nous pouvons les stocker dans une constante, disons une pizza, puis les transmettre à Delete Doc. Nous allons attendre ça. Nous attendrons la fin de cette opération. Ensuite, nous appellerons notre méthode ci-dessus : appelez Get Pizzas. Si nous voulons appeler get pizzas une fois cela terminé, c'est parce que nous devons mettre à jour notre application. Nous supprimons un article, puis nous appelons get pizzas, qui se trouve juste ici. Cela va alors demander toutes les pizzas que vous avez stockées dans la base de données, moins une que nous avons supprimée. Cela mettra ensuite à jour toutes les pizzas, ce qui est notre référence ici en haut. Toutes les pizzas sont ensuite renvoyées, document est composable, ce qui mettra à jour notre menu, que nous avons créé sur la gauche ici, et le menu dans l'interface administrateur sera également mis à jour . Pour utiliser cette fonction, nous devons également la renvoyer depuis notre pizza de suppression composable, puis ouvrons la barre latérale, passons aux composants, la section d'administration, et à l'intérieur, nous avons ce pizzas.vue, responsable de cette section. Pizzas.vue doit importer les sections dont nous avons besoin. Il faut donc placer une balise de script lors de la configuration et importer notre composable, qui utilisait des pizzas. Use pizzas a renvoyé ces deux valeurs, que nous pouvons déstructurer et stocker dans des constantes afin d'avoir besoin de toutes les pizzas. Supprimez la pizza, que nous pouvons récupérer en appelant la fonction UsePizzas. Passons à notre section de tableaux où nous avons quelques données factices. Notre margarita est en place et nous pouvons maintenant utiliser le corps de la table pour recouvrir toutes nos pizzas. V pour pizza dans toutes les pizzas, entrez une clé et nous avons maintenant l'identifiant unique de pizza provenant de la base de données afin que nous puissions y accéder. La margarita peut être remplacée par le nom dynamique de la pizza, donc pizza.name. Comme il s'agit de la section administrative, nous n'avons pas besoin de toutes les informations supplémentaires telles que la description et les prix, il nous suffit de voir une référence à chaque pizza. Nous pouvons maintenant le voir sur la gauche. Chacune de ces croix permettant de supprimer la pizza de la base de données est stockée à l'intérieur de ce bouton afin que nous puissions ajouter un écouteur de clics , puis référencer notre fonction qui consiste à supprimer la pizza. Cela doit également transmettre l'identifiant de pizza que nous voulons supprimer. Nous pouvons maintenant y accéder avec pizza.id. Essayons-le. Nous allons supprimer le festin de viande. Dès que nous faisons cela, nous constatons un petit problème. Si nous examinons les quatre pizzas d'origine que nous avions, c'est très bien. Il agit des quatre pizzas originales de notre base de mais si nous passons à notre composable, nous l'avons supprimée de la base de données, mais nous avons appelé à nouveau get pizza, ce mais nous avons appelé à nouveau get pizza, qui consiste à récupérer nos pizzas existantes gratuites de la base de données et à les ajouter à toutes les pizzas. En gros, au lieu de remplacer toutes les pizzas, nous conservons les pizzas existantes et ajoutons les trois articles supplémentaires. En fait, ce n' est pas une mauvaise chose le moment, car nous pouvons constater que les trois articles supplémentaires n'incluent pas le festin de viande, que nous avons supprimé. Tout cela semble bien fonctionner. Pour résoudre ce problème, c'est assez simple, tout ce que nous devons faire juste avant de recevoir nos nouvelles pizzas est de récupérer notre référence de toutes les pizzas, leur valeur et de la réinitialiser un tableau vide avant de recevoir nos nouveaux documents. Essayons ça. Rafraîchissez la page. Voici nos trois pizzas, enlevez l'une d'entre elles, et tout fonctionne désormais correctement. dernière amélioration que nous pouvons apporter est d'ajouter un message d'erreur en cas d'erreur ou de problème, supprimer des pizzas ou même de récupérer les pizzas de la base de données. Pour cela, nous pouvons créer une nouvelle référence de message dans le fichier all pizzas. Juste en dessous de toutes les pizzas créez une nouvelle constante pour stocker notre message. Ce sera une référence et, par défaut, une chaîne vide. Ensuite, dans les pizzas à emporter, nous pouvons ajouter une zone de gestion des erreurs avec une zone d'essai et de capture. Mettons-le tout en haut de la section Essayer et attrapons. Catch enregistrera une erreur. Ensuite, nous devons déplacer tout notre code dans la section d'essai. Si vous trouvez la fin de cette fonction, saisissez tout jusqu'à all pizzas.value. Découpez-le en ne laissant que la zone d'essai et la zone de capture à l'intérieur, puis dans la section d'essai, collez-le à nouveau et voici dans la section d'essai, collez-le à nouveau et voici le code que vous voulez exécuter et essayer de réussir. Mais s'il y a une erreur, nous pouvons alors accéder à la zone de capture et mettre à jour notre message. Le message.value est égal à une chaîne et nous dirons qu' une erreur s' est produite lors de la récupération des pizzas. Veuillez recharger la page. Tout comme nous l'avons fait pour les pizzas, nous pouvons également mettre à jour le message et le réinitialiser pour qu'il s'agisse d'une chaîne vide à chaque fois que nous l'exécutons. Le message.value est renvoyé à une chaîne vide. Il en va de même pour notre deuxième fonction qui est de supprimer une pizza. Le bloc d'essai, le bloc de capture, qui prend en compte l'erreur, recadre le code existant, coupe et le remplace, placez-le dans le bloc d'essai. Réinitialisez le message, il s'agit d'une chaîne vide, puis mettez à jour le message dans le bloc de saisie. C'est une chaîne b, alors si vous le souhaitez, vous pouvez également inclure le message d'erreur, que nous recevrons. Mais pour plus de simplicité, je vais simplement créer une chaîne indiquant qu'une erreur s'est produite lors de la suppression de la pizza. Alors, veuillez réessayer. Ensuite, pour utiliser ce message dans nos composants, nous pouvons le renvoyer, revenir dans les composants pizzas.view, l' importer, puis, juste en dessous de la section d'en-tête, créer un nouvel élément p pour afficher notre message entre les deux accolades. Ajoutez une classe pour le style de l'erreur. Ce qui servira également de mesure temporaire, c'est d' ajouter du texte à l'intérieur. N'importe quel texte convient, c'est juste pour que nous puissions ajouter du style et voir à quoi cela ressemble sans avoir de véritable message d'erreur. Jusqu'à la section style, où nous pouvons ajouter du style à cette classe d'erreur. Tout d'abord, une couleur qui aura la valeur RGB de un à zéro pour le rouge, 67 et 67, qui nous donnera cette couleur rouge. Une bordure d'un pixel, une ligne continue arrondit les coins avec un certain rayon de bordure, puis un espacement intérieur et extérieur avec un rembourrage et une marge. Rembourrage de 1 rem et aussi d'1 rem de marge à l'extérieur, enregistrez, testez. C'est ainsi que notre message d'erreur sera affiché à l'intérieur des composants, mais si nous devions supprimer le texte et le laisser ensuite en tant qu' élément p vide, je peux le voir ici. suppression de ce texte d'erreur affichera toujours la bordure rouge car l'élément p est toujours présent, qu' il contienne des messages ou non. Pour supprimer cela, nous pouvons ajouter une instruction v If pour n'afficher ces éléments que si le message existe. Si nous avons un message et que ses éléments seront affichés, sinon, il sera supprimé du dom et nous ne verrons plus cette bordure rouge. 36. Créer des ordres: Pour créer une commande, suivez le même schéma que pour créer une nouvelle pizza. Passons au panier usagé composable, qui se trouve à l'intérieur d'un dossier composable. Ouvrez ceci et nous devons d'abord importer deux choses. Tout d'abord, nous devons importer AddDoc depuis le package Firestore, donc celui-ci provient de Firebase/Firestore. Ensuite, la référence à la collection de commandes réelle, vers laquelle vous souhaitez l'envoyer. Importons-le depuis notre fichier Firebase. Ce que nous devons faire est d' importer cette base de données de commandes (réf. contenu du panier se trouve déjà dans le tableau des paniers et il est affiché lorsque nous ajoutons quelque chose depuis la section du menu. Sur la droite, voici le panier. Nous devons maintenant créer une nouvelle fonction pour ajouter la collection la plus ancienne à la base de données. Juste en dessous de cette fonction, revenons à cette flèche en bas, cela n'a pas vraiment d'importance. Ce sera asynchrone, le nom de la fonction « add new order », puis, ce que nous devons faire à l'intérieur, c'est l'encapsuler dans un bloc try and catch afin qu'il puisse gérer les erreurs et transmettre l'erreur. La première chose à prendre en compte est que ce panier situé en haut est actuellement stocké sous forme de tableau. Mais Firebase nécessite un objet, nous pouvons donc utiliser l'opérateur de propagation pour fusionner les éléments actuels dans un objet. Passons à la section Essayer et nous allons restructurer notre ordre en créant un nouvel objet. La première propriété à ajouter s' appellera CreatedAt permettra de suivre l'ordre dans lequel nos commandes sont passées et, par conséquent, nous pourrons les traiter ou les afficher dans le bon ordre dans l'administration. Mais cela créera simplement une nouvelle date JavaScript, installez-la dans la base de données. Ensuite, comme mentionné précédemment, pour récupérer le contenu de notre tableau, intégrez-le à notre commande afin de créer la propriété d'une pizza, qui sera elle-même un objet dans lequel nous allons fusionner les propriétés de notre panier . Comme il s'agit d'une référence, nous devons accéder à la valeur juste après la commande. C'est ici que nous allons utiliser la méthode AddDoc de Firestore pour transférer vers une collection particulière. Une collection est notre référence de commandes que nous venons d'importer. Appelez la méthode AddDoc, qui prend en compte le premier paramètre de référence d'audit de base de données, qui est une référence à notre plus ancienne collection, puis nous appliquerons cet ordre particulier à cette collection. Une fois que cela aura été fait avec succès, nous attendrons la fin de cette opération, puis nous pourrons réinitialiser la valeur de notre panier pour qu'elle soit un tableau vide. Cela effacera toutes les pizzas du panier, afin que l'utilisateur puisse recommencer. C'est tout ce dont nous avons besoin maintenant pour la section d'essai et pour tenir l'utilisateur au courant Nous allons créer une nouvelle variable pour contenir un message. Le message par défaut sera quelque chose comme si votre panier est vide, donc nous pouvons le voir ou s'il n'y a pas pizza sur le côté droit. Donc, composez le texte du panier, placez-le dans une référence, le texte de votre panier étant vide. Ce sera la valeur par défaut et nous pouvons la mettre à jour selon que la commande a été ajoutée avec succès ou non , en descendant vers la fonction. Passons à la section Essayer et, tout en bas, nous accèderons au panier text.value, et le mettrons à jour pour qu'il s'agisse de nouvelles chaînes, du type « Merci, votre commande a été passée ». l'autre section, et comme nous l'avons vu précédemment, vous pouvez également intégrer le message d'erreur si vous le souhaitez, mais pour plus de simplicité, je vais simplement mettre à jour le texte du panier pour qu'il s'agisse d'une nouvelle chaîne, qui sera égale à une erreur lors de votre commande. Je vais dire, s' il vous plaît, essayez à nouveau. Nous pouvons l'appeler à partir de nos composants. Nous devons renvoyer notre appel de fonction et nous devons également renvoyer le texte du panier afin de pouvoir l'afficher dans les composants. Au fur et à mesure que vous commandez, le texte du panier s'affiche dans la vue du menu . Rendez-vous ici, et nous pouvons maintenant les importer depuis notre composable. Ici, nous avons déjà une référence à notre panier d'utilisation composable Nous pouvons donc passer entre crochets et importer le texte du panier en même temps que ajouter une nouvelle commande. Commençons par ajouter une nouvelle commande, que nous pouvons déclencher à partir de notre bouton. Descendez dans la division du panier, et en bas, vous trouverez ce bouton de commande, maintenant en un clic, qui déclenchera notre fonction. La dernière étape consiste maintenant à ajouter le texte du panier et se souvenir que, par défaut, il indique que votre panier est vide Nous ne voulons donc pas l' afficher s'il s'agit déjà de nos articles dans le panier. Pour cela, le rendu conditionnel sera utile. Passons en haut de la section du panier, juste en dessous du titre. Créons des sections div contenant cela et à l'intérieur, nous utiliserons v-if, pour ajouter notre rendu conditionnel où nous voulons vérifier si la longueur du panier est supérieure à zéro, c'est-à-dire nous avons des articles dans le panier. Si c'est vrai, nous allons couper la section div de fermeture, puis descendre jusqu'à la fin, juste en dessous de nos boutons placer la commande, fermer celle-ci. Vous pouvez maintenant voir si vous allez dans la section panier, nous n'avons aucun de ces boutons ou le total de la commande. Mais tout cela créera un nouveau div, qui est la section v-else et cette section ne sera affichée dans le navigateur que s' n' y a aucun article dans le panier, ce qui est l'état actuel. Mais cela se placera à l'intérieur des doubles bretelles bouclées. En fait, nous allons y mettre un élément p pour commencer. Je vais mettre le texte du panier et nous voyons des erreurs. Voyons de quoi il s'agit. Nous n'avons pas de v-if adjacent, il s' agit donc de la section v-l et cela devrait être le v-if. Nous avons juste cette section div supplémentaire que nous pouvons supprimer, assurez-vous que c'est correct. Nous avons ce div, la balise d'ouverture, tout le contenu, la section de fermeture, v-else. Nous devons également déplacer ce div de fermeture avant tout ne soit correct. Maintenant, nous devons simplement assurer qu'après la section v-l, nous avons deux divs de fermeture supplémentaires, donc libres d'affilée. Puis, en haut du h3, du div, puis du tableau. Nous devrions maintenant voir dans le navigateur que le texte par défaut de votre panier est vide, cliquez sur n'importe quel article et la longueur du panier est maintenant supérieure à zéro. Nous pouvons donc afficher notre tableau. Ajoutons maintenant quelques articles supplémentaires à nos paniers et nous pouvons tester en cliquant sur le bouton « Passer la commande » , cela semble bon. Nous avons un message génial, passez à la console Firebase. Il s'agit de Console.firebase.google.com. My Pizza Planet V3 dans la base de données. Nous avons maintenant la plus ancienne collection, nous avons un numéro de commande, ça a l'air bien. Nous avons une Margherita de 9 pouces et deux de 12 pouces. Essayons un autre pepperoni de 12 pouces et Margherita, passez votre commande. Bien, tout fonctionne correctement et ensuite, nous allons récupérer ces commandes dans la base de données et les afficher dans l'interface d'administration. 37. Recherche de commandes: Nous pouvons maintenant passer des commandes avec succès et les ajouter à notre base de données. Nous avons maintenant pour tâche de récupérer ces commandes dans la base de données afin de pouvoir les utiliser dans notre projet, et en particulier dans la section d'administration. Plus tôt, nous avons créé une section des commandes en cours en bas de page. Nous allons les récupérer dans la base de données, les parcourir en boucle et les placer dans cette table. Pour garder les choses organisées, créez un nouveau composable dans le dossier des composables. Celui-ci s' appellera UseOrders. Comme toujours, nous devons exporter une fonction par défaut, UseOrders et y placer le code. Pour commencer, nous avons besoin d'une constante pour stocker toutes nos commandes. Nous appellerons cela AllOrders. Nous utiliserons également la référence qui va entourer notre tableau. Nous allons l'initialiser sous la forme d'un tableau vide , puis nous devons importer cette référence depuis le package de vue. Nous avons également besoin d'une fonction qui récupérera ces éléments de la base de données et les enverra à notre référence AllOrders. Nous allons créer une nouvelle fonction asynchrone, All GetOrders. Nous pourrions faire quelque chose de similaire à celui que nous avons utilisé par le passé. Si nous y jetons un coup d'œil, notre composable, qui était UsePizzas. À l'intérieur, ce que nous avons fait par le passé, c'est récupérer nos documents avec GetDocs. Nous avons cette fonction appelée GetPizzas. Celle-ci est un peu plus simple car tout ce que nous faisons doit appeler notre méthode GetDocs et transmettre une référence à toutes les collections de pizzas. Si nous le voulions, nous pourrions faire exactement la même chose en faisant référence à nos commandes. Mais pour ce cas d'utilisation, n'oubliez pas que dans la vidéo précédente, nous avons également introduit un nouvel ordre dans la base de données, qui incluait une propriété appelée CreatedAt. Quand on nous présente les pizzas de la collection AllPizzas qui n'étaient pas dans un ordre particulier. C'est là que cela fonctionne un peu différemment d'AllPizzas. Nous voulons nous assurer que nous extrayons les commandes dans un ordre particulier fonction des données dans lesquelles elles ont été créées. Retour à UseOrders. Pour ce faire, nous devons utiliser ce que l'on appelle une requête. Nous devons l'importer . Requête d'importation. Cela provient du package firebase slash firestore. À partir de notre fichier firebase.js, vous devrez également importer cette référence dans AllOrders. Revenons maintenant à notre fonction GetOrders, nous allons utiliser cette requête que nous venons d' importer. Requête. Ce que nous devons faire ici, c'est l'adopter en trois volets. La première est une référence à notre collection, qui s'appelle DBordersRef. Ensuite, nous pouvons également transmettre des paramètres de recherche supplémentaires. Dans notre cas, ce sera OrderBy. Orderby. Il s'agit également d'une méthode Firebase qui va ordonner le contenu que nous extrayons de notre base de données en fonction d'un champ particulier. Si tout ce que nous pouvons utiliser, nous devons également l'importer. Ensuite, nous transmettons le nom du champ par lequel vous souhaitez le classer. Dans notre cas, comme nous pouvons le constater lorsque nous avons créé une nouvelle commande, cette propriété s'appelle CreatedAt. Récupérez-la, collez-la, puis stockons cette référence dans puis stockons cette référence une constante appelée QueryData. À partir de maintenant, ce que nous faisons est assez similaire à ce que nous faisions lorsque nous avons récupéré les pizzas. Nous devons utiliser GetDocs. Nous devons ensuite parcourir ces documents, puis les intégrer à nos constantes. Dans cet esprit, nous allons copier l'intégralité de cette section. Juste au-dessus du bloc de saisie, vous pouvez copier les crochets. Ce sont les crochets pour chaque boucle jusqu'à nos documents. Copiez-le, collez-le juste en dessous de nos données de requête. Encore une fois, nous pouvons utiliser une grande partie de ces données. Nous pouvons conserver ce nom constant. Nous pouvons rechercher nos GetDocs. Tout ce que nous avons à faire au lieu de rechercher directement AllPizzas ou AllOrdersRef, nous allons transmettre notre QueryData filtrée, puis nous allons parcourir chacun de ces documents en boucle au lieu de créer une pizza et structurer une nouvelle commande. L'identifiant est accessible exactement de la même manière puisque chacun de ces documents revient de Firebase avec la même structure. Nous pouvons également fusionner les données du document, c' est-à-dire tous les champs d'AllOrder, tels que AllPizzas, et nos dates CreatedAt. La dernière différence réside dans cette ligne : au lieu de pousser vers AllPizzas, nous avons poussé vers AllOrders. Nous allons mettre AllOrder au lieu de la pizza. Nous allons le tester avant de le placer dans nos composants, juste en dessous de nos crochets pour boucle, place dans un journal de console ou allOrders, aucune valeur. Mais pour que ce journal de console fonctionne réellement, nous devons importer ce composable dans les composants requis. Il s'agira de la vue par points AllOrders, qui se trouve à l'intérieur des composants. Ensuite, dans le dossier d'administration, ouvrez AllOrders. Nous n'avons pas de script pour le moment . Créez un script, configurez, importez notre composable, qui est UseOrders. Ensuite, en utilisant la structuration, nous pouvons importer nos AllOrders, que je ne suis pas sûr d'avoir réellement renvoyés Nous allons donc y jeter un œil dans une seconde. Appelez notre fonction UseOrders. Revenez simplement en arrière. Nous devons renvoyer toutes les commandes pour utiliser ce bouton dans notre fonction. Retournez toutes les commandes. Ils devraient maintenant exécuter notre journal de console. Accédez à la section d'administration. Ouvrez la console. Nous ne voyons actuellement rien à l'intérieur car nous n'avons pas appelé notre fonction getOrders. Ce que nous allons faire, c'est simplement supprimer notre fonction, c'est de l'importer ou de la monter également. Nous exécuterons notre fonction appelée GetOrders dès que ce composant sera monté. Cela doit également être importé en haut. Nous devons également importer GetDocs depuis Firestore. Essayons encore une fois. Ouvrez le journal de la console dans la cible où nous pouvons voir que nous avons un tableau contenant deux commandes distinctes. Ils sont structurés exactement comme nous les avons créés. Dans cette commande, nous avons l'identifiant. Ensuite, nous avons fusionné le reste des données du document , à savoir l' objet pizzas et CreatedAt. Nous avons presque terminé cette vidéo. La prochaine chose que nous allons faire, La prochaine chose que nous allons faire juste pour terminer, est d'intégrer notre code dans un bloc try and catch. Accédez à la fonction GetOrders. Récupérez le contenu complet du journal de la console contenant le total des données de requête. Placez-le dedans, essayez et attrapez. Catch prend une erreur. Collez ensuite le contenu dans la section d'essai. Nous savons que cela fonctionne. Nous pouvons donc également supprimer ce journal de console. Nous allons laisser celui-ci là. Dans la vidéo suivante, nous passerons à nos commandes, les passerons en boucle et les placerons dans la vue d'administration. 38. Boucle de commandes: Nous savons maintenant que nous pouvons récupérer avec succès les commandes depuis Firebase et les stocker dans notre variable AllOrders. Nous les avons importés dans le fichier orders.view, et nous pouvons les utiliser pour les parcourir et les afficher dans le tableau. Il s'agit du tableau que vous voyez dans la vue d'administration en bas. Comme nous l'avons fait pour les pizzas ci-dessus, nous pouvons parcourir toutes ces données et afficher les valeurs correctes. La première chose à faire dans les commandes actuelles, que nous devons modifier cette valeur codée en dur de cinq. Nous pouvons obtenir la valeur réelle avec AllOrders.length. Nous savons actuellement que nous avons reçu deux commandes, donc cela semble correct. Ensuite, il y a les en-têtes du tableau. Nous n'avons pas besoin de mettre cette section en boucle car nous ne voulons pas d'en-têtes dupliqués, mais nous devons créer une boucle pour les deux lignes supplémentaires suivantes. La première rangée avec le numéro de commande et la deuxième rangée avec les détails de la pizza. Pour ce faire, nous allons créer un wrapper supplémentaire appelé template. Découpez ces deux rangées du tableau. Nous pouvons transmettre un élément appelé modèle, coller à nouveau, et nous pouvons maintenant utiliser ce modèle pour ajouter la boucle deux. Le modèle ajoutera un wrapper à cette section, mais il n'ajoutera aucun code HTML supplémentaire Il s'agit donc en fait d'un wrapper invisible. Placer dans une boucle avec v-for, commander dans AllOrders. Nous avons besoin d'une clé. Nous savons que nous avons une clé unique pour chaque commande enregistrée dans la pièce d'identité. Il s'agit de order.id. Nous pouvons également utiliser ce order.id au lieu de ce numéro de commande. Ensuite, nous pouvons accéder aux informations sur nos pizzas qui sont stockées dans cette ligne. N' oubliez pas que pour chaque commande, nous n'avons pas qu'une seule pizza Nous devons donc créer une boucle supplémentaire pour parcourir chacune des pizzas de notre commande. Par exemple, nous sommes actuellement en train de passer revue cette première commande ici. Nous devons ensuite parcourir orders.pizzas en boucle pour accéder à toutes les valeurs qu'il contient et les afficher sous forme de données de tableau. v-for, et nous dirons «  commandez l'article dans l'ordre ». commande est l'OrderItem complet, que vous avez depuis la première boucle, mais nous voulons accéder aux pizzas. Nous pouvons voir si nous nous dirigeons vers la console et que nous sautons dans les pizzas, nous n'avons pas enregistré l'identifiant de pizza pour chacune d'entre elles. Mais le nom et la taille de chaque pizza sont également uniques, nous pouvons donc créer une clé à partir de ceux-ci. Nous dirons OrderItem.name. Nous verrons OderItem.size. Nous pouvons accéder à l'OrderItem sur les propriétés de la pizza telles que le nom, la taille, la quantité et le prix. Le premier est le nom, le second est la taille, donc OrderItem.size, la quantité. C'est à vous de décider comment vous souhaitez gérer ce prix à afficher dans le tableau d'administration. Si vous le souhaitez, vous pouvez tout d'abord essayer de générer le OrderItem.price. Si nous allons dans l'administrateur puis actualisons, nous pouvons voir notre structure. Nous avons le numéro de commande, le nom de la pizza, la taille , la quantité et le prix sera affiché sous forme de prix unique pour une pizza. Si vous le souhaitez, comme nous l'avons décrit ici où nous avons dit que c'est le total. Je vais multiplier le prix par la quantité. Multiplions avec l'étoile par OrderItem.quantity. Il s'agit maintenant du total pour chacune de ces lignes. Ensuite, nous allons revenir à ces commandes, et nous verrons comment supprimer des articles notre base de données à l'aide de cette croix rouge. 39. Suppression de commandes: Nous allons maintenant nous concentrer sur la manière de supprimer les commandes. Si nous passons au fichier composable UsePizzas, celui-ci utilise le même processus que utilisé auparavant lorsque nous avons supprimé les pizzas. Nous avions cette fonction appelée delete pizza, qui prenait un identifiant, nous effasions tous les messages d'erreur existants, puis nous stockions une référence de document en accédant à notre collection, ainsi que l'identifiant. Nous avons appelé une méthode appelée DeleteDoc qui a intégré la pizza que nous venons de référencer, puis finalement nous avons appelé GetPizzas, qui a extrait toutes les autres pizzas qui étaient toujours disponibles. Donc, pour que les choses restent simples et agréables, nous allons copier l'ensemble de cette fonction, puis entrer dans le fichier le plus ancien utilisé et le coller dedans. Bien entendu, nous devons apporter quelques petites modifications que nous appellerons cet ordre de suppression. Encore une fois, cela nécessitera toujours la transmission d'un numéro de commande. Nous effacerons également tout message existant. Ce sera un ordre constant, ce sera le DBordersRef, et nous supprimerons cet ordre. getOrders et dans l'appel de fonction celui-ci doit correspondre celui que vous avez juste au-dessus. Nous pouvons ensuite modifier le message, une erreur s'est produite lors de la suppression de la commande. Ensuite, cela nécessitera également une importation supplémentaire, nous devons extraire notre document. Nous devons intégrer DeleteDoc, et nous devrons également créer ce message Passons donc à nos importations. Depuis Firestore, nous devons référencer notre document et supprimer le document. Puisque nous traitons nos commandes, nous avons déjà reçu l'impulsion des commandes juste ici, donc c'est très bien. Nous avons donc le message. Nous devons ensuite le créer en tant que ref, message const est égal à une ref, que nous définirons initialement comme une chaîne vide. Nous l'avons déjà importé, donc c'est bon. Nous devons ensuite renvoyer certaines valeurs de ce composable vers la section de retour. Nous y reviendrons, je supprimerais toute la méthode ainsi que le message à afficher à l'intérieur des composants. Nous allons ensuite passer à nos composants dans le dossier admin et dans les commandes, le orders.view, où nous pouvons ensuite créer des importations. Nous sommes déjà en train d'importer notre fichier de commandes d'utilisation, afin de pouvoir ensuite déstructurer, supprimer la commande et également notre message. Tout d'abord, nous appellerons ordre de suppression si nous examinons la section d' administration, puis si nous descendons. Nous nous souvenons donc tous que chacun de ces numéros de commande comporte une petite croix, qui est un bouton, et cela va appeler notre méthode, à laquelle nous pouvons transmettre le numéro de commande. C'est le bouton qui se trouve juste ici. La classe de btn remove. Nous écoutons maintenant un clic, que nous appellerons ordre de suppression, et l'ordre de suppression prendra en compte le numéro de commande, que nous allons transmettre à cette fonction. Je vais devoir le récupérer dans notre boucle afin que nous puissions commander l'identifiant que vous avez déjà utilisé. Nous pouvons simplement le mettre entre crochets, et cela sera transmis à notre fonction. Essayons ça. Dans le projet. Nous n'avons que deux commandes à l'intérieur pour le moment. Nous allons essayer de supprimer celui-ci. Nous constatons que cela passe à trois commandes maintenant, mais nous devons actuellement actualiser pour voir les mises à jour. Mais c'est bien pour le moment, nous y reviendrons dans le futur et nous améliorerons cela en ajoutant nos fonctionnalités en temps réel à partir de notre base de données. Cela signifie que dès que modifications seront apportées à la base de données, notre application sera mise à jour avec les nouvelles valeurs. Enfin, n'oubliez pas que nous avons également importé ce message en haut. Ce que nous pouvons faire, c'est l' afficher juste en dessous notre en-tête dans l'élément P. Non seulement nous devons afficher le message à l'intérieur, mais nous devons également ajouter un rendu conditionnel. Nous ne voulons pas que ce message soit toujours affiché ou qu'il occupe l'espace qu'il occupe actuellement. Si nous y jetons un coup d'œil, que nous la supprimons et que nous l'enregistrons, vous pouvez voir si nous la commentons et appuyons sur « Enregistrer ». Cette section occupera de la place, qu'il y ait Cette section occupera de la place un message ou non. Nous allons donc faire pour ne l'afficher que s'il y a un message, en plaçant la section v if pour n'afficher que s'il y a un message en place, et pour le style, nous allons également ajouter la classe d'erreur. 40. Afficher et masquer les blocs d'administration: La vue d'administration peut sembler correcte pour le moment, mais imaginez si notre application était beaucoup plus grande et que nous avions beaucoup plus de pizzas dans le menu ou de nombreuses commandes. Cette page peut être très longue. Pour y remédier, nous allons maintenant afficher et masquer chacune de ces sections. Cela rend la page beaucoup plus petite et nous n'avons pas besoin de lire toutes ces informations. Pour cela, nous allons créer une variable locale dans chacun de ces composants d'administration gratuits, qui sera ensuite alternée avec le texte de show and hide. Pour commencer, sautez dans la barre latérale. Les composants, l' administration et la nouvelle pizza. Eh bien, nous allons créer une nouvelle constante locale appelée show NewPizza. Définissez cette valeur sur ref et configurez notre ref, qui sera égale à la valeur true. Nous l'afficherons par défaut. Cela sera visible dans l' administrateur, puis une fois qu'un utilisateur aura cliqué dessus, cela deviendra faux. Nous allons le faire dans nos modèles et dans la section d'en-tête juste en dessous de notre titre, à l'intérieur des petits éléments. À l'intérieur, nous voulons vous montrer le texte de l'option Afficher ou masquer. Nous pouvons également afficher cette section de manière conditionnelle à l'intérieur des doubles bretelles bouclées. Ce que nous pouvons faire, c'est dire que si show NewPizza est égal à deux, nous affichons le texte de hide. Si ce n'est pas le cas, nous dirons show. Actuellement, cela est défini sur true, nous verrons donc le texte de masquer en haut. Nous pouvons ajouter la classe ToggleBtn. Écoute un clic quand je clique. Tout ce que nous voulons faire ici est de rechercher votre NewPizza soit égale à que votre NewPizza soit égale à l'opposé de la valeur actuelle . Essayons ça. Cliquez sur Masquer. Cela va maintenant basculer et nous pouvons ensuite utiliser notre variable show NewPizza pour afficher et masquer cette section complète. La section que nous voulons afficher et masquer est le formulaire. Nous pouvons toujours garder la tête en place, qui comporte le bouton et aussi le titre. Dans le formulaire, ajoutez v-show qui n'affichera ce contenu que si la valeur de show NewPizza est égale à deux. Il n'est pas en train de revenir en arrière pour le moment. Essayons de rafraîchir. Cela semble bien fonctionner. Je ne suis pas certain de ce qui s'est passé là-bas. Nous pouvons désormais reproduire cette section dans les commandes ainsi que dans le menu. Passons aux commandes. Importez notre vue de référence. Créez une variable locale. Celui-ci peut être des commandes à montrer. La valeur initiale de true. En fait, ce que nous allons simplement faire ici, c'est copier la section NewPizza que nous avons créée, donc la petite section complète. Apportez-le pour que ce soit cohérent. Placez-le juste en dessous de nos commandes en cours, rubrique Niveau 3, dans la même classe. Cette fois, tout ce que je veux faire est de changer cela pour afficher les commandes. Modifiez cela dans toutes les autres sections. Nous voulons ensuite montrer et masquer. Notre tableau serait affiché de la même manière que les commandes. Essayons ça. Elle peut se cacher. Cela a disparu. Ensuite, l'affichage révèle cette section. Enfin, la section menu, qui se trouve dans les pizzas ou Vue. Nous devons également importer ref vue. Notre variable locale appelée ShowMenu, la valeur initiale est true, puis, comme avant, dessous de notre titre de niveau 3, nous devons à nouveau copier cette petite section, coller dedans, puis remplacer toutes nos variables par ShowMenu. Enfin, ajoutez v-show à notre tableau. Essayons ça. Le menu, le masquage et l'affichage. Juste comme touche finale rapide. Si nous survolons ce bouton, nous pouvons le transformer en pointeur. Nous avons une classe de ToggleBtn pour chacune de ces sections. Comme nous l'utilisons dans plusieurs composants, accédez à nos actifs et à la classe main.css de ToggleBtn. Nous allons définir le curseur comme un pointeur. Nous y voilà. Cela fonctionne désormais pour nos trois sections. 41. La fonction d'inscription: Ce projet va utiliser l'authentification Firebase pour gérer les comptes utilisateurs et leur permettre de s'inscrire et de se connecter. Si nous accédons à la console Firebase et à la section Présentation du projet, vous devriez voir juste en dessous que nous avons notre authentification et notre configuration des raccourcis de la base de données Firestore. En effet, dans les premières vidéos, nous les avons déjà activées dans notre projet. Mais si vous n' avez pas encore configuré l'authentification, il vous suffit de vous rendre dans la section Tous les produits et de l' ajouter à l' aide de ce lien d'authentification. Comme le mien est déjà activé, je vais retourner au projet pour le configurer. Faisons en sorte que les choses restent organisées. Créons un nouveau composable dans le dossier des composables, un nouveau fichier. Celui-ci va être useAuth.js. Ensuite, comme pour tous les autres composables, nous exporterons une fonction par défaut. Celui-ci est UseAuth. Ensuite, nous ajouterons un relevé de retour en bas avant d'oublier. Comme nous n'avons actuellement aucun utilisateur dans notre projet, il serait logique que la première fonction que nous ajoutions soit de créer un nouvel utilisateur. Pour cela, nous devons importer certaines fonctions du package d'authentification Firestore Firebase. Au-delà de notre fonction, nous allons maintenant effectuer ces importations. Ce dont nous avons besoin pour importer est quelque chose appelé GetAuth. De plus, pour créer un nouvel utilisateur, nous devons importer une méthode appelée créer utilisateur avec e-mail et mot de passe. C'est un étui entièrement en forme de chameau. Après le premier mot , assurez-vous que chaque mot suivant commence par une majuscule. Nous allons l'importer depuis Firebase/Auth. Ensuite, nous allons utiliser cette importation GetAuth, qui va initialiser l'authentification Firebase. Ensuite, nous allons commencer à le référencer à l'intérieur d'une variable. Participez à notre fonction. Appelez cette authentification, qui est égale à getAuth. Comme il s'agit de notre méthode, nous devons l'appeler entre crochets, la fonction d'authentification suivante, qui va créer un nouvel utilisateur. Cela va être asynchrone appelé inscription. Lorsque nous nous inscrivons, étant donné que nous créons un utilisateur avec un e-mail et un mot de passe, nous avons également besoin de passer à cette fonction lorsque nous l'appelons. Nous verrons bientôt comment procéder dans corps de la fonction ou dans la gestion des erreurs. Créez une zone d'essai et de capture, en transmettant l'erreur. Ensuite, dans la section d'essai nous allons appeler la fonction de création d'un utilisateur avec e-mail et mot de passe, que nous venons d'importer. Attendons la valeur de retour. Créez un utilisateur avec e-mail et mot de passe. Cela va prendre en compte trois éléments distincts. La première est une référence à l'instance actuelle, qui est celle que nous avons configurée en haut. Il doit également contenir l' e-mail et le mot de passe. Nous y sommes. De plus, pour stocker les messages d'erreur, nous pouvons créer une nouvelle variable réactive. Pour cela, nous devons d'abord importer la référence depuis vue et créer notre constante juste en dessous dans la fonction appelée ErrorMessage. Configurez ensuite notre référence, qui sera initialement une chaîne vide. Nous y sommes. Si cette section est maintenant réussie, si la zone d'essai fonctionne correctement, nous pouvons alors effacer tous les messages existants. Nous allons réinitialiser le ErrorMessage.value pour qu'il revienne à une chaîne vide. Ensuite, dans la section d'erreur, nous pouvons également mettre à jour ce message d'erreur. Si nous procédons par exemple à l'inscription d'un utilisateur, nous ne voulons pas simplement renvoyer un message d'erreur générique, tel que « une erreur s'est produite, un problème s'est produit lors de la connexion  » ou quoi que ce soit d'autre. Il serait logique d' être un peu plus descriptif quant à la nature de l'erreur. se peut qu'ils ne saisissent pas un mot de passe suffisamment long, qu'il ne contienne pas les caractères corrects ou que l'e-mail soit déjà utilisé. Pour cela, nous devons accéder à notre erreur, qui est transmise à la zone de capture. Nous avons une propriété appelée code. Ce code est une chaîne de texte qui équivaut à un message d'erreur, et les deux plus courants fournis par Firebase sont une chaîne appelée auth/email déjà utilisée. Ça ressemble à ça. C'est auth/email déjà utilisé, avec des tirets entre chacun de ces mots. Auth/Weak-Password est également un autre outil utile. Ces messages seront utiles à transmettre à l'utilisateur. Mais d'abord, nous devons nous assurer de pouvoir détecter lequel d'entre eux est généré à l'intérieur de notre erreur. Nous pouvons le placer dans une instruction if-else, nous pouvons le placer dans une instruction switch, selon votre préférence. Je vais opter pour l'interrupteur. Nous pouvons y ajouter plus tard si nous voulons accéder à l'erreur, qui est transmise à notre objet catch , nous pouvons accéder au code. Ensuite, nous pourrons commencer à élaborer nos dossiers individuels. le premier cas, nous allons vérifier la présence de cette chaîne juste ici. Collez ceci dedans. Si cela est vrai, s'il y a une correspondance, nous voulons définir la valeur ErrorMessage.value. Pour être un peu plus descriptif, disons qu'un utilisateur avec cette adresse e-mail existe déjà, veuillez vous connecter. Si cela est vrai, nous pouvons alors sortir de ces instructions de commutation. Nous n'avons pas besoin d'aller plus loin dans un autre code. Le second cas est égal à notre deuxième corde, que nous avions en bas de l' écran. Déplaçons ça. Collez-le comme dans notre étui. Si l'utilisateur saisit un mot de passe faible, il s' agira d'un ErrorMessage.value. Nous allons mettre à jour cette variable pour indiquer que le mot de passe doit comporter au moins six caractères. Nous en sortons ensuite si celle-ci est vraie. Enfin, avec l'instruction switch, nous devons également ajouter un message par défaut en bas de page. Ceci est utile si l'un des cas ci-dessus ne correspond pas, revenez à la section par défaut, qui mettra à nouveau à jour le ErrorMessage.value. Celui-ci peut être un peu plus générique. Nous allons dire que nous sommes désolés, une erreur inattendue s'est produite. C'est tout ce dont nous avons besoin dans notre fonction d'inscription pour le moment. La dernière chose à faire est de renvoyer notre fonction d'inscription ainsi que notre message d'erreur. Les deux seront désormais disponibles pour les appels depuis nos composants. C'est ce que nous ferons ensuite lorsque nous créerons le formulaire de connexion. 42. Créer le formulaire de connexion: Grâce à notre fonctionnalité d'inscription qui fonctionne désormais, nous avons également besoin d'un formulaire pour saisir les informations de l'utilisateur. Pour cela, ce formulaire sera à double usage. Cela permettra à l' utilisateur de se connecter et de s'inscrire pour créer un nouvel utilisateur. Pour cela, passons à notre barre latérale et nous pouvons créer nos nouveaux composants. Passez aux composants, et celui-ci s'appelle Signin.vue. Tout d'abord, nous allons créer la section de script qui utilisera la configuration. En haut, nous allons importer notre utilisation de composable, que nous avons créée dans la vidéo précédente et la définir comme étant @, qui est la racine de notre source, composable UseAuth. Récupérez nos variables que nous avons exportées lors de la première inscription. Nous avons également besoin de notre message d'erreur. Récupérez-les à partir de la fonction UseAuth ci-dessus. Ça doit juste venir , on y va. Également une variable de données de formulaire pour stocker l'e-mail et le mot de passe saisis par l'utilisateur. Nous allons le lier à notre formulaire à l'aide de v-bind. C'est ce que l'on appelle les données utilisateur. Nous devrons également importer la référence depuis le package vue. Configurez-le comme un objet, qui contiendra simplement l'e-mail et le mot de passe. Par défaut, les deux champs seront vides car l'utilisateur n'a saisi aucune valeur. Importez ensuite notre référence depuis Vue. Accédez à la zone du modèle pour créer le formulaire. Comme celui-ci sera un modal contextuel afin que nous puissions l'afficher et le masquer à l'aide de CSS, nous devons créer quelques wrappers pour l'activer. Le premier sera un div avec la classe de modal, qui est le wrapper principal. Ensuite, imbriqué à l'intérieur, un deuxième div avec la classe modal_content sera créé . Ce modal sera activé à l' intérieur de l'en-tête. Ce que nous allons bientôt faire, c'est créer dans l'en-tête un lien vers le haut, qui fera ensuite apparaître notre modal de tous ces contenus. Ensuite, dans le modal, nous voulons également créer une petite croix dans le coin, qui fermera ensuite ce modèle. La fermeture sera une période et la classe pour notre style de close_modal. La fermeture sera une entité HTML, qui est l' esperluette, le hachage. Puis 10060 et un point-virgule. Un élément p ci-dessous, celui-ci sera pour le texte, veuillez donc vous connecter pour continuer. Ajoutez une classe pour notre style de modal_text. Ensuite, en dessous, nous allons créer un formulaire permettant à l'utilisateur de se connecter. Nous n'avons pas besoin d'action, nous nous en occuperons avec le futur oui. Tout ce dont nous avons besoin ici, c'est d'une entrée pour notre e-mail, d' une entrée pour le mot de passe. Nous allons également créer deux boutons. Commençons par notre section e-mail, qui sera un div en tant que classe wrapper de form_group. Le libellé de l'adresse e-mail du formulaire. La saisie pour celui-ci, puisqu'il s'agit d'un e-mail, nous allons lui donner le type d'e-mail, l'identifiant de l'e-mail, le texte de remplacement de l'e-mail saisi. Ensuite, nous pouvons également utiliser le modèle v pour lier la valeur de cette entrée à nos données utilisateur juste au-dessus. Nous devons accéder à UserData.email. Nous y sommes. Cette entrée contient également l'identifiant du courrier électronique. Nous pouvons le lier à notre étiquette, puis copier notre section div. Celui-ci est pour le mot de passe. Collez-le juste en dessous. L'étiquette pour le mot de passe et pour la saisie, le type de celui-ci est également mot de passe, l'identifiant est le même. L'espace réservé à la saisie du mot de passe. Cela doit le lier à UserData.password. Ensuite, nos deux boutons en bas, juste en dessous de notre div. La première est la connexion. Placez dans un bouton le type de bouton, le texte de connexion. Dupliquez-le ou copiez-collez. Maintenant, ce que nous devons faire, c'est modifier ce texte pour nous inscrire. Plus tard, cela donnera à l'utilisateur la possibilité de se connecter ou de s'inscrire en utilisant le même formulaire modal. Nous y sommes. Nous avons créé de nouveaux composants modaux de connexion. Pour le voir, nous devons l'importer exactement là où nous le voulons dans notre projet. Comme mentionné précédemment, ce sera à l'intérieur de l'en-tête afin que nous puissions voir le texte tout en haut. Passons à l'en-tête jusqu'à la section du script. En fait, nous n'avons pas de script, alors créons-le maintenant. Configuration du script. Nous allons importer nos composants, c' est-à-dire la connexion. Le chemin du fichier, puisque nous sommes à l'intérieur des composants, est simple. /Connectez-vous dans .vue. Placez ensuite les composants en haut de la section d'en-tête. Vous vous demandez peut-être pourquoi nous ajoutons un formulaire de connexion dans cette zone d'en-tête, mais cela deviendra plus clair très bientôt. Mais en le plaçant dans l'en-tête pour le moment, nous conserverons ce groupe avec les boutons de connexion et d'inscription, qui s'afficheront très bientôt en haut de l'en-tête. Nous cliquerons sur un bouton, le formulaire apparaîtra et nous pourrons le fermer avec cette croix en haut. De plus, cela semble un peu compliqué pour le moment, mais nous corrigerons cela plus tard avec notre style. Pour l'instant, concentrons-nous sur le formulaire et sur l' inscription d'un utilisateur. Revenons aux composants de connexion que nous venons de créer. Puisque nous avons créé la fonction d'inscription dans notre composable, nous allons travailler avec ce bouton d'inscription situé en bas, et nous le lierons à la fonction à l' aide d'un écouteur de clics. Nous pouvons empêcher le comportement par défaut, qui consiste à actualiser la page, appeler notre fonction d'inscription, à appeler notre fonction d'inscription, qui prendra en compte l'e-mail et le mot de passe lors de la configuration dans notre composable. Les deux sont disponibles dans le script. Nous avons les données utilisateur, l'e-mail et le mot de passe. Transmettons ces deux valeurs. Il y a d'abord le UserData.Email, puis le UserData.Password. Cela devrait être tout ce dont nous avons besoin pour la fonction d'inscription. N'oubliez pas que nous avons également importé le message d'erreur. Affichons-le juste en dessous nos éléments p avec le texte «  Veuillez vous connecter pour continuer ». Placez-le dans une plage avec la classe error_message. À l'intérieur des doubles bretelles bouclées , notre message d'erreur s'affiche. Nous y avons fait pas mal de choses. J'espère que tout cela fonctionne. Passons au projet, ça nous permet de faire une sauvegarde. Nous allons créer un nouvel utilisateur pour continuer. C'est un peu difficile à voir, mais nous corrigerons ce problème dans le CSS très bientôt. Entrez une adresse e-mail et un mot de passe. Il suffit de voir ceci. Si je passe la souris dessus, clique sur le bouton « S'inscrire ». Pour le moment, nous ne recevons aucun commentaire. Nous n'avons donc pas de message d'erreur, Nous n'avons donc pas ce qui est bon signe. Nous fermerons également ce formulaire automatiquement après la connexion et l'inscription. Mais pour l'instant, revenez à la console dans la section d'authentification, mais nous devrions voir l'utilisateur, qui vient de s'inscrire. 43. Style modal: [CONTEXTE] Nous avons actuellement ce modal pas très beau qui contient les composants de connexion. Dans le sign-in.view, nous pouvons commencer à ajouter du style en ciblant toutes ces classes. Le div principal qui entoure tous les modaux possède cette classe de modal. Nous avons alors le contenu modal qui est contenu à l'intérieur. Ils peuvent désormais être utilisés pour styliser notre modal et faire apparaître au-dessus du reste du contenu. Nous descendons tout en bas pour créer la section de style, qui sera étendue à ce composant. Comme nous l'avons vu, le wrapper principal qui entoure tout ce div a la classe modal. Ce que nous allons faire ici, c'est cibler ce modal, qui est le wrapper complet. Nous allons étirer cette enveloppe sur toute la largeur et la hauteur de la page. Nous pouvons ensuite définir une couleur d'arrière-plan plus foncée afin de ne pas voir le contenu sous-jacent autant. Ensuite, sur le div suivant, qui est imbriqué à l'intérieur, qui est le contenu modal. Ce sera un peu plus petit. Il aura également une couleur de fond blanc pour le faire ressortir de tout le contenu sous-jacent. Tout d'abord, la section modale. Le modal aura une position fixe et il se distinguera du reste du contenu par un indice [inaudible] correspondant à un nombre élevé, tel que 999. Cela garantira que cet arrière-plan complet apparaît sur l'ensemble du contenu existant. Pour que ce modal se démarque, nous devons également définir la largeur à 100 vw. Toute la largeur du belvédère. La hauteur, 100 vh, soit 100 % de la hauteur du belvédère. L'arrière-plan, ce serait une couleur RGBA. Ce que nous allons faire pour le rouge, le vert et le bleu, c'est de définir ce paramètre sur zéro, qui est la couleur noir foncé. Nous allons définir l'opacité à 0,9. Il est légèrement transparent. C'est l'effet que nous recherchons. C'est la couleur de fond la plus foncée qui est légèrement transparente. Nous pouvons également le placer dans le coin supérieur gauche, afin de ne pas avoir cet espace en haut. Nous pouvons également utiliser la flexbox pour centrer tout le contenu. Tout d'abord, le sommet est nul. Nous ferons de même pour la gauche. Assurez-vous qu'il n'y a pas de trous sur le bord. Type d'affichage de Flex. Ensuite, nous nous assurerons que tout le contenu est aligné verticalement et horizontalement en plaçant la propriété justify-content au centre. Il en va de même pour aligner les éléments. Cela devrait être tout ce dont nous avons besoin à présent. Nous avons maintenant ce modal au centre. Tout son contenu au centre sera placé sur un fond blanc pour être plus visible. Cela a une classe si nous sauvegardons le contenu modal. Sélectionnez cette option, l'arrière-plan peut être de la couleur de votre choix. Je vais utiliser de la fumée blanche. Il a également besoin d'un peu d'espacement, de rembourrage. Nous en définirons la largeur, le rayon de bordure et centrerons également tout le contenu à l'aide de la flexbox. Nous allons définir la propriété de largeur à 80vw. N'oubliez pas d'utiliser un rembourrage sur tous les côtés pour donner un peu d'espace à l'intérieur , un petit rayon de bordure. Disons trois pixels. Nous allons également définir le type d'affichage pour qu'il soit flexible. La raison pour laquelle nous allons le faire est que nous allons définir, si nous remontons au sommet, nous allons utiliser cette zone flexible, en particulier à cause de ce bouton modal fermé. Nous voulons que cela soit terminé sur la droite, ainsi que le texte qui se trouve juste en dessous. Mais nous y reviendrons dans un instant. Mais maintenant, nous avons besoin que la direction de flexion se trouve dans une colonne, ce qui réinitialisera le contenu à la verticale. Couleur et valeur RGB de 76, 76, 76. Vous pouvez également voir dans ce texte que nous avons hérité de cette ombre technologique. Nous pouvons remplacer cette méthode par la propriété text-shadow en la définissant sur non. Passons maintenant à nos boutons. Nous pouvons sélectionner le contenu modal. À l'intérieur, nous avons nos deux boutons. Nous pouvons ajouter un cluster individuel, chacun d'entre eux si vous le souhaitez, ou à la place, nous pouvons utiliser du CSS pour sélectionner le contenu modal et le bouton qui suit, qui est le premier du type. Cela va sélectionner le tout premier bouton à l'intérieur de notre contenu modal, qui est notre connexion. Nous pouvons utiliser ces deux espaces avec une marge sur la droite. Nous allons également lui donner un aspect légèrement différent en réglant la couleur d'arrière-plan une valeur RGB de 163, 204, 163. Comme vous pouvez le constater, cela a sélectionné la toute première occurrence de ce bouton. Nous avons défini la couleur d'arrière-plan et y avons également ajouté de l' espace sur le côté droit. Ensuite, pour l' état de survol, vous ajouterez une petite transformation à cela. Encore une fois, nous allons récupérer le contenu modal, sélectionner tous les boutons qu'il contient. Ne l'appliquez que lorsque vous passez la souris dessus. Transformez. Agrandissez-le légèrement. Nous pouvons utiliser l'échelle. La valeur d'échelle de 1 est exactement ce qu'elle est actuellement. Pour l'agrandir légèrement, nous pouvons le régler sur 1.03, ce qui nous donne une belle transformation lorsque vous passez la souris sur chacun de ces boutons. Ensuite, remontons vers le haut où nous avons cette section modale fermée. C'est la durée dont nous venons de parler. N'oubliez pas que nous avons défini le contenu modal pour utiliser la flexbox. Par conséquent, étant donné que le modal fermé en est un élément secondaire, nous pouvons alors utiliser certaines propriétés de flexion. Pour ce faire, sautez vers le bas saisissez tous les modaux proches. La propriété de flexion de align-self et la valeur de flex-end. Ce que cela va faire, cela ne s'appliquera qu' à cet élément actuel. Sur la gauche, ce sera le Flex Start. Sur la droite se trouve l'extrémité flexible. Nous n'avons été qu'un bouton et nous pouvons définir le curseur comme un pointeur. C'est désormais chose faite. Que reste-t-il ? Nous avons le texte. Juste ici, nous pouvons le placer au centre. Celui-ci, si nous y jetons un coup d'œil, contient la classe du texte de soulignement modal, saisissez-le, définissez align-self comme étant égal au centre. Il place désormais nos textes au centre de la page. Réduisons simplement cela. La largeur de cette section convient à la vue mobile. Mais si nous étendons cela à la vue plus large que nous avons vue, nous voulons probablement que ce modal soit un peu plus étroit. Passons à une requête multimédia Nous pouvons le faire @media et nous ne l'appliquerons que lorsque la taille de l'écran est de 900 pixels ou plus. Sélectionnez le contenu modal. Je vais y aller, régler ça sur 40vw. Essayons cela en dessous de 900 pixels. Ensuite, plus de 900 pixels réduiraient la taille. Presque là, la dernière chose à laquelle nous devons nous occuper est cette période avec la classe de message d'erreur. Pour cela, je vais simplement ajouter un exemple de texte. Nous pouvons le voir. Définissez la couleur rouge et un espace en dehors de la requête multimédia. Récupérez notre error_message. La couleur 255, 104, 104. C'est la couleur rouge et elle a également besoin d'un peu d' espacement sur la gauche. Ajoutons une marge sur la gauche uniquement. Ça a l'air plutôt bien. Maintenant, nous pouvons simplement revenir au message d'erreur. Je supprime l'exemple de contenu d'ici. Nous y sommes. C'est maintenant notre style terminé pour le modal. À venir, nous verrons comment fermer ce modal lorsque nous cliquons sur ce X. 44. Basculer modal: Ce modal a maintenant une bien meilleure apparence. Nous aurons également besoin d'un moyen de l'ouvrir et de le fermer. Pour cela, passons à notre composable, qui est useAuth.js. Ensuite, à l'intérieur, nous allons créer une nouvelle variable qui contiendra l'état ouvert actuel. Il s'agira d'une valeur booléenne, que nous définirons comme une valeur initiale fausse. Cela s' appellera SignInModalOpen, sera intégré à une référence et à la valeur initiale false, puis créera ci-dessous une nouvelle fonction qui false, puis créera ci-dessous une nouvelle fonction qui fera passer cela en vrai ou en faux. Fonction ToggleModal. Tout ce que nous avons à faire ici est de récupérer le nom de notre variable, qui est SignInModalOpen, définir la valeur comme étant égale à l'opposé avec le point d'exclamation, donc SignInModalOpen.value. Si c'est faux, cela rendra vrai et si c'est vrai, cela définira alors le contraire, ce qui est faux. Renvoie les deux à partir de ce fichier afin que SignInModalOpen, ToggleModal, puis saute dans un composant qui se connecte. Je dois importer les deux depuis UseAuth ToggleModal et SignInModalOpen. La constante SignInModalOpen contrôlera si l'utilisateur peut voir ce formulaire Nous devons donc l'ajouter à notre wrapper dans ce div avec la classe de modal at v if statements, qui est égale à cette valeur. Maintenant, si nous l'enregistrons, parce que la valeur initiale est fausse, elle est maintenant supprimée. Revenons ensuite à notre modèle, où nous avons cette plage, qui consiste à fermer le modal. Nous pouvons écouter un clic, ce qui déclenchera notre fonction appelée ToggleModal. Comme nous savons que cette constante SignInModalOpen est définie la valeur initiale false, donc pour voir réellement ce modal, nous devons créer un bouton, qui va le changer pour qu'il soit vrai. Le problème que nous avons actuellement est que tout ce contenu dans le modal est masqué par défaut. Par conséquent, pour voir réellement ce bouton, nous devons créer un bouton en dehors de ce div principal avec le texte de connexion. Cela doit également être attentif à un clic, qui déclenchera ToggleModal. Style de la classe sign_in_btn. Sauvegardez-le et nous pouvons maintenant l' essayer dans le navigateur. Voici notre bouton de connexion. Cliquez dessus. Cela va maintenant faire en sorte que cela soit vrai, affichant ainsi le modal. Cliquez sur la croix pour la masquer. Juste pour terminer, déplaçons ce bouton dans le coin supérieur droit et nous pouvons également supprimer cette bordure. C'est le bas de notre section de style. Prenons notre bouton de connexion, donc sign_in_btn, le tout séparé par des traits de soulignement. Supprimez la bordure dont la valeur est none. Ensuite, en utilisant la flexbox, nous pouvons utiliser une ligne self. Nous l'avons configuré pour qu'il soit flexible. Maintenant, poussez-le sur le côté droit. Pour rendre cela plus visible, nous pouvons remplacer la couleur en héritant de cette couleur plus claire de notre parent. Enfin, nous allons également accéder à notre bouton de connexion en le survolant et lui donner un petit changement de couleur. RGB 161, 132. Voyons à quoi cela ressemble. Nous y sommes. Maintenant, notre modal va basculer entre ouverture et fermeture, ce qui fonctionne très bien. Les prochaines étapes consisteront à connecter l'utilisateur et à le déconnecter également. 45. Se connecter et sortir: Notre formulaire de connexion est conçu pour être à double usage. Nous l'avons déjà utilisé pour connecter de nouveaux utilisateurs, mais nous l' utiliserons ensuite également pour connecter les utilisateurs existants garder les choses bien organisées. Nous allons intégrer cette fonction de connexion à notre utilisation de composable. Ensuite, en cas de désactivation, nous avons notre fonction d'inscription . Ajoutons-y également une fonction de connexion. Avant cela, nous pouvons également importer une méthode depuis Firebase. Avant, nous devions CreateUserWithEmailAndPassword, mais maintenant, nous avons besoin de SignInWithEmailAndPassword. Assurez-vous que tout est composé d'une virgule afin que chaque mot commence par une majuscule après le premier. Il sera chargé de connecter tous les utilisateurs existants. Créons une fonction que nous appellerons à l'intérieur de laquelle nous allons l'appeler. Une fois que l'utilisateur a cliqué sur le bouton « Connexion » à l'intérieur de ce modèle. Une grande partie du code sera similaire à la fonction d'inscription. Nous avons le bloc try-catch Nous appellerons ensuite notre méthode Firebase particulière, et nous devrons également gérer les messages d'erreur. Ce que nous allons faire, c'est copier toute cette section d'inscription, je vais m'en servir comme point de départ. Collez ceci juste en dessous. La fonction, nous l'appellerons connexion. Au lieu de créer un utilisateur, nous allons le modifier pour qu'il s'agisse d'une connexion. Connectez-vous avec votre e-mail et votre mot de passe, nous effacerons ensuite tout message d'erreur, ce qui est très bien. Une fois connecté, nous souhaitons également fermer ce modèle. Nous allons donc cliquer sur « Ouvrir ». Nous allons saisir nos coordonnées. Si le processus de connexion se déroule correctement, nous cliquerons dessus, puis cela sera fermé. Nous pouvons le faire en définissant le modal de connexion ouvert pour qu'il soit égal à false. connexion modale ouverte est quelque chose que nous avons déjà configuré tout en haut et qui contrôle la visibilité du modal. Retournons à notre réception et redescendons dans la zone de pêche. Nous n'avons pas besoin du premier e-mail déjà utilisé, car si nous nous connectons, l'utilisateur doit déjà avoir enregistré l'e-mail. Ce que nous allons faire, c'est récupérer le message du mauvais mot de passe. Comme pour la fonction de connexion, sont tous des messages renvoyés par Firebase. Pour celui-ci, nous dirons mot de passe incorrect. Le numéro 2 est un utilisateur introuvable. Nous dirons qu'aucun utilisateur n' a été trouvé avec cet e-mail. Je vais conserver le message par défaut s'il y a d'autres erreurs. Juste avant d'ouvrir la section d'essai, nous allons ajouter des déclarations conditionnelles. En fait, nous les placerons en deux et nous vérifierons s'il n'y a pas d' e-mail ou de mot de passe. Si l'un de ces éléments est manquant, nous quitterons cette fonction et renverrons un message à l'utilisateur. S'il n'y a pas d'e-mail, nous vous enverrons une déclaration indiquant un message d'erreur. Cette valeur. Cela équivaut-il à saisir un e-mail valide ? Dupliquez ceci. Le second testera si le mot de passe n'est pas présent. Entrez un mot de passe valide. Cela arrêtera simplement une méthode inutile appelée Firebase si nous ne disposons pas de toutes les informations dont nous avons besoin. Nous allons maintenant avoir la fonction pour créer un nouvel utilisateur, pour connecter également un utilisateur existant. Ensuite, nous allons nous concentrer sur la déconnexion d'un utilisateur. Pour cela, Firebase fournit une méthode appelée déconnexion. Importez ceci. Ensuite, nous allons également créer une nouvelle fonction, qui va l'appeler. Il suffit d'un bouton au-dessus de nos relevés de retour. Créez une fonction appelée déconnexion. Nous appellerons notre méthode d'inscription, qui intègre également l'objet off afin savoir quel utilisateur se déconnecter. En fait, nous allons également intégrer cela dans une zone d'essai et de capture afin de pouvoir gérer les erreurs. emplacements de la section try détecteront toutes les erreurs, puis enverront un message d'erreur à l'utilisateur dont la valeur est égale à error.message. Il accède à l'objet d'erreur transmis à la zone de capture, puis accède à la propriété du message. Ces deux nouvelles fonctions doivent également être renvoyées. La première étape consiste à se connecter, puis à se déconnecter. Ces deux éléments doivent être accessibles depuis les composants de connexion. Ajoutez à cela des composants, signin.vue. Importez-les en haut, alors connectez-vous et déconnectez-vous. La fonction de connexion, nous devons la placer dans le formulaire, nous la lierons au bouton de connexion. L'inscription est déjà en cours d'appel. Nous avons la connexion juste au-dessus. Avec celui-ci, nous écoutons dès que vous cliquez, empêchons tout comportement par défaut et nous appellerons Login. Ensuite, comme pour la fonction d'inscription, nous devons également transmettre l'e-mail et le mot de passe que nous avons stockés dans l'objet de données utilisateur tout en haut, qui se trouve juste ici. Et cela est lié à nos entrées de forme. Donc, l'e-mail, le mot de passe, nous allons cliquer sur « Se connecter ». Notre fonction sera alors appelée transmission dans l'e-mail et également dans le mot de passe. Mais qu'en est-il de la fonction de déconnexion ? D'où allons-nous l'appeler ? Eh bien, actuellement, nous n'avons aucun bouton de déconnexion dans le modal ni dans l'en-tête. Mais nous avons le bouton de connexion dans le coin. Ce serait bien de changer le texte ici et de ne dire « connexion » que lorsque l'utilisateur est réellement déconnecté. Et aussi le contraire, lorsque nous devons l' utiliser pour nous déconnecter. Nous allons donc le faire en haut du modèle, puis revenons dans les composants de connexion, et en haut du modèle, nous avons le bouton de connexion. Dupliquons cela. Je clique, disons me déconnecter, modifie le texte pour me déconnecter. Nous reviendrons très bientôt sur ces boutons et ne montrerons qu'un seul d'entre eux à la fois. Mais maintenant, nous pouvons voir nos boutons de connexion et de déconnexion en haut. Mais juste avant de procéder au test, comment savoir si nous nous sommes déjà connectés ? Eh bien, l'un des moyens consiste à nous renvoyer l'objet utilisateur après avoir appelé la fonction de connexion. Si nous revenons à notre utilisation du composant, nous pouvons y accéder dans notre fonction de connexion en stockant la valeur renvoyée par la méthode de connexion par e-mail et mot de passe. Nous avons vu que cela se trouve à l'intérieur d' une constante appelée user, puis juste en dessous, nous pouvons tester avec un journal de console. Placez-le dans l'utilisateur, le navigateur et ouvrez les outils de développement. Accédez à la console, connectez-vous, entrez l'e-mail avec lequel vous vous êtes inscrit. Cette fois, nous allons cliquer sur Se connecter. Nous voyons une erreur. Désolé, il s'agissait d'une erreur inattendue, mais il semblerait que nous soyons en train de récupérer les informations d'identification de l'utilisateur. Jetons un coup d'œil. Nous avons l'utilisateur, nous avons l'e-mail, le jeton d'accès. Tout semble aller bien, mais nous recevons toujours un message d'erreur à l'intérieur. Alors jetons-y un coup d'œil. C'est le message contenu dans les instructions du switch. Faisons un petit débogage dans la section par défaut du journal de la console. Et ici, nous allons afficher l'objet d'erreur complet, et nous verrons si nous pouvons avoir une meilleure idée de ce qui se passe. Connectez-vous à nouveau. Ouvrez une session. Nous avons donc l'erreur, nous avons les informations d'identification de l'utilisateur et voici notre erreur. Les affectations sont constantes lors de l'utilisation de so sign in modal open. C'est là le problème. Cela doit être .value. Essayons encore une fois. Nous procédons à l'actualisation pour nous assurer que toutes les erreurs sont effacées. Connectez-vous, super, le message a été effacé. Nous avons toujours notre objet utilisateur et le modal est fermé car nous l'avons défini sur false. Supprimons les journaux de la console. Nous n'avons besoin ni de l'un ni de l'autre. retour de cet objet utilisateur fonctionne parfaitement et c'est une façon de détecter si l'utilisateur est connecté ou non. Nous pouvons également accéder aux propriétés de l'utilisateur telles que l'e-mail et l'identifiant. Mais ce n'est qu'une façon de procéder. Une autre méthode peut-être meilleure consiste à utiliser une méthode fournie par Firebase, que nous allons examiner dans la vidéo suivante, et qui tiendra compte de toute modification apportée à notre utilisateur connecté. 46. Détection des changements d'Auth: Comme mentionné dans la vidéo précédente, lorsque nous appelons cette méthode qui consiste à se connecter avec e-mail et mot de passe, une valeur est renvoyée. En cas de succès, cette valeur correspondra au contenu de l'objet utilisateur, qui contient toutes les informations dont nous avons besoin, telles que l'identifiant utilisateur et l'adresse e-mail de l'utilisateur. C'est bien, mais Firebase fournit également un observateur, ce qui est un moyen recommandé non seulement pour obtenir l'utilisateur, mais également pour nous informer en cas changement, tel qu' une déconnexion d'un utilisateur. Cet observateur va être importé dans notre fichier d'utilisation. Passez donc en haut et à l' intérieur de l'importation, nous allons également importer l'état activé/désactivé modifié. Pour appeler cela, nous allons descendre en bas de notre fichier, juste au-dessus du relevé de retour et nous l'appellerons en bas. Dans cette méthode de peinture, nous devons également placer entre crochets. Nous devons également transmettre deux paramètres. premier est l'occurrence de l'instance, nous y avons accès. Nos constantes désactivées seraient séparées par des virgules. Le paramètre suivant sera une fonction à appeler si un changement dans les utilisateurs de State a été détecté, c'est-à-dire cette fonction sera appelée si l'utilisateur se connecte ou se déconnecte. La transmission d'une fonction comme deuxième paramètre et de sa fonction impliquera également l'utilisateur actuel. Ouvre ça. Maintenant que nous avons accès à l'utilisateur actuellement connecté, nous voulons connaître notre place dans les déclarations conditionnelles. Nous pouvons vérifier si l'utilisateur existe. Si c'est le cas, nous définirons alors l'utilisateur. S'il n'existe pas, nous allons alors définir l' utilisateur comme étant égal à null et là où nous allons le définir, eh bien, créons une référence tout en haut de notre fichier. Juste en dessous du reste, nous disons const. Les données utilisateur sont égales à une référence. Par défaut, nous allons définir ce paramètre comme étant égal à null. Pour en revenir à notre observateur, nous pouvons insérer des déclarations conditionnelles et vérifier si l'utilisateur existe. Il s'agit d'un utilisateur qui sera transféré à notre fonction. S'ils sont connectés, n