Développement Web Full Stack pour les débutants : créer et lancer un site Web de commerce électronique numérique avec MERN

1. IntroCourse: Dans ce cours, vous découvrirez MRNSTec dans la pratique sur la création d'un site Web de commerce électronique numérique FLStec pratique sur la création d'un site Web de commerce électronique numérique FLStec Bienvenue. Ce cours s'adresse à tous ceux qui souhaitent apprendre à créer des applications FlusTec à l'aide Il vous donnera de bonnes bases et vous comprendre le fonctionnement des applications Fluste MRNSTec est un groupe de technologies qui fonctionnent ensemble pour créer des sites Web et À la fin de ce cours, vous serez en mesure d'ajouter de nouvelles données à partir de votre site Web, directement dans la base de données, de les mettre à jour directement depuis votre site Web et de les supprimer. Ne vous inquiétez pas si vous êtes nouveau dans ce domaine, je vais tout expliquer en termes simples, que ce soit facile à suivre. Supposons que les premiers 70 % du cours portent sur l'apprentissage de la technologie mNTC, c' manière de travailler avec les données et sur les méthodes HDDP pour travailler avec Dans notre cas, MongoDB et le reste consisteront utiliser pour un site Web de commerce électronique numérique Au final, vous avez un beau projet de travail. Voyons ce que ces lettres signifient M pour MongoDB MongoDB est un type de base de données dans laquelle vous pouvez stocker des informations pour votre application, comme les données utilisateur ou les publications Il permet de garder les objets organisés et faciles à trouver, tout comme une armoire de remplissage numérique, par exemple. E dans Express, un outil qui permet de relier le devant du site Web ou de l'utilisateur C à l'arrière, où se trouvent les données et la logique. Cela facilite la gestion d'éléments tels que les itinéraires, qui sont comme des chemins menant à différentes parties de notre application, R dans React, qui est un framework utilisé pour créer une partie du site Web avec laquelle les utilisateurs interagissent. Cela rend les pages plus interactives et dynamiques. Ainsi, lorsque l'utilisateur clique sur des éléments ou saisit des formulaires, la page peut être mise à jour en douceur sans avoir à être rechargée Ensuite, note, qui nous permet d' utiliser JavaScript sur le serveur, qui est la partie de l'application qui fonctionne dans qui est la partie de l'application les coulisses et aidera notre application à faire des choses comme se connecter à la base de données, gérer les connexions des utilisateurs et traiter les données Nous intégrerons également différentes solutions adaptées à nos besoins. Par exemple, Stripe pour les paiements et Loadinary pour le stockage d'images Nous déployons également notre site pour le parcourir ensemble et apprendre à déployer telle application flustg sur Parce que la sécurité nous tient à cœur, nous utiliserons également jetons Web JWT ou JSON pour sécuriser nos chemins que nous utiliserons pour appeler cette base de données et ces méthodes HDP telles que post, get ou delete J'ai hâte de voir le cours. 2. A1: Tout d'abord, nous allons CD le dossier Band. Nous allons faire Command NPM Y. Nous allons entrer dans le package point JSON et ci-dessous la description Nous allons faire un type avec un module, qui nous permettra d' importer et d'exporter. Et nous exécuterons la commande que vous trouverez dans la description pour installer toutes les bibliothèques dont nous aurons besoin. Dans le dossier Backend, encore une fois, nous allons créer un nouveau point de fichier N pour stocker les variables d' environnement Nous allons commencer par le port là-bas et nous en utiliserons 3 000. Nous allons maintenant créer un autre nouveau fichier, qui s'appellera index dogs. Dans indexed Dogs, nous allons commencer par importer les modules dont nous aurons besoin pour l'application Bibliothèque Express pour créer le serveur, fonction de configuration à partir du dixième pour charger les variables d' environnement, Mangus pour la modélisation d' objets Mongo DB, intergiciel de cours pour permettre le partage d'origines croisées, intergiciel de cours pour permettre Cloudinary pour la gestion, Cloud Image Storage, Mlter pour la gestion, les téléchargements de fichiers et adaptateur de stockage Cloudinary pour Mlter téléchargements de fichiers Cette fonction, nous chargerons les variables d' environnement à partir du fichier point N, que nous y avons créé. Ensuite, nous allons créer une instance d'Express, puis sur cette instance d' Express, nous allons utiliser le cours. Cela signifie que nous autoriserons les demandes d'origine croisée. Vous pouvez imaginer cela comme si vous donniez un passeport à notre demande. Si nous ne l'utilisons pas, notre demande échouera. Vous allez maintenant démarrer le serveur et indiquer notre application qu'elle doit écouter rapport que nous y avons créé. Ce sera le port 3 000. De plus, pour savoir si c'est réussi ou non, nous ajouterons un journal de console, qui permettra à ce moment-là de faire fonctionner le serveur à l'intérieur comme à l'extérieur. Avant d'écrire, nous devons revoir les choses. Passons au package JSON. Là-bas, sous script. Là, nous pouvons supprimer le test. Au lieu de cela, nous allons écrire le start, index du nœud en Js et également le def nodemon indexé en JS Nous allons maintenant lancer un CD. Maintenant, nous allons exécuter NPM. Sourd et vous pouvez voir que notre serveur a été démarré, et que le serveur fonctionnant sur 3 000 ports était également affiché dans une console. Maintenant, je vais vous montrer ce que Nodemon fait pour nous. Alors changeons ce serveur en serveur AA, sauvegardez-le. Et maintenant, vous pouvez voir que le serveur a été redémarré automatiquement Et c'est ainsi que cela fonctionnera même avec d'autres changements. Bien entendu, nous ne modifierons pas les journaux de la console, mais si vous modifiez quelque chose sur notre page, le serveur redémarrera automatiquement et nous verrons le changement en temps réel 3. MongoDB: Nous allons maintenant configurer MongoIB. Nous allons donc cliquer ici sur leur page, mongoib.com pour essayer gratuitement Ensuite, nous remplirons les données et nous créerons le compte. Ensuite, vous allez vérifier votre e-mail, puis nous y irons dans le panneau, et nous cliquerons sur Base de données. Ensuite, nous cliquerons sur Créer et nous sélectionnerons gratuitement. Vous pouvez y modifier le nom de votre cluster Qu'est-ce qu'un cluster ? Un cluster est un ensemble de plusieurs serveurs. Imaginons que nous ayons un livre stocké dans une bibliothèque et qu'au lieu d'une bibliothèque, nous l'ayons dans plusieurs petites bibliothèques. Si l'une d'entre elles est fermée, nous pouvons accéder à d'autres bibliothèques. Dans notre contexte, cela signifie que nous éviterons la panne du serveur. Maintenant, vous cliquez sur Créer un déploiement. Nous sélectionnerons leur nom d'utilisateur et leur mot de passe, puis avant de continuer, nous devrons cliquer sur Créer un utilisateur de base de données. Ensuite, nous cliquerons sur Choisir une méthode de connexion. Ensuite, nous cliquerons sur les pilotes. Ensuite, ils n'ont sélectionné aucun JS, ce qui est correct. Nous devons utiliser NPM install Mon goody B dans notre projet. Ensuite, nous allons prendre cette chaîne et mettre dans des variables d' environnement. Copions ceci, cliquez sur D. Nous allons passer au code VS où nous avons un dossier avec notre projet. Nous y ferons le back-end du CD. Nous allons créer NPM I Mongo DB. Ensuite, dans notre projet Bond, nous aborderons les variables d' environnement. Là, nous allons créer MongoDB, equals, et nous y placerons la chaîne que nous venons de copier Maintenant, vous devez le modifier pour le mot de passe que vous avez défini dans la base de données Mongo. Nous allons maintenant nous connecter à MongoDB en utilisant Mongoose et bloquer le succès ou Après le clavier de Mongo, nous nous en chargerons. Connectez. Ensuite, attrapez. Nous allons essayer de nous connecter. Ensuite, si nous réussissons, nous voudrons également nous connecter à côté du serveur en cours d'exécution. La base de données est connectée, nous le savons donc. Et en cas de problème, nous pouvons voir que la base de données n'était pas connectée, et nous y parviendrons en détectant cette erreur. Mais si vous voyez la première ligne, où nous devrions nous connecter. Maintenant, il est vide. Nous ne pouvons donc pas nous contenter de MongoDB. Nous devons également utiliser l'environnement à points de processus ou NON, vous pouvez déjà voir que nous y allons une erreur. Mais dans ce cas, il suffit de redémarrer le serveur. Si vous ne savez pas comment faire, vous allez faire Sutter plus C, Y, Enter Et puis encore une fois, NPM run Gap. Maintenant, si vous exécutez à nouveau, votre base de données sera connectée. 4. ProductModel: Nous allons maintenant demander à notre application d'utiliser un outil qui lira et comprendra automatiquement les données JSON qui seront envoyées sur demande à notre serveur. Ainsi, par exemple, lorsque nous recevrons du JSON comme celui-ci, nous pourrons travailler avec. Maintenant, créons des modules et des itinéraires et voyons cela en pratique. Donc d'abord, dans notre dossier Ben, nous allons en créer un nouveau qui s'appellera Models. Puis une autre, qui s' appellera Routes. Dans les modules, nous commencerons par le fichier appelé product point JS ou product model point JS, et dans les routes, nous commencerons par le produit Route point JS. Commençons par le modèle de produit point JS. Nous allons importer le Mongoose pour qu'il fonctionne avec le Mongo DB. Nous allons créer le schéma du produit, puis Nous allons créer le schéma du produit, puis nous allons commencer à mettre les champs que nous voulons pour notre Le premier sera le nom, il sera de type chaîne, et il sera obligatoire. La prochaine étape sera le prix, et une bande signifie accepter le prix dans un sens, nous le ferons directement dans le sens également, afin que cela soit fait plus facilement. Ce sera un numéro de type et il sera également requis. Pour chaque produit, nous aurons besoin d'une image, et cette image est un type de chaîne car il s'agit en fait d'une URL de l'image. Et comment nous obtiendrons cette URL, nous l'obtiendrons via le Cloudinary que nous configurerons ultérieurement Ce champ sera également obligatoire. Ensuite, nous allons créer une liste de sélection nommée catégorie. Il sera de type chaîne, et il sera également obligatoire, mais nous aurons leur nom pour le cours et le modèle, ce qui créera une liste de sélection Ensuite, nous exporterons ce schéma de produit. Nous allons maintenant commencer à écrire les itinéraires. abord, nous allons importer l' express pour créer un routeur , puis nous allons également importer notre produit, que nous venons de créer. Nous allons maintenant créer une nouvelle instance de routeur, ce qui nous aidera à organiser et à gérer différentes URL ou routes dans notre application Pour que vous ayez immédiatement accès à Context, nous allons exporter le routeur par défaut, puis nous passerons à index point JS. Nous y importerons d'abord l'itinéraire du produit sur lequel nous travaillons actuellement, puis nous utiliserons le produit issu de la sécheresse du produit. Maintenant, lorsque nous créerons un nouvel itinéraire pour créer un nouveau produit avec la méthode point Post, nous aurons cette barre oblique en ligne Mais nous y définissons cette voie du produit. Ainsi, lorsque nous voulons créer un nouvel article sur le front-end ou dans Postman, nous devons appeler pour que l'URL ressemble à ceci Il s'agira de 3 000 hôtes locaux. Ensuite, comme nous l'avons fait là-bas, le produit en cours de route, ce sera le produit Slash Et là, comme il n'y a rien, elle sera vide. Mais nous préciserons auparavant pour Excios ou dans Postman, qu'il s'agit d'une méthode post Il saura donc automatiquement qu'il s'agit de cet itinéraire, et pour prendre un autre exemple, si nous créons le produit, l'itinéraire ressemblera à ceci. Nous y indiquerons que cette voie est destinée à créer un nouveau produit et nous pouvons continuer. Tout d'abord, nous allons créer Tricatchblock à l'intérieur. Donc, si notre blocage depuis Tri échoue, nous bloquerons l'erreur dans catch. Nous verrouillerons l' erreur dans le journal de la console, puis nous définirons le statut de la réponse 500 et nous enverrons le message d'erreur. Maintenant, pour vérifier si les champs obligatoires sont présents, nous allons vérifier si tel est le cas. Si l'un de ces champs est manquant, il renverra un vrai, ce qui signifie qu' il échouera, car dans le bloc vrai, nous définirons le statut de la réponse à 400 et les champs de message obligatoires seront manquants. Si c'est faux et que nous avons tous les champs, cela se poursuivra jusqu'à la création d'une nouvelle constante, nouveau produit dans lequel nous définirons tous les champs. Maintenant, avec product dot create, nous allons enregistrer ce nouveau produit dans une base de données, puis nous retournerons une réponse à deux contre un et enverrons le statut créé avec le nouveau produit. 5. PostmanProductRoutes: Nous irons sur postman.com et nous nous inscrirons gratuitement. Nous allons remplir toutes les informations ici, y remplir plus d'informations. Ensuite, en bas de la page, vous cliquerez sur Télécharger l'application de bureau, la téléchargerez et l'installerez. Maintenant, sur la page, nous allons cliquer sur nouvelle demande, puis nous allons travailler sur nos demandes. Nous y mettrons l'URL du point de terminaison, et nous modifierons les méthodes. Alors, publiez et supprimez. Nous utiliserons ces quatre. Ensuite, nous appuierons sur Envoyer et nous y verrons les sorties. Si nous envoyons des données, nous les mettrons dans ce corps, où nous sélectionnerons le format brut et nous assurerons qu'il est également sélectionné en JSON. Le format, la façon dont vous insérez les données, ressemble à des crochets, puis à un champ, puis à une valeur Et le nom de ce champ dépendra ce que nous allons définir dans notre modèle. Ainsi, par exemple, pour le nom, il s'agira du nom et de la valeur John. Et l'URL dépend de l'itinéraire que vous avez défini. Nous utilisons donc leur itinéraire produit, qui commence par slash Product, puis, par exemple, pour créer un nouveau produit, nous voyons leur méthode de publication, et c'est tout Nous appellerons l' hôte local 3 000 produits. Et maintenant, si nous envoyons, nous avons un itinéraire pour obtenir. Cela signifie qu'il obtiendra toutes nos données de Mongo Di B. Maintenant, pour tester immédiatement notre nouvel itinéraire, nous allons aller dans Postman, où nous allons le changer en Nous allons commencer par l'hôte local, puis nous allons créer le produit, puis nous pouvons laisser ce champ vide. Nous allons sélectionner leur corps, brut. Assurez-vous que c'est Jason. abord, nous allons insérer votre nom, puis le prix dans Envoyer une image avec l'URL de test , bien sûr, ne fonctionnera pas et la catégorie dans laquelle vous avez un modèle. Maintenant que ce sont des chaînes, nous avons besoin des guillemets, mais pour les nombres, nous n'en avons pas besoin. Essayons maintenant d'appuyer sur Envoyer et nous avons réussi. Nous pouvons maintenant vérifier notre MongoDB, et dans notre MongoDB, cet enregistrement a été inséré Plus tard, sur le front-end, nous créerons un formulaire de saisie dans lequel nous remplirons tous ces champs. Ensuite, nous cliquerons sur un bouton qu'il appellera cette route, et il sera inséré dans MongoDB Maintenant, pour afficher nos produits que nous allons insérer dans Mongol B sur notre page, nous devons également obtenir un itinéraire pour les obtenir. Et maintenant, nous allons les créer un par un. Pour les itinéraires permettant d'obtenir tous les objets, nous allons d'abord essayer Catch Block inside. Nous avons trouvé, nous allons récupérer tous les éléments de notre base de données, et nous allons définir le statut sur 200, ce qui est comme le statut O. En cas d'erreur, nous verrouillerons le message d'erreur, répondrons au statut de la réponse à 500, puis nous irons chez Postman pour le tester, changerons de message pour le recevoir, il sera envoyé et nous recevrons les données de notre base de données Comme précédemment, nous allons utiliser Router point get, mais maintenant, dans un chemin, nous allons également spécifier l'ID. Cela signifie que nous devrons également spécifier dans le chemin cet identifiant que nous avons là. Et que nous allons simplement extraire des paramètres de requête comme celui-ci. Nous allons maintenant le trouver par identifiant avec cette fonction de recherche par identifiant, puis nous enverrons une réponse à 100 avec le produit récupéré. En cas d'échec, comme avant, nous enregistrerons le message d'erreur, définirons le statut sur 500 et l' enverrons. Maintenant, testons-le. Alors prenons l'identifiant, mettons-le là, et maintenant envoyons-le. Et nous avons reçu l'article. Passons maintenant à l' itinéraire pour la suppression, et ce sera assez similaire à celui d'obtenir l'itinéraire du produit. Au lieu de G, nous utiliserons cette méthode de suppression. Ensuite, nous allons également insérer le paramètre ID, et nous allons créer Trakageblock Dans Wreckage Block, la capture sera la même, et dans Tribloc, nous allons d'abord extraire l'article du produit par le Ensuite, nous le trouverons avec l' identifiant et nous le supprimerons. Nous y ferons une condition « si » au cas où le résultat serait faux et que l'article n'aurait pas été trouvé, et nous vous enverrons une réponse avec le statut quatre ou quatre, puis nous enverrons également un message indiquant produit n'a pas été trouvé le résultat est vrai et que le produit est trouvé, nous ignorerons cette condition et continuerons, définirons le statut de réponse sur 200 et enverrons un message le produit a été supprimé avec succès. Nous pouvons maintenant le tester, il suffit donc de changer ces deux éléments, de les supprimer. Nous allons maintenant l'envoyer et le produit a été supprimé avec succès. Maintenant, nous sélectionnons à nouveau la méthode G, nous supprimons l'identifiant, nous y laissons le produit et nous appuyons sur Envoyer, vous verrez que nous n'y avons rien. Mais maintenant, si nous changeons cela en post, nous pouvons faire le test AA, l'envoyer. Maintenant, nous pouvons recommencer à le récupérer, l'envoyer. Vous verrez que nous y remplissons à nouveau quelques données. Nous poursuivrons la procédure de mise à jour du produit. Lors de la mise à jour, nous utiliserons la méthode Dt Put, et nous y indiquerons également le D du produit que nous voulons mettre à jour. Encore une fois, nous allons créer un bloc TryCatch. Et cette condition pour vérifier si nous avons tous les champs, et nous ne mettrons pas à jour l'image du produit. Si un champ est manquant, nous enverrons un message avec l'état de la réponse 400 champs obligatoires sont manquants. Ensuite, nous allons extraire l'identifiant des paramètres de la demande. Nous trouverons l'article du produit et mettrons à jour avec les nouvelles données provenant du corps de la demande. Ensuite, nous effectuerons une condition d'identification, et au cas où ce résultat serait faux, nous vous renverrons le statut quatre sur quatre avec le produit introuvable. Dans un autre scénario, nous continuerons simplement à définir le statut à 200 et à envoyer le message, le produit sera mis à jour au cas où le blocage des transactions échouerait, nous évaluerons le bloc, enregistrerons à nouveau le message, réglerons le statut sur 500 et enverrons le message d'erreur. Maintenant, dans Postman, nous avons l'URL avec le produit hôte local et son identifiant Nous allons le changer pour y mettre le test AA en test BB. Nous allons maintenant supprimer l'image car c'est quelque chose que nous ne mettrons pas à jour. Nous l'enverrons et nous n' avons pas trouvé le produit. C'est donc parce que j'y ai mis un mauvais identifiant. Nous allons modifier cela pour obtenir. Nous allons le supprimer. Nous allons appuyer sur Envoyer. Nous allons maintenant copier cet identifiant à partir du produit que nous avons là. Nous allons le mettre là. Nous allons maintenant changer cela pour mettre. Maintenant, nous allons l'avoir comme ça. Nous cliquerons sur Envoyer et nous recevrons les mises à jour du produit. Maintenant, si vous revenez en arrière pour obtenir et supprimer cet identifiant et que vous cliquez sur Envoyer, vous pouvez voir que dans notre base de données, nous avons maintenant testé A B au lieu de tester AA, et nous pouvons également publier, puis le laisser comme ça. Là, nous pouvons faire le test AA. Nous allons mettre leur image d'URL de test. Nous allons maintenant appuyer sur Envoyer. Maintenant, nous allons également tester CC. Nous allons appuyer sur Envoyer et tester DD, puis sur Envoyer. Maintenant, nous allons le changer en méthode get, appuyer sur Envoyer, et vous verrez que nous y avons tous nos enregistrements de test que nous y avons mis. Vous pouvez maintenant essayer tous ces itinéraires que nous avons publiés, mis et supprimés. 6. FrontendSetup: Et maintenant, nous allons passer au dossier frontal et commencer à y coder le front end. Nous pouvons les fermer, ouvrir un terminal, puis un terminal, nous ferons un CD. le front end, nous exécuterons les commandes Tailwind que vous pouvez trouver sur telencss.com. Le premier est celui-ci. Je mets le point là pour que le projet soit créé dans ce dossier frontal. Maintenant, je vais l'exécuter pour l'installation. Ensuite, ceci pour l' initialisation. Maintenant, celle-ci pour installer les bibliothèques, vous pouvez trouver cette commande dans la description. Nous allons maintenant entrer dans le fichier JS Tailwind Conflict. Nous devons y coller ce paramètre, nous en aurons besoin pour Daisy UI et aussi, bien sûr, pour Tailwind De plus, pour avoir la bonne typographie, nous allons mettre la première typographie CSS beige, et la suivante, exiger l'interface utilisateur Daisy Sinon, cela ne fonctionnera pas. Tu peux former ta propre équipe. J'ai donc mis l'espace réservé à mon équipe dans lequel je choisis l'accent principal, accent secondaire et le neutre Et nous y faisons également appel à des équipes DaisyUI, qu'elles soient claires, sombres, cupcakes, forestières Ensuite, nous choisirons les deux à utiliser pour le mode clair et le mode sombre. Commençons maintenant à créer des dossiers et des fichiers. Tout d'abord, dans le dossier frontal, nous allons créer un DDentFle lequel nous placerons également les variables d' environnement. Nous y mettrons Wheat, l'application React, le backend, l'URL de base, et nous y mettrons l'URL de base de notre backend, qui est l'hôte local HTDP 3,000 Ensuite, dans le fichier source, nous allons créer un nouveau dossier contenant des pages. Puis un autre, qui portera sur le contexte, puis un autre, qui portera sur les composants. Dans Index CSS, nous allons coller les trois directives jusqu'à la fin. Ensuite, nous pouvons supprimer Abdo CSS. Et dans ABD Jasix, nous pouvons tout supprimer et le laisser là juste pour revenir avec le fragment vide 7. ProtectedRoutes: Tout d'abord, avant de créer quoi que ce soit, nous allons passer aux composants et créer un nouveau fichier. Le fichier s'appellera Routes protégées. Faites JS six. Tout d'abord, pour la navigation, nous allons importer le dôme du routeur du réacteur. Ensuite, nous aurons une fonction pour vérifier si l'utilisateur est authentifié. À l'intérieur, nous retournerons vrai si le jeton existe dans le stockage local. Dans le cas contraire, nous vous renverrons faux. Ensuite, nous définirons le composant de route protégé lui-même. Et nous allons commencer par la condition If. cette condition, nous vérifierons que le document mentionné est authentifié, et si le document mentionné est authentifié, Dans cette condition, nous vérifierons que le document mentionné est authentifié, et si l'utilisateur n' est pas authentifié, il sera dirigé vers la page de connexion où il pourra réessayer et se connecter ou s' S'il l'est et que cela passe, nous allons afficher les composants enfants, et à la fin, nous exporterons le composant de l' itinéraire protégé, afin de pouvoir le réduire dans Abdo J six Dans Abdo J six, effectuons ces deux importations. Ensuite, nous allons également importer l'itinéraire protégé créé, et nous allons créer notre premier itinéraire à l'intérieur des fragments vides. Sur cet itinéraire protégé, tout commencera par Admin et à l'intérieur, nous aurons les autres itinéraires. Pour que cela soit un peu plus clair nous allons créer une nouvelle constante avec des routes d'administration. Maintenant, nous pouvons le prendre et le mettre dans l'itinéraire protégé. Maintenant, toutes les routes de notre interface d'administration, nous allons les placer dans ces routes d'administration. Commençons par le premier. Passons donc aux pages, créons-y un nouveau fichier. Il s'appellera admin.j6. Là, nous utiliserons le Snippet. Nous en avons à exporter, nous pouvons donc passer à Abdo J six, et là, nous pouvons commencer l'importation par administrateur, puis l'enregistrer, vérifier qu'elle est importée De plus, ce que nous allons faire là-bas, c'est l'acheminer. Donc, route path slash un élément comme celui-ci, et maintenant nous allons simplement fermer la technologie Maintenant, si nous supprimons Admin, c'est tout parce qu'il n' y a rien d'autre. S'il y en a XIX, alors si nous faisons une barre oblique d'administration XIX, nous arriverons à Nous n'avons toujours pas la fonctionnalité de connexion et d'enregistrement, mais nous le ferons un peu plus tard. Maintenant, nous allons simplement passer à des itinéraires protégés, nous pouvons simplement nous en moquer en commentant cela et en y inscrivant le retour. Comme ça, il reviendra toujours, donc nous serons toujours authentifiés. Mais bien sûr, nous devrions y mettre en œuvre la fonctionnalité de connexion et d'enregistrement. Ouvrons le terminal, le front-end du CD, faisons NPM Run Dev, et là, vous pouvez voir notre page 8. AdminDashboard: Nous pouvons maintenant y ajouter un nom de classe afin de vérifier que tout fonctionne. Passons maintenant à résoudre quelques problèmes. Nous devons prendre Abdo GS six et terminer notre itinéraire jusqu'à la sortie. Nous l' ajouterons, puis nous passerons au principal do GS Nous y importerons Browser Router depuis React Router Dome et nous changerons le mode strict direct et envelopperons notre application dans le texte du Browser Router. Maintenant, si nous allons sur l'URL avec l' hôte local que nous utilisons et que nous slash Admin, vous verrez que notre moteur fonctionne et que nous avons du texte dio dans notre Nous pouvons donc revenir à la page d'administration. abord, nous allons importer, utiliser l' effet et l'état us, également depuis React, puis Exios et enfin Link depuis le routeur React Dome Nous utiliserons notre State Hook pour gérer l'état du produit. Nous allons l'initialiser en tant que tableau vide. Ensuite, nous utiliserons State Hook pour gérer l'état de chargement, et celui-ci nous aidera car nous utiliserons alors le chargement, et au cas où ce serait vrai, nous montrerons le spinner Nous allons maintenant utiliser UseffectHok pour créer des effets secondaires dans le composant fonctionnel de notre page Tout d'abord, nous allons définir le chargement sur true. Nous ferons une demande Gad pour récupérer les données du produit depuis l'API Vous pouvez considérer Exiles comme un outil qui permet notre application de communiquer avec des serveurs et d'obtenir ou d'envoyer des données Nos exilés obtiendront donc quelque chose , puis ils feront quelque chose ou, en cas d'échec, détecteront l'erreur C'est donc l'URL que nous utilisions dans le facteur. Nous allons maintenant l'utiliser dans Exis Nous allons donc essayer d'obtenir ce point de terminaison d'API URL. En cas de réponse positive, nous mettrons à jour l'état du produit avec les données que nous avons reçues. Ensuite, nous allons également définir l'état de chargement sur falls. En cas d'échec, nous le détecterons, enregistrerons toute erreur, puis nous définirons également l'état de chargement sur falls. Ensuite, sur cette dernière ligne se trouve en fait un tableau de dépendances vide, qui signifie que cet effet ne sera exécuté qu'une seule fois lors du chargement du composant. Passons maintenant à l' interface utilisateur, là nous pouvons commencer. Nous supprimerons le nom de la classe à partir de là. Nous ajouterons un peu de rembourrage et une largeur maximale. Je peux également y ajouter un fond gris 500 afin que nous puissions voir où nous en sommes sur la page. Nous pouvons donc voir que nous devrons également le centrer avec Mx auto. Nous allons maintenant ajouter un autre div car au-dessus de ce div, nous aurons toujours un composant de statistiques que nous n'avons pas encore codé. Et pour ce div, nous allons mettre la classe automatique overflow X car nous voulons activer le défilement latéral Ensuite, nous ajouterons la table elle-même, et nous mettrons la table des noms de classe car nous utilisons l'interface utilisateur Daisy et DUI a une classe pour la À l'intérieur du tableau, nous allons mettre un Thad, qui reste pour l'en-tête du tableau, TR , qui reste pour les lignes du tableau, et maintenant nous sommes les en-têtes de tableau contenant neuf prix, description et catégorie Le premier en-tête du tableau est vide car nous terminerons un bouton qui nous mènera à une page où nous pourrons créer un nouveau produit Ainsi, à l'intérieur, nous pouvons mettre un lien avec le nom de l'article. Actuellement, nous n'avons toujours pas la page pour la création d'un nouvel article Nous la laisserons vide, puis nous la corrigerons. Je vais définir le fond vert, et sur Hver je vais changer le fond en vert plus foncé Ensuite, j'enverrai la taille et la couleur du texte, un peu de rembourrage et un rayon de bordure avec une ombre Maintenant, nous devons faire le corps de la table, nous allons donc y faire de l'espace. À l'intérieur, nous allons créer un corps de table, et dans le corps de table, nous devrons répéter le produit Nous allons maintenant coder une ligne du tableau et elle sera répétée chaque fois qu'elle sera itérée sur la gamme de produits Donc, dans la ligne de notre tableau, nous allons utiliser la clé comme identifiant du produit, puis nous allons commencer par le nom de la classe pour le fond blanc, et lorsque nous passerons le curseur sur notre article, nous le changerons en une couleur un peu plus foncée, ce qui est dans notre cas, le fond gris à 300 Et maintenant, nous allons simplement mettre dans cette ligne de tableau les données du tableau, qui seront conformes aux en-têtes du tableau Donc, en première position, nous aurons l'image du produit. Vous pouvez donc voir que nous utilisons un DIV avec le nom de classe Avatar, qui vient de DSUI, puis un autre div avec masque, également de DSUI avec une largeur et une hauteur définies Ensuite, dans l'image elle-même, nous définissons la source à partir de l'image à points du produit, et au cas où elle ne serait pas chargeable, pour le titre à points du produit Nous obtenons toutes ces données de Mongo DV où nous les avons chargées Dans le prochain volume, nous indiquerons nom du point du produit. Vous pouvez également le voir ici. Ensuite, nous aimerions afficher la description du prix et la catégorie, allons-y. En tant que prix, nous indiquerons le prix dans un sens, puis la description, puis une catégorie, et ce sera tout pour le moment. Vous pouvez voir que j'ai laissé la description sans mapper le produit, car nous n'avons pas encore ajouté de description à notre modèle. Je voulais y laisser un champ au cas où vous voudriez également en ajouter un pour vous-même. Je vais maintenant vous montrer comment ajouter des champs supplémentaires, nous allons ouvrir l'explorateur. En arrière-plan, nous passerons aux modèles. Dans le modèle Barack, nous y ajouterons une description. Il sera de type chaîne, et le champ requis sera faux car nous n'avons pas besoin de remplir ce champ, puis nous passerons à l' itinéraire du produit. Nous allons maintenant faire défiler la page vers le haut pour créer un nouvel itinéraire de produit. Dans le nouveau produit, nous ajouterons une description, donc une demande de description, mais la description. Maintenant, nous pouvons le tester. Nous allons donc ouvrir Postman, et d'ailleurs, si quelque chose ne fonctionne pas pour vous, assurez-vous que vous êtes toujours dans un dossier CD backend, comme moi Et le serveur fonctionne avec une profondeur d'exécution NPM, car la base de données doit être connectée en permanence Il suffit donc de vérifier ces terminaux ouverts que vous avez là. Vous pouvez voir que je gère le front end et aussi le backend Parfois, il peut arriver qu' il y ait une erreur et que le serveur principal soit en panne. Vous devez donc le vérifier un jour, sinon cela ne fonctionnera pas pour vous. Maintenant, je vais y mettre des données de test même avec le champ de description. Maintenant, je vais appuyer sur Envoyer et vous pouvez voir qu'il a été inséré comme ça. Maintenant, si je change cela pour appuyer sur Envoyer, je peux voir que j'ai leurs articles sans les descriptions, mais ma plus récente inclut le champ de description que nous venons de modifier. Alors maintenant, je vais aussi simplement copier-coller ceci, prendre la description, l'enregistrer , et maintenant cela fonctionnera. Et maintenant, vous pouvez voir sur notre page tous les éléments sont chargés. 9. DeleteAndEditProduct: Pages, nous allons créer un nouveau fichier. Modifiez le produit G six, supprimez également le produit G six. Ensuite, nous utiliserons AFC, donc il utilisera l'extrait de code de l'extension ES Là, vous pouvez également le télécharger. Nous allons maintenant passer à AG 6, où nous allons importer ces deux nouvelles pages. Et nous les acheminerons également. Nous ajouterons son itinéraire à l'itinéraire des routes d'administration. Indiquez le chemin où il sera produit, modifié ou supprimé avec l'ID. Dans l'édition du produit, nous allons commencer par les importations. Tout d'abord, nous allons importer la technologie de notification pour le snack-bar que nous utiliserons pour les notifications. Ensuite, nous importerons également avec React les hooks use state et use effect, react roterdm et Eos Nous allons définir le crochet d'état pour les champs de formulaire et l'état de chargement. Nous mettrons à jour le nom, sens des prix et la catégorie. Et si vous modifiez un champ, comme par exemple la description, vous y modifierez également comme ceci. La description, la description du set et la valeur par défaut seront vides. Ensuite, nous ferons un crochet pour la navigation. Cela signifie qu'une fois que nous avons modifié notre produit avec succès, il nous dirigera vers le tableau de bord d'administration. Je veux dire que pas encore, mais nous utiliserons cette fonction de navigation pour cela. Ensuite, nous allons faire un crochet pour obtenir le paramètre ID à partir de l'URL, puis du snack-bar. Cela signifie que nous afficherons la notification au cas où nous réussirions ou non à modifier notre produit. Nous allons créer un effet hook pour récupérer les détails du produit lors du chargement de notre page Nous allons commencer par régler le chargement dans la chambre. Ensuite, comme avant, nous utiliserons d'abord Exiles, nous essaierons d'obtenir la réponse de ce point de terminaison où nous collerons également cet identifiant Si vous ne vous en souvenez pas, dans notre itinéraire produit, nous avons défini l'ID comme paramètre nécessaire pour l' itinéraire de mise à jour du produit, car nous avons besoin de savoir quel produit nous voulons mettre à jour. Ensuite, en cas de succès, nous définirons la valeur des champs en fonction de la réponse. Définissez donc le nom, le prix de l'encens, la description et la catégorie. Ensuite, nous réglerons le chargement en fonction des chutes. Donc, une fois que nous l'aurons fait tourner , il cessera de tourner. En cas d'échec, nous y détecterons l'erreur, également le chargement sur Falls, l'enregistrerons, puis enverrons une alerte indiquant que quelque chose s'est passé. Et qu'en est-il du tableau de dépendances ? Maintenant, il ne sera pas vide, mais nous aurons leur NID. Cela signifie que cet effet sera activé lorsque l' identifiant sera modifié. Nous allons maintenant créer une poignée pour modifier l'article du produit. abord, leurs données seront envoyées dans la demande Put, puis nous définirons le chargement sur true, et nous aurons leur Excise. Tout d'abord, nous ferons une demande de mise à jour pour mettre à jour l'article du produit. Ensuite, si nous réussissons, nous réglerons le chargement en fonction des chutes. Nous afficherons ensuite le message de réussite ou la notification de réussite, comme vous pouvez y voir QSNCBR, puis nous naviguerons vers le Ainsi, chaque fois que cela est réussi depuis cette page, nous serons automatiquement envoyés vers le tableau de bord d'administration. En cas d'échec, nous aurons l'erreur là. Nous réglerons le chargement en fonction des chutes. Nous enverrons la notification d'erreur et nous enregistrerons également la flèche dans la console. Et pour accéder à notre page où nous allons réellement coder DUI, passons à admin J six Il y avait en bas, en dessous des dernières données de table, créez une nouvelle donnée de table, mettez le nom de classe pour les données de la table avant. Créez maintenant votre téléviseur avec des classes de disposition Flexbox afin que nous puissions utiliser Justify Center pour le centrer horizontalement, puis espacer X un pour créer un espace entre ces deux liens Nous aurons le lien pour la modification. Maintenant, si nous le parcourons, vous pouvez le voir en utilisant le chemin Admin product slash Edit , puis il envoie également l'ID du produit N'oubliez pas que nous sommes encore en train de passer en revue les produits proposés. Nous avons donc l'identifiant du produit et nous pouvons l'utiliser là-bas, et nous l'enverrons à Path, puis nous aurons des noms de classes. Nous allons donc utiliser le fond sur orange et sur Her, Nous allons donc utiliser le fond sur orange et sur Her nous allons le rendre un peu plus foncé. Ensuite, nous définirons le blanc du texte et le poids de la police. Nous y définirons également le rayon de la bordure, la taille du texte et utiliserons un peu de rembourrage Vous pouvez simplement le copier-coller car ce sera presque pareil. Juste dans le chemin, il y aura suppression au lieu de modification. Vous allez également modifier la couleur d'arrière-plan, et nous allons modifier le texte. Il ne sera pas modifié, mais il sera supprimé. Maintenant, sur notre page, nous allons sélectionner un produit et cliquer sur Modifier, et cela nous amènera à la page laquelle nous sommes en train de coder actuellement. Passons donc à la page, et là nous pouvons commencer. Tout d'abord, dans la division principale, nous allons utiliser de la literie, un fond gris à 50, une fond gris à 50, mise en page flexible, afin de pouvoir centrer les éléments Ensuite, nous allons faire un autre div avec une classe de conteneur issue de l'AZUI Nous allons mélanger l' ombre, puis le rayon de la bordure, le fond et le fond en blanc. Et au cas où nous voudrions revenir en arrière, nous utiliserons ce lien vers B. Nous allons donc y mettre Admin, puis dans le nom de la classe, nous allons centrer le texte B. Définissez l'arrière-plan de ce bouton, un peu de rembourrage pour qu'il ressemble vraiment à un bouton, une marge avec la taille du texte et un rayon de bordure en I. Ensuite, nous allons continuer avec le titre de cette section. Nous l'appellerons Modifier le produit. Nous allons définir une certaine taille de texte, par exemple une marge verticale semi-grasse , et nous allons définir la couleur du texte en gris 800. Nous allons maintenant préparer le di pour les boîtes de saisie. Nous allons donc faire un DIF avec une marge verticale de quatre. La première entrée sera pour le nom, nous aurons donc l'étiquette avec le nom et son entrée. Dans l'étiquette, nous allons faire du HTML 4 où nous allons mettre un nom. Pour les noms de classe, nous mettrons le bloc, le support texte et la note du texte à 600 avec une marge inférieure, et pour la saisie, nous définirons ID pour nommer le type de texte. La valeur sera également définie sur le nom, et lors du changement, nous définirons le nom de la valeur cible que nous avons là. Pour le nom de classe de cette entrée, nous allons définir une bordure, et nous allons également définir la couleur de la bordure, peu de rembourrage, avec le plein, et nous y utiliserons également un certain rayon de bordure Et maintenant, il en sera essentiellement de même pour toutes les autres entrées. Mais certaines valeurs vont changer. Ce code HTML quatre, cet identifiant, le type, bien sûr, la valeur et le hook d'état d'utilisation. Donc, pour des raisons de tarification, nous allons le remplacer par ces valeurs, mais sinon, il utilisera les mêmes valeurs qu'auparavant. Il en va de même pour la description avec une description définie , un ID et un code HTML quatre comme celui-ci, bien sûr, également avec le texte de l'étiquette, pour la catégorie, nous ajouterons également leurs options car il s'agit d'une liste de sélection. Vous avez donc la possibilité de sélectionner une catégorie , puis une malédiction et un modèle. Nous aurons les valeurs qui seront alors définies et lues selon cet état d'utilisation. Sinon, encore une fois, tout est pareil. code HTML 4 est remplacé par la catégorie, ID est la catégorie, la catégorie de valeur, les classes sont les mêmes, et nous y sommes obligés car nous devons sélectionner la valeur de la liste de sélection De plus, il ne s'agit pas d'une entrée mais d'une sélection, alors prenez soin de ce texte. Ensuite, pour confirmer cette modification, nous aurons un bouton contenant les modifications en toute sécurité. En un clic, il appellera ce handle Edit product, que nous y coderons. Ensuite, nous allons définir le nom de notre classe sur full. Nous allons définir l' arrière-plan en vert, puis utiliser un vert plus foncé, puis du texte en blanc, puis du texte en blanc, peu de rembourrage et un rayon de bordure avec une marge vers le haut Nous pouvons maintenant tester la fonctionnalité, puis je vous promets que nous améliorerons l'apparence de l'interface utilisateur. Changeons donc TBB pour Test BB, modifiez-le. Ensuite, nous pouvons également modifier le sens, la description et la catégorie du prix . Enregistrez les modifications. Maintenant, vous pouvez voir qu'il a été modifié. Et si nous allons dans MongoDB, vous pouvez voir qu'il y est également édité Passons maintenant aux fichiers qui s' y trouvent dans Min J six, puis nous allons intégrer notre application dans le texte du fournisseur de Snack Bar. Mettons donc notre application à l'intérieur. Importons-le également. Donc, si nous faisons exactement cela, il sera importé automatiquement. Maintenant, si nous revenons à notre page, nous pouvons réessayer de modifier quelque chose. Maintenant, nous allons laisser ce champ vide. Nous enregistrerons les modifications, et vous pouvez voir que nous avons reçu un message d'erreur au cas où nous le remplirions et que nous l'enregistrerions. Vous pouvez voir si la notification a bien été envoyée. Encore une fois, faites le JA six, encapsulez notre application dans le fournisseur de Snack Bar, importez-la et cela fonctionnera. Maintenant, pour enfin définir une équipe, nous allons passer à l'indexation du HTML par points, puis, dans le domaine de la technologie HTML, nous allons créer une équipe de données pour Light. Maintenant, il est enfin plus beau, et si nous allons le modifier, vous pouvez également voir qu'il y paraît bien. Passons maintenant à la partie suppression. Cliquons ici sur un article. Cliquons sur Supprimer. Nous allons donc accéder à la page VS code, nous allons supprimer product.j6 Faisons d'abord les importations comme avant, puis les hooks. premier pour l'état de chargement, la navigation, l' obtention de l' identifiant à partir de l'URL. Et le snack-bar pour les notifications. Nous allons maintenant créer un gestionnaire pour supprimer l'article du produit. Nous allons définir le chargement sur true, puis nous allons exciser avec la fonction de suppression, nous appellerons le point de terminaison pour supprimer le produit. En cas de succès, nous réglerons chargement sur une fausse notification indiquant que le produit a été supprimé et nous accèderons au tableau de bord d'administration En cas d'échec, nous définirons le chargement sur false enverrons également une notification d'erreur et enregistrerons l'erreur. Dans le div principal, nous utiliserons un peu de pédalage gris sur fond, puis une disposition flexbox afin de pouvoir centrer les éléments avec justify et items À l'intérieur, nous allons faire un autre div avec la classe container, qui provient du DaisUI Nous allons définir une largeur maximale, une ombre et un pédalage. Comme précédemment, dans Edit product GS six, nous y ajouterons un bouton de retour. Et comme c'est absolument pareil, je tiens à l'expliquer, et je vais passer à la deuxième rubrique, où nous demanderons : Êtes-vous sûr de vouloir supprimer ce produit ? Pour cela, nous allons définir certaines classes avec la taille du texte, épaisseur du texte, la marge vers le bas et la couleur du texte. Et puis la réponse peut être cliquer sur un bouton avec oui, supprimer. Sinon, l'utilisateur cliquera simplement sur un bouton B. Au cas où l'utilisateur cliquerait sur le bouton Supprimer, il appellera le produit Handle Delete, ce que nous avons fait ici. Et la classe de ce bouton de suppression sera un bouton rouge avec du rouge plus foncé sur elle, du texte blanc, un peu de rembourrage, bordures radio et trop plein Nous pouvons maintenant le vérifier sur la page et essayer de supprimer le produit. Cliquons sur Supprimer. Vous pouvez voir le produit supprimé et il a également disparu de notre liste d'articles. 10. Centrifugeuse: Maintenant, avant de passer à la création du produit GS six, nous allons créer un spinner Ouvrons les fichiers qui s'y trouvent, et celui-ci sera intégré aux composants. Ainsi, dans les composants, créez un nouveau fichier, spinner point JS six. Utilisez l'extrait qui Maintenant, pour ce div, nous allons utiliser une disposition flexible, justifier les éléments au centre et déterminer le côté pour déterminer la hauteur par rapport à l'écran Pour le div suivant, nous allons définir une hauteur de 16, une bordure de 4 pixels, un style de bordure en pointillés, l' arrondir complètement pour que ce soit Animate spin, dont nous allons créer un point d'index CSS en une minute. Ensuite, la bordure principale, nous utiliserons donc la couleur primaire, haut de la bordure étant transparent. Maintenant, pour le spin animé, nous allons d' abord indexer le CSS à points avec les images-clés, le spin, où nous utiliserons la rotation à 360 degrés, puis pour le spin animé, où nous définirons l' animation pour une rotation, seconde, une boucle linéaire et infinie Maintenant, si nous passons à Modifier le produit GS six et que, dans le retour, sous le début de la dith principale, nous ajouterons le spinner Il entre, il sera donc importé et enregistré. Maintenant, si nous allons sur notre page, vous verrez que le spinner est là Vous ne l'arrêtez là que lorsque la page sera chargée. Donc, ce que nous allons faire, c'est y placer des crochets bouclés lors du chargement Et si c'est vrai, cela générera le spinner. Maintenant, je vais le sauvegarder. Si vous enregistrez les modifications, vous verrez que le spinner est resté là très peu de temps, car la sauvegarde a été assez rapide Maintenant, nous pouvons également ajouter le spinner pour supprimer la page. Donc, copions simplement ceci. Cliquez sur Supprimer le produit. Modifions-le ici. Supprimez maintenant le dernier cuir, appuyez sur Entrée. De cette façon, il est importé. Et à partir de maintenant, nous pouvons utiliser le spinner partout où nous aurons l'état de chargement 11. Cloudinaire: Avant de créer une interface utilisateur pour ajouter un élément, nous devons configurer un Cloudinary Il ne sera pas efficace de télécharger des images aussi volumineuses dans MongoDB, téléchargerons donc dans un stockage séparé tel que Cloudinary Nous allons obtenir l'URL, et dans une chaîne, nous allons stocker l'URL dans MongoDB Ensuite, nous accèderons à l'URL et nous afficherons les images sur notre page. Allons sur cloudinary.com. Cliquez sur Commencer. C'est là que vous vous inscrirez. Ensuite, vous pouvez y sélectionner quelque chose. Commençons. Là, vous allez faire défiler la page vers le bas, cliquer sur Afficher les informations d'identification, puis vous utiliserez ces informations d'identification. Nous allons prendre ce nom de cloud, clé d'API et ce secret d'API. Accédez aux variables d'environnement, et nous y créerons le nom du cloud, le secret d'API et la clé. Vous y collerez toutes les valeurs que vous avez sur votre binaire Cloud, puis nous passerons à la médiathèque, où nous trouverons toutes nos photos que nous téléchargerons. Maintenant, si nous passons à Index Dogs, nous pouvons commencer à coder l'itinéraire qui fera réellement passer nos images à haute voix Nous allons maintenant configurer Cloudinary à partir de variables d'environnement. aura donc d'abord le nom du cloud, clé d'API, puis le secret de l'API. Nous allons maintenant ajouter une instance Cloudinary avec cette utilisation de téléchargement. Nous nous assurons donc que Cloudinary sera accessible avant le prochain itinéraire qui suivra Donc, le stockage et le téléchargement de l'image. Nous allons maintenant configurer le stockage multiple pour utiliser un Cloudinary pour stocker nos images Nous allons créer l'instance Cloudinary, puis définir les paramètres premier paramètre est le dossier de nos images, c'est-à-dire les images. Ensuite, nous définirons les formats d'image autorisés, qui seront JPEG et PNG. Ce que nous faisons là-bas, c'est créer un analyseur qui utilise moltorlibrary, que nous utilisons pour gérer les téléchargements de fichiers. La configuration de stockage est l' objet que nous y avons défini pour spécifier comment et où enregistrer Nous allons maintenant créer un itinéraire pour télécharger l'image vers le binaire Cloud Nous allons le faire avec la méthode post, et l'itinéraire s'appellera Upload Image. Nous utiliserons un analyseur pour télécharger un seul fichier, puis avec la condition If, nous vérifierons si le fichier s'y trouve Si ce n'est pas le cas, il renverra le statut 400 sans aucun fichier téléchargé. Ensuite, nous allons créer un bloc TryCatch. Et nous créerons une condition If si nous avons le chemin du fichier. Dans le cas contraire, nous renverrons une erreur avec le fichier téléchargé, mais aucun chemin n'est disponible. Si le chemin existe, nous vous renverrons l'URL du fichier. Ensuite, au cas où ce World Wide Block échouerait, nous y trouverons une erreur et nous renverrons un Status 500 avec l'erreur interne du serveur. 12. CreateProduct: Nous allons maintenant passer aux pages et créer le nouveau fichier. Créez product.j6. Voilà, on le coupe. Ensuite, nous passerons à un point JSix. Là, nous pouvons le copier, le coller, le taper , créer un produit. Appuyez sur Entrée, de cette façon, il sera importé, et nous modifierons le chemin pour simplement couper le produit Create. Nous allons maintenant accéder à admin.j6 et là, dans un élément, nous allons ajouter un lien, qui nous dirigera vers Nous allons d'abord effectuer les importations, puis nous allons créer des variables d'état pour tous les champs que nous avons pour notre produit. Et maintenant, nous passons également à l'aperçu de l'image. Cela signifie que lorsque nous chargerons l'image, nous en verrons l'aperçu sur notre page avant de la confirmer et de la télécharger, puis nous verrons également une variable d'état pour le chargement afin d'afficher le spinner Puis accrochez-vous à la navigation. Une fois que nous aurons réussi, il nous dirigera vers le tableau Advantage et également vers le snack-bar pour afficher les notifications. Nous allons créer leur gestionnaire pour modifier les entrées de fichiers. Nous allons créer une constante pour le fichier sélectionné que nous obtiendrons à partir de l'événement d'entrée. Nous mettrons à jour l' état de l'image avec le fichier sélectionné, puis sur le fichier sélectionné, nous établirons une condition Ils. Si nous avons sélectionné des fichiers, et cela est vrai, nous créerons une nouvelle instance de lecteur de fichiers, nous définirons l'aperçu de l'image pour le fichier, nous le téléchargerons. Et cette méthode de lecture sous forme d'URL de données permet de lire le contenu du fichier sélectionné et le convertir en chaîne codée. De plus, nous ajouterons l'aperçu de l'image défini sur null au cas où le fichier sélectionné serait faux, il n'y serait donc pas. Nous allons créer une fonction pour télécharger un fichier dans Cloud binary. abord, nous devons vérifier si nous avons une image à télécharger. Dans le cas contraire, nous enverrons la notification d'avertissement sans qu'aucune image ne soit sélectionnée. Si nous avons l' image, nous continuerons, nous créerons un nouveau formulaire de données instantanément et nous y ajouterons notre image Ensuite, nous allons créer un Tricatblock. Dans Trblock, nous allons créer une URL de téléchargement, et vous pouvez y voir l'itinéraire de téléchargement des images que nous avons suivi dans Index dogs pour télécharger les fichiers dans Et nous enverrons la demande de publication pour télécharger l'URL contenant les données de l'image. Maintenant, à partir de la réponse binaire Cloud, nous allons obtenir l'URL qui est l'URL de notre image téléchargée Ensuite, nous surchargerons l'URL de l'image téléchargée afin de pouvoir la vérifier, et nous enverrons une notification indiquant que l'image a été téléchargée avec succès. Au final, nous retournerons le SecurL. Ainsi, lorsque nous appellerons cette fonction de téléchargement de fichier et qu'elle sera réussie, nous en obtiendrons l'URL. En cas d'échec, nous y définirons une erreur avec une notification, échouerons à télécharger une image. Et maintenant, nous allons nous occuper de la grande fonction elle-même, qui consiste à télécharger tous les champs, même avec l'image de notre produit, et nous l'appellerons handlesafe Nous vérifierons si les champs obligatoires sont remplis, et au cas où nous enverrions une notification, veuillez remplir tous les champs obligatoires. Nous avons l'opérateur or, donc si l'une de ces valeurs est fausse, elle est donc vide, il enverra cette notification. Ensuite, nous vérifierons que le prix est un nombre positif, et dans le cas contraire, nous vous enverrons à nouveau la notification. Nous fixons également la nouvelle constante de prix car nous convertissons le prix de l' encens en un entier Ensuite, nous définirons le chargement sur true et nous l'utiliserons pour le spinner eter, et nous y créerons un bloc TryCatch. Nous allons d'abord essayer de télécharger l'image. Vous pouvez voir que nous attendrons le fichier de téléchargement, que nous avons là. Si nous n'y parvenons pas et que cette fonction échoue, nous recevrons un message d'erreur indiquant que le téléchargement de l'image a échoué. Dans le cas contraire, si nous y parvenons, nous continuerons et nous préparerons les données du formulaire pour enregistrer le produit. Ensuite, nous enverrons une demande de publication pour enregistrer le produit avec les données du formulaire, et en cas de succès, nous enverrons une notification à ce sujet, puis nous dirigerons l'utilisateur vers un tableau de bord d'administration. Si ce dryblock échoue, nous enverrons une notification d'erreur et l' enregistrerons, et nous ajouterons enfin un bloc dans lequel nous définirons l'état de chargement sur false pour indiquer que le processus est terminé Nous allons maintenant coder JS six afin de tester nos nouvelles fonctions. Nous allons maintenant tricher un peu. Ou peut-être vaut-il mieux dire que nous serons des développeurs intelligents. Ce que nous allons faire, c'est passer à Modifier le produit J six, et là nous allons prendre le mur J six. Copiez-le et insérez-le dans notre produit de création. Nous l'avons donc maintenant. Et au lieu de modifier, nous y mettrons créer. Ensuite, nous allons faire défiler la page vers le bas et ce bouton n'enregistrera pas les modifications, mais simplement les enregistrer. De plus, au clic, il n'appellera pas le produit Handle Edit car nous n'y avons même pas cette fonction. Elle est seulement là, mais elle appellera la fonction HandleSafpDuct Nous pouvons donc simplement supprimer ce mot, HandleSafpduct, et si vous double-cliquez dessus et que vous faites Satterf, vous verrez que c'est cette fonction que nous avons Nous devons maintenant inclure trois autres éléments, à savoir l'image. Donc, assez similaire à cette étiquette et à cette entrée, nous allons en créer une pour l'image comme celle-ci, et elle sera en fait la même. étiquette indiquera télécharger l'image, code HTML quatre sera l'image, l'image d'identification, type sera le fichier, l'exception de la barre oblique et, en cas de modification, il appellera ce changement de fichier de descripteur que nous avons fait Ensuite, cela sera également nécessaire, et une autre chose que nous devons y ajouter est l'aperçu de l'image. Pour cela, nous utiliserons un rendu similaire à celui que nous utilisons pour Spinner Nous vérifierons si l' aperçu de l'image est vrai, et si c'est le cas, nous générerons ce code HTML. Où nous aurons une différence qui enveloppera l'image, et la source de l'image sera l'aperçu de l'image Vous pouvez à nouveau voir que l'aperçu de l'image est notre variable d'état, et nous la définissons dans ce changement de fichier de descripteur. Nous allons nous installer là et mélanger avec le mode complet et haut pour le mode automatique, c'est à peu près tout. Maintenant, si vous voulez vérifier, je vais l'examiner lentement. Mais c'est fondamentalement la même chose que nous avons modifié le produit, mais nous ajoutons une fonction différente au clic pour le bouton, l'aperçu de l'image et la saisie de l'image. Nous devons y réparer un petit détail. Ce n'est en fait pas admin Create. C'est le produit Admins Slash Create. Maintenant, si vous l'enregistrez, nous sommes maintenant sur notre hôte loco avec slash Admin, nous sommes donc sur le Nous allons cliquer sur Adm, et nous arriverons à un véritable formulaire de création de produit. Et maintenant, testons-le. Remplissons donc les données et téléchargeons une image. Nous allons appuyer sur Enregistrer. Produit final avec image que nous avons enregistrée et téléchargée avec succès. Vous pouvez maintenant voir notre nouvel article. Vous pouvez voir l'aperçu de l'image ici. Nous pouvons maintenant supprimer les anciennes données. J'ai créé deux cours et un modèle. À ce jour, nous avons abordé toutes les questions relatives à la création, à la lecture, à la mise à jour et à la suppression, également appelées actions de rat. Et il est temps de les présenter sur l'interface utilisateur à nos clients. 13. Maison: Nous allons maintenant supprimer cet administrateur, nous allons coder l'interface client. Nous allons maintenant passer aux pages, créer un nouveau fichier, en commençant par JS six. Nous utiliserons l'extrait ici. Nous allons maintenant entrer dans Abdo GSSix et là, dans les routes, mais pas dans la voie d'administration, nous allons créer une nouvelle route pour la Nous y mettrons ce chemin ainsi que l'élément home. Ensuite, nous allons importer la maison que nous avons créée. Nous y importons Effect , State Hook et Eos State dans tous les articles du produit, et nous continuerons à utiliser Effect Dook pour récupérer les données lors du chargement de cette page Nous ferons une requête HTTP pour récupérer les données du produit Cela signifie que nous appellerons ce point de terminaison un produit. Et si vous vous souvenez, c'est exactement ce que nous avons fait dans Postman pour obtenir tous les produits que nous avons dans notre MongoIB Ensuite, nous réglerons les données de récupération sur l'état du produit. Et si nous n'y parvenons pas, nous bloquerons toutes les erreurs sur la console. De plus, ce tableau de dépendances vide signifie que cet effet ne s'exécute qu'une seule fois lors du chargement de la page. Pour le dif principal, nous allons fixer poids maximum à 1 300 pixels, et nous le centrerons avec Mix Oto Nous ajouterons également un peu de fusion dans le haut et le rembourrage. À l'intérieur, nous allons créer un autre div avec du contenu de classe hero, et ce contenu zéro est une classe de DZI À l'intérieur de ce contenu nul, nous allons créer un autre div avec un poids maximum, et y mettre une description textuelle et un bouton de boutique. Tout d'abord, nous accueillerons les utilisateurs sur notre page. Nous ajouterons le nom de la page dans le Spentex où nous ajouterons une couleur de texte différente pour le mettre en évidence Ensuite, nous y ajouterons du texte et le bouton qui redirigeront notre utilisateur vers une boutique elle-même plus tard. 14. ProductCard: Nous allons maintenant charger tous les produits, mais pour cela, nous allons créer deux composants distincts qui garderont notre code propre. Passons aux composants et créons un nouveau fichier. Carte unique de produit J six et carte de produit .g6. Dans la fiche produit, nous allons d'abord importer la carte individuelle du produit, car ce JS six servira de mise en page pour toutes ces cartes individuelles. Ce composant recevra alors un objet produit en tant qu'accessoire et affichera ses informations Pour le div principal, nous utiliserons une disposition en grille, et sur grand écran, nous utiliserons un arbre de colonnes en grille. Ensuite, sur un écran plus petit, nous utiliserons deux colonnes de grille, et sur un écran mobile, nous utiliserons une colonne de grille que nous n'avons pas besoin définir car il s'agit d'une valeur par défaut. Ensuite, nous allons définir une largeur maximale de 1 200 pixels, un certain écart entre les éléments. Nous allons le centrer avec Mix Auto, et nous centrerons également les éléments avec placer les éléments au centre. Ensuite, nous allons passer en revue les produits. Et pour chaque produit, nous appellerons le composant carte unique que nous coderons juste après celui-ci, et nous saisirons la clé avec l'identifiant de l'article et le produit avec l'article. Maintenant, dans dc.com, nous allons entrer dans la carte sur le panneau, et nous allons y sélectionner une carte qui nous plaît Ensuite, vous allez sélectionner le J six et vous pouvez copier le code. Insérez ensuite le code dans ce retour sur notre carte unique de produit, un six. N'oubliez pas non plus d' y mettre un accessoire de produit. Pour que toutes nos images de produits soient parfaitement alignées, nous les réglerons sur « full », puis sur une hauteur fixe. Définissez également leur objet en couverture et leur objet en haut. Nous définirons également la source sous forme d'image à points du produit. Ancien nom à point du produit, puis du corps de la carte et de la description, nous définirons le titre de la carte comme nom du produit, puis comme description, et au cas où la description ne serait pas disponible, nous n'afficherons aucune description disponible, puis pour le prix, nous le diviserons et l' indiquerons en dollars. Donc, actuellement, c'est en cents, et nous pouvons le convertir comme ça. Il est également possible d'avoir un certain format numérique et de l'utiliser. Nous allons maintenant le faire de manière plus simple. Ensuite, nous nous dirigerons vers Jasix chez nous et nous commencerons à écrire la carte du produit Appuyez sur Entrée de cette façon, il sera importé. Ensuite, nous devons y définir un accessoire qui est Produit en tant que produit, enregistrez-le Ensuite, si nous allons sur notre page, nous y verrons tous les éléments que nous modifierons dans notre base de données Mongo Désormais, tout ce que nous allons modifier, supprimer ou ajouter sur le tableau de bord d'administration, vous le verrez également sur le client qui s'y trouve. Passons donc à cet article. Modifions-le. Enregistrez les modifications, revenez à l'interface client, actualisez la page, et nous pourrons y voir le changement. Essayons maintenant d'ajouter un article. Et maintenant, nous pouvons le voir sur notre page client. Nous allons maintenant créer une carte. Nous sommes donc en mesure d'y ajouter les produits que nous voulons acheter, puis de passer à la caisse. Pour une carte, il faut ajouter barre de navigation. Allons-y donc un par un. 15. NavbarAndThemeToggle: A deux composants. Créez ensuite un nouveau fichier, nowbar.j6, et là vous utiliserez l'extrait, passez à l'ap J six et modifiez les brutes ci-dessus Voilà maintenant la barre, importez-la. Vous pouvez vous rendre sur daisy.com et sélectionner la barre de navigation de votre Je vais sur J six, je le copie et je le colle sur ma page. Vous allez le coller ici, mais j'ai une version modifiée, et je vais la parcourir. Mais avant de le parcourir, je vais vous montrer ce que j'ai réellement importé, et nous n'aurons qu'à importer le lien pour un défilement fluide. Nous utiliserons cette technologie de liaison. Au lieu de la plaque d'ancrage , nous nous y dirigeons. Maintenant, pour que cette barre de navigation soit complète, nous devons créer deux autres composants. premier, qui sera le bouton de la table d'équipe, Chasix, et le second, qui sera l' icône de la carte 6 Ce que nous allons faire dans Dem toggle, c'est importer use state et usefect Ensuite, nous allons définir une variable d'état pour le mode sombre et continuer avec usefecdok pour définir l'équipe initiale en fonction de l'attribut d'équipe actuel Nous trouverons l'équipe actuelle grâce à l'élément documentaire. Vous pouvez y voir l'équipe chargée des données, et si vous vous en souvenez maintenant et que vous allez dans Index, c'est le HTML que nous y avons défini Nous allons définir son état en mode sombre en fonction de son état actuel. Ensuite, nous devrons exécuter la fonction permettant de taguer l'équipe. Nous l'appellerons donc TagleTM et nous créerons la nouvelle équipe en fonction de l' état actuel du mode sombre Donc, si l'état du mode sombre est vrai, ce sera Cupcake Team, et si c'est faux, ce sera Business Team Ensuite, nous recruterons l'équipe chargée des données et nous y installerons la nouvelle équipe. De plus, nous allons passer en mode «   Is dark mode ». Maintenant, nous allons utiliser ce bouton à bascule que vous pouvez trouver sur la page DCUI. Nous allons utiliser le mode Is dark pour cocher et Toggle Maintenant, si nous revenons à notre barre de navigation, nous pouvons ajouter le bouton Toggle team, puis le placer dans la barre de navigation Div, qui provient également de DZUI et là nous devons Alors faisons-le comme ça. Sauvegardez-le. Et maintenant, nous allons consulter notre page. Il est là, alors essayons de cliquer dessus. Et vous pouvez voir que cela change l'équipe. Et maintenant, si vous revenez au code VS dans le bouton Team, vous pouvez définir les équipes que vous souhaitez pour le mode clair et le mode sombre 16. Panier: Appelons maintenant l'icône de la carte J six. Sur l'icône DCU, si vous allez dans la section NaF Bar, vous pouvez voir qu'il y a suffisamment de barres avec une carte et si vous entrez dans Ja six, nous pouvons réellement prendre la carte à partir de Nous pouvons le coller sur l'icône de notre carte, mais nous devrons ajouter quelques éléments. Tout d'abord, avant de coder le contexte de la carte murale et cette fonctionnalité, nous pouvons simplement le marquer en y réglant une constante de quantité totale à zéro. Ensuite, nous intégrerons cette réduction à un contrôle de la quantité totale, à condition que cela ne soit rendu que si la quantité totale est supérieure à zéro. De plus, nous ajouterons une quantité totale ici et là. Si nous revenons à notre barre de navigation, nous pouvons ajouter le lien vers l'icône d'une carte. N'oubliez pas de l'importer. Pour le chemin, nous allons utiliser Slash Card. Créons en pages un nouveau fichier, la carte J six. C'est là que nous pouvons le couper. Nous pouvons maintenant passer à Abdo J. Six. Nous y modifierons les itinéraires. N'oubliez pas que nous devons également l'importer et le chemin sera une carte. Maintenant, si nous allons sur notre page, vous pouvez y voir la carte et lorsque nous cliquerons dessus, nous serons redirigés vers la page de la carte. Passons maintenant à la quantité totale. Si nous revenons à l'icône de la carte, que nous changeons cette quantité totale à cinq et que nous l'enregistrons maintenant, vous consulterez notre page, vous pourrez voir que le numéro y était indiqué. Passons à Context et nous allons créer un nouveau fichier. Ce fichier s'appellera Card Context. Logistique. Dans le contexte de la carte, nous allons d'abord importer également les crochets, puis nous allons commencer par créer le contexte de la carte. Nous utiliserons un crochet personnalisé pour utiliser le contexte de la carte. Nous utiliserons les enfants comme accessoires, et nous l'envelopperons dans le contexte de la carte À l'intérieur, nous allons créer un état pour contenir les éléments de la carte qui seront initialisés à partir du stockage local Le stockage local est une fonctionnalité fournie par les navigateurs Web. Et cela nous permet de stocker les données localement sur l'appareil de l'utilisateur. Cela signifie que nous enverrons au stockage local le produit que l'utilisateur souhaite acheter, puis nous le chargerons chez le fournisseur de la carte à partir du stockage local. Nous créerons un effet d'utilisation pour mettre à jour le stockage local chaque fois que l'état des éléments de la carte change. Là, nous le définirons et dans le tableau de dépendance, nous mettrons les éléments de la carte. Chaque fois qu'il sera modifié, nous mettrons à jour le stockage local. Nous allons créer une fonction pour ajouter un article à la carte. Pour les articles de la carte définis, nous allons créer un article constant dans la carte et nous essaierons de le trouver. Ensuite, nous créerons une condition pour vérifier si l' article figure déjà sur la carte. S'il est là, nous augmenterons sa quantité d'une unité, et dans le cas contraire, nous en augmenterons simplement la quantité d'un. Ensuite, nous avons également besoin d'une fonction de retrait de la carte. Ensuite, nous définirons à nouveau les articles de la carte, est-à-dire l'état qui y est défini, et nous diminuerons simplement la quantité ou retirerons l'article si la quantité est nulle. De plus, nous aurons une fonction pour diminuer la quantité d'un article sur une carte. Là encore, nous utilisons l'État. Et en répétant les éléments de préparation, nous diminuerons la quantité, et au cas où nous arriverions à zéro, nous la retirerons à nouveau Nous procéderons également à l'effacement de la carte, et là, nous mettrons simplement les éléments de la carte dans un tableau vide, puis nous les retirerons du stockage local. En retour, nous fournirons l'état et les fonctions de la carte aux composants pour enfants. Dans les valeurs, nous allons coller toutes les fonctions que nous avons utilisées, et cela enveloppera l'accessoire pour enfants Maintenant, nous devons aller à Mindjsix. Nous y ajouterons un fournisseur de cartes, et nous y insérerons notre application. Le fournisseur de la carte est en train de finaliser notre demande. Il y est importé, et nous en aurons la fonctionnalité. Nous pouvons aller au Cardicon J Six. Dans l'icône de la carte, nous allons définir le contexte de la carte DS et importer la carte d'utilisation. Nous utiliserons le porte-cartes utilisé pour accéder aux éléments de la carte depuis le contexte de la carte. Et au lieu de ces cinq codés en dur, nous calculerons le nombre total d'articles contenus dans la carte Maintenant, pour ajouter la fonctionnalité de publicité aux articles de la carte, nous allons passer à la fiche produit unique. Nous allons importer notre crochet usagé depuis le contexte de la carte pour interagir avec l'état de la carte. Nous allons extraire les ajouts à la carte, retirer de la carte et les éléments de la carte de notre crochet à cartes que nous avons créé dans le contexte de la carte. Nous trouverons l'article sur une carte qui correspond au produit actuel et l' enregistrerons dans la fiche article sur la carte. Ensuite, nous mettrons une quantité de l'article sur une carte, et avant qu'elle ne soit nulle, si l'article ne s'y trouve pas, nous créerons une fonction pour gérer l'ajout d'un article la carte et également pour gérer le retrait de l' article de la carte. Ce sont les fonctions que nous y avons mises en place. Dans la carte unique du produit, nous ajouterons le disque contenant les actions de la carte depuis le ZI. Nous vérifierons la quantité. S'il est supérieur à zéro, si c' est le cas et que le produit est sur une carte, nous aurons retiré le bouton de la carte. En un clic, le produit sera retiré de la carte. Si la quantité est nulle, l'article sera affiché sur la carte et, en un clic, l'article sera ajouté à la carte. Maintenant, nous pouvons le tester. Vous pouvez voir qu'il est modifié ou supprimé de la carte. Alors maintenant, je vais cliquer sur Ajouter à la carte. Nous en avons un. Je vais également ajouter cet article et cet article, et notre nombre avec la quantité sur une carte augmente ou diminue en fonction du nombre d'articles que nous avons sur une carte. Et maintenant, lorsque nous cliquons sur la carte, nous allons coder le JS six. Passons à la carte J créée en six pages. Nous allons d'abord effectuer les importations. Ensuite, nous extrairons les éléments carte (quantité réduite et modifierons la carte à partir de notre crochet d'utilisation. Au cas où notre carte serait vide, nous voulons afficher un message. Votre carte est vide. Nous allons donc fixer cette condition. Et au cas où la longueur des articles de notre carte serait nulle, nous afficherons ce message. De plus, avant de cliquer sur Commander pour la bande, nous aimerions savoir quel est le prix total du produit que nous avons sur notre carte. Pour cela, nous allons créer un nouveau prix total constant, et nous y compterons le prix total des articles figurant sur notre carte. Ensuite, avant de créer une fonction handle checkout, nous allons créer J six. Pour la journée principale, nous fixerons une largeur maximale de 1 400 pixels, nous la centrerons avec MMX Auto, centrerons avec MMX Auto, y ajouterons un peu de pédalage et une marge Nous y mettrons un titre avec le panier d'achat, y définirons le poids de police, la taille de police, la marge et le texte au centre. Ensuite, nous allons créer le DIF avec une disposition en grille et y placer des colonnes de grille similaires que nous avons sur une page d'accueil, puis nous allons itérer sur les éléments de la carte Chaque article de carte sera affiché dans cette section où nous aurons cet index clé et nous montrerons l'image de l'article. Ensuite, nous indiquerons le nom de l'article et son prix, que nous convertirons en dollars américains. Ensuite, nous créerons un DIF qui indiquera la quantité de l'article que nous avons actuellement sur notre carte. En dessous, dans un autre DIF, nous aurons le bouton pour le supprimer au cas où nous voudrions retirer l'article de la La dernière chose que nous ajouterons, il y a un div qui contiendra à nouveau la technologie du paragraphe avec le prix total, et un bouton pour passer à la commande. Après avoir créé une fonction pour gérer le paiement, nous l'ajouterons à ce bouton, mais pour cela, nous devons d'abord implémenter la bande. Voici à quoi ressemblera la page lorsqu'elle sera vide. Et si nous retournons maintenant à la maison, y ajoutons quelques produits et passons à la carte, vous pouvez voir que nous avons le prix total ainsi que les deux produits. Maintenant, si vous cliquez sur les supprimer, nous pouvons les retirer de la carte, et s'il n'y a rien, cela indiquera à nouveau que votre carte est vide. 17. Rayure: Accédez à la page stripe.com, et nous cliquerons dessus sur Commencer maintenant Vous y remplirez vos données et cliquerez sur Créer un compte. Après avoir vérifié votre adresse e-mail, vous pouvez cliquer ici sur Découvrir les fonctionnalités. Si vous ne voulez pas le voir maintenant, vous pouvez cliquer ici et rester sur cette page, nous cliquerons sur les développeurs. Là, nous cliquerons sur les clés API. Là, vous cliquerez sur la touche Révéler le test, puis vous cliquerez dessus, et elle la copiera automatiquement dans le presse-papiers Nous nous dirigerons vers le dossier Bend, et nous l'enregistrerons dans nos variables d'environnement. Créez-en un nouveau sous Stripe Secret Key et collez-le là. Nous allons maintenant ouvrir un terminal. Nous verrons le front end. Et là, nous allons faire NPM Stripe Slash Stripe Js. Nous allons installer cette bibliothèque. Nous allons l'importer dans notre card point JS six, et là, nous allons créer la promesse constante de rayures grâce à cette fonction Load Stripe, et à l'intérieur, nous y mettrons la clé noire de l'éditeur que nous avons sur notre compte Stripe. Tout d'abord, nous devons créer l' itinéraire pour la session de paiement. Nous allons entrer dans notre dossier Ben. Dans routes, nous allons créer un nouveau fichier, StripRut point JS, puis Index DJs, nous utiliserons cette route Stripe b point slash Stripe StripRut point JS, puis Index DJs, nous utiliserons cette route Stripe b point slash Stripe et StriperOut. Et nous n'avons pas encore importé ce strip. Passons donc au début de ce fichier. Faites-y une nouvelle importation à partir de l'itinéraire que nous venons de créer et appelez-le itinéraire à rayures. Ensuite, nous avons tout dans le numéro IndexoJS et nous pouvons entrer dans Stripe Route et le coder là-bas Nous allons importer stripe, Express pour créer le routeur et une configuration à partir du dixième pour charger les variables d'environnement. Nous allons maintenant les charger avec cette méthode. Ensuite, nous créerons de nouvelles instances de routeur et nous initialiserons Stripe avec une clé secrète que nous avons enregistrée dans les variables d' environnement Et au bas de cette route, nous allons exporter le routeur pour qu'il soit utilisé dans d'autres parties de l'application. Nous allons maintenant créer l' itinéraire d'une session de paiement. Nous allons extraire les produits du corps de la demande. Ensuite, nous créerons des articles pour chaque produit. Nous définirons les données de prix et la quantité de produit. Pour les données de prix, nous définirons la devise, puis nous définirons le nom du produit et nous pourrons également prévisualiser l'image. Ensuite, pour le montant unitaire, nous fixerons le prix du produit en cents, et en fonction de la quantité, nous définirons la quantité du produit. Ensuite, nous sérialiserons les détails du produit pour les métadonnées. Nous y définirons à nouveau le nom du produit, la quantité de points du produit et le prix du produit au sens multiplié par 100 pour créer la valeur monétaire. Ensuite, nous allons créer un bloc TIG et dans le bloc Tide, nous essaierons de créer une session de paiement avec Stripe. Pour la session, nous devrons définir plusieurs paramètres. Nous allons d'abord définir le type de carte en fonction du mode de paiement, puis nous définirons les rubriques que nous y avons définies. Nous ajouterons ensuite les détails du produit aux métadonnées que nous y avons sérialisées Nous définirons un mode de paiement. Rendez l'adresse de facturation obligatoire, puis nous définirons une URL de réussite et d'annulation. Actuellement, je vais y définir l'hôte local 5173. Où se trouve mon front end ? Mais pour cela, nous devrons créer un composant pour les options de réussite et d'annulation. Et puis tracez là son chemin. Après cette session de paiement, nous enverrons l' ID de session sous forme de réponse JSON. Et s'il y a une erreur dans un catchblog, nous l' enregistrerons et enverrons le statut de la demande Bd avec un message d'erreur Maintenant, pour vous montrer comment créer la page de réussite et d'annulation, nous allons passer aux pages. Nous allons y créer un nouveau fichier, success.j6. Le second sera cancel.j6. Nous n'y mettrons qu'un modèle. Nous allons maintenant passer à eb.j6, et nous allons ajouter ces deux nouvelles pages aux itinéraires et y indiquer la voie du succès et de l'annulation N'oubliez pas non plus d' importer ces deux nouvelles pages. Et maintenant, nous allons aller dans le dossier B end, y aller dans les variables d' environnement, et là nous allons créer le nouveau. Et nous l'appellerons URL front end et titer notre hôte local 5173, où fonctionne notre interface frontale Ensuite, pour l'URL de réussite, nous allons placer cette variable d'environnement avec succès, qui est le chemin d'accès à cette page. Cela peut également être fait de cette manière, mais il est préférable de placer la variable d'environnement avec l'URL du front-end car elle peut changer, sans avoir à modifier tous les chemins de notre code. Revoyons encore une fois la rayure. 18. CartCheckout: Et maintenant, sur notre carte J six, nous allons coder la fonction handle checkout. Tout d'abord, nous allons initialiser la bande et nous attendrons la promesse que nous y avons faite Ensuite, nous transformerons les éléments de la carte en session de paiement, et nous y chargerons les champs nécessaires. Ensuite, nous ferons un Trikagblock. À l'intérieur du Tri Block. Nous ferons une demande de publication pour créer la session de paiement avec les articles transformés. Ensuite, nous redirigerons la page de paiement Stripe en utilisant l'identifiant de session indiqué dans la réponse. Nous allons maintenant vérifier si l'erreur est vraie et si c'est le cas, nous l'enregistrerons et enverrons un message dans la console. Ensuite, si ce mur tente de bloquer échoue, nous enregistrerons toutes les erreurs survenues pendant le processus de paiement. Et maintenant, n'oubliez pas d'ajouter la fonction de gestion du paiement à OnClick sur notre bouton qui permettra à l'utilisateur de passer à la caisse Je vais cliquer ici sur Pros Checkout sur ma carte. Et cela me redirigera vers la page. Nous pouvons maintenant tester le Cencl. Quand je reviendrai, je serai redirigé vers Cencl Page où il n'y a Nous allons maintenant remplir les données et cliquer sur payer, et nous serons redirigés vers une page de réussite. 19. AnnulerSuccèsPage: Maintenant, sur notre page de réussite, à côté de l'affichage d'un message indiquant que le paiement a été effectué, nous allons également placer notre carte, car une fois que l'utilisateur a acheté les produits, il n'y a aucune raison de les enregistrer sur une carte Nous allons donc également appliquer SeffactHok et utiliser un crochet personnalisé que nous avons créé dans le contexte de la carte Nous allons d'abord déstructurer la fonction clear card de useCardHok , puis nous allons créer le hook use effect Nous pouvons enregistrer sur console que le paiement a été effectué avec succès, puis nous appellerons la fonction Clear Card pour vider notre carte. Nous pouvons maintenant le tester. Ajoutons quelque chose à la carte, passons au paiement, payons-le avec Link, et vous pourrez voir la carte être réinitialisée. Et nous pouvons également laisser ce tableau de dépendances vide. Cet effet d'utilisation ne s'exécutera donc que lorsque cette page sera chargée. Maintenant, ajoutons-y un peu de style. Donc, commençons par saisir les éléments. Ajoutons un peu de hauteur à l'écran. Nous pouvons utiliser un arrière-plan basé à 100 % sur du texte basé sur le contenu, puis ajouter des ombres, des tailles de texte et des arrière-plans, et la page ressemblera à ceci. Maintenant, nous pouvons également coder la page d'annulation. Passons donc à la page maintenant. Passons au paiement et annulons-le en revenant simplement en arrière, ce qui nous redirigera sur la page d'annulation. Maintenant, ce que nous allons faire, nous allons simplement prendre le JS six de la page Success. Nous allons le coller ici. Nous y indiquerons le paiement annulé, et nous indiquerons que votre paiement a été annulé. Veuillez réessayer ou contactez support si vous avez des questions. Maintenant, si vous voulez l'enregistrer et aller sur la page, vous pouvez y voir le résultat. 20. Boutique: Faisons en sorte que ce bouton de boutique fonctionne. Nous allons donc créer une nouvelle page. Nous l'appellerons shop Dot JSix. Nous allons y tirer dessus et nous allons passer à Eb do JSix. Là, nous l' inclurons dans les itinéraires et nous l'importerons également. Si nous accédons à notre page d'accueil, nous nous simplifierons la vie en remplaçant ce bouton par une balise d'ancrage sur laquelle nous configurerons HRF pour acheter Maintenant sur notre page, nous cliquons sur le bouton, cela nous redirigera vers slash SHOP Et là, nous allons coder la page. Nous improduirons le crochet d'effet d'état et d'utilisation, les exils et la carte de produit que nous avons utilisés sur Nous allons créer des variables d'état pour la catégorie de produits filtrés et le produit lui-même. Utilisez ensuite l'effet pour récupérer les articles du produit sur le serveur Nous ferons une demande HTP, indiquerons l'itinéraire pour obtenir les produits et, avec réponse, nous définirons l'état du produit et l'état du produit filtré En cas d'échec, nous enregistrerons les erreurs. Ensuite, nous allons créer une fonction de filtrage des produits. Si le produit n'est une gamme, si le produit n' est pas une gamme, nous créerons une copie de la gamme de produits, et si la catégorie n' est pas vide, nous filtrerons nos produits en fonction d'une catégorie salée. Ensuite, nous mettrons à jour l'état du produit filtré avec un produit filtré, et nous créerons un effet d'utilisation qui appellera cette fonction de produit filtré chaque fois que le produit ou la catégorie sera modifié. Pour J six, nous allons créer le div principal une largeur maximale de 1 300 pixels et le centrer à l'aide d'un mix auto À l'intérieur, nous allons créer un div qui contiendra la sélection de la valeur de la liste de sélection pour la catégorie. Nous y ajouterons une étiquette avec catégorie et la liste de sélection elle-même, où nous définirons la catégorie, et dans notre cas, les options seront toutes des modèles de malédictions Ensuite, en cas de modification, nous définirons la valeur de la variable d'état. Enfin et surtout, nous y mettrons la fiche produit, et nous y enverrons les produits filtrés. Passons maintenant à notre page, et nous allons sélectionner des cours. Là, nous n'avons que deux cours que nous avons créés, et là nous aurons un modèle, et c'est tout pour notre page de boutique. 21. FooterAbonnements: Pour ajouter un pied de page à notre page, nous pouvons aller sur DZUI et sélectionner celui que nous aimons Ensuite, dans les composants, nous en créerons un nouveau et nous l' appellerons FuterGSix Voilà l'extrait. Dans Abdo J six, nous allons l' importer en bas, donc en dessous des itinéraires car il n'est pas acheminé Importez-le Cliquez sur JS six et copiez-le. Je vais le coller dans mon pied de page sur J six. Ensuite, je vais y retourner, prendre également ce pied de page. Je vais le mixer avec celui que je viens de modifier. Donc, pour celui que je modifie, je n'ai pas besoin des informations légales et je n'ai pas non plus besoin des services. Je vais plutôt y mettre le pied de page que j'ai choisi. Sauvegardez-le. Nous allons maintenant vérifier à quoi cela ressemble. Comme ce n'est pas notre logo, nous allons mettre les deux H avec le nom de notre page. Donc, taille du texte. Ensuite, nous pouvons le supprimer y mettre une oreille différente. Nous pouvons laisser cela comme ça. Cela aussi et maintenant pour Nous allons entrer dans le dossier Bend dans les modèles, nous allons créer dans le fichier, points du modèle d' abonné. Nous pouvons copier-coller le modèle de produit, le mettre là. Nous allons maintenant mettre à jour les champs, et il y aura juste un e-mail de type chaîne obligatoire True, et nous y mettrons également un e-mail unique True. Ensuite, nous devons le renommer. Ce sera donc le schéma des abonnés. Prenez ceci, mettez-le là, abonnez-vous maintenant, nous allons passer à Index dogs. Ensuite, nous pouvons copier sur Stripe, y mettre. Abonné, remplacez-le par l'itinéraire de l'abonné. Dans Route, nous allons cliquer sur le nouveau fichier subscriber route point js. Nous pouvons vérifier comment cela se fait dans le produit Route Dogs si nous ne nous en souvenons pas, et nous le ferons également pour les abonnés Nous allons donc procéder à des importations avec le modèle d'abonné que nous avons créé Express pour y créer le routeur, et nous allons l'exporter. Nous allons maintenant terminer de l'importer dans Index dogs. Nous pouvons copier l'itinéraire Stripe et nous y mettrons le nom de l'itinéraire d' abonné à sa place. Nous l' importerons également à partir de l' itinéraire d'abonné que nous y avons Nous allons créer un nouvel itinéraire pour publier un abonné sur notre MongoIB, nous allons extraire l'e-mail du corps de la demande Ensuite, nous créerons RCHbok et nous créerons un nouvel abonné et appellerons le modèle Create on Subscriber avec la saisie de l' e-mail extrait du corps de la demande Si nous réussissons, nous mettrons le statut à deux contre un et y enverrons un nouvel abonné. Dans le cas contraire, nous mettrons le statut à 400 et enverrons un message d'erreur. Dans Index DJs, vérifions-nous que nous utilisons la voie des abonnés Maintenant, dans Postman, nous pouvons le tester. Nous allons donc sélectionner un itinéraire postal. Nous y inscrirons notre hôte local. Nous utilisons un abonné SAS, nous sélectionnons son corps, code JSON brut, nous saisissons son e-mail de test et nous cliquons sur Envoyer. Et maintenant, nous l'avons là. Nous pouvons également vérifier et le voir dans notre base de données. Et maintenant, nous pouvons revenir au pied de page et créer leur fonction qui appellera ce point de terminaison Nous allons également importer use state, et nous allons créer une variable d' état pour le courrier électronique. Je m'occupe de l'abonnement, nous allons l' utiliser pour empêcher le comportement de soumission de formulaires par défaut Dans un scénario normal, lorsque vous soumettez un formulaire, la page commence à se recharger et, avec cette option par défaut, cela ne se produira pas Ensuite, nous allons créer un bloc de suivi. Nous enverrons une demande de publication avec l'e-mail comme charge utile. Maintenant, avant de terminer cela, nous devons envoyer une notification. Importons-y U Snack Bar à partir de l'étiquette de notification, utilisons-y le crochet du snack-bar, et nous pourrons afficher une notification de réussite effaçant l'e-mail de la zone de saisie que l'utilisateur y a placée. Si ce blocage ne fonctionne pas, nous enregistrerons l'erreur et enverrons une notification à ce sujet. Passons maintenant au bas de la page. Et là, nous avons le bouton d' abonnement. concerne la technologie de saisie, nous remplacerons le type par e-mail et nous définirons également la valeur par e-mail, et nous l'obligerons à ce que l'utilisateur ne puisse pas simplement s'abonner sans remplir un e-mail tel quel qui définira l'état de notre e-mail. Nous allons définir le type de notre bouton à soumettre, et l'essentiel de notre formulaire, nous allons ajouter à Submit et appeler cette fonction handle subscribe que nous avons créée. Et j'ai fait le genre de truc là-bas. Je ne suis pas sur l'hôte local 5 000, mais c'est 3 000 et nous n'avons pas importé Exiles Corrigeons-le donc en l'important maintenant. Et IndexoJS, nous n'utilisons pas subscribe mais subscribe. Alors maintenant, nous pouvons y remédier en ajoutant simplement R à la valeur du courrier électronique, nous pouvons nous abonner. Et maintenant, nous nous abonnons avec succès. e-mail a été réinitialisé, et dans notre Mongo Dib, nous pouvons voir le nouvel Je ferais encore une chose. Au lieu de leur compagnie, je mettrais leur soutien. Je mettrais leur adresse e-mail. Dans certains cas, nous pouvons également y mettre un numéro de téléphone et supprimer ces deux textes d'ancrage. 22. Statistiques: Nous allons maintenant créer un composant de statistiques. Dans les composants, nous allons en créer un nouveau, stats.j6, passer à admin.j6, et nous ajouterons leur intermeddv. Nous allons l'importer. Nous allons importer l'effet d'utilisation et utiliser des crochets d'état. Ensuite, nous définirons les variables d'état pour les statistiques et l' état de chargement et nous créerons un hook d'effet d' utilisation pour récupérer les statistiques lorsque ce composant sera chargé Nous allons créer une fonction asynchrone de récupération des statistiques, créer un tricagblock, faire une bonne demande pour récupérer les statistiques puis nous y mettrons un point de terminaison, mais nous le ferons Nous vérifierons si la réponse est correcte, et dans le cas contraire, nous vous enverrons un message d'erreur. Analysez ensuite la réponse JSN et mettez à jour l'état des statistiques avec les données de récupération Au final, nous réglerons le chargement en fonction des chutes. S'il y a une erreur, nous l' enregistrerons et réglerons également le chargement sur Falls. Ensuite, pour démarrer la récupération des données, nous devons appeler cette fonction Le tableau de dépendances sera vide, donc cet effet d'utilisation sera exécuté après le chargement du composant. Ensuite, pour voir nos données dans un format correct, nous utiliserons une devise de format dans laquelle nous enverrons la valeur et nous supprimerons le nombre de chiffres. Pour JA six, nous allons créer une disposition en grille qui utilisera trois colonnes. Sur l'écran mobile, il n'en utilisera qu'un. Et à l'intérieur, nous allons mettre ces zones de texte de DZI. Nous y saisirons le solde disponible, solde en attente et le total des achats. Nous vérifierons l'état du chargement, et au cas où il se chargerait, nous y mettrons un message de chargement, et dans le cas contraire, nous y indiquerons le solde disponible ou le total des frais. Maintenant, vous pouvez déjà le voir sur notre page si vous utilisez la touche Admin, mais nous n'avons rien car nous n'avons pas encore codé l'itinéraire Et maintenant, nous allons le coder. Nous n'avons pas besoin d'en créer un nouveau. Nous allons simplement aller dans le dossier Backend, puis striper JS. Il utilisera la méthode Get. Nous allons indiquer le chemin de slash API slash Stat. Nous allons faire Trcchblog récupérer le solde du compte auprès de Stripe Pour le bogue, nous pouvons nous connecter à la console. Ensuite, nous extrairons les montants du solde disponible et en attente en dollars américains, et nous devrons les convertir de cents en dollars. Ensuite, nous listerons les frais facturés par Stripe et nous obtiendrons le nombre total de frais. Nous enverrons les statistiques du solde et des frais au fur et à mesure que JSON répondra. Et en cas d'échec, nous bloquerons les erreurs dans le catch block. Maintenant que nous avons l'itinéraire et que nous pouvons utiliser le point de terminaison, nous allons entrer dans les statistiques et les insérer. Cela ressemblera à ceci, et maintenant, si nous allons sur la page du tableau de bord d'administration, vous pouvez voir que les valeurs ont été modifiées. Mais pour le reste, c'est un peu différent car les valeurs sont en fait correctes. Mais comme nous utilisons des données de test dans Stripe, bon nombre d'entre elles ne sont pas chargées dans nos bandes. Et maintenant, nous pouvons masquer le pied de page sur notre tableau de bord d'administration, afin qu'il soit plus beau Nous avons déjà importé leur lieu d'utilisation. Nous allons maintenant l'utiliser ici et également utiliser constant is admin route et vérifier le nom du chemin commençant par une barre oblique Admin Ensuite, nous le mettrons au bas de la page, et nous y renverrons l'opérateur. Si cet itinéraire d'administration est vrai, nous n'afficherons rien, et s'il est faux, nous afficherons le pied de page Maintenant, si vous allez sur la page, vous pouvez voir que le pied a disparu de notre tableau de bord d'administration, et si vous accédez l'interface client, le pied de page est toujours là 23. Jwt: Il est maintenant temps de sécuriser les terminaux. JWT est couramment utilisé pour l' authentification. Comment cela fonctionnera-t-il ? Lorsque l'utilisateur se connecte, ce que nous allons également créer, le serveur crée un WebTken JWT ou JCN et le renvoie à l' Ensuite, l'utilisateur ou l'administrateur inclura ce JWT dans les en-têtes des demandes Cela permettra au serveur de vérifier l' l'utilisateur sans avoir à interroger la base de données à chaque fois. Dans notre dossier Bend, nous allons créer un nouveau dossier. Et nous l'appellerons middleware. Dans ce dossier, nous allons créer un nouveau fichier. Ou middleware Js. Maintenant, nous allons passer aux variables d' environnement et nous allons en créer une nouvelle, qui s'appellera JWT secret, et là nous allons générer notre propre clé secrète Nous pouvons le faire en ouvrant un terminal. Nous allons suivre cette commande. Et cela générera la chaîne pour nous. Maintenant, nous allons le prendre, le mettre dans JWT secret, et nous pouvons continuer dans notre intergiciel Tout d'abord, nous allons importer Config à partir des dix et également JWT à partir de JSN Ensuite, nous appellerons la méthode Confit pour charger les variables d' environnement, et nous créerons une fonction middleware authentifier les utilisateurs à Nous récupérerons l' en-tête d'autorisation de la demande, puis nous vérifierons si l'en-tête est manquant ou s'il ne commence pas par un meilleur. Et dans le cas contraire, nous enverrons un message sans qu'aucune autorisation de jeton ne soit refusée. Ensuite, nous extrairons le jeton de l'en-tête d'autorisation et nous effectuerons la vérification dans un tricachblock Là, nous allons le vérifier et enregistrer dans une constante décodée Nous attacherons les informations utilisateur décodées à objet de la demande et nous passerons le contrôle à la fonction suivante En cas d'échec, nous enregistrerons les erreurs dans catch et, au bas du fichier, nous l' exporterons sous forme désactivée. Nous allons maintenant passer à l'itinéraire du produit point gs. Nous y importerons cette authentification, et nous spécifierons le off comme deuxième argument dans l'itinéraire de publication. Nous allons maintenant le mettre également dans l' itinéraire de suppression. Et mettez à jour l'itinéraire. Maintenant, si vous essayez de mettre à jour le produit, il échouera. Créons maintenant un identifiant et un enregistrement afin de pouvoir transmettre ce middleware Tout d'abord, dans les modèles, nous allons créer usermodel point js. Nous allons importer Mongoose et créer un schéma utilisateur. Pour l'utilisateur, nous aurons besoin d'un e-mail, qui sera une chaîne de caractères, obligatoire et unique, ainsi que d'un mot de passe, qui sera une chaîne de caractères et sera également Nous allons ensuite exporter ce modèle en tant qu'utilisateur. Nous allons maintenant créer un nouveau dossier que nous appellerons Controllers. À l'intérieur, nous allons créer un nouveau fichier de controller point JS. Nous allons importer les modules et bibliothèques nécessaires. Nous allons créer une nouvelle instance de routeur, et nous pouvons commencer par la route pour l'enregistrement des utilisateurs. Dans Tricagblock, nous allons extraire e-mail et le mot de passe du corps de la demande Ensuite, nous vérifierons si l' utilisateur avec l'adresse e-mail donnée existe. Et si oui, nous mettrons le statut à 400 et enverrons un message indiquant que l'utilisateur existe déjà. Ensuite, nous aurons le mot de passe en utilisant B crit, et nous créerons une nouvelle instance utilisateur avec l'e-mail et le DHhedPassword Nous enregistrerons l'utilisateur dans la base de données, générerons un jeton JWT et fixerons l' expiration à 1 heure Ensuite, nous enverrons un statut créé avec un jeton et un message de confirmation. En cas d'échec, nous détecterons et enregistrerons l'erreur. Nous allons continuer avec l'itinéraire de connexion dans Tricagblock. Nous extrairons l'e-mail et le mot de passe du corps de la demande. Nous essaierons de trouver l' utilisateur avec un e-mail donné, et s'il n'existe pas, nous définirons le statut de la réponse et enverrons un message avec des informations d'identification non valides. Ensuite, nous comparerons le mot de passe fourni avec le mot de passe haché que nous stockons dans notre base de données et utiliserons si la condition est vraie et que le mot de passe correspond, nous créerons la charge utile avec l'identifiant utilisateur et Ensuite, nous signerons un jeton JWT avec une charge utile, clé secrète et un délai d'expiration d'une heure cas contraire, nous renverrons le statut 400 avec un message indiquant que les informations d'identification ne sont pas valides, et en cas d' échec du blocage du lecteur , nous bloquerons l'erreur. Nous l'exporterons également sous le nom de Afouter. 24. LoginRegister: Nous devons maintenant créer un formulaire de connexion et d'inscription. Passons aux pages des dossiers frontaux, et créons un nouveau fichier, Log in D J six et un autre Register DJ six. Nous utiliserons ce NIPpes là-bas. Ensuite, Abdo J six, nous allons l' acheminer comme ça. Nous y ajouterons un chemin de connexion et d'enregistrement, et nous l'importerons également. Dans le registre JA six, nous allons importer les modules et les hooks nécessaires. Nous utiliserons Use State Hook ainsi que des liens et utiliserons Navigate pour la navigation. Pour effectuer des requêtes HTD P, nous allons importer Exis Nous déclarerons le hook pour la navigation, puis nous initialiserons les variables pour les données utilisateur, et nous définirons leur nom, leur e-mail et leurs deux mots de passe pour confirmation, et la valeur par défaut sera vide Nous continuerons avec la variable d'état pour le message d'état, où nous chargerons un message d'erreur ou de réussite en cas d'échec ou de réussite. variable d'état de réussite est un indicateur que nous utiliserons pour afficher le message sur Y indiquant l'erreur ou le succès. Par défaut, nous définirons leurs valeurs. Ensuite, nous allons créer un gestionnaire pour le changement d'entrée. Nous y mettrons à jour l'état des données utilisateur avec une nouvelle valeur d'entrée. De plus, nous effacerons le message de statut et mettrons notre drapeau à tomber. Ensuite, il est temps de passer au gestionnaire de soumission du formulaire, et pour empêcher le comportement par défaut du formulaire, nous utiliserons la méthode d'interdiction par défaut Cela signifie que la soumission du formulaire ne rechargera pas la page. Ensuite, nous vérifierons si le mot de passe de confirmation est le même que le premier mot de passe. Cela permettra de gérer le scénario d'erreur car nous n'avons pas la valeur égale à, et nous définirons la variable d' état que nous utilisons comme indicateur sur falls. Ensuite, nous définirons les messages d'état qui ne correspondent pas aux mots de passe, que nous afficherons également sur l'interface utilisateur de JA six, et nous reviendrons. le reste des fonctionnalités, nous allons intégrer Tricag, nous allons Pour le reste des fonctionnalités, nous allons intégrer Tricag, nous allons configurer la requête Es, et pour les en-têtes, nous allons définir le type de contenu sur JSON Ensuite, nous enverrons la demande de publication au point de terminaison d'enregistrement avec les données utilisateur, et c'est le point de terminaison que nous avons codé dans notre contrôleur. Nous y attacherons également une configuration avec les en-têtes pour informer le serveur que le corps imprudent contient des données JSON Et une fois que nous aurons réussi à tout publier, définissons un succès sur true, puis affichons le message d'état indiquant que l'enregistrement réussi, puis dirigeons l'utilisateur vers la page de connexion. En cas d'échec du bloc de description, nous attribuerons à un succès la valeur false et nous enverrons un message d'erreur. maintenant à JS six lui-même, nous allons utiliser la mise en page Flexbox avec colonne de direction flexible, sorte que les entrées seront placées les unes en dessous des autres Ensuite, nous centrerons les articles avec le centre des articles et le centre Justify. Nous allons régler Mnheiight sur écran, et nous allons définir un arrière-plan clair. Nous allons créer un titre pour notre formulaire, qui sera enregistré et maintenant vers l'affichage du message d'état. Nous vérifierons si le message d'état est vrai ou faux. Si c'est vrai et qu'un message d' état est réellement défini, nous le rendrons, et nous le rendrons dans la technologie des un message d' état est réellement défini, nous le rendrons, et nous paragraphes, puis nous jouerons simplement avec la couleur. Nous devons vérifier si c'est une variable de succès, puis utiliser un opérateur ternaire, et si c'est vrai, nous la définirons sur la couleur verte, et dans le cas où elle est fausse, nous la mettrons sur la couleur rouge Nous ferons en sorte que l'enregistrement réussi en vert, les erreurs en rouge. Maintenant, au formulaire lui-même, nous allons y ajouter lors de l' envoi ce que nous y avons fait. Nous allons maintenant insérer toutes les entrées pour le nom d'utilisateur, e-mail et les deux mots de passe. Pour la première entrée, il sera de type texte avec un nom d' utilisateur fictif et un nom défini comme nom Valeur, nous allons définir le nom du point userdata. Cela provient de la variable d'état que nous y avons définie, donc le nom du point de données utilisateur. Et en cas de modification, nous appellerons le gestionnaire de saisie des modifications, qui est le premier gestionnaire que nous avons créé Ensuite, pour les cours, nous allons définir des ombres, des bordures, des radios, avec pour duper, literie et de la couleur grise du texte. Maintenant, nous pouvons le copier-coller, et nous allons définir ce type d'e-mail, espace réservé à l'e-mail, le nom à l'e-mail et les données utilisateur à l'e-mail également Sinon, il en sera de même pour le mot de passe. Mais encore une fois, le type, l'espace réservé et le nom seront différents Pour la valeur, nous voudrons à nouveau définir la variable stay pour un mot de passe. Ensuite, pour la saisie du mot de passe de confirmation, nous ajouterons simplement le mot de passe deux pour le nom, et dans les données utilisateur, il est également appelé mot de passe deux. Ensuite, un bouton pour soumettre le formulaire, nous allons donc ajouter un type d'envoi. Ensuite, nous pouvons sélectionner la couleur du bouton, mais utilisons une couleur plus foncée, le texte blanc. Nous pouvons augmenter le poids de la police, literie, le rayon de bordure, et avec deux polices complètes. C'est tout pour le formulaire. Sous le formulaire, ajoutons un texte supplémentaire pour demander à l'utilisateur s'il possède déjà un compte. Et si oui, il peut cliquer sur le lien de connexion qui l' enverra vers une page de connexion. Nous allons passer à Index DGS. Là, nous utiliserons Abdo en dehors du routeur. Vous passez maintenant en haut du fichier. Et nous allons importer le routeur en tant que routeur. Voici à quoi ressemblera la page. Saisissons quelques données de test et cliquons sur Enregistrer. Nous avons donc été redirigés vers une page de connexion. Et dans la base de données, nous pouvons voir sous les utilisateurs notre nouvel utilisateur avec e-mail et mot de passe hast Pour la page de connexion, ce sera presque la même que pour la page d'enregistrement. Nous y effectuerons les importations, déclarerons un hook pour la navigation, définirons une variable d'état pour les données de connexion, avec des valeurs vides par défaut, définirons une variable d'état pour le message d'état, puis commencerons par un gestionnaire pour le changement d'entrée où nous commencerons par mettre à jour l'état des données de connexion avec une nouvelle valeur d'entrée, car celle-ci sera appelée sur nos entrées, ce que nous ferons au cas où le statut le message est là, nous allons le réinitialiser en y définissant une valeur vide, puis nous allons faire le gestionnaire de soumission Nous ne voulons pas utiliser le formulaire pour recharger notre page, nous allons donc éviter les défauts Ensuite, nous allons faire un bloc d'épaves. Et nous enverrons la demande de publication au point de connexion avec les données de connexion, et nous l'enregistrerons également. Ensuite, nous enregistrerons le jeton reçu dans le stockage local. Il s'agit du jeton JWT, et une fois connectés, nous l'aurons dans notre stockage local, et nous pourrons utiliser la page en tant qu'utilisateurs verrouillés Une fois le jeton supprimé de notre espace de stockage local, la page nous verra comme les utilisateurs déverrouillés, sorte que la fonctionnalité pour les utilisateurs verrouillés ne sera pas là pour nous, ou toute fonctionnalité qui sous-tend autorisation de JWT ne sera pas accessible pour Ensuite, une fois que tout sera réussi, nous serons redirigés vers la page d'administration Dans un bloc catch, nous allons créer condition if pour voir quel type d'erreur nous avons reçu. En cas de réponse, nous définirons un message d'état avec l'erreur de réponse. S'il s'agit d'une demande, nous enregistrerons la demande d'erreur sur console. Sinon, nous allons simplement enregistrer l'erreur. Pour J six, nous pouvons réutiliser l' interface utilisateur que nous avons utilisée dans le registre, mais nous y aurons moins d'entrées. Au lieu de s'inscrire, le titre sera « login ». Encore une fois, nous allons afficher le message état au cas où la variable du message d'état serait vraie, puis nous le rendrons dans balise de paragraphe uniquement avec une couleur rouge, car lors de la connexion, nous serons redirigés vers une page d'Avent, n'aurons donc pas le temps de voir le message de confirmation. Ensuite, nous créerons la technologie nécessaire à la réforme, et lors de la soumission, nous appellerons le gestionnaire de soumission Nous pouvons maintenant copier les entrées PACD du registre JO six. Nous allons commencer par l'adresse e-mail, mais nous allons changer la valeur en données de connexion point email que nous y avons définie. En cas de modification, nous appellerons le gestionnaire de saisie des modifications. Ensuite, pour l'autre entrée, il s' agira du mot de passe des données de connexion. Ensuite, en tant que bouton d'envoi, nous créerons leur bouton de connexion, sur fond bleu, et expliquerons comment nous utiliserons le bleu plus foncé. Et également en bas du formulaire lui-même, nous ajouterons un texte. Pas encore de compte, et au cas où l'utilisateur n'aurait pas de compte, il peut se rendre sur la page d'enregistrement avec ce lien. Il est maintenant temps de le tester, nous allons donc cliquer ici pour vous connecter. Je vais maintenant utiliser le mot de passe que j'ai défini. Je vais cliquer sur Se connecter pour me connecter. 25. AdminNavbar: Je vais vous montrer comment créer une barre de navigation d'administration sera affichée qu'après la connexion au tableau de bord d'administration. Sur cette barre de navigation, nous allons ensuite placer un bouton de déconnexion au cas où notre administrateur souhaiterait créer un logo Tout d'abord, dans les composants, nous allons créer un nouveau fichier que nous appellerons adminnavbr Nous pouvons prendre notre barre de navigation actuelle et la coller ici. Ensuite, nous supprimerons l' icône de la voiture, la navigation mobile, ajouterons une fonction de déconnexion, qui supprimera le jeton du stockage local et nous redirigera également vers l'interface client Ensuite, au lieu de cette liste désordonnée, nous pouvons y mettre ce bouton et nous ajouterons notre fonction de déconnexion à Maintenant, nous allons revenir à apt JSix et nous avons déjà défini la dislocation et sa voie d'administration Et vous pouvez voir que nous l'utilisons comme pied de page. Lorsque nous sommes en voie d'administration, le pied de page est masqué. Et nous pouvons simplement le copier, le mettre en haut, prendre cette barre de navigation et la placer à la place du pied de page Mais si nous sommes en voie d'administration, nous utiliserons la barre de navigation d'administration. Donc, l'opérateur interne est en position réelle, nous allons mettre cette barre de pression, mais nous allons l'importer à l'Adminovbr Et pendant que nous le copiers-collons, n' oubliez pas de changer ce nom en barre de navigation Admin. Ensuite, nous utiliserons l'export là-bas. Et importez-le dans notre Ab Doja Six. Maintenant, si vous allez sur la page, nous avons terminé Logout, et si nous cliquons dessus, nous passerons à l'interface client Et maintenant, pour le tableau de bord d'administration, nous utilisons ces routes d'administration. Et ces routes d'administration sont enveloppées dans une route protégée, qui est l'un de nos composants. Dans cette route protégée, nous utilisons cette méthode authentifiée, qui a été définie sur true parce que nous ne l'utilisions pas lors du développement du projet Mais maintenant, nous avons la fonctionnalité JSON WebTokenFunctionality, nous pouvons donc supprimer ce retour Et décommentez ce retour, cela vérifiera si le jeton est dans le stockage local Si c'est le cas, il renverra les enfants et affichera le tableau Advantage, et dans le cas contraire, il nous dirigera vers la page de connexion. Nous avons supprimé Admin Nous allons nous connecter et accéder à JSN WebTken dans notre Maintenant, nous allons revenir à l' interface client , puis à Advantage Board Nous n'avons pas besoin de nous reconnecter car nous l'avons toujours stocké. 26. JwtAuthForRequests: Nous sommes bloqués et nous essaierons d'appeler le terminal qui a besoin de cette autorisation. allons donc cliquer sur Modifier le fichier So, puis nous allons essayer et nous allons obtenir une erreur. Donc, si vous le considérez comme un passeport, nous avons le mot de passe, mais nous ne le montrons pas. Nous devons maintenant accéder aux pages où nous modifions, créons ou supprimons le produit ou simplement aux pages où nous voulons autoriser la demande. Maintenant que nous allons utiliser cette partie du code, je vais l' expliquer sur une nouvelle page, puis nous l' ajouterons à notre demande. abord, nous devons obtenir un jeton du stockage local et l' enregistrer dans un jeton. Nous allons maintenant définir un conflit que nous allons transmettre comme argument à notre demande. premier en-tête sera l'autorisation, et nous réutiliserons notre valeur enregistrée depuis le stockage local. Ensuite, nous allons définir le type de contenu sur Jason. Le réglage est fait par Exos pour nous, nous n'avons donc même pas besoin de le définir Cela ne peut que nous aider à éviter certains problèmes à l'avenir. Maintenant, nous allons le copier et passer à la page où nous voulons modifier l'autorisation. Je vais le coller ici, et maintenant je peux réutiliser la configuration. Je vais donc entrer dans ma fonction, et là, à côté des données, j'inclurai comme troisième argument, la configuration. Maintenant, je vais l'enregistrer et je vais essayer sur ma page de modifier le produit. Et ça marche. Maintenant, vous allez également modifier pour la suppression et la création en tant que deuxième argument et en tant que troisième argument, nous supprimerons le produit, et nous serons également en mesure de le créer. Et ce sera tout pour l'autorisation avec les jetons de laboratoire JCN 27. UiFixes: Maintenant, fixons les équipes et jouons avec l'interface utilisateur. Nous allons accéder au bouton Tem Tagle et y utiliser l'équipe claire et foncée au lieu de l'équipe Business Pour définir ce mode sombre, nous allons également définir le mode sombre. N'oubliez pas que nous devons configurer l' équipe chargée des données dans l'index HTML, et j'utiliserai leur lumière par défaut. Nous mettrons à jour l'interface utilisateur du tableau de bord d'administration. Passons à Admin J 6. Tout d'abord, nous allons supprimer leur fond gris à 500. Ensuite, nous supprimerons les couleurs du texte, et nous pourrons changer cet arrière-plan en base 100 et sur Her background base 300. Et puis on ressemble à ça. Nous allons maintenant passer aux statistiques et là nous allons définir la base de texte 100, et nous la mettrons également pour les autres statistiques. Et pour un troisième, nous ajouterons également un arrière-plan différent. Nous pouvons ajouter l'accent et également le contenu secondaire du texte. De cette façon, cela ressemblera à ceci. Maintenant, nous devons également le mettre à jour sur notre bouton « article » sur la page d'administration. Nous y mettrons également le texte en base 100. Maintenant, seule la déconnexion est manquante, nous allons accéder à la barre de navigation d'administration, puis nous allons supprimer ce sac de texte, et y placer un bouton de classe DCI De plus, nous supprimerons une base d'arrière-plan à 100, et si nous passons à une deuxième barre de navigation, nous supprimerons également la base d'arrière-plan 100 à partir de là Maintenant, notre tableau de bord d'administration ressemblera à ceci, nous pouvons donc créer un logo, et là, nous pouvons simplement mettre à jour certaines couleurs des boutons que nous avons là. De plus, j'ajouterais une marge verticale aux sections la page d'accueil de cette section contenant le texte de bienvenue, et j'ajouterais la marge aux 24 derniers. Ensuite, nous changerons la couleur ce bouton Afficher, nous pourrons changer pour l'accent du bouton et nous passerons en mode sombre. Nous allons mettre un peu en valeur les cartes. Passons à la fiche produit individuelle et nous y définirons la base de fond 200. Maintenant, nous allons également le corriger pour la connexion et l'enregistrement. Passons donc à la page de connexion, changez-la pour la base d'arrière-plan. Inscrivez-vous et faites la même chose, puis modifiez, supprimez ou créez un produit. Faisons-le aussi. Donc, sur la base de 100, nous pouvons le copier. Mettez-le également là sur Supprimer le produit. Et là, lors de la modification du produit, à partir de là, nous supprimerons les couleurs du texte. Changez ces deux boutons. Pour le bouton de retour, nous allons placer à la place du fond blanc la base 200 et nous allons définir la bordure sur la base 300. Nous pouvons donc à nouveau copier cette base et la remplacer par toutes les bordures. Maintenant, cela ressemblera à ceci. Pour créer un produit, nous allons faire la même chose, nous allons donc modifier les bordures. Supprimez la couleur du texte. Définissez leur base d'arrière-plan à 100. Pour le bouton Retour, je vais définir la classe du bouton et il me manque encore une bordure, donc voilà. Également avec la couleur du texte, et maintenant pour la suppression, nous allons le changer en arrière-plan de base 300. À partir de là, nous supprimerons la couleur du texte. À partir de là, nous supprimerons également la couleur du texte, et pour le lien, nous ajouterons la classe inférieure. Nous pouvons donc réellement supprimer la base d'arrière-plan que nous éditons. Cela ressemblera à ça. Et c'est tout pour le tableau de bord d'administration. Voyons maintenant à quoi cela ressemble sur un téléphone portable. Et nous devons réparer le bouton de déconnexion. Passons donc rapidement à la barre de navigation d'administration. Et nous allons le supprimer masqué, et nous allons simplement laisser leurs drapeaux d'affichage. Et maintenant ça devrait être ça. Examinons donc le tableau de bord. Essayons d'ajouter un article. Essayons de modifier l'article. Et tout fonctionne. Et d'ailleurs, si vous souhaitez afficher uniquement, par exemple, trois premiers éléments de votre page d'accueil, vous allez à Home J six, et là, en dessous de l'effet d'utilisation, vous créerez le produit le plus récent, et vous trancherez le produit que vous avez obtenu dans la variable d'état en fonction du nombre de produits que vous souhaitez afficher. J'utiliserai donc leur arbre là-bas pour me procurer ce dernier produit. Je vais le saisir ici, le sauvegarder. Et maintenant, sur ma page d'accueil, seuls trois éléments seront affichés. Et peut-être que je vais avoir une marge de manœuvre supplémentaire. Nous allons donc changer cette marge en haut en marge verticale. Maintenant, nous allons passer à la carte et changer l'arrière-plan en arrière-plan de base 200. Encore une chose que nous devons faire dans Tailwind Configuration JS Nous y irons, par exemple, au-dessus des plugins et nous y définirons également le mode sombre. Ensuite, nous nous assurerons que notre mode sombre restera même si nous parcourons différentes pages. 28. DeployVercelUpdated: Nous utiliserons Versal et déploierons notre site Web. Ce que nous devons faire, avant même de transférer ce projet vers Git, nous devrions ajouter Git Ignore car nous devons ignorer les variables d'environnement principalement issues du backend Nous stockons nos secrets et nos mots de passe, et le Git Ignore se trouve à côté du frontend et du dossier Backend Vous allez le créer point Gidgno, y mettre ces valeurs Mais le principal est Bendslash point NF. Nous devons maintenant vérifier si nous avons cette variable d'environnement pour l'URL de base de Bend. Celui-ci, nous devons maintenant en utiliser 3 000 à la place de tous les hôtes locaux. Par exemple, sur la page d'accueil, nous avons ce produit point get HDP Local Host 3,000, et nous devons maintenant le remplacer par la valeur que nous avons dans notre variable d' environnement, qui est l'application Vet React Prenons ce nom sur Home J six, changeons. Et faites également attention. Il s'agit de barres obliques inverses, et non de guillemets simples habituels. Maintenant, comme nous l'avons fait là-bas, nous allons le faire pour tous les hôtes locaux que nous pouvons trouver dans notre projet. Cela signifie que vous cliquerez sur cette recherche ou que vous effectuerez Sutter o Shift F, et vous y saisirez l'hôte local 3 000 pour trouver pour vous tous les fichiers pour lesquels vous n'avez pas encore modifié cette option Vous allez remplacer tous les hôtes locaux 3 000 par cette variable d' environnement. Vous pouvez voir les modifications que j'y ai apportées. Après cela, nous irons dans le dossier Bend et créerons un nouveau fichier. Vous allez nommer ce fichier versal point JSON. Après avoir créé ce fichier, vous allez l'insérer car il indiquera pour Versal où se trouvent nos chiens d'index dans le dossier Ensuite, nous irons dans le dossier frontal, où nous créerons également le point VerSL JSON Mais là, nous allons simplement insérer la source et la destination pour indexer le point HTMOEactly comme Au cas où vous échoueriez lors du déploiement, allez empaqueter le JSON et, comme je l'ai fait, remplacez Cloudinary par cette version Avant, c'était une version 2.2, et quand je la déployais, elle échouait. Puis j'ai abaissé la version et elle est passée. Mais maintenant, je vais vous montrer comment je fais le déploiement à plusieurs niveaux. Versal extraira notre projet du dépôt Git. Donc, ce que nous devons faire, c'est appuyer sur la commande SotorShift B. Là, nous allons appuyer sur Publier sur Git, vous y mettrez le nom de votre Je peux y mettre, par exemple, produit 2, appuyer sur Entrée, cette façon, il sera publié sur Git. Au cas où vous apporteriez des modifications. Essayons-le. Mettons-y un index CML, quelque chose comme ça, et sauvegardons-le Vous y trouverez ensuite vos modifications dans le contrôle de source. Et au cas où vous souhaiteriez mettre à jour le référentiel et le publier, vous cliquerez ici sur Plus. Vous y mettrez un message de validation, mise à jour, et vous cliquerez sur Valider, et ces modifications seront également mises à dans Git où vous aurez votre projet mis à jour. Vous allez maintenant aller à Versal et nous allons nous connecter. Je vais cliquer sur un nouveau projet J' y trouverai le projet que je viens de publier. Donc, pour les produits numériques Marin, je vais cliquer sur Importer. Là, je vais laisser Ou pour le répertoire, vous allez cliquer sur Modifier et le backend continuer, puis dans les variables d' environnement, vous devez définir toutes les variables d' environnement dont vous disposez Nous allons donc revenir au code VS. Si nous accédons à notre dossier Bend et aux variables d'environnement, nous devrons y copier-coller toutes les variables d'environnement que nous avons. Commençons donc. Tout d'abord, je vais y saisir secret JWT et cliquer sur AD, puis j'ajouterai la variable d'environnement suivante, URL du front-end, et celle-ci sera Local host Il s'agira de l'URL réelle du front-end que nous déploierons après ce backend Donc pour l'instant, nous pouvons laisser ce champ vide, faire comme ça, et nous le mettrons à jour. Mais maintenant, continuez à ajouter le reste de toutes les variables que nous avons là. Maintenant, vous pouvez voir que je les ai édités ici et nous allons cliquer sur Déployer. Notre page est maintenant déployée. Vous cliquerez ici sur votre projet, et nous déploierons le front-end. Nous allons cliquer sur Ajouter un nouveau projet. Là, nous utiliserons le même dépôt que celui que nous avons utilisé auparavant. Nous allons régler le préréglage sur humide. Là, nous cliquerons et modifierons sur le front-end. Le répertoire racine sera donc le répertoire frontal. Ensuite, pour ce qui est des variables d' environnement, nous allons vérifier laquelle se trouve dans le dossier frontal et c'est celle-ci, nous allons donc la copier. Mettez-le là et mettez-le en valeur, nous mettrons l'URL de notre backend Passons donc à notre déploiement de Bend , puis nous copierons cette URL. Nous allons le coller ici. Mais avant l'URL, nous allons mettre les SLASA HDDPS. Dans le cas contraire, nous ne serons pas en mesure de traiter la demande. Maintenant, nous cliquons sur AD, nous allons cliquer sur Déployer. Maintenant, notre page a été déployée, et nous devons maintenant prendre cette URL du front-end. Accédez au déploiement de notre application Bend, cliquez sur le projet, cliquez sur les paramètres, accédez aux variables d' environnement. Et là, nous devons saisir l'URL du front-end que nous avons obtenu grâce à ce déploiement du front-end. Nous allons donc cliquer sur Modifier. Nous y mettrons l'URL, et nous y mettrons le HTTPS. Nous allons maintenant cliquer sur Enregistrer. Une fois que nous aurons changé cela, nous passerons au déploiement, puis nous redéploierons et redéploierons Parce que lorsque nous modifions la variable d' environnement, nous devons redéployer le back-end Et maintenant, sur notre page, nous pouvons essayer d'acheter un produit, alors modifiez-le, passez au paiement, et le strip fonctionne. On peut juste payer ça, c'est tout.