Apprendre à créer une pile complète de sites Web avec MERN Stack pour les développeurs Web débutants 2025

1. Intro: Dans ce cours, vous découvrirez MRN Stack et nous le mettrons en pratique en créant un site Web de livraison de nourriture Full Stack en utilisant le MRN Stack lui-même. Bienvenue. Ce cours s' adresse à tous ceux qui souhaitent apprendre à créer des applications full stack avec Mongo DB, express, react et note JS À la fin de ce cours, vous aurez une solide compréhension du développement Full Stack et de façon dont les différentes technologies fonctionnent ensemble pour créer des applications Web réelles. À la fin de ce cours, vous serez en mesure d'ajouter nouveaux produits alimentaires de votre site Web directement à la base de données, les mettre à jour directement depuis votre site Web, les modifier ou simplement de les supprimer si nécessaire. Ne vous inquiétez pas si vous êtes nouveau dans ce domaine. Je vais tout expliquer en termes simples pour que ce soit facile à suivre. Nous expliquerons également comment utiliser les données et les méthodes HTTP telles que la création, la lecture, la mise à jour ou la suppression. Nous allons également créer une interface utilisateur pour notre plateforme de livraison de nourriture. Décrivons ce que signifient ces technologies. M pour Mongo Di B Type de base de données où vous pouvez stocker informations importantes pour votre application, telles que les éléments de menu, les commandes des utilisateurs, les détails de livraison, etc. E pour Express JS, un outil qui nous aidera à connecter le front-end au back-end. Cela simplifiera le routage. Ainsi, lorsqu'un utilisateur parcourt les catégories d' aliments, ajoute des articles à sa carte ou passe de l'ordre, tout fonctionne parfaitement R for React, qui est utilisé pour créer une interface interactive et dynamique, permettra aux utilisateurs de parcourir les menus alimentaires, d' ajouter des articles à leur carte, ajouter des articles à leur carte, passer des commandes et de suivre livraisons en temps réel sans avoir à recharger les pages. Et pour le nœud JS, qui nous permet d' utiliser JavaScript sur le site du serveur, et qui permet de connecter la base de données, de gérer l'authentification des utilisateurs, traiter les commandes et de gérer les paiements. Nous intégrerons également services tiers essentiels pour améliorer notre site Web de livraison de nourriture, notamment Stripe pour le traitement sécurisé des paiements, Cloudinary pour le stockage et la gestion des images alimentaires, JWT, également connu sous jetons Web JSON pour l'authentification des utilisateurs, puis nous aurons un site Web de livraison de nourriture entièrement fonctionnel basé sur merde que utilisez-le pour votre portfolio, ou même transformez-le en projet réel. 2. Configuration back-end: Tout d'abord, dans notre dossier de projet, nous allons créer un nouveau dossier, et il y aura un dossier Bend. Nous allons maintenant ouvrir un terminal. Là, nous devrons faire CD Bend, NPM ini Y. Cela créera un package dans le package décrit, nous écrirons le type, et là nous écrirons le module, qui nous permettra d'importer et d'exporter Nous allons poursuivre l' installation de l'Express. Ensuite, avec le nodeman dans nos scripts, lorsque nous démarrerons, nous voudrons utiliser la commande node index point JS, et en dessous, nous ajouterons def nodemon Et cela signifie qu'à chaque fois que nous ferons NPM Run Death, il exécutera également pour nous ce nodemon Index Js et à quoi sert nodemon Et nodemon est un utilitaire qui surveillera les modifications ultérieures de notre code source et redémarrera automatiquement notre serveur Maintenant, dans le dossier Been, nous allons créer un nouveau fichier point N et dans ce fichier, nous allons stocker les variables d' environnement. Le premier sera le port, et il y en aura 3 000. Maintenant, si nous passons à IndexDGS, nous devrons d'abord importer Express Nous devrons également importer la configuration depuis Do tenf, puis prendre ce D dixième et là faire NVM I do Entrez, puis le terminal l' installera maintenant pour initialiser la configuration DTanf afin de charger les variables d'environnement que nous y initialiser la configuration DTanf avons Nous allons faire la configuration ensuite, nous allons continuer à créer une application Express avec Const App Express Nous allons maintenant démarrer le serveur. Nous allons donc faire app point Écoutez notre processus point point port. Ensuite, nous rédigerons le journal de la console afin savoir si elle écoute notre port. serveur s' exécute sur le point de traitement du port. Nous allons maintenant l'enregistrer et le tester. Dans notre terminal, nous allons donc écrire NPM Run Dev Et à l'aide des scripts que nous avons introduits , nodemon index JS démarrera le serveur et le nœud Cela signifie que cette console sera verrouillée. Même si nous y faisons une mise à jour et que nous l'enregistrons, le nœud mo redémarrera le serveur et notre modification y sera affichée. Et cela fonctionnera, bien entendu, pour les autres modifications du serveur, non pas sur ce verrou de console, mais sur celles que nous mettrons en œuvre ultérieurement. 3. Configuration MongoDB: Passons maintenant à mongtb.com. Cliquez sur le bouton Démarrer gratuitement, et nous y créerons un compte. Nous allons maintenant vouloir créer une nouvelle base de données. Nous allons sélectionner le nom gratuit pour lequel nous pouvons manger. Livraison, puis nous créerons le déploiement. Ensuite, nous sélectionnerons le nom d'utilisateur et le mot de passe. Créez un utilisateur de base de données. Maintenant, méthode de connexion. Je vais définir leurs pilotes. y ai écrit ce que je dois utiliser pour l'avoir dans mon application. Utilisons-le donc réellement. Nous allons sélectionner leur nœud. Là, nous pouvons simplement ouvrir un autre terminal et nous nous occuperons du back-end du CD et de NPM I MongoDB Nous allons maintenant installer la base de données Mongo, puis revenir en arrière et copier également cette chaîne Et nous allons y coller la chaîne dans nos variables d'environnement. Et nous y arriverons comme ça. Si vous n'avez pas encore ce mot de passe, mais que vous n' y avez que celui-ci, vous devez remplacer W par votre mot de passe actuel. J'utilise le mot de passe 123. Ensuite, nous pouvons passer en revue les étapes de configuration. Vous pouvez constater que nous avons du succès. Maintenant, lorsque nous parcourrons les collections, nous y verrons plus tard les collections que nous y téléchargerons. Maintenant, pour les interactions avec Mangaib, nous pouvons utiliser NPMI C'est là que nous allons l'importer. Et là, nous pouvons l' utiliser et nous voudrons voir quelque chose comme si nous étions connectés à la base de données, en fait. Ce que nous allons faire maintenant, c' est utiliser ce Monge, et là nous allons faire point Connect Et nous y appellerons ce point de processus MongoDB. Et il tentera de se connecter à la chaîne que nous avons dans notre fichier point N. Maintenant, nous allons le faire et nous allons vouloir l'enregistrer sur console. Donc, si cela réussit, nous dirons que la base de données est connectée. Si cela ne fonctionne pas, nous voudrons détecter une erreur. Nous allons donc le verrouiller là. Je comprends, nous allons faire une erreur, nous allons la consoler, et nous allons corriger cette erreur. Maintenant, nous allons le sauvegarder. Et au cas où cela n'aboutirait pas, nous verrons là, au lieu de la base de données connectée, le message d'erreur. 4. Modèle alimentaire et routes: Dans notre dossier Bend, nous allons créer un nouveau dossier que nous appellerons models. Nous pouvons également en créer un autre et nous l'appellerons Rods. Et dans notre dossier de modèles, nous allons créer un nouveau fichier que nous appellerons food model point JS. Et dans Routes, nous pouvons créer un nouveau fichier que nous appellerons food route point chs. Commençons par le modèle alimentaire. Et là, nous définirons le schéma de la collecte des aliments. Nous les stockerons dans notre base de données. Ainsi, quelle que soit la définition du prix, du nom de l'aliment, etc., nous transmettrons ce modèle ou les champs que devrait contenir notre objet de modèle alimentaire à notre base de données. abord, nous allons importer unguse de mungus et nous allons commencer par schéma alimentaire C (schéma à points de Mongos Et il y aura le champ pour le titre de l'aliment. Et pour l'instant, nous utiliserons le nom de l'aliment. Ce sera une chaîne de caractères et sera obligatoire. Vrai. La prochaine question sera celle du prix dans le sens du terme. Et j'utilise leur prix dans le bon sens, car nous utiliserons également des bandes et des bandes comme champ. C'est logique, car il s'agit de compter ce prix de manière sensée. C'était assez évident, mais oui, utilisons-le simplement à cause de la rayure. Et là, nous utiliserons le type de numéro. Il faudra également que ce soit vrai. Enfin et surtout, ce sera l'image. Ce sera un type de force et nécessaire jusqu'au bout. Bien entendu, l'image n'est pas une chaîne de caractères, mais nous y envoyons en fait une URL de l'image. Nous allons télécharger sur Cloudinary car nous ne pouvons pas télécharger une image de 2 mégaoctets Nous le téléchargerons sur Cloudinary, et Cloudinary générera l'URL avec l'image pour nous, et c'est elle et Cloudinary générera l'URL avec l'image pour nous, que nous téléchargerons MongoDB Ainsi, lorsque nous récupérerons les données de Mongo, celui-ci récupérera en fait l'URL de l'image que nous téléchargerons Maintenant, à la fin, nous allons exporter sur le modèle de mangouste alimentaire le modèle Food food scheme. Sauvegardez-le. Et maintenant, nous avons le modèle. Nous pouvons suivre la route alimentaire. Nous suivrons l'itinéraire alimentaire pour envoyer la nourriture à notre Mongoib , puis nous le testerons avec Postman En ce qui concerne l'alimentation, nous ferons de l'import Express, depuis Express. Nous y importerons de nourriture réelle à partir de modèles, de modèles alimentaires. Vous pouvez faire des DGS ici, enregistrez-les. Ensuite, nous y ferons un routeur express point Router. Il s'agit d'une instance de routeur d'Express avec laquelle nous allons gérer un routeur ou les routes avec. Et maintenant, nous pouvons commencer par post route pour créer un nouveau produit alimentaire dans notre Mongoli B. Nous allons donc utiliser le routeur point Nous y ferons la première URL qui ne sera qu'une barre oblique asynchrone, nous enverrons une demande et une réponse En tant que paramètres, et là nous allons essayer quelque chose. Nous ferons donc si condition ici et à l'intérieur si condition, nous ferons la demande par le nom ou la demande par prix au sens ou demandestbdy Ensuite, si la condition est réussie, nous renverrons le statut de réponse 400. Et nous y enverrons également un message. Donc, comme nous avons là le point d'exclamation, qui signifie que ce n'est pas vrai, s'agit d'une déclaration d'erreur Nous vous enverrons donc les champs obligatoires manquants. Ça peut être comme ça ? Mais au cas où cette déclaration serait fausse, nous continuerons dans un triblog là-bas, et nous continuerons à créer de nouveaux aliments Et nous allons définir le nom qui sera le nom du point du corps de la demande. Également avec le prix en cents, demandez le prix en points du corps en cents, et aussi avec l'image, demandez une image en points du corps. Et nous allons continuer à manger, à attendre, donc à attendre de manière asynchrone, à créer, par points, de nouveaux aliments créer, par points, de nouveaux C'est ce qui enregistrera le nouvel aliment dans la base de données. Retourner l'état de la réponse  : deux contre un, envoyer de la nourriture. Cela signifie que nous lui enverrons une base de données et que nous répondrons avec le statut de réponse noté à deux contre un Nous devrons également adhérer à quelque chose pour détecter nos erreurs Nous allons donc fermer le triblock qui s' arrête là Et après le blocage des échanges, nous ferons une erreur de capture et, à l'intérieur, nous enregistrerons toutes les erreurs du serveur d' envoi. Il y aura donc un message d'erreur dans le journal de la console, et nous fixerons la date de réponse à 500 points. Maintenant, nous pouvons également le fermer ici. Nous avons maintenant le premier itinéraire. Laissez-moi vraiment le faire. Passons à l'index point JS, et là nous allons importer l'itinéraire. Importez donc les aliments d'où ils proviennent, voyons où ils se trouvent. Il y a un point JS sur la route alimentaire, sauvegardez-le. Et là, nous allons utiliser EpidotuePress point JSON, car nous voulons utiliser un intergiciel pour presser les corps JSON, comme nous allons le comme nous allons Maintenant, nous allons faire EpiDTu et nous allons leur donner de la nourriture à points ou des slash food et Foodout Voyons pourquoi nodemon échoue. Route alimentaire à partir de routes. Cela ne fournit pas d'exportation, bien sûr, nous devons donc y aller. Dans notre itinéraire alimentaire, nous avons oublié d'exporter le routeur par défaut. Comme ça. Ça devrait aller maintenant. Passons maintenant au facteur. Connectez-vous ou inscrivez-vous à l'application Postman ou à la page postman que vous trouverez sur web.postman.co Après vous être connecté ou inscrit, cliquez sur Rest API Basics. Vous pouvez fermer là, cliquer sur le bouton plus ici et là , nous placerons l' URL que vous souhaitez utiliser. Nous allons donc faire le maillage HTP Localhost 3,000 Slash FOOT que nous allons changer post car nous n'avons pas défini get yet Et pour le post, comme il s' agit d'une mise à jour, nous devons également fournir des informations. Donc voilà, ce que nous allons faire, c'est entrer dans ce corps. Nous allons cliquer ici sur Raw, et nous nous assurerons que Jason est coché. Nous allons maintenant saisir les champs. Le nom sera indiqué, un prix en centimes sera de 20 000. L'image sera une URL d'image. Nous allons maintenant cliquer sur Envoyer, et nous pouvons voir que la base de données a été publiée. Supprimons maintenant le prix dans un sens et essayons de le renvoyer. Les champs obligatoires sont manquants. Vous pouvez maintenant voir que ce que nous avons défini dans cet itinéraire alimentaire est en train de se produire. Si nous manquons, par exemple, celui-ci, donc point d'exclamation et/ou condition, nous obtenons que les champs de ce champ obligatoire sont manquants Et si nous avons tous les champs, il ignore cette condition I et continue ainsi, et il enregistre les nouveaux champs dans la base de données Passons maintenant à notre MongoDB et vérifions les données que nous y avons Et si vous cliquez dessus, nous avons là celui de la nourriture. Bien sûr, nous l'envoyons maintenant via Postman, mais plus loin dans la prochaine partie de cette vidéo, nous l'enverrons depuis le front-end Donc, en fait, dans le front-end, nous y aurons une queue et une carte de style CSS, vous savez, où nous ferons ces entrées, puis avec un bouton, nous appellerons ce post, et il insérera un élément dans notre base Et je pense que nous pouvons continuer à y écrire encore plus d'itinéraires pour que notre nourriture puisse même obtenir de la nourriture, obtenir de la nourriture spécifique et supprimer de la nourriture. Je pense qu' il serait d'abord sage de définir obtenir de la nourriture » pour aller chercher tous les produits alimentaires que nous avons sur place Donc, encore une fois le point G du routeur, il s'agit simplement d'une réponse synchrone et de demande Et là encore, nous allons d'abord essayer de récupérer tous les produits alimentaires de la base de données. Et au cas où il y aurait un problème, nous le détecterons là, en cas d'erreur. Et nous pouvons également lancer le message d'erreur dans le Consolog. Et envoyez également la réponse à 500 et envoyez le message d'erreur. Dans le triblog, nous pouvons maintenant continuer. Nous y mangerons donc constamment, et nous attendrons que le point de nourriture soit trouvé . Cela essaiera de récupérer tous les produits alimentaires de la base de données, et nous les y retournerons également. Renvoyez donc l'état de la réponse avec code JSON à 200 points et nous vous renverrons la nourriture des données. Maintenant, si vous allez chez Postman, nous y ferons encore un prix dans le sens des choses. Deux pieds. Maintenant, envoyons-y un peu plus de données Je vais donc faire les pieds deux et trois. Génial. Je viens de créer deux autres objets alimentaires dans notre base de données. Nous pouvons maintenant changer cette méthode post en méthode get. Cliquez sur Envoyé. Et maintenant, nous pouvons voir que nous allons y obtenir les données. Nous y avons donc obtenu le premier produit alimentaire , le deuxième et le troisième. Et maintenant, nous allons également définir davantage. Nous allons donc définir maintenant. Cela signifie en fait une mise à jour. Donc, si vous souhaitez mettre à jour le numéro de bas de page, nous voudrons obtenir son identifiant et, dans le chemin de l'URL, lorsque nous aurons l'identifiant, nous pourrons mettre à jour, par exemple, son nom ou le prix envoyé, et nous procéderons également à la suppression. Bien entendu, nous ne pouvons pas supprimer. Nous ne voulons pas supprimer tous les aliments que nous avons dans la base de données. Nous utiliserons donc à nouveau leur NID et nous supprimerons l'identifiant spécifique Nous pourrons ensuite supprimer, par exemple, cet élément mural de la base de données. Passons à eSCDE et codons-le. Tout d'abord, nous pouvons effectuer la suppression. Nous allons donc faire un routeur qui supprime avec une barre oblique et il y aura l'ID de l'élément en tant que réponse synchrone à la demande. Encore une fois, nous allons d'abord essayer de le faire. Ensuite, au cas où cela échouerait, nous y arriverons. Nous utilisons donc Tricatchbloxs, et nous pouvons le faire à nouveau, Console Log Nous pouvons réellement le réutiliser à partir de là, il suffit donc de copier-coller. Et dans Tribloc, nous allons d'abord charger la constante ID. Demandez donc des paramètres. Nous allons maintenant extraire l'identifiant du paramètre URL, puis nous allons obtenir un résultat constant, et nous allons supprimer le produit alimentaire qui s'y trouve. Évite les aliments, ne les trouve pas par identifiant et les supprime. Et le paramètre d'entrée de cette méthode, find by ID and delete, est l'ID , que nous obtenons à partir des paramètres. Maintenant, si le résultat est obtenu ou si aucun produit alimentaire n'a été trouvé, nous vous donnerons une réponse de quatre ou quatre, « non trouvé ». Renvoyez donc l' état de réponse quatre sur quatre. Construisez Jason, et nous y mettrons l'élément de message introuvable. Essayons-le dès maintenant. Passons donc à Postman. Maintenant, utilisons l'identifiant du premier aliment. Mettons-le là. Envoyez-le. Et nous pouvons voir qu'il se charge depuis plus longtemps. Maintenant, il ne reste plus qu'à y apporter la nourriture. Et nous pouvons voir qu'il a été effectivement supprimé. Nous y reviendrons donc plus tard au cas où cela poserait des problèmes, mais pour le moment, cela fonctionne. Utilisons également quelques commentaires, afin de créer un nouvel aliment en obtenant tous les produits alimentaires en supprimant un aliment spécifique. Et maintenant, nous allons créer, mettre à jour le produit alimentaire et obtenir un produit alimentaire spécifique. Continuons à mettre à jour un produit alimentaire, afin qu'il soit mis en ligne. Et dans ce point sur le rotor, nous allons commencer par le pot extérieur et y créer l'identifiant. Encore une fois, nous obtiendrons un paramètre comme dans delete, et encore une fois, il sera synchrone. Les paramètres d'entrée seront la demande et la réponse. Nous y ferons Trcetchblock. Encore une fois, comme vous le savez, pour ce croquis, nous pouvons simplement copier celui-ci comme nous pouvons faire, y aller et copier ce que nous avons. Donc, là-haut, je vais le coller. Bien sûr, nous devons faire le corset bouclé de fermeture. Et nous pouvons commencer par là. Donc, tout d'abord, s'il manque un champ , nous retournerons une mauvaise demande. Et ce sera encore une fois la même chose que nous avons là-bas. Je pense donc que nous pouvons à nouveau le copier comme ça. Et ci-dessous, s'il passe par cette condition if, nous pouvons réellement commencer. Nous allons donc d'abord extraire l'ID du paramètre URL. Et oui, nous avons quelque chose de similaire là-bas. Alors en fait, tu sais quoi ? Faisons de nouveau concurrence parce que nous sommes des programmeurs paresseux. Les ID seront donc les paramètres de la demande. Ensuite, nous attendrons la nourriture, et nous ne la supprimerons pas, mais nous serons simplement trouvés par identifiant et mis à jour. Les paramètres seront l' identifiant et le corps du point de demande, et là, nous aurons une nouveauté , ce qui signifie qu'il mettra à jour le produit alimentaire dans la base de données OK. Ensuite, nous allons y faire une vérification. Donc, si le résultat ou si l'article sans nourriture n'est pas trouvé à mettre à jour, nous renverrons une erreur quatre sur quatre articles non trouvés. Donc, renvoyez le statut du point de réponse, quatre sur quatre, et le message Jason est introuvable. Et en cas de succès, nous vous renverrons un statut de réponse 200, enverrons un message mis à jour. OK, maintenant on peut le sauvegarder. Nous pouvons bien sûr l'essayer. Mais commençons par cet aliment spécifique, puis nous l'essaierons même avec la mise à jour. Votre routeur obtiendra un identifiant synchrone et une réponse de demande sous forme de paramètres d'entrée, puis nous ferons un Tricatchblock Encore une fois, en gros, nous pouvons simplement le copier ici. Pour le bloc tri, nous allons simplement faire un nouveau copier-coller. À partir de là, nous allons le mettre ou le styliser comme ceci. ID en tant que paramètre de la demande, puis pas un résultat constant, mais un aliment constant. Et nous attendrons les fonds par pièce d'identité. Il va donc simplement le trouver. Ne fais plus aucune action. Et je crois également qu'il y a suffisamment de just ID comme paramètre d'entrée. Et ensuite, si la nourriture a été retournée, nous vous enverrons également une réponse de 2000. Le point de réponse de retour indique que le statut 200 ne contient aucun aliment. Sauvegardez-le. Passons maintenant à Postman et testons-le Tout d'abord, nous allons obtenir tous les produits alimentaires dont nous disposons. Nous pouvons également y insérer la somme. Donc, publions-y d'abord un autre article. Il nous reste donc trois produits alimentaires. Maintenant, allons-les chercher. Prenons maintenant un identifiant, par exemple, de l'arbre alimentaire de l'article. Utilisons cet identifiant pour la nourriture. Maintenant, tu n'as qu'un seul objet. Maintenant, changeons cela pour mettre. Et en fait, ce que nous devons faire maintenant, nous allons faire de la nourriture Tree New, nous allons appuyer sur Envoyer. Nous voyons la nourriture mise à jour. Maintenant, si nous allons chercher, nous pouvons voir Food Trenu Donc, si nous supprimons maintenant l'identifiant, nous pouvons voir que nous avons aussi leur nourriture, nourriture Trenu et la nourriture One Et ce sera tout pour notre modèle alimentaire et notre itinéraire alimentaire. Maintenant, nous pouvons obtenir tous les éléments, les mettre à jour, les supprimer, en obtenir un en particulier, et je pense que c'est tout. 5. Modèle d'utilisateur et routes: Continuez dans notre code VS. Maintenant, dans les modèles, nous allons créer un nouveau fichier qui sera user point JS. Et dans ce point utilisateur JS, nous allons créer le modèle de notre utilisateur, ce qui signifie une plus grande partie de notre administrateur, car nous allons également créer des comptes d'administration, nous connecter à notre backend d'administration et là nous allons définir ou le backoffice définira les données des éléments, etc. Je vais donc faire cette importation de Mungus à partir de Mungus réel. Là, je vais faire un schéma utilisateur, un schéma mangus, abord, il y aura un e-mail dont le type de chaîne sera requis et qui sera également unique Ensuite, il y aura également un mot de passe. Il y aura une chaîne de caractères et sera également requise comme ceci. Et nous allons exporter le schéma utilisateur du modèle Fort Mongoose. N'aie pas peur. Vous ne vous contenterez pas d'envoyer leur mot de passe par e-mail. Il y aura une connexion et il y aura aussi un backend qui cryptera réellement ce Nous y avons donc une certaine sécurité. En fait, faisons-le maintenant. Ajoutez-y un nouveau dossier, et ce dossier sera nommé controllers. Dans ce contrôleur, le nouveau fichier Controller point JS. Et dans cet Octrollert Gs, nous effectuerons en fait l'itinéraire de publication pour l' enregistrement et la connexion des utilisateurs Commençons par l' itinéraire de publication pour la connexion de l'utilisateur. d'abord, nous devons bien sûr importer et installer certains modules. Donc, d'abord, nous allons importer Express que nous avons déjà depuis Express. Maintenant, nous allons importer B crypt pour le hachage du mot de passe Donc B crypt à partir de B crypt JS. Nous allons importer JWT depuis JSON Leptoken et nous allons également importer l'utilisateur à partir des modèles maintenant créés user point JS Tout d'abord, nous allons ouvrir un terminal. Nous y ferons CD, Becond et nous ferons NPM, I B crypt, JS, JCN Donc, en gros, ces deux bibliothèques. Appuyez sur Entrée. Si vous voulez effacer la ligne de commande, vous pouvez utiliser le CLS, mais maintenant nous pouvons le fermer, l'enregistrer Tout d'abord, nous allons le faire ou nous allons créer un nouvel objet routeur pour gérer l'itinéraire. Routeur express externe. Et là, d'abord, nous allons suivre l'itinéraire pour l'enregistrement des utilisateurs, et plus loin, nous allons suivre l'itinéraire pour la connexion des utilisateurs. Commençons par l'enregistrement de l' utilisateur, il y aura donc robber point post Registre, réponse de demande asynchrone. Et là, nous allons recommencer avec le bloc TryCatch. Et dans le bloc tri, nous allons d'abord extraire l'e-mail et le mot de passe du corps de la demande. Donc, le mot de passe de courrier électronique constant est égal au corps de la demande. Ensuite, nous vérifierons si l'utilisateur existe déjà ou non, nous utiliserons donc Const user exists Attendez que l'utilisateur ne trouve aucun e-mail. Par e-mail. Nous allons donc en trouver un. Bien entendu, nous ne trouverons pas s' il existe à cause du mot de passe. Ce serait bizarre, au moins. Alors maintenant, nous pouvons le faire si l'utilisateur existe. Nous vous enverrons une réponse indiquant le statut. Je ne peux pas écrire Status 400, et nous allons envoyer un message à Jason. L'utilisateur existe déjà. Mais s'il n'existe pas, nous utiliserons le mot de passe haché et nous le déchiffrerons Ce chiffre 12 est un facteur de coût qui détermine le nombre de fois qu'il faut pour calculer un seul BCRPth ci-dessous, nous allons continuer avec un nouvel utilisateur, nous allons créer un utilisateur avec un e-mail et un mot de passe, qui est le mot de passe qui est le Nous allons maintenant faire C saved user await new user point save C'est sur cette ligne que nous allons enregistrer la nouvelle base de données utilisateur. De plus, vous allez maintenant créer un jeton JW pour le nouvel utilisateur Finissons cette ligne et je vais vous expliquer pourquoi utiliser JWT Donc, JWT, signe avec l'ID, a enregistré le point d'identification de l'utilisateur Là, nous devrons coller notre secret JWT, et nous y définirons également une date d'expiration, donc elle expire dans 1 heure Nous enverrons également ce jeton Web JCN, qui est ce que ce JWT signifie pour une réponse réelle Donc, état du risque deux contre un, JSON, jeton, et aussi un message. L'utilisateur s'est enregistré avec succès. Expliquons maintenant ces jetons JW. D'une manière très simple, considérons-les comme un code que les sites Web utilisent pour envoyer des informations en toute sécurité. Considérez-les comme des identifiants numériques qui prouvent qui vous êtes lorsque vous utilisez le site Web et que vous devez réellement utiliser le site Web. Il y a encore une chose. Nous ne pouvons pas faire cela simplement comme si le secret JWT n'existait même pas Nous y garderons en fait secret de JW dans nos variables d'environnement Mais bien sûr, nous pouvons mettre quelque chose comme mon secret JWT, et cela fonctionnera, mais ce n' est pas la meilleure idée Nous devons en fait générer un long secret JWT que nous utiliserons Revenons maintenant à notre manette. Nous y utiliserons leur point de processus JWT secret. Sauvegardez-le. Nous pouvons en fait facilement générer ce secret JWT, il suffit d'ouvrir un terminal, entrer dans ma description et y coller cette commande du nœud E. Ensuite, nous pouvons simplement copier-coller ceci et nous pouvons l'utiliser comme secret JWT Nous pouvons maintenant revenir à H Controller, et là nous terminerons par l'écriture du bloc de capture. Donc, point r de console et état de réponse à une erreur de serveur de 500 points. Maintenant, ça devrait aller. Et nous pouvons continuer à écrire road pour la connexion de l'utilisateur. Nous allons commencer par la réponse de demande asynchrone du routeur point post Login, comme dans les Et là, nous essaierons à nouveau de rattraper Block. Nous pouvons copier-coller le bloc de capture pour essayer, nous voudrons à nouveau utiliser cet e-mail et ce mot de passe. Copiez-collez ceci. Nous sommes un peu laser et peut-être aussi un peu plus rapides. abord, nous utiliserons l' e-mail et le mot de passe, puis nous créerons un utilisateur, afin que l'utilisateur ne puisse pas en trouver un par e-mail, car nous voulons également disposer d'un mécanisme selon lequel, lorsque nous essaierons de nous connecter, nous devrons vérifier si l'utilisateur existe, s'il est trouvé ou non. Donc, si l'utilisateur n'est pas trouvé, nous dirons qu'il s'agit d'informations d'identification non valides. Nous devons maintenant comparer le mot de passe saisi avec le mot de passe haché que nous avons dans notre base de données Nous pourrons donc permettre à l'utilisateur de se connecter. La première constante est donc match, wait B crypt point Comparez le mot de passe avec le mot de passe utilisateur. Maintenant, si la condition et si je correspond sont vraies, nous allons créer une charge utile pour le jeton JWT Donc, const payload, ID. Nom d'utilisateur et e-mail e-mail de l'utilisateur. Ensuite, nous signerons le jeton, afin que JWT signe la charge utile Ensuite, le secret JWT, donc le point de traitement n le secret JWT Ensuite, nous créerons une certaine expiration. Ce jeton expire donc dans 1 heure, soit 3 600 secondes. Nous ajouterons également un peu de gestion des erreurs. Donc, en cas d'erreur, en cas d'erreur, nous lancerons une erreur et nous renverrons le jeton et les informations utilisateur. Donc, point de réponse, jeton JSON et utilisateur avec ID, ID utilisateur. Nous y ajoutons un point et envoyons un e-mail à l'utilisateur point par e-mail. Génial Passons maintenant au bloc s. Nous avons donc le leur si cela s'arrête là, et nous allons continuer avec s. Sinon, c'est une fausse correspondance. Donc, en fait, quelqu'un essaie simplement se connecter à ce compte avec un mauvais mot de passe. Nous vous enverrons une réponse avec le statut 400 et le message « informations d'identification non valides ». Génial. Ensuite, il y a un bloc try catch, et dans le catch, nous avons copié le code. Et dernière chose, ce que nous devons faire là-bas, c'est l'exporter en tant que routeur. 6. JWT: Un nouveau dossier sera créé qui s'appellera middleware Et dans ce middleware, nous allons créer un nouveau fichier, qui sera le code du middleware Nous allons maintenant créer ce middleware et pourquoi le faisons-nous ? Nous en avons besoin car il traitera de l'authentification à l'aide des WebTkens ou JWT JSON, garantissant que seuls les utilisateurs authentifiés auront accès à certaines parties ou à certaines parties abord, nous allons importer JWT depuis JSON webtken et nous allons maintenant définir une fonction middleware pour deux des requêtes Donc, si une demande répond ensuite. Et cette fonction suivante est en fait une fonction qui indique à l'express de passer à la fonction intermédiaire ou au gestionnaire de route suivant de la Il est donc là pour contrôler le flux, poursuivre l'exécution et la gestion des erreurs. Nous allons maintenant extraire l'en-tête d'autorisation de la demande. Donc, castez l'en-tête d'autorisation ou les en-têtes à points OhaderrQuest, et c'est là que nous procéderons Nous allons maintenant vérifier si l'en-tête d'autorisation est présent et correctement formé. Donc, si un en-tête ou en-tête commence par better parce qu'il porte le jeton, alors nous renverrons une réponse avec un message JSON d'état 41, aucun jeton Aorisation refusée Oui, au cas où il passerait, ou au cas où il n' échouerait pas à cette condition, je veux dire, au cas où il ne serait pas Nous allons ensuite diviser l'en-tête d'autorisation du jeton par points, et un. Cela signifie que je vais extraire le jeton de l'en-tête d'autorisation qui s'y trouve. Je vais maintenant ouvrir le bloc TryCatch pour gérer les exceptions. Et comme vous pouvez le voir, j' utilise parfois E, parfois erreur, en fait, vous pouvez utiliser tout le temps E ou erreur. Nous allons maintenant vérifier le jeton à l'aide de la méthode de vérification JWT Donc décodé en permanence, JWT vérifie le jeton, et nous le vérifierons là-bas Et le deuxième paramètre sera notre secret JWT que nous avons dans nos variables d'environnement Nous avons là la vérification du JWT. Nous allons maintenant demander le décodage par l'utilisateur point. Cela signifie que nous allons associer l'utilisateur décodé à l'objet de la requête, puis nous allons passer Control à la fonction middleware suivante Ensuite, nous l'avons utilisé dans les paramètres d'entrée. Nous pouvons maintenant passer au bloc de capture. Nous y bloquerons l' erreur, donc erreur de console en cas d'erreur de vérification du jeton Message à point E, et nous répondrons également avec un statut JSON à 41 points, et le message sera Le jeton n'est pas valide. Nous allons maintenant le fermer et nous pouvons faire Export v. Et avec cette exportation, nous pourrons l'utiliser dans d'autres parties de notre application. Maintenant, en l'enregistrant, nous allons passer aux points d'index, et nous allons y faire quelque chose comme cours app.us et pourquoi devons-nous le faire ? Comme dans notre application, nous avons bien sûr un peu de back-end et de front-end. Il existe des demandes d'origine croisée et, bien entendu, notre navigateur bloquera nos demandes pour des raisons de sécurité. l'utilisant, nous indiquons au serveur que nous voulons associer les en-têtes appropriés aux réponses, et nous indiquons également au navigateur qu'il est acceptable d'autoriser applications Web d'origines différentes à communiquer avec nos serveurs Ensuite, nous aimerions également utiliser la voie d'authentification ab point U. ou otter. otter Nous devons également l' importer d'ailleurs, et Epi point utilise Of Et c'est pour appliquer le middleware d'identification Maintenant, si nous faisons défiler la page vers le haut, nous manque quelques importations il nous manque quelques importations. Nous allons donc commencer par importer le OOTErroor et il y aura des contrôleurs du contrôleur JS Le prochain sera Of itself. Et cela proviendra du middleware JS. Et ensuite, ce sera le cours. Importez donc un cours depuis un cours et importez également utilisateur depuis Models user Js. Et ce sera tout pour le moment, ce que nous pouvons faire : ouvrir le terminal, nouveau terminal, CD, Bend et NPM, bien sûr Nous pouvons maintenant passer à la partie frontale du projet, et nous passerons au backend plus tard ou lorsque nous aurons besoin de quelque chose 7. Démarrage front-end: Pour la partie frontale, assurons-nous maintenant que nous ne sommes pas dans un backend ou dans un autre dossier Nous sommes juste dans notre dossier de projet, et là nous allons utiliser NPM pour créer T latest. Nous allons maintenant taper le nom du projet en frontend. Nous allons sélectionner leur réaction, et nous allons sélectionner leur JavaScript. Si nous n'en sommes pas sûrs, nous pouvons aller sur tailndcss.com pour les guides de framework, informatique et voilà C'est donc essentiellement ce que nous avons fait. Nous allons maintenant utiliser cette première commande. Passons donc au CD. Front end, ce que nous venons de créer avec ce NPM Create WD le plus récent Mettez-y cette commande install tailwind avec préfixeur automatique post CSS le préfixeur automatique post CSS Now next pour initialiser le Cette configuration arrière est JS. Copions donc le fichier mural, en fait, accédons au front-end, tailwind Config DJs, collons-le là, copions les directives tailwind dans le CSS à points d'index Donc, dans un fichier source, il y a des points d'index CSS, directives tailwind, et là, nous allons passer à Abdo J six Nous pouvons copier celui-ci, Abid J six. Nous allons simplement le coller ici, l'enregistrer. Maintenant, si nous exécutons NPM , notre application est exécutée sur ce serveur, hôte local 5173, et nous avons toujours ce backend En fait, il y a un problème avec notre backend, nous devons donc d'abord le corriger Et vous pouvez voir que c'est un problème assez simple. Nous avons une double demande au lieu d'une réponse. Passons donc à notre Bend et le problème vient du middleware, donc désactivons le middleware et nous ferons la demande et , bien sûr, la réponse Sauvegardez-le. Maintenant c'est bon. Et oui, ce que je veux dire, c'est que notre NPM Run Dev travaille toujours sur la version principale, donc notre serveur et notre base de données sont connectés Lorsque nous y retournerons maintenant avec NPM Run Dev, nous gérons également le front-end Nous avons donc un back-end fonctionnel et maintenant aussi un front-end. Nous pouvons donc passer les appels. Et c'est ainsi que nous allons recevoir les articles de notre backend vers notre front-end, les montrer et travailler avec eux. Nous pouvons maintenant ouvrir la page. Donc, ce que nous allons faire, c'est fermer cela. Nous allons maintenant passer à Abdo J. 6. Nous y mettrons le point sept du texte Excel, enregistrez-le. Nous pouvons également essayer le texte t 300 tailwind fonctionne. Nous avons donc initialisé le vent arrière avec succès. Nous avons tout mis en place, et maintenant nous pouvons commencer à travailler dessus, en fait. Ce que nous ferons également avant continuer, c'est que nous en resterons sur EBLJsix dans Exo CSS et Mind Et pour Ebo CSS, nous pouvons le supprimer, et oui, c'est tout Commençons par y créer des dossiers. Donc, nous allons d'abord créer un nouveau dossier avec des pages, puis nous allons créer un autre dossier, qui sera composé de composants. Tout d'abord, je vais charger ces actifs dans le dossier des actifs que vous pouvez trouver sur Git, et je vais commencer par la page d'administration. Nous allons donc passer aux pages. Nous allons y créer un nouveau fichier, admin.j6. Nous allons commencer par ceci, et maintenant nous pouvons facilement le montrer ici. L'administrateur l'importe comme ça. Et si on y va maintenant, qu'on y met quelque chose, qu'on augmente la taille. Oui, on peut 8. Routes protégées: Page d'administration et toutes les pages associées. Ainsi, un tableau de bord, un excellent produit , etc., devront suivre un itinéraire protégé. Nous allons donc avoir sur cette page cet administrateur. Mais en réalité, ce sera sur ce que l'on appelle des routes protégées. C'est un composant que nous allons créer ici. Et il y aura un niveau de sécurité supplémentaire . Nous y ajouterons. Il ne restituera donc les composants enfants que s' il est authentifié. Nous devrons donc importer un routeur protégé vers GS six. Nous allons importer React, et nous allons également importer, naviguer depuis le routeur React Dom. Maintenant, assurons-nous de l'avoir installé. Donc terminal, nouveau terminal, CD, front end et PM, je réagis au routeur dom, je l'installe. Génial Maintenant, ce que nous allons faire dans cette route protégée , ci-dessus, nous allons créer une nouvelle fonction ou une fonction d'assistance pour vérifier si l'utilisateur est authentifié La constante est donc authentifiée. D'accord, nous serons égaux. Ceci et là, nous retournerons le stockage local, récupérerons l'article et nous chercherons un jeton. Et maintenant, ceci est authentifié, il retournera vrai ou faux Vous pouvez continuer dans notre composant d'itinéraire protégé qui enveloppe les composants enfants C'est là que nous apporterons notre contribution, nos enfants et nos idées. Vous pouvez réellement le supprimer et vérifier s'il est authentifié. Ensuite, nous redirigerons vers la page de connexion. Alors revenez, naviguez pour vous connecter remplacez comme ceci et renvoyez les enfants. Donc, s'il est sorti et navigué, nous allons réellement afficher les composants enfants Nous avons maintenant la route ExportVDPtected, donc c'est également génial Bien. C'est pour la route protégée. Donc, pour en revenir à Abdul J 6, nous pouvons faire les itinéraires En fait, avant de le faire, nous devrions également l'importer. Nous allons donc y importer non seulement la page d'administration, mais également React, et c'est tout pour le moment. Donc, réagissez plutôt que React. Nous devrons également importer la route protégée. Donc en fait, il suffit de le taper , donc route protégée. Mmm, hum. Cela a donc été importé. Et nous devons également importer l'itinéraire et utiliser la localisation depuis React Router dom. Ce que nous venons d'installer il y a peu. Nous avons l'itinéraire, et à l'intérieur de celui-ci, nous aurons un ou plusieurs itinéraires, mais parmi les itinéraires que nous aurons réellement là , nous garderons ce chemin vers l'administrateur, et nous ferons notre étoile. Donc tout avec l'administrateur et aussi avec d'autres choses qui seront passées. Ensuite, avec l'élément, nous y collerons la route protégée sans être encore administrateur. Mais avec quelque chose que nous allons créer maintenant, à savoir les routes d'administration. Nous allons donc aller plus bas, et nous allons faire des routes d'administration C. Et là, nous reviendrons sur de nouveaux itinéraires. Et à l'intérieur de ces itinéraires, ce sera comme un itinéraire individuel. En fait, ce sera comme ça. Et le premier sera en fait avec un chemin comme celui-ci et l'élément qu'il affichera sera l'administrateur à partir de là. Alors maintenant, nous allons le sauvegarder. Nous allons également prendre ceci à la fin. Nous ne l'avons pas, nous pouvons donc exporter l' application par défaut à la fin. Et bien sûr, nous avons la fonction Export par défaut, nous devons donc la mettre à jour. L'application Const est comme ça. se termine là, puis à la fin se trouve l'application Export Default. Ensuite, nous avons les routes d'administration et oui, nous les utilisons donc pour définir un composant distinct pour les tableaux de bord d'administration ou la partie administrative de notre page Maintenant que cela est fait, nous pouvons faire des itinéraires d'administration, prendre ceci et le dire comme ça. Et encore une fois, cela utilisera désormais les routes d'administration, et là, la page d' administration sera affichée dans Hair Six, et là, nous allons intégrer notre application dans routeur du navigateur et nous l'y baserons simplement. Je vais supprimer celui-ci, il sera donc comme ça. D'ailleurs, nous y ajouterons également un peu plus d' encapsulation dans notre application, mais pour l'instant uniquement le routeur du navigateur. Et comme vous pouvez le constater, il ne l'a pas importé. Alors maintenant, oui. Mais maintenant, vous pouvez voir que ce n'est pas sur notre page. Et pourquoi est-ce le cas ? Ouvrons donc notre page, et nous allons saisir l'URL, que vous ne pouvez pas voir maintenant, faites Admin et appuyez sur Entrée. Maintenant, vous pouvez voir que nous sommes sur notre page. Et si vous ne pouvez pas voir la page, je parle de cet Admin JSix où vous avez quelque chose Cela peut être dû au fait que vous n'avez pas encapsulé ou importé ce routeur de navigateur dans Mind J six. La prochaine est que vous y avez fait une mauvaise importation. Donc, en fait, voyons maintenant où nous en sommes. Nous avons là cette importation de ces routes, et à l'intérieur de ces routes, nous avons celle-ci de route. Celui-ci est destiné à être supprimé. Sauvegardez-le. L'une des routes qui nous dirige en fait vers le chemin d'administration. Ainsi, tout ce qui se trouve sur Admin puis transféré sera transféré dans une route protégée , puis affiché dans les routes d'administration. Et dans les routes d'administration, nous avons cet administrateur. Nous devons le faire, car sinon, nous devons ajouter une couche de sécurité à notre tableau de bord d'administration afin de nous assurer que personne ne fera simplement notre barre oblique Admin et que nous serons en mesure de mettre à jour nos éléments, de les supprimer, d'en créer de nouveaux, et vous comprenez probablement le point, n'est-ce pas 9. Admin: Enfin, commencez par le tableau de bord d'administration, et nous devrons d'abord y effectuer quelques importations. Donc, à côté de React, nous devrons également importer l'effet d'utilisation que nous utiliserons et l'état d'utilisation , puis nous continuerons avec Exiles et ceci, qu'est-ce que c'est et pourquoi nous l'utiliserons C'est donc pour les requêtes HDDP provenant du navigateur ou du nœud JS, et cela nous fournira une API qui traitera ces demandes et gérera également les réponses Importons-le maintenant depuis Exiles ici. Nous devons également l'installer. Nous allons donc voir le front-end et nous allons faire NPMI Exiles Sympa. Il est maintenant installé. Nous pouvons continuer ce que nous allons importer d' autre. Nous allons donc également importer un lien depuis React Router dom. Ce que nous allons d' abord faire, c'est ajouter l'État pour contenir la liste des produits alimentaires que nous allons chercher sur le serveur Donc, nourriture constante, nourriture fixe. Et nous reprendrons l'État. Là, nous allons faire un tableau vide, enregistrez-le. Nous allons maintenant continuer avec l'effet d'utilisation. Et cet effet d'utilisation gérera la récupération des données alimentaires lorsque nous démarrerons ce composant Nous allons donc faire quelque chose comme ça, l'ouvrir. Et là, nous appellerons le point Exiles ou comme ça, désolé Point, G, et nous y ajouterons l'URL. Donc HTTP, hôte local, 3 000 et nourriture. Si vous vous souvenez, si nous le confions à un facteur, il nous fournira tous les produits alimentaires que nous avons C'est donc une chose similaire. Cela nous permettra d'obtenir les produits alimentaires et nous travaillerons davantage avec eux. Maintenant, nous allons nous asseoir là. Donc, si cette réponse est réussie, nous mettrons le pied sur les données des points de réponse. Données ponctuelles. Ainsi, une fois les données reçues, nous mettrons à jour l' état des aliments avec les nouvelles données. Ensuite, nous devrons également corriger l'erreur. Donc, s'il s'agit d'une erreur, nous allons simplement enregistrer l'erreur sur la console. Maintenant, la bonne chose à faire est de gérer également un certain chargement, car nous chargerons les données. Faisons donc leur constante avec le chargement, définissons le chargement. Cet état sera initialement défini sur false, puis lorsque ce composant démarrera, nous définirons le chargement sur deux. Ensuite, si nous avons la réponse et que les données sont définies, nous définirons le chargement sur false. De plus, lorsque cela échouera en raison d'une erreur, nous définirons à nouveau le chargement sur false. Il commencera donc par le chargement, puis s'il se termine par une réponse ou une erreur, chargement est à nouveau réglé sur Falls. Passons maintenant à l'interface utilisateur. Nous allons donc commencer par le tableau où nous allons récupérer nos données que nous utiliserons pour le moment, couleur grise, par exemple, quelque chose d'un peu plus foncé, nous les modifierons plus tard, mais maintenant pour nous permettre de voir où nous en sommes réellement Commençons donc. Nous y ferons un div qui contiendra la table à l'intérieur. Nous allons faire la table elle-même. À l'intérieur de la table, nous allons faire le Thad. En tant que tête de tableau, nous allons faire les lignes du tableau et à l'intérieur des en-têtes du tableau Sous la tête de table, nous aurons un corps de table. Et dans le corps de ce tableau, nous aurons une ligne, et à l'intérieur, nous aurons une table de données. Et cette ligne, faisons en sorte qu' un certain espacement se répètera , car chaque rangée du tableau contiendra données de tous nos produits alimentaires Nous devons donc faire une carte des points alimentaires ici. Nous y trouverons la nourriture et l'indice. Et là, à l'intérieur, nous utiliserons la cartographie par le biais de la nourriture. Nous allons donc réellement mettre cela là. Et ce que nous pouvons faire maintenant dans notre tableau, c'est que nous pouvons simplement indiquer le nom du point alimentaire, le point de l'aliment, le prix dans un sens, etc. Et elles seront également collées dans cette ligne du tableau, dans les données de ce tableau, et elles seront répétées autant de fois que nous aurons les produits alimentaires sur notre carte Essayons maintenant d'ajouter quelque chose au premier en-tête du tableau, par exemple une balise de hachage, et vous pourrez voir quelque chose y apparaître Mais bien sûr, nous avons maintenant Text Nine Excel, ce qui n'est pas la solution la plus intelligente car, bien entendu, nous y aurons un texte plus petit, donc nous pourrons le supprimer Nous pouvons laisser là l'arrière-plan pour moment afin de mieux le voir. Peut-être que nous allons le baisser à 400. Maintenant, les en-têtes du tableau peuvent être un hashtag sous forme de numéro pour le premier titre du tableau Ensuite, nous pouvons continuer avec un autre nom, puis un autre dont le prix peut être exprimé en cents. Ensuite, nous en aurons un autre, et il sera vide pour le moment car nous aurons leurs boutons pour supprimer, mettre à jour, etc. Nous allons maintenant maintenir OT et modifier tous ces en-têtes de tableau, et nous allons utiliser ce que l' on appelle scope cool like column Cela indiquera que la cellule d'en-tête est un en-tête pour toutes les cellules que nous aurons dans les colonnes ci-dessous. Maintenant, si nous allons continuer avec le style de ces en-têtes de table, nous allons simplement y ajouter un peu de literie verticale et aussi un rembourrage horizontal initial Maintenant, vous pouvez le voir sur notre page, je vais le mettre là comme ça pour le moment. Allons y mettre les données , car nous serons alors en mesure de les styliser encore mieux. Et là, dans les données des tables, nous allons commencer par un nom de classe. Ce sera encore une fois quelque chose comme nous l'avons fait pour les en-têtes de tableau, rembourrage vertical trois et un rembourrage horizontal cinq. Et là, nous allons commencer par accéder au champ, nom du point alimentaire, puis nous allons le copier. Il y aura un prix dans le sens et il y en aura réellement, il y aura un prix dans le sens. Il y aura l'index. Donc index plus un car il part de zéro. Nous aurons donc le numéro du produit alimentaire un, deux, trois, quatre, cinq, etc. Et puis les dernières données du tableau, nous les utiliserons à nouveau pour ce mariage. Nous y ferons les opérations que nous pouvons effectuer avec les données dont nous disposons. Donc, mettez à jour, supprimez et imaginez cela comme nous l'avons fait dans Postman, le put, le delete et le getting of the item ou autre Dans les données de cette table, nous aurons un div qui contiendra un autre div car cet autre div contiendra les boutons pour les opérations. Le premier bouton sera donc destiné à l'édition, et le second à la suppression ou il s'agira plutôt d'une redirection pour plutôt d'une redirection modifier et supprimer la page que nous coderons plus tard Nous pouvons y mettre des modifications et des suppressions. Maintenant, je vais également devoir y mettre, bien sûr, les deux attributs où cela devrait nous rediriger. Pour le moment, je vais le laisser vide, disons, et nous allons aussi, bien sûr, y apporter un peu de style. Mais voyons d'abord si nous chargeons toutes les données et au cas où nous ne saurions pas comment y remédier. Maintenant, disons que nous ne voyons rien sur notre page, passons à l'inspection. Là, nous allons sélectionner Console, et là nous pouvons voir si nous actualisons la page ou si nous faisons simplement quelque chose, nous obtenons une boucle infinie d'erreurs. Alors, que se passe-t-il là-bas ? Je pense que c'est peut-être le cas ou plus précisément, j'ai peut-être juste oublié quelque chose, j'ai peut-être juste oublié quelque chose, à savoir suivre le cours NPMI dans mon dossier principal. Donc, si vous voyez le backend et que vous suivez le cours NPMI pour indexer DGS, et là, bien sûr, le cours là, mais nous devrions le placer immédiatement après y avoir initialisé l' Et maintenant, si nous allons dans notre Admin JS 6 et sur notre page, vous pouvez voir que nous avons les données là, et ce sont toutes les données que nous avons dans notre MongoLib Et si nous y mettons plus de données via le Postman, supprimons ou les mettons à jour, elles seront affichées sur le tableau Mais nous voulons le faire dans notre tableau de bord d'administration sur le front-end et non via Postman, bien sûr Nous allons donc maintenant créer des fonctionnalités qui nous permettront d'ajouter un nouvel élément, supprimer un élément, de le modifier depuis le front end d'administration. Mais d'abord, nous allons styliser cette page d'accueil d' administration, disons, et cela signifie que dans le code VS, nous avons le tableau. Je vais fermer le panneau sur le côté gauche, et nous allons commencer par le style. Qu'y aura-t-il au-dessus de cette table ? Donc, tout d'abord, au-dessus de ce tableau, nous aurons également le lien suivant qui nous mènera à la création d'un nouvel élément, en fait, dans notre base de données. Pour l'instant, il sera vide, mais plus tard, il y aura quelque chose comme admin food Create. Cela nous aidera à créer le nouvel aliment. Pour l'instant, nous allons simplement créer un bouton et son style. Je vais donc le faire dans le lien, nous allons mettre un cours. Pour ce bouton, nous allons maintenant définir une couleur verte de 600. Ensuite, nous l'enregistrerons. Ensuite, nous allons continuer. Ainsi, lorsque nous passerons le curseur sur le bouton, il deviendra vert 900 en arrière-plan Ensuite, nous mettrons le texte en blanc. Il y a du rembourrage. Maintenant, nous pouvons également faire du texte petit ou peut-être le laisser tel quel. La police moyenne sonne bien, arrondie, grande. Et ajoutez-y également de l'ombre. OK, c'est bon. Et j'y vois une petite faute de frappe, arrondie. OK, maintenant nous avons le bas arrondi. Nous pouvons maintenant passer à la table. Donc, ce que nous allons faire là-bas, nous allons d'abord y ajouter un peu de trop-plein, sorte que le débordement vers l' horizontal se fera Ensuite, nous y mettrons de l'ombre, et nous la rendrons également un peu arrondie. Nous allons maintenant continuer avec le style de la table. Nous allons donc ajouter de la largeur au complet, du texte à gauche. Ensuite, pour le titre du tableau, nous allons utiliser des majuscules. OK. Et peut-être aussi un contexte différent. Maintenant, les lignes du tableau seront laissées sous la forme R, et pour le titre du tableau, nous le laisserons également sous cette forme, ce qui nous place dans le corps du tableau. Nous allons commencer par la ligne du tableau. Donc d'abord, nous devons saisir leur clé, et ce sera Food Dot ID. Et aussi au nom de leur classe, ce sera sur fond blanc. Et lorsque nous passerons dessus, nous mettrons le fond en gris, je ne sais pas, faisons-en 400 Alors maintenant, ce sera comme ça. Peut-être que nous pouvons même en faire 300 en toute sécurité. Cela nous pousse à lier deux actions différentes. Voilà ce que nous allons faire, c'est abord pour ces deux DIF au centre de justification flexible et à un certain écart Pour le prochain, nous ferons de même, mais l'écart sera moindre. Gap et si nous passons au nom de la classe pour cela, nous en ferons pour la modification un peu, je ne sais pas, Orange 500. Maintenant, vous pouvez le voir sur le côté droit. Et pour la suppression, nous allons faire de l'arrière-plan à 500. Maintenant, nous pouvons le voir à nouveau. Continuons avec le bouton d'édition. Ainsi, lorsque nous passerons le curseur sur le bouton, nous passerons l'orange à un orange plus foncé Ensuite, le texte sera également blanc, un peu de literie. Et quelle sera la prochaine police de caractères. OK. Et pour le bouton de suppression, nous voudrons le même style, mais pas le 900 orange, mais le 100 rouge. Nous allons l'avoir comme ça. Ce que nous y ajouterons également est arrondi vers la gauche en gros. Et pour le deuxième bouton, arrondissez-le vers la droite, en gros. Et maintenant je vais vous montrer le style. Mais maintenant, je peux voir que nous devons écrire un petit texte avant de le vérifier plus près, car ce ne serait pas bien alors. Passons à la page, et elle ressemble à ceci. Bien entendu, nous n'avons pas codé les liens car nous avons besoin pour cela d' un autre composant JSX, savoir le composant d'édition, le composant de suppression et le composant de création d'un nouvel élément Et dans nos pages, je vais créer un nouveau fichier, et le premier sera create foot Ja six. La prochaine étape sera de supprimer la nourriture Jasix. Et le troisième sera Edit Food Dot Jasix. Commençons par le plus simple , à savoir supprimer les aliments. Nous allons donc préparer ce modèle, et nous devrons effectuer quelques importations. Nous voudrons que le prochain réagisse, ainsi que l'état issu de React. Nous allons importer les fichiers Excel depuis Excels. Avant de continuer, ajoutons cette page à AbdljSix Nous pouvons le faire également pour les autres pages. Donc, pour créer de la nourriture et pour modifier de la nourriture. Passons maintenant à app.j6 et là, dans notre EpiDLJsix, nous passerons à la voie d'administration parce que nous ne travaillons pas encore sur l' interface utilisateur du client, disons, mais sur l'interface utilisateur d'administration, puis sur les routes d'administration, et d'ailleurs, ces routes d'administration sont utilisées dans l' application principale, mais elles le sont. Nous ajouterons ou nous pouvons simplement copier-coller la route pour la créer, la modifier et la supprimer Commençons donc. Celui-ci créera de la nourriture, appuyez sur Entrée, et si vous appuyez sur Entrée, vous vous assurerez qu'elle y est importée. Le deuxième sera de modifier la nourriture. Encore une fois, appuyez sur Entrée, nous l'avons là, et le troisième sera de supprimer les aliments, appuyez sur Entrée, et nous l'avons là. Nous devons maintenant mettre à jour le chemin. Donc, le chemin pour créer de la nourriture sera un chemin pour modifier un aliment sera aliment Modifier l'identifiant parce que nous devons avoir un identifiant spécifique dans ce chemin car nous n'obtiendrons qu'un seul article et pas tous les articles de nos produits alimentaires. Et pour ce qui est de la suppression d'un aliment, si vous essayez de le deviner, oui, ce sera un aliment, supprimez également l'identifiant spécifique, car nous voulons disposer d'une fonctionnalité permettant de supprimer tous nos articles. Maintenant, nous pouvons l'enregistrer et passer à la section Supprimer des aliments. Dans notre section Supprimer des aliments, comment nous arrivons réellement à cette page, commençons y ajouter de la classe, du texte. Faisons le texte 7 Excel et le texte Red 500, enregistrez-le. Accédez maintenant à notre panneau d'administration sur Admin Ja 6. Nous nous dirigerons vers Link Two, et là nous ferons ces bretelles pour filles À l'intérieur, nous mettrons une barre oblique et aussi la deuxième à la fin, et il y aura admin donc slash Modifier l'identifiant du point de pied du signe du dollar Vous pouvez y supprimer ces citations. Pareil pour ici. Ça nous plaît. À l'intérieur, nous allons mettre Admin slasla Delete Slash Dollar Slash, Food Dot ID. Va là-haut. Le patient n'ayant pas besoin d'un identifiant, nous faisons Adminootlas Passons maintenant à notre page. Nous allons cliquer sur Modifier, et vous pourrez y voir la modification de la nourriture. Nous arrivons donc à la bonne page. Vous pouvez cliquer sur Supprimer. Nous avons la possibilité de supprimer les aliments que nous venons de styliser, essayez et nous y arriverons, et nous pouvons cliquer sur un article, et nous arrivons à la page Créer un aliment Cela fonctionne donc bien. Nous allons maintenant coder ces trois pages. Si quelque chose ne fonctionne pas ou ne fonctionne pas pour vous, vérifiez que vous obtenez la bonne URL similaire. Si vous cliquez sur les boutons, vérifiez que votre Abdo gix est correctement réglé comme ceci Et dans le pire des cas, inspectez simplement la page, accédez à la console et vérifiez qu' elle ne tombe pas en panne en raison d'une erreur, je ne sais pas, Excios ou réseau, etc. En cas d'échec, vérifiez le premier terminal sur lequel vous avez le I will show you there. L'endroit où le serveur est en cours d'exécution, vous pouvez le voir. En cas d'échec, cette application Node Moon se bloquera et vous aurez également une erreur DRDO Vous devez donc le corriger, et dans l'idéal ou dans le scénario où cela devrait fonctionner pour vous, vous devez avoir ces deux lignes vertes et le serveur en marche, la base de données est connectée. Si, bien sûr, vous avez inséré ou placé ces journaux de console dans index point JS, comme vous pouvez le voir, leur base de données est connectée et le serveur est en cours d'exécution. 10. Supprimer les aliments: Revenons à la suppression du composant alimentaire. abord, nous utiliserons à nouveau quelque chose que nous utilisions avant un certain temps, c'est-à-dire qu'avec le chargement, chargement, le chargement défini, l'état d'utilisation correspondant à cela, nous suivrons l'état du chargement. Nous allons maintenant utiliser le navigateur pour naviguer par programmation dans notre page Donc, utilisez la navigation, puis nous utiliserons les PRM Nous allons donc prendre l'identifiant de l'URL afin de pouvoir continuer à l'utiliser Les identifiants seront donc utilisés dans les RAM. Nous utiliserons également ce que l' on appelle la technologie Notice pour savoir si notre produit a été supprimé, mis à jour, etc. Pour cela, nous utiliserons le crochet de Notice tech pour montrer le snack-bar. Cela signifie que nous allons importer le snack-bar et votre snack-bar depuis notre snack-bar. Pour celui-ci, nous devons importer le snack-bar Use. Voyons si nous pouvons le faire comme ça. Nous le pouvons. Alors faisons-le là-bas. Importez et utilisez le snack-bar depuis Notice Deck. Bien sûr, nous devons maintenant installer le Noiceck. Alors allons-y. Nous sommes dans le front-end, donc NPMI Notice Tech. Nous allons maintenant l'installer. Nous n'avons même pas implémenté cette utilisation de Navigate, d'utilisation de PAM et d'utilisation de Snack Bar que nous avons là Ce que nous devons réellement faire pour avoir ces snack-bars ou l'étiquette d'avertissement, d'accéder à Mind JSix et là, nous devons intégrer notre application au fournisseur de snack-bars Nous allons donc simplement créer un fournisseur de snack-bar, Enter, qui sera importé, l' ouvrira, y mettra notre application. Nous pouvons supprimer cet onglet pour qu'il soit bien stylé. Laissez-le comme ça, et c'est tout pour le Do GS six principal. Nous pouvons donc maintenant le fermer et revenir à notre menu de suppression des aliments. Nous allons continuer avec une fonction qui gère réellement la suppression des aliments. Faisons donc en sorte de supprimer les aliments. Là d'abord, nous allons commencer le chargement, alors réglez le chargement à deux. Là, nous utiliserons l' Axios et le supprimerons. Nous allons maintenant appeler l' URL du facteur. Cela supprime en fait notre article. Nous ferons HTTP, localhost 3,000 OTS ID après cela, nous le ferons Ensuite, nous arriverons , puis nous réglerons le chargement en chutes. Nous allons acheter un snack-bar avec de la nourriture supprimée. De plus, nous y définirons une variante de réussite, nous la fermerons, et après cette suppression réussie, nous naviguerons vers un tableau de bord d'administration. C'est pourquoi nous y avons implémenté Navigate. Et au cas où il y aurait une erreur, nous la détecterons, nous détecterons l'erreur, et là nous réglerons le chargement de manière à ce qu'il soit forcé. De plus, encore une fois, enc SnagBareError et variant sera une erreur Comme ça. Et nous allons enregistrer l'erreur sur console, l'enregistrer. Nous pouvons maintenant nous déplacer pour y retourner et coder une véritable interface utilisateur. Commençons donc par ce div. Nous allons l'ouvrir, et à l'intérieur, nous voudrons faire un autre div. Là, nous devrions également faire du spinner. Donc, au cas où cela serait en cours de chargement, nous aimerions montrer le spinner, mais nous n'avons pas encore le composant correspondant Laissons-le pour le moment et passons à l'autre style, et nous y reviendrons un peu plus tard. Tout d'abord, ce que nous allons faire là-bas, c'est le supprimer et à la place, nous y ajouterons de la literie, du fond. Ensuite, nous voulons également garder cela au centre, afin de pouvoir utiliser la mise en page Flexbox Et maintenant, nous allons créer la carte à supprimer. Il se peut qu'il y en ait à l'intérieur du TIFF, nous y mettrons le lien avec un bouton de retour. Donc, emmenez-nous à l'administrateur au cas où nous ne voudrions pas supprimer l'élément à la fin. Remettons-les à la page , au tableau de bord ou à Beck. Maintenant, ci-dessous, nous aimerions ajouter un titre à peut-être, êtes-vous sûr de vouloir supprimer cet aliment, enregistrez-le. Bien entendu, importez également le lien. Nous l'avons maintenant au milieu de la page, que vous ne pouvez probablement pas voir. Peut-être que ce sera mieux, ou je vais laisser les choses comme ça. D'accord. Ensuite, nous allons continuer avec un bouton supplémentaire. Je vais dire oui, supprimer. Sur ce bouton, il suffira de cliquer pour appeler cette poignée pour supprimer les aliments que nous venons de coder, et nous y ajouterons également, bien sûr, un peu de style. Par exemple, nous pouvons maintenant ajouter un arrière-plan au rouge 600. Sur Hober, nous pouvons ajouter un arrière-plan au 800 rouge et nous avons le bouton qui le fera Maintenant, cela devrait fonctionner en gros, mais continuons avec le style. Pour le lien, finissons le nom de cette classe. Pour le lien, nous allons coder les éléments flexibles au centre. Texte en gris 800, puis une marge. Ensuite, je définirais un peu de contexte. N'utilisons pas le vert. Utilisons peut-être en fait, changeons simplement cet arrière-plan en gris 400. Y a-t-il de la literie. Texte Excel petit et arrondi, à quoi il ressemblera. C'est un peu mieux. Peut-être que nous ferons Bedding Two Epson comme ça et Bedding to like four. Et nous allons également créer un centre de justification flexible. C'est mieux Passons maintenant au H deux. Nous allons donc envoyer du texte à Excel. Nous allons faire la marge inférieure quatre, police semi-volante et le texte gris, 800, peut-être D'accord. Ensuite, nous avons le bouton. Bien sûr, nous allons faire un peu plus de style. Continuons donc avec le texte, deux parterres blancs, verticaux et horizontaux arrondis, un grand W ressemble à, OK ? Ensuite, avec le plein et à quoi cela ressemblera maintenant. OK, essayons-le. Si nous voulons passer la souris dessus, cela ressemble à ceci, et c'est très bien. Maintenant, ce que je ferais, c'est que sur ce div, nous devons le définir comme une carte. Nous allons donc faire leur conteneur. Nous allons y faire un peu de mix avec. Faisons donc Arch, par exemple, génial. Nous allons également faire de l'ombre à la voûte. Nous allons également le rembourrer. Vérifiez à quoi ça ressemble maintenant. Et je pense que c'est bon. Peut-être que nous sommes même prêts à tester la fonctionnalité. Sélectionnons donc ce dernier élément, celui des aliments, et cliquons sur Supprimer. Maintenant, confirmons-le. Oui, supprimer. Et nous pouvons voir l'effet de l'avertissement. Il y a une erreur. Alors, inspectons-le. Passons à la console. Nous en avons quatre ou quatre. Mais si nous revenons à notre tableau de bord d'administration, nous pouvons voir que l' élément a été supprimé. n'y a donc aucun problème dans notre composant de suppression, mais il y aura un problème dans l'itinéraire lui-même. Passons donc au code VS. Ensuite, nous passerons à Foods Route, où nous devrons vérifier quel est le problème avec cette suppression d'un aliment spécifique. Et je peux voir que nous n'avons pas reçu de réponse. Nous allons donc simplement y écrire le statut de la réponse, message JSON à 200 points. L'élément été supprimé avec succès et le résultat de l'élément supprimé. Vous allez maintenant l'enregistrer et nous allons le tester. Revenons donc à notre page. Voilà, rafraîchissons-le plutôt. Cliquons sur Supprimer, par exemple, sur cet élément, oui, supprimer, et cela fonctionne. 11. Retoucher les aliments: Passons au code VS. Passons à Modifier la nourriture. Vous pouvez voir que nous allons le modifier, nous le verrons sur notre page, donc cela fonctionne, et nous pouvons commencer par là. Nous devrons donc réagir et importer également use state et use effect. Et d'autres choses que nous importerons sur le pouce. Nous allons commencer par quelques constantes. aura donc d'abord la variable d'état pour le nom, le nom de la constante, le nom ensemble est égal à l'état d'utilisation, et ce sont des guillemets simples vides. Ensuite, nous ferons la même chose pour le prix dans le sens, fixerons le prix dans le bon sens. Vous indiquez des guillemets simples. Quelle est la prochaine étape ? Encore une fois, nous pouvons y faire un peu d'espacement Encore une fois, nous allons faire le chargement, un peu de chargement. Vous indiquez y définir la force comme valeur initiale. Ensuite, nous devrons extraire l'identifiant. Alors en fait, tu sais quoi ? Allons supprimer de la nourriture. Allons-y même avec la navigation. En gros, nous prenons le même temps que le chargement du set. Copions-le simplement ici. Nous avons donc là la navigation, l' utilisation des PRM et le snack-bar. Nous y avons le chargement. Nous avons là le nom de la nourriture et son prix dans le sens du terme. Ce que nous devrons faire, c'est l'importer. Donc, paramètres du snack-bar, naviguez maintenant, nous avons aussi besoin, bien sûr, d'EL, donc saisissez des exhils depuis Excel Nous allons maintenant récupérer les données. Nous allons donc créer un effet d'utilisation pour le récupérer , un effet d'utilisation Et là, nous allons d'abord définir le chargement sur True. Ensuite, nous continuerons avec Axos. Je suppose que là, nous allons obtenir Baqute HTTP, localhost 3,000 Et là, nous mettrons à nouveau l' identifiant terminé par Bquote. Ensuite, nous répondrons, et là nous définirons le nom. Donc, les données de réponse, le nom, le prix fixé dans le sens, les données de réponse, le prix dans le sens. De plus, nous définirons le chargement sur false au cas où il ne se passerait pas comme prévu, nous y trouverons une erreur. Et là, nous allons à nouveau régler le chargement en fonction des chutes. Nous allons également enregistrer l'erreur sur console, et nous pouvons également y définir une alerte. Une erreur s'est produite. Vérifiez la console. Maintenant, avant de terminer ou avant ce dernier break, nous allons également terminer ou avant ce dernier break, définir un tableau de dépendances à récupérer lorsque l' identifiant changera Nous y mettrons donc une pièce d'identité. Nous allons maintenant continuer à définir une fonction de manipulation des aliments diététiques. Nous allons donc commencer à manipuler les aliments secs. C'est là que nous ferons ou nous définirons les données, donc contre les données. Nous utiliserons leur nom et leur prix dans le bon sens. Nous allons remettre le chargement à zéro, nous allons commencer par Axios Nous y ferons des points car nous modifierons les données. Nous devrons donc placer l'URL HTTP, identifiant de l'hôte local de 3 000 pieds et les données com. Ensuite, si nous y parvenons, nous remettrons le chargement à zéro. Ensuite, nous utiliserons le snack-bar. La nourriture a donc été éditée avec succès, et nous y définirons une variante pour réussir. De plus, si nous réussissons à modifier, nous pouvons diriger l'administrateur vers un tableau de bord d'administration ou revenir vers un tableau de bord d'administration. En cas d'erreur, nous la détecterons et nous réglerons à nouveau le chargement sur Falls également. Nous indiquerons dans Q Snagbar ou dans la notification qu' il y a une erreur, et nous devons également créer une variante d'une Et nous allons également l'enregistrer sur console afin que nous puissions le voir inspecter. Ensuite, lorsque nous inspecterons la page si quelque chose échoue, que se passera-t-il ? Nous allons donc corriger l'erreur. C'est tout pour la fonction alimentaire manipulée et nous avons également l' effet d'usage, c'est très bien. Nous pouvons donc accéder à l'interface utilisateur, puis tester les fonctions pour savoir si elles fonctionnent et si nous devons corriger quelque chose avec le man Div. Voilà, nous aimerions avoir un peu de rembourrage, un fond clair et utiliser une disposition flexible pour centrer les éléments Justifiez également le centre des éléments. À l'intérieur, nous aurons une centrifugeuse à charger Je vais le modifier dans un moment, juste après cette modification du composant alimentaire, nous créerons le spinner et nous le mettrons sur nos pages Je vais ensuite créer un autre div, et ce sera la carte qui contiendra le formulaire pour modifier notre article. Nous allons donc ajouter le nom de la classe, et dans ce nom de classe, nous dirons qu'il s'agira d'un conteneur avec une certaine largeur mixte, également avec une ombre, coins arrondis, encre et un peu d'arrière-plan blanc. OK, utilisons le fond blanc. Alors ce que je ferais là-dedans c'est que nous puissions commencer par un bouton B. En fait, nous pouvons aller sur Supprimer les aliments, prendre ce lien, copier et le mettre là et là nous pouvons le déplacer, et il y aura un titre avec modification. Nourriture. Nous pouvons même le styliser dès maintenant. Augmentons donc le texte. De plus, nous ne devons pas oublier d'importer le lien, alors assurez-vous d'appuyer sur Entrée, et vous pourrez le voir ensuite à partir du lien Rag droterdm Maintenant, notre page ressemble à ceci : le bouton B, la carte et le titre modifient les aliments. Continuons donc. Pour l'édition des aliments, également faire ce que nous allons faire à côté du texte Excel, pour le demi-boulon puis le texte au centre Ou sur la gauche, peut-être laissons-le sur le côté gauche pour le moment. Ensuite, je ferais une marge ou une marge verticale. Et je ferais peut-être aussi du Text Gray 800. Voyons à quoi ça ressemble. Nous allons maintenant passer au DIV qui contiendra le formulaire de mise à jour. Donc, divisez ici et un nom de classe, encore une fois, peut-être quelque chose comme la marge verticale quatre. À l'intérieur, nous allons mettre une étiquette. Cela indiquera le nom, et il y aura une entrée. Vous pouvez également le faire comme ça. Et dans cette entrée, nous serons en fait là pour obtenir l'identifiant, qui sera le nom, le type, qui sera le texte, la valeur qui sera sera le nom au moment du changement. Cela définira le nom avec la valeur cible. Et un nom de classe à la fin qui aura une bordure. Nous pouvons ajouter de la couleur des bordures, du rembourrage, du poids, des arrondis, et ce sera tout Voyons à quoi cela ressemble. Nous avons donc leur nom. Passons maintenant au HTML 4. Cela signifie que cela sera destiné au nom de l'identifiant, et maintenant nous allons également ajouter du style. Donc, bloquez, support texte. Qu'en est-il du texte gris 600, un peu plus clair que le 800 et d' un fond argenté. Maintenant, sauvegardons-le tel qu'il ressemble. C'est bon. Ce que nous allons faire, nous le copierons, et maintenant nous le ferons pour le prix raisonnable. Et là, nous allons le remplacer par « price in sense ». Cette idée se transformera en prix dans le sens du terme. Nous allons le copier en HTML 4. Ce type ne sera pas du texte, mais un chiffre. Cette valeur sera un prix dans un sens. La valeur restera, et c'est tout. La page ressemblera à ceci. Et une autre chose que nous allons faire est le bouton pour enregistrer les modifications. Nous allons donc également saisir une image pour notre nourriture. Mais pour simplifier un peu les choses et ne pas réfléchir à la manière de vérifier exactement que l'URL de l'image est correctement saisie pour notre article etc., nous ne l'y mettrons tout simplement pas. Nous serons en mesure de modifier le prix, nous pourrons modifier le nom, mais lorsque nous le ferons ou lorsque nous voudrons modifier l'image réelle, nous créerons simplement un nouvel article et supprimerons l'ancien. Nous allons maintenant ajouter leur bouton, ce bouton devrait être utilisé pour des modifications en toute sécurité. Maintenant, pour y ajouter un peu de style, nous allons utiliser deux versions complètes, arrière-plan sur vert 500, je crois, O avec fond sur vert 800, texte sur blanc, encore un peu de rembourrage Ensuite, nous ajouterons des arrondis et une marge par le haut. Vous devez également ajouter qu'il y a Let's actually edit avant le nom de la classe. Donc, au clic, vous pourrez gérer la modification de la nourriture. Ainsi, lorsque nous cliquerons sur ce bouton, il modifiera l'aliment, et il est maintenant temps de le tester. Ouvrons donc la page murale. Modifions-en un aliment pour le modifier. Peut-être aussi en termes de prix, nous pouvons dire, cliquez sur Changements sécurisés et nous avons une erreur. Voyons maintenant ce qui se passe. Alors inspectons-le. Là, si nous le vérifions, nous pouvons voir qu'il s'agit d' obligatoire et que les champs obligatoires sont manquants. Et c'est à cause de l' image dont je viens de parler. Ce que nous allons faire, c'est que dans notre code Ras, nous allons accéder aux itinéraires, nous trouverons le put, et nous supprimerons l'image à partir de là parce que nous n' allons pas la modifier. Maintenant, si vous voulez l'enregistrer et revenir sur une page, et que nous allons le supprimer ou, désolé, modifiez cette nouvelle valeur, petit problème. Donc, si nous allons modifier les aliments, nous pouvons voir que nous avons oublié de changer le nom du set. Et bien entendu, nous devons changer cela pour fixer le prix de manière sensée. Maintenant, nous voyons au moins comment cela a fonctionné, et cela fait également partie du copier-coller du code Mais maintenant, nous l'avons enregistré et nous pouvons enfin accéder à notre page. Enfin, nous pouvons faire la nourriture pour la modifier. Nous pouvons ajouter un peu d'encens et enregistrer les modifications Et enfin, notre nourriture est modifiée. Maintenant, nous pouvons également le supprimer. 12. Centrifugeuse: Faisons le spinner. Même maintenant, dans nos composants, créons un nouveau fichier, spinner.j6 Nous n'aurons pas besoin d' importer quoi que ce soit, en fait. Il n'y aura aucune fonction. Il n'y aura pas vraiment de texte. Il n'y aura qu'une seule division et à l'intérieur se trouvera une deuxième division. Et ces divs auront du style. Donc, pour le premier, nous allons simplement ajouter un peu flexibilité et de justification au centre, vous le placerez au centre comme ceci, et nous ferons une hauteur minimale. Utilisons donc l'écran de hauteur minimale. Et puis le deuxième dif sera en fait le spinner lui-même Nous fixerons la largeur et la hauteur à 16. Nous utiliserons la bordure quatre, nous utiliserons une bordure en pointillés, et nous devrons également coder quelque chose dans Index CSS, et nous le ferons juste après Utilisons donc le format arrondi. C'est donc un cercle, une rotation animée, c'est quelque chose que nous allons coder dans une minute. Désormais, la couleur du haut de la bordure sera celle de runsparent et celle de la bordure principale Maintenant, nous avons utilisé ces mots qui ne peuvent pas être reconnus par Tel wind car ce sont certaines de nos propres classes CSS que nous allons maintenant coder. Passons donc à l'index du CSS. Et selon nos directives sur le vent arrière, nous ferons tourner leurs cadres technologiques en T, et c'est là que vous les utiliserez pour les transformer et les faire pivoter à 360 degrés, donc en cercle de rotation Maintenant, nous allons également ajouter leur spin animé que nous y avons écrit Nous faisons tourner leur animation de 1 seconde en linéaire à l'infini. La prochaine sera la bordure, le haut, la couleur, avec le transparent, là nous ajouterons haut de la bordure au transparent et à la couleur principale de la bordure. Nous pouvons choisir une couleur bleue. Donc, la couleur de la bordure sera, je ne sais pas. Faisons-en un peu. Utilisons simplement le bleu. Maintenant, enregistrez-le au point, c'est donc une classe. Maintenant, nous pouvons d'abord supprimer les aliments. Là, nous utiliserons leur chargement, au cas où ce chargement serait vrai. Nous avons donc ce chargement qui commence sur handle delete food et se termine après son succès ou son échec. Donc en attendant, ce sera vrai, donc il chargera quelque chose. Nous allons vous montrer ce spinner. Cliquez sur Entrée, il sera importé et prenez-le à partir de là, copiez-le, assurez-vous qu'il s'y trouve. Spinner Spinner Spinner. Nous allons maintenant passer à Modifier les aliments, et nous les y mettrons également. Encore une fois, nous allons simplement supprimer le R, Enter pour qu'il soit importé. Et pour tester cela dans Edit pot, nous voulons simplement utiliser le set loading still to true, puis l'enregistrer. Maintenant sur notre page, nous allons revenir en arrière comme ceci. Nous allons cliquer sur Modifier. Et vous avez pu voir si vous cliquez maintenant sur Enregistrer les modifications, le spinner. 13. Créer des aliments: Maintenant, si nous allons créer un composant, nous y utiliserons le spinner Changeons donc d'encoder cela pour le forcer à nouveau. Sauvegardez-le. Maintenant, allez créer Food J six. C'est notre composant. Vérifiez que vous êtes bien sur la page. Vous pouvez voir que je le suis, voici le petit texte affiché. Et oui, commençons par le codage du composant create food. Importons-y donc certaines choses. D'abord, l'état d'utilisation, puis les excès Ensuite, d'autres éléments seront importés lorsque nous les utiliserons Donc, ce que nous allons faire là , c'est commencer par la constante. Donc, le premier sera pour le nom, le nom du set, l'état comme celui-ci. Maintenant, pour le prix dans le sens, fixez le prix dans un sens. Maintenant, encore une fois, en ce qui concerne le chargement, je pense que nous pouvons simplement y aller et réduire certaines constantes. Nous y avons donc également le chargement. naviguez dans le snack-bar, identifiant dont nous n'avons pas besoin car nous allons créer et nous ne voulons pas. Nous n'avons aucun identifiant à extraire de l'URL. Il y a donc le chargement. Naviguez maintenant, importons-le. Snack-bar. C'est ça. Et maintenant, nous utilisons également l'image. Donc image constante, image définie. Date nulle et aperçu constant de l'image avec aperçu de l'image défini, utilisez l'état maintenant. Commençons par l'interface utilisateur, et en fait, nous allons simplement créer un plan des fonctions que nous utiliserons Il s'agira donc d'abord de gérer le changement de fichier. Cela gérera la sélection du fichier et affichera également l'aperçu de l'image que nous voulons télécharger. Nous allons donc faire le fichier constant sélectionné, les fichiers cibles E zéro. Cela signifie que nous allons extraire le premier fichier de l'événement d'entrée du fichier. Là, nous utiliserons le fichier sélectionné par setimage, et si ce fichier est sélectionné, s'il y a le fichier sélectionné, nous utiliserons un lecteur constant, un nouveau lecteur Enter Nous allons y créer un nouvel objet leader de fichier pour lire notre fichier. Là, nous utiliserons la fonction de lecteur, donc reader point est déchargé en prêt, nous définirons la révision de l'image avec le résultat du point lecteur Cela définira donc l'URL de prévisualisation dans son état une fois cette lecture terminée. Bien entendu, le lecteur lira également, sous forme d'URL de données, ce fichier sélectionné, afin qu'il commence à lire les données du fichier sous forme d'URL. Sinon, ce n'est pas vrai, nous allons régler l' aperçu de l'image sur maintenant. Nous allons donc réinitialiser l'aperçu de l'image si aucune fonction de fichier n'est sélectionnée pour télécharger le fichier, ce sera une fonction asynchrone, mais pour le moment, nous la laisserons vide Ensuite, nous aurons la fonction de manipuler des aliments sûrs. Ce sera également synchrone et cette fonction enregistrera le produit alimentaire une fois que nous aurons saisi tous les champs, et maintenant nous allons créer l'interface utilisateur Nous allons ensuite coder ces fonctions. Mais même avant, nous devrons définir l'intégration cloudnary, accéder à notre index JS et à notre index JS y définir quelque chose pour l'image de téléchargement Nous devons également trouver un moyen d'y parvenir. Mais d'abord, faisons l'interface utilisateur pour pouvoir même la tester. Tout d'abord, dans le div principal, nous utiliserons à nouveau le spinner. Nous allons donc vérifier le chargement. Et si c'est vrai, nous appellerons le spinner Nous avons là le dif principal en dessous. Nous ferons un deuxième dif qui contiendra la carte ou le formulaire proprement dit Pour le dif principal, nous pouvons y définir un arrière-plan pédant, quelque chose comme très clair Ensuite, mesurez la hauteur de l'écran, puis fléchissez et justifiez le centre de l'élément. Pour la deuxième division, nous pouvons faire comme s'il s'agissait d'une voiture jusqu'au conteneur, poids maximum, un peu d'ombre large, puis un peu arrondi, puis un peu de rembourrage, puis un fond blanc Vous verrez quelque chose comme ça sur votre page. Continuons. Et ce que nous allons y emmener, c'est, encore une fois, le bouton de retour. Copions donc ce lien. Mets-le sur notre site de plongée. Importons maintenant le lien, afin qu'il soit réellement affiché. Et nous pouvons commencer par le titre. Utilisons donc le titre 1 pour modifier les aliments. Désolé, de créer de la nourriture. Maintenant, nous l'avons sur la page. Passons au code VS et vous pouvez le laisser là, mais je supprimerai des éléments dans Center, et je les modifierai à la fin parce que maintenant je veux que vous y voyiez le formulaire, et il serait difficile pour moi afficher autrement parce que je ne veux pas prendre trop de place avec cette fenêtre que vous pouvez y voir avec ma page. Donc, pour le pied de création, je vais ajouter un peu de style, donc le texte trois XL sur semiboltx peut être laissé à gauche, en fait, le texte gris, 800, et une marge ou une marge verticale Sauvegardez-le. Sous le pied de création, nous aurons un développeur et il y aura le formulaire avec les entrées. En gros, le formulaire pour nos entrées aura un espace Y quatre, donc un peu d'espace à la verticale, puis nous aurons l'étiquette, et pour chaque étiquette, il y aura une entrée. Une entrée, nous aurons un identifiant, nous aurons un type, nous aurons une valeur. Nous aurons de la monnaie. En fait, disons-le un peu plus tard. Maintenant, le nom de la classe lui-même est également requis car il sera obligatoire. Et maintenant, nous allons remplir les valeurs correspondantes. Nous pouvons donc réellement l'utiliser comme modèle et le mettre pour nos entrées. Nous allons donc l'avoir pour le nom, le prix dans le sens et l'image. Commençons maintenant à le remplir. Donc, d'abord, nous serons là pour trouver un nom. Donc, nom, nous aurons un code HTML quatre. Ce sera pour le nom. Le nom de la classe sera un bloc, le texte sera grand , un identifiant, il y aura un nom , le type sera du texte, la valeur sera le nom lors du changement, nous aurons le nom E défini avec valeur cible E, ne l'enregistrez pas pour le suivant. Nous connaîtrons leur prix en centimes. L'identifiant sera le prix en cents, type sera un chiffre, la valeur sera le prix en cents au changement, ce sera similaire, mais pas le nom défini, mais le prix fixé dans le sens du terme. Et la dernière image sera attendue. Encore une fois, HTML quatre, prix en cents, la dernière étiquette sera l'image de téléchargement. Avec le HDML à quatre images, ID il y aura une image, type sera un fichier, la valeur sera réellement, vous n'y aurez pas de valeur Au lieu de la valeur, nous aurons une certaine acceptation et nous modifierons à nouveau, ce sera gérer le changement de fichier. Cette fois, ce n'est pas ce que nous avons là, mais gérer le changement de fichier est la fonction que nous y avons définie. Et cela fera également que lorsque nous téléchargerons un fichier, cela créera un aperçu du fichier, et ce sera tout. Pour l'aperçu de l'image, nous devons également y faire une dernière chose. Donc, en dessous, nous devrons y ajouter l'aperçu de l'image, et si cela sera vrai. Ensuite, nous montrerons cette division. Nous devons le coder manuellement, dif dans ce div, nous aurons une image, et cette image aura la source de la critique d' image , le tout avec un aperçu du nom de classe, afin que nous puissions mettre leur maximum à full et leur hauteur à Oto Pour se diviser, nous pouvons ajouter une marge Y quatre, une marge verticale, et ce sera tout. Maintenant, nous pouvons vérifier que nous allons ajouter le bouton. Donc, en dessous de cet aperçu de l'image, nous allons ajouter un bouton, le bouton Enregistrer. Et ce sera également avec la fonction Handle Safe Food. Donc, cliquez sur Gérer les aliments sains et sur un nom de classe, donc attendez pour compléter. L'arrière-plan sera vert 500, par exemple. Après l'avoir survolé, nous passerons le fond à 800 caractères blancs, un peu de literie Certains arrondis. La page semble maintenant horrible, nous devons donc également terminer le style de toutes les entrées pour le nom Nous allons donc ajouter une classe avec un bloc, du texte trop gros, et aussi du texte gris, 600, disons, et une marge vers le bas Maintenant, je pense que nous pouvons copier ceci et mettre ce nom de classe également là pour le prix dans le sens du sens et mettre ce nom de classe également pour cette étiquette d'image de téléchargement. Nous devons maintenant styliser les entrées. Nous avons donc le nom de classe vide, et nous allons commencer par le style. Donc, avec deux pleins, nous y ajouterons la bordure. Donc, grade 300, un peu de rembourrage. Un attribut arrondi, et maintenant enregistrons-le tel qu'il ressemble. Je pense que c'est bon. Copions maintenant cette classe que nous éditons, collons-la là et collez-la là, sauvegardez-la. Maintenant, le formulaire ressemblera à ceci. Et je pense que nous devons passer à la fonctionnalité maintenant. 14. Configuration cloudaire: Avant de poursuivre le téléchargement de l'image, nous devons créer un compte sur Cloudinary Sur cloudinary.com, nous nous connecterons ou nous nous inscrirons, et une fois que vous serez connecté et que vous aurez vu quelque chose comme ça, nous passerons Nous devrons obtenir ce nom de cloud, cette clé d'API et ce secret d'API. Nous allons passer aux variables d' environnement. Dans nos variables d' environnement, nous allons créer une nouvelle variable, et ce sera Cloudinary Nommez Cloudinary secret, API, secret et Cloudinary Nous allons maintenant obtenir les secrets, les API, etc. sur notre page Cloudinary. Et ce sont les miens. Bien entendu, ne les copiez pas car elles ne seront valides car ce sont les miennes et je supprimerai cette connexion après ce tutoriel. Donc, même si vous les copiez, vous n'accéderez pas à ma base de données Cloudinary Mongo. Nous allons maintenant passer à Index DGS Là, nous devrons également installer le binaire Cloud, nous allons donc y aller Faites un CD. Bend, fais NPM I, Cloudinary Là, nous ferons défiler la page vers le haut et nous y importerons. Cloudinary, importez donc Cloudinary depuis Cloudinary. Là, nous faisons défiler la page vers le bas, puis nous effectuerons la configuration par points de Cloudinary, et nous la configurerons ici Le nom du cloud sera le point de processus NF, le nom du cloud de cloud, API sera le point de processus NF, la clé Cloudinary et le secret d'API seront, bien sûr, le secret de l' API de cloud de Nous avons maintenant cette configuration Cloudinary, et nous allons également écrire le middleware pour injecter la configuration Cloudinary dans la demande Abi point utilise ensuite la réponse à la demande , puis nous ferons le point de demande. Cloudinary est égal à Cloudinary est égal à Cloudinary Passez au middleware suivant. Ci-dessous, nous devrons effectuer la configuration du stockage Cloudinary, nous allons donc effectuer le stockage en C. Stockage Cloudinary, et là nous allons définir cloudnary sur l'instance Cloudinary Ensuite, nous allons définir certains paramètres. Nous allons donc définir un dossier, un dossier dans Cloudinary, dans lequel nous allons enregistrer les images Nous pouvons donc faire pour le moment des tests comme des images ou oui, nous pouvons faire des images. Ensuite, nous allons faire des formats autorisés, donc des formats autorisés. Et nous aimerions avoir peut-être le JPEC, peut-être le PNG, et autorisons également le JPG Et ce sera pour les paramètres. Maintenant, nous implémentons également un analyseur syntaxique. Nous devrons donc créer une instance de moteur. Il va falloir installer un moteur. Passons donc de l'analyseur, du moteur et du stockage au stockage. Nous devons maintenant installer le moteur Voyons donc le moteur Bond et PMI qui l'installera. Maintenant, si nous supprimons simplement le R, il sera importé. Nous pouvons le vérifier. Oui, il y est. Faisons maintenant l'itinéraire pour télécharger l'image. Faisons-le donc indexer D ChasFle. Commençons par la publication de l'application car nous publierons le fichier. L'itinéraire sera une image de téléchargement. Nous utiliserons ici le fichier unique parser point. Demande et réponse selon les paramètres, et là, nous vérifierons d'abord que, si le fichier requis n' est pas disponible, nous retournerons la réponse avec le statut 400 et nous enverrons un message indiquant qu'aucun fichier n'a été téléchargé. Ensuite, nous continuerons à bloquer les prises. Et dans le bloc de cache Strike, si le chemin de fichier requis est faux, nous lancerons une nouvelle erreur, et cela indiquera le téléchargement du fichier, mais aucun chemin n'est disponible. Et au cas où il n'y serait pas détecté, cela signifiera que nous pouvons définir en réponse le JSON avec le chemin, donc l'URL sécurisée, donc l'URL sécurisée chemin à points du fichier requis et nous enverrons l' URL de l'image Et au cas où, encore une fois, nous détecterions une erreur dans le strikgblock, nous allons simplement corriger l' erreur lors du téléchargement du fichier Erreur, et là nous allons également définir le statut de la réponse à 500. Et on peut mettre les cerceaux. Pas des arceaux, mais un serveur interne. Maintenant, sauvegardez-le. Maintenant, je pense qu'il y a une attelle bouclée supplémentaire. Ça devrait aller. Comment fonctionne notre serveur. Donc, nouveau stockage Cloudinary. Le stockage cloud n'étant pas défini, importons-le Nous allons faire du N PMI. C'est pour Multor Storage Cloudinary. Voyons voir. Oui Essayons-le maintenant. Essayons, je cherchais. Il y a un échec. Donc, si nous importons du stockage cloudinary depuis Mor storage Cloudinary Oui, ça va marcher. Alors maintenant, nous pouvons y retourner. Maintenant, cette route devrait être bonne. Je pense donc que nous pouvons essayer de le tester. Ce qui est important, c'est d'avoir cette configuration Cloudinary définie Passons maintenant à createfood.j6 pour accéder à notre composant. Nous y coderons les méthodes. Nous avons le frontal avec les fonctions « on click ». Nous n'aurons donc qu'à coder les fonctions, puis nous les testerons, corrigerons le boitier potentiel et verrons comment cela fonctionnera. Commençons donc par le téléchargement du fichier, bien sûr. Nous allons simplement vérifier si l'image n'est pas vide. Nous enverrons une notification et un snack-bar. Aucune image sélectionnée. Avec variante d'avertissement et de retour. Au cas où tout irait bien, nous continuerons là-bas, et nous ferons le premier jeton. Nous allons donc vérifier l' identification JWT, donc le jeton. Et si le jeton n'est pas là, on dira qu'aucun jeton n'a été trouvé. Nous indiquerons également à nouveau au snack-bar les notifications d' erreur requise et de variante. Là, nous le retournerons et nous pourrons continuer. S'il y parvient, nous commencerons par la nouvelle constante de données, les nouvelles données de formulaire. Nous y ajouterons l'image du fichier. Vous allez donc ajouter le fichier à l'objet de données du formulaire, puis nous allons continuer avec un Trcechblock Alors écrivons pour y voir plus clair. Et pour le Trcchblock, nous utiliserons d'abord l'URL de téléchargement, donc l'URL de téléchargement, qui sera le HTTP avec l'hôte local 3 000 et la route était l' image de téléchargement que nous venons de créer dans un index Ensuite, nous formerons une réponse. Nous devrons donc attendre le point exxils, télécharger l'URL avec les données et les en-têtes avec Nous allons donc définir l'autorisation, et là nous allons définir le jeton de barrière, qui est dans notre cas, le jeton que nous y avons défini et n' oubliez pas la barre oblique inverse lorsque nous utilisons leur valeur Donc, juste un jeton. Maintenant, on peut le fermer , même ici. Ensuite, nous allons continuer avec l'URL sécurisée, c'est-à-dire les données de réponse de l'URL sécurisée, afin d'extraire l'URL de l' image téléchargée de la réponse. Nous pouvons également le conolog, donc téléchargez cette URL d'image, URL sécurisée Ensuite, nous verrouillerons à nouveau le snack-bar et nous pourrons envoyer une notification avec une image, télécharger avec succès et définir une variante dans le succès de la variante de base Carly Et à la fin du triblock, nous renverrons une URL sécurisée. Maintenant, en cas d'échec, nous allons y remédier et nous allons simplement faire une erreur de console, ajouter une erreur avec l'erreur, et là nous allons à nouveau modifier le snack-bar, pas réussi à télécharger une image avec une variante d'erreur. Sauvegardez-le. OK. Nous avons donc maintenant la fonction de téléchargement de fichier. Et nous n'avons pas de bouton séparé pour télécharger le fichier, car lorsque nous cliquons sur notre page, le bouton sécurisé, celui-ci s' appellera « méthode de manipulation sûre des aliments Et dans cette méthode de manipulation sûre des aliments, nous appellerons une méthode de téléchargement de fichiers que nous venons de coder. Commençons par vérifier tous les champs. Le nom est faux, ou le prix dans son sens est faux. Nous vous en informerons au snack-bar, merci de remplir tous les champs obligatoires. Là, nous réglerons la notification au snack-bar, la variante de type « avertissement » et « retour », puis nous prendrons également le prix. Donc, des barres de prix constantes. Nous allons donc convertir le prix d'une chaîne en un entier et le prix dans le sens. Ensuite, nous utilisons cette fonction pour vérifier que nous aurons le prix et qu'il est également supérieur à zéro. Et dans le cas où cela serait faux, nous vous enverrons à nouveau une notification. Le prix doit être un nombre positif. Et on y redira une variante de type warning, donc variant warning. Et revenez. Copions simplement celui-ci, mettons-le là. Nommez la longueur du point, au-dessus de deux, et également en dessous. Il ne peut pas être inférieur à deux, et il ne peut pas non plus être supérieur, je ne sais pas, à 30. Mettons-en 30. Et si c'est le cas, nous nous y installerons. Le nom de l'aliment doit comporter de 2 à 30 caractères. Avertissement de variante, puis renvoi. Et puis commençons par le chargement. Configurez donc le chargement à deux. Au cas où il passerait toutes les vérifications, nous ferons un Srikachblock Dans le bloc Strikag, nous allons essayer de télécharger une image Donc, avec l'URL de l'image téléchargée, nous attendrons le fichier de téléchargement. Nous allons donc appeler cette fonction de téléchargement de fichier, attendre qu'elle envoie l' image au serveur, puis nous voudrons obtenir l'URL. Donc, si l'URL de cette image téléchargée est fausse, nous lancerons une nouvelle erreur. Le téléchargement de l'image a échoué. Nous allons maintenant continuer après cette vérification. Nous allons créer de nouvelles données de formulaire constantes, et il y aura le nom, le prix en cents, ainsi que l' image, l'URL de l'image téléchargée. Nous allons à nouveau récupérer le jeton d'identification dans le stockage local et le vérifier. Donc, sur le jeton, le stockage local ne reçoit pas le jeton de l'article. Et là, nous ferons à nouveau le contrôle. Donc si le jeton est faux, merci snakbar, l' authentification Et la variante sera de type erreur. Là, nous réglerons le chargement en fonction des chutes, et nous reviendrons. Au cas où il passerait également par cette vérification, nous ferons une configuration donc config. Là, nous allons faire les en-têtes comme avant, et nous y définirons l'autorisation. Donc, c'est mieux, Token. Maintenant, faisons une chose. Ouvrez l'explorateur de fichiers situé en face et cliquez sur Créer un nouveau fichier. Et nous allons également créer un point et fichier dans lesquels nous stockerons une variable d'environnement. Et ce que nous y stockerons, c'est l'application VT React, l'URL de base de Bond. Dans notre cas, ce sera HTTP, hôte local 3 000. Faites attention et ne mettez pas de barre oblique supplémentaire à la fin Sinon, cela ne fonctionnera pas car cela sera ensuite placé dans l'URL, et dans l'URL, ce serait comme ce fichier de téléchargement. Je n'en ai donc pas, car nous allons saisir l'URL de ce fichier de téléchargement avec une barre oblique N'y mettez donc pas de barre oblique supplémentaire. Laisse-le comme ça. Nous ne sommes donc plus dans les variables d'environnement principales, mais dans les variables d' environnement frontales. Nous avons donc deux variables d' environnement pour tous les dossiers. Maintenant qu'il est là, assurons-nous simplement l'importer correctement ou de l'utiliser correctement. Donc, en dessous de cette configuration, nous allons créer un journal de console avec Import Neta et une URL de phase vacante de l'application React Nous allons donc vérifier si cela produit l'URL attendue que nous avons définie dans les variables d'environnement. Nous allons maintenant essayer de sauvegarder les données alimentaires, afin d'éviter le point Axios Nous y installerons l' application Import point meta N T react et la version bêta et configuration de Do food form. Maintenant, après celui-ci, nous allons fermer le snack-bar. Nous allons faire passer le message : les aliments économisés réussissent leur variante du succès. Et si nous sauvegardons les aliments avec succès, nous pouvons également utiliser la navigation vers le tableau de bord d'administration. Et au cas où nous aurions une erreur, nous l'y trouverons. Donc, erreur de point de console. Merci, snack-bar avec l'outil de sauvegarde des erreurs. Et nous y mettrons le message d'erreur. Donc, nous y mettons d'abord le message de données de réponse ou le message d'erreur Avec une variante d'erreur. Maintenant, nous pouvons enfin le faire, et dans ce dernier bloc, nous allons configurer le chargement de deux chutes. Inspectons, ouvrons la console. Essayons de le sauver. Nous pouvons maintenant voir que le point de stockage local Get n'est pas une fonction. Il devrait s'agir d'un objet. Il y a donc une faute de frappe. Sauvegardons-le, revenons à notre page. Essayons à nouveau, et nous verrons que ce n'est pas autorisé. Si nous l'ouvrons, nous pouvons voir que le jeton n'est pas valide. De plus, nous avons un problème, donc le journal des points de la console. Aucun jeton n'a été trouvé. Créons d'abord une page d'inscription et de connexion, puis nous nous connecterons et nous enregistrerons en tant qu'administrateur, et cela fonctionnera. Bien sûr, nous pouvons également utiliser le jeton, mais faisons-le rapidement, puis nous aurons également implémenté une autre partie de l'application. 15. Fonctionnalités d'inscription et de connexion: Maintenant, nous allons passer aux pages, et là nous allons créer un nouveau fichier, qui sera Login point hair six, et le second sera Logout with hair six Nous allons y créer un modèle de base, et nous allons passer à Abid J six, et maintenant nous voulons modifier la route d'administration, mais nous allons l'ajouter à la route normale de l'application Nous y créerons un nouvel itinéraire avec Path Login et Element Login, appuyez sur Enter, qui sera ensuite importé. Maintenant, nous allons simplement copier cette ligne. Et le second sera Logo. Bien entendu, nous devons également fermer la route. Sauvegardez-le. Et, bien sûr, maintenant, nous ne devons pas oublier de nous inscrire. Alors inscrivons-nous également. Il suffit de copier cet itinéraire. Ce sera Slash Register. Et importez-le. Bien sûr, comme nous n'avons pas le modèle ici, inscrivez-vous. Maintenant c'est bon. Nous pouvons maintenant coder ces trois composants. Passons d'abord à index point JS, et là nous allons créer une nouvelle route pour le profil utilisateur. Nous allons donc créer app point Get le profil utilisateur demande et de la réponse asynchrones Et là, nous allons essayer Catch. En cas d'erreur, nous l' enregistrerons simplement. Donc, erreur et date de réponse au serveur envoyé à 500 points. Erreur dans Dry Block, nous allons essayer de faire en sorte qu'un utilisateur fermé attende qu'un utilisateur soit trouvé par identifiant, demande un identifiant utilisateur et nous sélectionnerons le mot de passe. Cela signifie que nous allons essayer de récupérer l'utilisateur sans le mot de passe Et si l'utilisateur est faux, nous retournerons une réponse avec le statut quatre ou quatre. Le message JSON sera « L'utilisateur est introuvable ». Dans d'autres cas, si cela devient vrai, nous renverrons simplement l'utilisateur et Jason. Nous allons donc envoyer les données de l'utilisateur. Nous l'utiliserons pour la route protégée. Nous pouvons maintenant nous inscrire. Nous allons commencer par là, naviguer, utiliser navigate. Nous devons bien entendu l'importer. Commençons par l'importer. Prochaine étape, faisons de la place. Nous allons créer une constante avec les données utilisateur, définir les données utilisateur. Nous avons donc utilisé cet état pour conserver les entrées de l'utilisateur pour notre enregistrement. Nous allons renseigner le nom, e-mail , le mot de passe , et le mot de passe deux, qui est là pour le mot de passe de confirmation. Ensuite, nous allons également créer l'état pour afficher un message d'erreur. Donc message d'erreur, définissez le message d'erreur. Vous y restez et entrez ensuite dans un État pour indiquer une inscription réussie. Par conséquent, si le succès est défini comme succès, la valeur par défaut est false. Donc celui-ci est vide, celui-ci est DefaultlyFalse. Nous allons maintenant gérer les modifications apportées à la saisie du formulaire. Nous changeons donc le gestionnaire de saisie et nous y mettrons les données utilisateur définies Nous y définirons les données utilisateur sur un nom cible et une valeur cible. Nous allons maintenant effacer tous les messages d'erreur existants, alors définissez le message d'erreur sur vide et nous réinitialiserons également l'état de réussite lorsque nous modifierons l'entrée. Définissez donc le succès sur faux. Je pense que nous oublions également d'importer l'état d'utilisation. Utilisons donc l'état. Voilà, sauvegardez-le. Nous devrions également importer les exilés. Donc, depuis les exilés, nous allons maintenant continuer avec le formulaire de gestion pour la soumission Il est donc possible de soumettre gestionnaire asynchrone E et de l'y ouvrir Ensuite, nous ferons en sorte que le point E empêche la valeur par défaut. Cela signifie que nous empêchons le comportement de soumission de formulaire par défaut et que nous voulons gérer la soumission de formulaire de manière asynchrone Nous allons donc utiliser ce E prevent par défaut. Nous prenons donc essentiellement le contrôle total de la soumission de ce formulaire que nous aurons lors de notre inscription. Nous allons maintenant passer à la vérification de la correspondance du mot de passe. Donc, si les données utilisateur adoptent mot de passe ne sont pas égales, les données utilisateur, point, mot de passe deux. Ainsi, avec le mot de passe de confirmation, nous définirons le succès sur faux, et nous définirons également un message d'erreur. Les mots de passe ne correspondent pas, et nous reviendrons au cas où ils passeraient par cette vérification et que les mots de passe correspondraient. Nous allons faire un essai avec Catch Block. Et dans ce bloc d'essai, nous allons faire la configuration. Nous y définirons les en-têtes, donc le type de contenu JSON de l'application Et là, nous publierons la demande sur le point de terminaison du registre. Nous allons donc prendre du poids. Excisez le courrier avec le HTTP, hôte local 3 000 comment s'inscrire. Nous y ferons le nom userdtatname, email userdata point, email et mot de passe, données utilisateur point mot de passe Ensuite, nous ferons le confit et ensuite nous pourrons le fermer Bien sûr, déplaçons-le également un peu. Ensuite, nous allons continuer à définir le succès à deux et à définir le message d'erreur sur l'enregistrement réussi. Alors maintenant, ce n'est même plus un message d'erreur. Il se résout davantage en tant que message de somme, mais nous pouvons le laisser comme nom du message d'erreur. Définissez le délai d'expiration pour l' utilisateur enregistré qui se connectera. 4001e, nous allons le guider pour se connecter. Et là, nous en ferons 4 000. En cas d'échec, nous détecterons une erreur, et nous définirons le succès sur falls, bien sûr, et nous définirons également le message d' erreur point de réponse, un point de donnée ou une erreur s'est produite. Maintenant, si nous le faisons sur notre page, inscrivez-vous avec des barres obliques, nous arriverons à la page, nous arriverons à la page, et nous pourrons continuer le codage de l'interface utilisateur Là, nous allons commencer par la division principale et il y a quelques règles de style. Nous adaptons donc la mise en page Flexbox, la direction du volume, de sorte que les éléments seront placés les uns en dessous des autres Ensuite, nous allons le centrer verticalement, horizontalement. Écran Minhight et un peu d'arrière-plan. Utilisons le gris 100. Nous y ferons un peu d' en-tête avec le registre Nous ajouterons également de la classe un peu plus de texte à partir du boulon et un peu plus gros que le texte se fondra en bas. Maintenant, sauvegardons-le. Nous aurons le texte au milieu. Il y aura donc le formulaire d'inscription. Nous pouvons continuer. Et ce que nous allons faire maintenant, c'est afficher le message d'erreur. Nous ferons donc le nécessaire s'il y a un message d'erreur, nous montrerons simplement une pile de paragraphe et à l'intérieur de ce paragraphe, la technologie figurera le message d'erreur Nous allons ajouter du style au message d'erreur lui-même, afin de pouvoir utiliser les bretelles bouclées, puis à l'intérieur de ces bretelles, nous allons insérer la barre ce que nous ferons, et en cas de succès, nous utiliserons le texte Green 500. Dans le cas contraire, nous utiliserons le texte rouge 500. Ensuite, nous allons continuer avec le texte Large peut-être en italique et la marge vers le bas Ainsi, avec cet opérateur d'activation, si le résultat est vrai, l'écran de texte s'appliquera au cas où c'est faux, le texte rouge s'appliquera, et cela s'appliquera aux deux scénarios. Passons maintenant en dessous de ce message d'erreur, alors assurez-vous que nous sommes absents et nous allons commencer par le formulaire. Ce formulaire comportera à nouveau quelques classes, donc de la largeur à la largeur totale et de la largeur maximale. Je ne sais pas Utilisons le succès pour le moment. Et lors de l'envoi du formulaire, nous utiliserons le gestionnaire de soumission dans lequel nous aurons la première saisie Copions ces entrées, il y aura donc une entrée, une seconde pour le mot de passe de l'e-mail, mot de passe de confirmation, puis il y aura un bouton d'enregistrement. Maintenant, pour la saisie, nous aurons type qui sera de type texte, puis il y aura un espace réservé, donc il y aura le nom d'utilisateur, puis le nom sera name et la valeur sera userdatadt Et en cas de modification, nous aurons le gestionnaire de saisie des modifications. Nous ajouterons également un peu de style. Le nom de la classe sera donc une ombre, une bordure, peut-être arrondie, moyenne, pleine, un peu de literie, peut-être du texte gris 700, et ce sera tout. Voyons à quoi ça ressemble. OK. Maintenant, ce que nous pouvons faire, c'est que nous pouvons réellement le copier-coller. Au lieu de cela, nous l'avons préparé ici, mais faisons simplement du copier-coller, nous le voulons quatre fois. Nous avons donc le nom d'utilisateur ici. Le deuxième sera le courrier électronique, qui sera de type. Également du texte, le troisième type sera mot de passe, qui sera du type, passe et le mot de passe de confirmation qui sera à nouveau du type mot de passe. Avec les noms là, il y aura un e-mail. Il y aura un mot de passe, et il y aura un mot de passe deux. N'oubliez pas de modifier la valeur. Donc, le premier est le nom, le second est l'e-mail, et c'est aussi le mot de passe et le deuxième mot de passe. Maintenant, nous avons le bouton, donc le bouton doit être du type submit, et aussi avec un nom de classe, bien sûr. Nous pouvons donc ajouter le fond bleu à 500. Lorsque nous le survolerons, le fond sera bleu, 800, le texte sera blanc, la police en gras, un peu rose, peut-être à nouveau autour de ce support C'est possible. Et là, à la fin de ce formulaire, nous aurons en fait la question de savoir si le compte existe ou s'il a déjà été créé. Utilisons donc leur balise de paragraphe et utilisons le compte qu'ils ont déjà créé. également apporté un peu de style, alors passez en haut et nous y ajouterons un lien au cas où c'est vrai, cela mènera à la page de connexion que nous allons maintenant coder. Fermons-le. Ouvrez une session. Donc, si quelqu'un accède à cette page d'inscription, mais que nous avons déjà un compte, nous le laisserons cliquer sur ce lien utiliser le composant de connexion que nous allons maintenant coder et lui permettre de se connecter avec les informations d'identification qu'il connaît déjà et qu'il a déjà un compte enregistré. Faisons un peu de style, mais il suffit de texter en bleu 500, comme il devrait être similaire au bouton, peut-être que nous pouvons également ajouter Her so text blue, 800, et peut-être que nous pouvons augmenter la taille du texte en Excel. Voyons maintenant à quoi cela ressemble. Peut-être que ce que nous allons faire, c'est que pour le bouton, ici nous allons ajouter de la largeur au maximum. Alors nous ressemblerons à ceci. Et aussi, si nous vérifions l'utilisateur de l'ensemble de données utilisateur, il y a le problème du jeu de données utilisateur. Maintenant, nous allons le sauvegarder. Nous allons aller sur notre page. Je vais mettre partout sur Ws, cliquez sur s'inscrire. Et inscription réussie. Et cela nous a également mis sur la page de connexion. Cela signifie que nous sommes maintenant enregistrés, nous allons donc simplement nous connecter, et nous devons, bien sûr, coder le composant de connexion. Alors allons-y et faisons-le. Passons au composant de connexion, et là nous pouvons commencer. Là, nous commencerons au-dessus du retour, et nous commencerons par la navigation que nous utiliserons à nouveau. Nous utilisons donc Navigate. Il sera importé. Ce sera donc un crochet pour naviguer par programmation vers une autre page après Ensuite, nous établirons des données de connexion constantes pour définir des données de connexion. Nous utiliserons State ici, et nous définirons un e-mail et un mot de passe vides. Bien sûr, nous devons également l' importer ici, donc importez l'état depuis React, enregistrez-le ci-dessous, nous ferons à nouveau l'état complet en contenant le message d'erreur. Message d'erreur, définissez le message d'erreur et indiquez le champ vide. Ensuite, nous allons créer un gestionnaire pour les modifications d'entrée mettre à jour l'état et de réinitialiser le message d'erreur C change le gestionnaire de saisie et là, nous définirons les données de connexion comme les données de connexion, nom de la cible E et la valeur de la cible Et si le message d'erreur est vrai, définissez le message d'erreur deux, vide. Ensuite, nous y aurons la fonction de gestionnaire de soumission. Donc, pour la soumission du formulaire, faisons le gestionnaire de soumission asynchrone E. Encore une fois, nous allons faire en sorte que le point E empêche la valeur par défaut, comme je l'ai expliqué dans le composant de registre précédent, et nous essaierons Et au cours de l'essai, nous commencerons par envoyer la demande de publication au point de connexion. Donc, si vous ne vous en souvenez pas dans Explorer et dans Bend, nous y avons le point de terminaison de connexion avec le point de terminaison d'enregistrement également. Nous allons donc simplement l'appeler. Lors de la connexion, nous essaierons de répondre constamment, d' attendre sous point post, hôte local HDDP, 3 000 de connexion, et d'envoyer les données de connexion et d'envoyer les Ensuite, nous enregistrerons la réponse. Donc, répondez aux données, et nous stockerons également le jeton reçu dans le stockage local. Ainsi, lorsque nous voulons l' obtenir, par exemple, lorsque nous voulons créer des produits alimentaires, etc., nous serons en mesure de récupérer ce jeton, nous le stockerons là. Donc, stockage local, point défini, élément du jeton sur point de réponse, point de donnée, point jeton. Et après une connexion réussie, nous pouvons accéder au tableau de bord d'administration. Au cas où cela échouerait, nous le trouverons là, et nous le ferons en cas de condition. Donc, si la réponse est erronée, nous définirons le message d'erreur comme réponse erronée mais comme message de point de données Sauf s'il y a une demande d'erreur, nous enregistrerons la demande d'erreur sur la console, et toute autre erreur sera simplement un message d'erreur du journal de la console. Le bloc de capture habituel sera donc le dernier l. Ensuite, c'est tout pour le handle de soumission et pour les autres fonctions, nous pouvons passer à l'interface utilisateur. Donc, dans la division principale, nous allons faire un peu de style. Encore une fois, la disposition de la boîte flexible, direction du flex et le volume centrent les éléments Horizontalement et verticalement ou verticalement et horizontalement. Ensuite, une hauteur minimale à l'écran, puis un fond gris. Ensuite, nous allons créer un titre avec login, et nous mettrons le texte dans Excel. Quoi d'autre, boulon de police, une marge vers le bas. Ensuite, au cas où nous aurions un message d'erreur, nous l'y afficherons. Donc message d'erreur. Si c'est vrai, nous allons afficher ce paragraphe qui indiquera le message d'erreur et le style sera le texte rouge, 500, le texte je ne sais pas, XS peut-être en italique avec une marge en bas La raison pour laquelle nous ne faisons pas appel leur opérateur de retour est que nous ne montrerons pas le nom de l'utilisateur qui s'est connecté avec succès. Donc, si la connexion est réussie, nous nous reconnecterons simplement à la page d'administration Nous pouvons maintenant commencer par le formulaire. Dans le formulaire, nous aurons les entrées, etc., mais commençons par styliser un peu le formulaire. Nous allons donc réutiliser la largeur jusqu'à la largeur maximale jusqu'à quelque chose comme XS et lors de la soumission, nous appellerons le gestionnaire de soumission Nous pouvons maintenant passer au formulaire. Il y aura une contribution. Donc, d'abord, saisissez, puis nous le copierons plusieurs fois. Bien sûr, il y aura également un bouton. Mais commençons par les entrées. Nous utiliserons leur saisie pour l'e-mail et également pour le mot de passe, car il y en aura assez si l'utilisateur se connecte uniquement avec l'e-mail qu'il a indiqué lors de son inscription. Le type sera donc du texte, espace réservé sera le nom de l'e-mail, le nom sera le courrier électronique, la valeur sera le point e-mail des données de connexion et, en cas de modification, ce sera un gestionnaire de saisie des modifications Ensuite, nous créerons la classe et nous ajouterons des ombres, des bordures, certaines arrondies, moyennes, d' autres trop pleines, rembourrage, du texte en gris C'est peut-être ça. Nous allons maintenant le copier une fois de plus. Le second sera un mot de passe. Nous allons donc changer le type en mot de passe. Espace réservé, il y aura un mot de passe, nom sera également un mot de passe, une faute de frappe, données de connexion seront un mot de passe, gestionnaire de saisie des modifications Et maintenant je pense que je peux déplacer le bouton. Alors voilà, je vais me connecter. Je vais taper « Soumettre ». Je vais ajouter quelques noms de classes. Encore une fois, fond bleu à 500. Après avoir survolé le fond bleu jusqu'à je ne sais pas, 800. Quoi d'autre ? Certains sont arrondis à moyens, d'autres sont rembourrés Comme ça. Et lequel doit être rempli. Je vais le sauvegarder. Et en dessous de notre formulaire, je vais également ajouter un paragraphe, pas encore de compte. Et nous ajouterons un lien. N'oubliez pas de l'importer, alors j'appuie sur Tentro Vérifions-le bien. Oui, ça l'est. Et il sera écrit « Register ». Donc, si nos administrateurs n'ont pas encore de compte, ils cliqueront pour s'inscrire et cela les redirigera vers la page d'inscription Donc, il y a Slash Register. Commençons par les noms des classes, texte Blue, 500 on Her, il sera remplacé par le texte Blue, 800. De plus, nous augmentons un peu le texte et les classes sans aucun compte pour l'instant, juste une marge vers le haut. Maintenant, vérifions le formulaire. Et essayons également de nous connecter. Avant cela, nous utilisions TWS comme informations d'identification. Maintenant, avec eux, je vais cliquer sur Login. Et je vais avoir un message d'erreur. Les données utilisateur S ne sont pas définies car nous avons oublié certaines entrées. Importons donc Exiles depuis Exiles, enregistrons-les Avant de vérifier les données utilisateur, essayons-le. Et ça marche. Donc c'est bon. J'ai juste raté quelques informations. 16. Créer une finition alimentaire et nuageuse: Maintenant, cela signifie que nous nous connectons en tant qu'utilisateur. Nous pouvons donc revenir à l'article, remplir certaines données et essayer de le sauvegarder. Et il tourne toujours, mais si nous vérifions le Cloudinary, nous avons l'image réellement là Nous en avons donc probablement un peu en retour dans une réponse. Allons vérifier et réparer ça. Donc, l'un des problèmes que je peux y voir, c'est qu' en utilisant un Cloudinary, nous devons utiliser la version deux Donc, en fait, nous nous sommes trompés. Bien entendu, nous devons également y saisir version deux en tant que Cloudinary Maintenant, nous allons l'enregistrer, cela devrait fonctionner, nous devrions donc aller sur notre page. Dans notre page, nous allons appuyer sur Enregistrer. Le spinner tournera pendant un moment et vous pouvez maintenant voir que vous avez réussi Maintenant, nous avons notre nouvel article, et si nous allons à Mongoi B, nous cliquerons sur nourriture et là nous aurons l'image Maintenant, nous pouvons simplement copier l'URL, coller et nous pouvons tester l'URL et nous pouvons voir que nous y aurons l'image. Et aussi, nous pouvons voir sur notre page que nous y rencontrons de nombreuses erreurs. Alors allons-y et réparons-le. C'est sur notre page d'administration, il y a un effet très nouveau, et nous devrons y ajouter un tableau vide. Et lorsque nous avons le tableau vide, cela signifie que l'effet ne s'exécutera qu'après le premier rendu. Alors maintenant, si nous revenons à notre page, nous pouvons voir que nous pouvons simplement l'actualiser. Et nous cessons de recevoir de nouvelles erreurs. Supprimons donc maintenant, par exemple, le premier aliment. OK. Et oui, nous avons maintenant un article avec une image. Nous pouvons le voir sur Mongo DB, puis nous le verrons sur le front-end pour un client avec un certain prix, et nous pouvons continuer En fait, nous n'aurons aucun composant pour la déconnexion. Nous allons simplement le gérer via un bouton. Ensuite, lorsque nous cliquerons dessus, cela réinitialisera notre jeton et nous placera sur la page client. Supprimons-le donc, même à partir de là. Nous n'avons donc plus qu'à nous connecter et à nous inscrire. 17. Barre de navigation Admin: Je pense qu'il est temps d'ajouter la barre de navigation Admin. Dans les pages, nous allons créer un nouveau fichier, Admin Now bar.j6. Maintenant, nous allons entrer dans app.j6, et nous avons déjà leur Alors maintenant, ce que nous allons faire dans l'application, nous le ferons. Nous ferons une localisation constante, utiliserons la localisation, et la constante est nom du chemin de localisation de l'itinéraire administration commence par Admin. Maintenant, en plus de notre point Epi JA six, nous allons faire Admin Route, opérateur ternaire. Et si c'est le cas, nous allons afficher la barre de navigation d'administration. Mais si ce n'est pas le cas, nous sommes sur la page client. Nous allons afficher une barre de navigation normale. Modifions-le maintenant. Donc, dans la page se trouve le nouveau fichier navbar point Ja six. Et rendez-le là. Assurons-nous qu'il est importé. La barre de navigation Admin est donc importée, la barre de navigation est importée. Maintenant, si nous allons consulter notre page, nous pouvons voir en haut que le texte de la barre d'administration est suffisant. Cela signifie que nous sommes libres d'accéder à l'administrateur du bar dès maintenant. Tout d'abord, nous allons aller dans le dossier frontal, et là nous allons faire NPM Je réagis aux icônes car nous utiliserons l'icône de fermeture et le menu pour la navigation. Maintenant, nous allons nous occuper de cela, donc je vais le fermer ici. Et ce que nous allons faire, nous allons commencer par définir l'état pour activer ou désactiver la navigation Donc ça suffit, set enough, use state, et nous définirons la valeur par défaut sur falls. Ensuite, nous créerons une fonction pour activer la visibilité de la navigation lorsque nous serons sur téléphone portable Activez donc la navigation, réglez NAF, qui est cet état, à une valeur différente Ensuite, nous devrons également y avoir la fonction de déconnexion. C'est ce dont je parlais : nous n'aurons pas le composant de déconnexion, mais seulement le bouton lorsque nous cliquerons dessus, il nous déconnectera ou déconnectera l'administrateur Alors, continuez, déconnectez-vous. Et là, le stockage local ne supprime pas l'article. De plus, comme je l'expliquais, nous allons supprimer le jeton et déplacer l'administrateur vers le client ou le front-end En gros, nous sommes sur le front-end, mais nous les relocaliserons sur la page client Le client verra une page d'accueil avec nos produits et nous allons donc coder un peu plus tard. Maintenant, nous allons également vérifier les connexions. Ainsi, le point de stockage local reçoit le jeton d'article, et là nous vérifierons si l'utilisateur est verrouillé et, avec cette vérification, le jeton de stockage local. Nous pouvons maintenant savoir si l'utilisateur est connecté ou non et comment vous pouvez vous déconnecter ultérieurement sur cette barre de navigation. Et bien sûr, cela vous indiquera certains itinéraires. C'est donc là que nous allons commencer dans la division principale. On peut dire que ce sera un dégradé de fond vers la droite. Je ne sais pas, du Green 500 au Green 600, bien sûr, gardez à l'esprit qu' il s'agit d'une interface d'administration, donc peu importe son style, mais je pense que nous pouvons simplement faire une navigation agréable que nous utiliserons également sur le front-end Peut-être que plus tard, nous changerons un peu cela pour le moment, laissons les choses comme ça. Ensuite, nous allons créer un autre div. Dans cette section, nous utiliserons la mise en page Flexbook. Nous allons faire une justification entre les éléments, afin qu'il y ait un espace uniformément réparti entre les éléments Centrez-le également verticalement et ajoutez un titre. Passons à la deuxième rubrique. Textez Excel, textez Y et maintenez. Les deux panneaux d'administration. Nous allons maintenant continuer et nous allons ajouter le bouton pour la vue mobile, ajouter le bouton avec navigation et y faire tourner un opérateur. Si la navigation est vraie, nous montrerons à proximité le plan de l'IA, dont nous avons besoin au port. Et le suivant est le menu AI Outline , que nous devons également importer. Allons-y et faisons-le. Donc, importez le plan, fermez le menu Plan depuis React Icones AI. Assurez-vous simplement que l' espacement est correct. OK. Maintenant, revenons en arrière. Importez-y l'état d'utilisation. Utilisez donc l'état. Oui, maintenant ça marche. Nous pouvons donc maintenant y voir la barre de navigation. Je peux l'augmenter un peu. Et nous pouvons continuer dans cette voie. Le bouton nécessite donc, bien sûr, la fonction onclick qui activera la navigation et également certains noms de classes Donc, le texte est blanc et sur un grand écran et au-dessus, il sera masqué. Ensuite, nous avons le bouton, c'est bon. Et maintenant, nous allons ajouter les liens. Utilisons donc la technologie de navigation À l'intérieur de la navigation, il y aura un verrouillage. Et si oui, vous y trouverez les liens vers le tableau de bord du tableau de bord, ainsi que certains liens de déconnexion ou vers la section principale Nous allons donc y faire quelques fragments vides. À l'intérieur, nous allons mettre le lien, cliquer dessus pour qu'il soit importé. Le premier nous amènera au bord d'administration avec le texte du nom de classe en blanc, et ce sera nommé panel. Pour le tableau de bord, déterminons les noms plus tard. Le deuxième lien redirigera vers le tableau de bord d'administration, que nous n'avons pas encore créé, mais nous le ferons, et nous recevrons les commandes depuis notre interface ou depuis notre côté client. Ainsi, lorsque quelqu'un commande un plat, nous l'envoyons sur un tableau de bord, mais il n'est pas encore créé, mais nous pouvons le faire là. Et le nom de la classe sera à nouveau, le texte blanc et le tableau de bord. Ensuite, il y aura un bouton sans fonctionnalité. Donc, comme vous pouvez le deviner, ce que nous utiliserons en clic, ce sera la déconnexion. Alors, déconnectez-vous en un clic. Le nom de la classe peut également être du texte blanc, enregistrez-le. Nous avons maintenant un problème. Alors pourquoi ça ? Lisons un peu mieux. Je pense qu'à cause de l'opérateur de tournage , bien sûr, nous devons terminer cela. Nous allons donc continuer là au cas où nous aurions la vraie position, et au cas où nous en aurions une fausse, nous mettrons le lien pour nous connecter. Plex blanc. Connectez-vous. Sauvegardez-le. Maintenant, ça marche. Nous devons donc ajouter, bien sûr, un peu de style à notre navigation. Nous allons donc commencer par des bretelles bouclées. Nous ajouterons leur barre oblique inverse, navigation et nous y mettrons Flex, si c'est vrai, et masqué si c'est Et là, nous pouvons ajouter d'autres classes qui seront présentes dans les deux scénarios. Ainsi, même si cette variable est vraie ou fausse, qu'elle soit mobile ou de bureau, sera appliquée à notre navigation. Il sera donc absolu sur un écran plus grand et au-dessus par statique, peu de fond pour l' instant vert, 600, largeur à plein sur un écran plus grand et plus, largeur à automatique, sur un écran plus grand ci-dessus, nous pouvons utiliser la disposition des boîtes flexibles, la direction de flexion, le volume sur une direction de flexion plus grande, ligne, des éléments à centrer. Quoi d'autre ? Continuons sur une autre ligne. Espace vertical, on peut en faire cinq. Sur un modèle plus grand, nous pouvons réinitialiser. Un espace horizontal, on peut en faire six. Nous pouvons également assigner les 14 premiers et de gauche à zéro, droite à zéro, un peu de pédage vertical et augmenter l'indice z. Et je voudrais également réinitialiser le pédalage vertical avec un grand écran réinitialiser le pédalage vertical Maintenant, sauvegardons-le et consultons notre barre de navigation. Cela ressemble donc actuellement à ceci. Nous avons là le panneau, le tableau de bord qui n'est pas encore codé et la fonction de déconnexion Maintenant, réduisons-le. Et ça a l'air de bien fonctionner. Nous allons donc maintenant tester la déconnexion de connexion. Passons donc au logo. Nous sommes arrivés à une page normale, mais ce que nous pouvons également faire, c'est simplement la faire sur notre page. Je vais vous le montrer comme ça. Connectez-vous. Maintenant, on y va. Nous y collerons les informations. Dans mon cas, c'est WW, connectez-vous, et nous sommes de retour dans notre panneau d'administration. Revenons maintenant au code VS. Passons à admin.j6. Là-bas. Ajoutons-y un peu plus de style, donc du rembourrage horizontal, vertical, largeur maximale Utilisons Seven Excel. Alors sauvegardons-le. Utilisons également MMX Auto, et ensuite ? Nous pouvons y ajouter une marge supplémentaire par le haut et nous pouvons laisser les choses comme ça. Il est maintenant temps de passer au site de notre client. Nous allons donc simplement faire attention. Il nous enverra à notre hôte local 5173, où nous coderons l'interface utilisateur du client Nous avons donc là la barre de navigation, qui sera l'une des premières choses que nous allons coder. Et puis nous pouvons également y créer un point d'accueil JS six. Maintenant, importons ces deux choses dans Abdo Js. X, je veux dire. Nous y créerons un nouvel itinéraire avec le chemin deux, barre oblique et l'élément qu'il affichera sera la page d'accueil Appuyez sur Entrée. Il est donc important d'y fermer le tag. Et nous avons déjà la barre de navigation. Donc, si vous pouvez voir maintenant notre page, elle y est affichée, Navbar 18. Barre de navigation: Commençons par la barre de navigation. Donc assez de barre, elle sera en fait assez similaire à notre barre de navigation d'administration Nous pouvons simplement le copier-coller et nous le ferons , assurons-nous. Et je vais encore le fermer là. Donc, d'abord, assurons-nous exportons par défaut sur la barre de navigation. Et nous en avons assez de barres. Maintenant, sauvegardons-le. Nous avons le panneau d'administration, mais ce n'est bien sûr pas correct. Nous allons le mettre à jour. Tout d'abord, nous n'avons pas besoin de vous déconnecter ici Deuxièmement, nous n'avons pas besoin de vérifier si l'administrateur est verrouillé. Ensuite, avant de l'enregistrer, assurons-nous de nous en débarrasser Nous le supprimons donc verrouillé avec le fragment là, là et essentiellement là. ne nous reste donc que cette navigation. Maintenant, sauvegardons-le. Et il y a aussi le bouton de déconnexion, supprimez-le également abord, nous allons également y importer une image. Nous allons donc importer ressources de Logo Naftn et je devrai insérer le logo, mais il sera nommé ainsi parce que je ne fais que regarder le fichier Je vais maintenant passer aux actifs et je les ai là. Ce logo sera donc affiché dans notre barre de navigation. Maintenant, au lieu de ce panneau d'administration, je vais le mettre là. Je vais donc faire de la technologie Anchor à la place. Alors je vais le fermer. À l'intérieur de la balise d'ancrage, je mettrai l'image avec la source. Donc logo Math O Logo. Maintenant je vais le fermer. Vous pouvez le voir là-bas. Bien entendu, nous mettrons également leur largeur maximale de, je ne sais pas, 100 pixels. C'est très bien. Ensuite, nous allons continuer avec la mise en place d'autres cours. Nous allons donc placer le drapeau et les objets au centre. Nous le centrons donc, et nous envoyons également le HRF sur une page d'accueil, alors slash Nous allons donc maintenant améliorer les couleurs. Commençons par le bas. Maintenant, utilisons quelque chose de 400 à 500 peut-être, 600. Ça a l'air un peu mieux. Ensuite, nous garderons un peu d' ombre avec deux fils, c'est bien. Nous l'utiliserons comme fixe, en haut de zéro, augmentant l'indice z et en définissant une certaine opacité Alors faisons-en 95. Aussi, fixons-y, bien sûr, largeur au maximum comme ceci. Maintenant, définissons une largeur maximale. J'utilise 1 400 pixels. Centrez-le. C'est génial. Et attendez. Je vais juste vérifier à quoi ça ressemble. OK. Oui, là, nous devons supprimer cet arrière-plan en vert. Parfait. Et nous pouvons continuer. Nous avons donc le logo. Nous avons les boutons, et nous allons les remplacer par accueil et par contact. Bien entendu, cela ne nous donnera que la barre oblique vide, et cela nous mènera à une page de contact que nous créerons juste après la page d'accueil Pour l'instant, ça devrait aller. Passons à la page d'accueil. 19. Maison: Page d'accueil, nous allons à nouveau importer non seulement react, mais aussi use effect et use state, puis Excils, puis nous importerons le logo, set et qt PNG Ensuite, nous importerons à nouveau la photo du restaurant, assets restaurant one point BNG, puis nous créerons deux variables d'état. Donc, le premier sera la nourriture, la nourriture fixe. Il définira donc les éléments de notre base de données, leur état et la valeur par défaut est un tableau vide. Ensuite, nous allons définir le chargement, définir le chargement, l'état par défaut sera faux. Maintenant, il y aura l'effet d'usage. Là, nous allons définir le chargement sur True. Nous allons y faire des exils, nous allons obtenir une URL donc HTTP, hôte local 3 000 aliments Et si vous vous souvenez, si nous avons réglé celui-ci ou envoyé celui-ci au facteur, nous avons reçu tous les produits alimentaires, et c'est ce qui se passe là-bas Nous recevrons tous les produits alimentaires et nous les montrerons sur notre page d'accueil pour nos clients. La réponse serait donc la nourriture définie, les points de réponse, les données ponctuelles et les chutes de chargement définies. En cas de problème, nous détecterons une erreur comme celle-ci l'erreur et définirons également le chargement sur false. Et encore une fois, nous le rendrons une fois. Ça devrait aller. Maintenant, pour ce qui est du style de la page d'accueil, laissez-moi le mettre là. le div principal, nous allons d'abord dire qu'il doit s'agir d'une literie dont nous voulons une largeur maximale de 1 400 pixels, au centre et une marge par le haut Ajoutons un autre div qui contiendra deux images. Et le premier sera avec le logo et le second avec la photo du restaurant. Il y en aura donc d'abord avec la source du logo, puis le second avec la source du restaurant. Sympa. Ajoutons maintenant un peu de style. Donc pour le premier, j'ajouterai des arrondis, j'ajouterai de la hauteur au fond et de l'objet à couvrir. Pour le second, j' ajouterai la même chose. Et en fait, pour que cela soit bien affiché, nous allons faire cette mise en page en grille. Par défaut, sur un téléphone mobile, il prendra toute la largeur, qui est une grille Il n'y aura donc qu'une seule colonne, ce qui est très bien. Sur un écran plus petit et au-dessus, nous pouvons également définir les colonnes de la grille et un certain écart entre les deux. Maintenant, si nous le sauvegardons, nous l'aurons bien côte à côte comme ça. Et c'est quelque chose que nous voulons, et c'est également très bien pour cette division. Nous pouvons donc continuer. Dans la prochaine section, nous verrons qu'il y aura une sorte d'élément de style. Nous y proposerons donc des plats spéciaux pour le déjeuner, car notre restaurant vendra ou proposera chaque jour de nouvelles spécialités pour le déjeuner Et bien sûr, vous pourrez également acheter ces plats spéciaux pour le déjeuner via un paiement à rayures, puis vous recevrez une livraison à votre adresse que vous indiquerez sur votre bande Mais aussi, si le menu change tous les jours, il est bon d'avoir ce panneau d' administration où le personnel ajoutera les produits alimentaires, les modifiera ou les supprimera, puis tous ceux qui voudront visiter le restaurant cliqueront simplement sur Contact, et ils y auront l' adresse du restaurant. Ajoutons le style. Il sera donc arrondi en haut à droite, grand, arrondi en bas à gauche, grand. arrière-plan sera dégradé vers la gauche, du vert 400 au vert 600. Essayons. Et il y aura une certaine marge. Maintenant, je vais définir une certaine hauteur, et vous verrez ce qui va se passer. Donc, sur notre page, si je le code correctement, vous verrez l' élément de style que je viens de modifier. Cela servira de séparateur entre les photos et entre nos produits alimentaires réels Et continuons à styliser. Nous allons maintenant ajouter également la mise en page Flexbox. Nous allons centrer les éléments verticalement et également justifier le départ. Nous allons donc garder les éléments au début, puis une marge verticale, ce sera pour le diviseur et pour le titre à l'intérieur, nous ajouterons un peu d'augmentation du texte Encore une fois, une marge verticale. P sur les deux, rembourrage vers la gauche, et nous mettrons le texte en blanc Maintenant, la partie intéressante, où est notre nourriture ? Notre nourriture sera donc quelque part là-bas , comme vous pouvez le voir sur la page. Mais d'abord, nous allons créer un composant avec une carte alimentaire qui contiendra réellement nos aliments, puis nous créerons une mise en page que nous réutiliserons ensuite sur notre page d'accueil. 20. Composant de la carte alimentaire: Dans notre dossier de composants, créons un nouveau fichier, qui sera food card.j6, et un autre sera food La carte alimentaire sera assez simple. Commençons donc par là. Nous allons simplement importer les aliments ou, vous savez, c'est même suffisant pour les y mettre. Carte individuelle alimentaire, mais nous avons besoin d'un modèle, enregistrez-le. Là, nous allons juste faire de la nourriture par carte individuelle. Il sera importé. Vous pouvez supprimer la réaction. Et ce qui va s' y passer, c'est que nous allons insérer la nourriture comme paramètre. Ensuite, dans cette plongée, nous allons cartographier cette nourriture. Nous allons donc créer un élément de carte des aliments et y insérer la carte individuelle des aliments. Nous allons maintenant l'enregistrer sur la carte en pied de page, nous allons également ajouter une clé indiquant le point m ID et le produit alimentaire. Sauvegardez-le. Nous allons maintenant y ajouter un peu de style, ce sera donc une mise en page en grille. En gros, ce que nous voulons faire dans les colonnes de la grille. Sur l'écran du mobile, il y aura une colonne. Sur un écran plus petit, il y aura deux colonnes sur un écran plus grand, il y aura trois colonnes. Sur l'écran Excel, il y aura quatre colonnes. Et c'est tout. Peut-être aussi, nous devons utiliser la largeur maximale de 1 400 pixels, car c'est ce que nous utilisons pour notre page Donc je n'ai même pas besoin de le voir. Je le sais car je veux donner à ma page une largeur maximale de 1 400 pixels. Alors aussi, je mélange O pour le centrer. Mais bien sûr, je n'ai même pas besoin de le voir pour définir ces classes de teintes. Ensuite, nous passerons à Food Single Card. Vous pouvez maintenir Sural enfoncé et cliquer dessus, et nous devrons y faire un peu de codage Pour voir le résultat avant d'aller à la page d'accueil, nous allons importer des cartes alimentaires. Et là, il est importé, et le paramètre d'entrée sera foot. Sur notre page, vous pouvez également voir que nous avons là le pied d'une voiture, donc c'est bon. Commençons par les importations. Nous devons donc d'abord importer l'état d'utilisation. Ensuite, nous allons importer les icônes. Nous aurons donc besoin de l'icône de la carte, l'icône moins et de l'icône plus de React Icones BI. Nous pouvons commencer par là. Donc, d'abord, nous ajoutons une bordure. Nous allons l'arrondir. Faisons un overflow iden, pour que rien ne sorte de notre carte Faisons un peu d'ombre. Lorsque nous passerons la souris dessus, nous augmenterons l' ombre. Quoi d'autre ? Peut-être une marge et aussi un peu de fond. Utilisons donc pour notre carte un arrière-plan dégradé en bas à droite et quelque chose de vraiment décent. Donc, du vert 50 au vert 100. Nous allons maintenant l'enregistrer et commencer à ajouter le contenu afin de mieux voir le style. Ajoutons l'image. Là, nous devrons indiquer la source de l'image, et il y aura une image de points alimentaires. Ensuite, nous aurons également tout pour que ce soit facilement food point NAM. Et c'est tout pour l' image, je dirais. Maintenant, si nous le conservons, il échoue parce que nous avons besoin de l'apport alimentaire. Alors, maintenant, sauvegardez-le. Et vous pouvez voir que nous avons là le produit alimentaire. L'image est chargée. Continuons donc. Et je pense que je vais le déplacer comme ça. Maintenant, ajoutons un peu de style. J'ajouterai donc l'objet à couvrir, le poids au complet, peu de hauteur, et sur un écran plus grand, j'augmenterai la hauteur. OK. D'accord, alors je vais y ajouter un lit de plongée avec de la literie. Dans le diff, je vais ajouter un autre div. Et à l'intérieur de cette autre différence, nous allons mettre un titre avec un nom Donc, le nom du point Hood. Sauvegardez-le. Là, bien sûr, nous ajouterons un style supplémentaire, et c'est pour la carte. Nous allons donc ajouter la mise en page Flexbox, justifier entre les deux. Nous avons donc un espacement entre les éléments, les éléments, la ligne de base et une marge vers le bas À côté du nom de l'aliment, nous aurons également le prix. À l'intérieur de l'étiquette de dépenses, c'est ce que nous allons faire. Et il y a un signe de 1 dollar parce que ce sera en dollars, le prix des aliments en cents, et comme dans le sens du terme, prenons ces 2 dollars. Je vais donc en faire 102 corrigés deux. Et bien sûr, je vais ajouter un style au nom de l'aliment. s'agira simplement de texter Excel sur un texte plus grand vers Excel, police bolt et texte gris 800. Génial. Pour le texte Spen, quelque chose de similaire, texte volumineux sur un texte plus grand Excel, police Semibot et nous pouvons changer le texte en vert 600 Nous avons maintenant le prix de l'article, le nom de l'article, et nous allons aller de l'avant. Nous allons donc y ajouter un autre div avec un nom de classe, disposition flexbox, une justification entre les éléments à centrer Et dans cette section, nous aurons les fonctions d'ajout à la carte. En fait, n' utilisons pas justify between, mais justify end car cela devrait être à la fin. Peut-être que nous allons le changer. Voyons pour l'instant ce que nous devons faire, c'est ajouter le bouton permettant d'ajouter l'article à une carte où le client pourra acheter le produit. Commençons donc par le bouton. Avant d'ajouter les fonctions à un mécanisme de carte, nous y fixerons une quantité constante égale à un. Ou mettons-le à zéro pour le moment et nous l'utiliserons. Il y aura ensuite un mécanisme qui ajoutera des articles à une carte, et qui en modifiera la quantité, mais nous n'avons pas encore ce mécanisme. Nous allons donc régler l'interface utilisateur, régler la quantité à zéro puis la changer manuellement à un afin que nous puissions voir l'interface utilisateur déclencher le plus et le moins bas. Ensuite, nous définirons les fonctionnalités de la carte. Changeons également cela. Il y aura un écart X deux, position absolue, position inférieure à zéro et droite à zéro. Assurons-nous d'avoir leur position relative, je ne la vois pas, alors définissons-la là. Relatif. Nous pouvons maintenant nous déplacer vers le bas avec ce bouton. Nous allons ajouter l'icône, je vais donc ajouter le texte du nom de classe Excel et nous le fermerons ici. Nous pouvons maintenant ajouter le style du bouton. Donc, pour ce bouton, nous allons ajouter Carl Bass, et là nous allons commencer le dégradé de fond vers la droite du vert 500 au vert 700. Sauvegardons-le. En fait, on peut y voir le bouton. Lorsque nous le survolerons, il proviendra du vert 702 vert 900 Le texte sera blanc et la police les deux. Ensuite, il y aura un rembourrage vertical, un rembourrage horizontal, arrondi du haut à droite au grand, afin de créer un style intéressant et arrondir vers l'arrière ou en bas à gauche, Et ce sera tout pour le moment pour le bouton. Nous allons nous déplacer là, et au-dessus du bouton, nous vérifierons la quantité, et si elle est supérieure à zéro, au cas où, oui, nous vérifierons leurs fragments vides, et nous rendrons ce code. Remplaçons la quantité par une. Sauvegardons-le. Maintenant, c'est une quantité supérieure à zéro, et nous pouvons la coder. Nous y aurons donc un bouton ainsi qu' une étiquette usée avec la quantité indiquée. Pour le spentag, nous allons juste faire quelques caresses, un peu d'arrière-plan et du texte sur 12 boulons noirs, Maintenant, allons vérifier la quantité. C'est le numéro un. Vous pouvez maintenant voir sur la page comment il est rendu. Et continuons avec le bouton. Ainsi, le bouton indiquera en fait par moins avec le nom de la classe, le texte Excel. Fermons le texte et le bouton lui-même. Aucune fonction de clic pour le moment, nous allons simplement ajouter du style, et le style sera en arrière-plan à 500. Lorsque nous le survolerons, il figurera arrière-plan 700 texte sur blanc, pour les caractères gras, un peu de literie Quoi d'autre ? Arrondi en haut à gauche, grand. Voilà, entrons dans cette division et augmentons cette marge de quatre en bas jusqu'à 12. Maintenant, consultez la page, et voici à quoi ressemble notre carte de produits alimentaires. Passons au code VS, changeons la quantité à zéro. Et voici à quoi cela ressemblerait si nous n'avions aucun article sur notre carte. 21. Contexte du panier: Explorateur de fichiers, et là nous allons créer un nouveau dossier dans notre interface. Cliquez dessus avec le bouton droit de la souris, sur Nouveau dossier, nommez-le Context. Dans le contexte, nous allons créer le contexte de la carte, faire Jasix, nous allons accéder aux fonctionnalités de notre carte Dans le contexte des cartes, nous allons commencer par importer. Importez donc, réagissez, créez un contexte, puis utilisez le contexte. Faisons en fait à partir de React , puis vous énoncez et utilisez l'effet. Ensuite, nous allons créer un nouveau contexte pour la carte, donc un contexte de carte constant. Cela permettra de créer un contexte. Ensuite, nous allons créer un hook pour utiliser le contexte de la carte, donc exportez la carte à usage constant. Ainsi, utilisez le contexte pour cartographier le contexte. Ensuite, nous allons créer un composant fournisseur qui encapsulera l'état et les fonctionnalités de la carte Nous pouvons donc faire appel à leur fournisseur de cartes d'exportation. Ce seront les enfants qui participeront. Et là, nous allons commencer par définir l'état dans lequel les éléments de la carte doivent être conservés, et nous l'initialiserons à partir du stockage local Ainsi, les éléments de carte constants définissent les éléments de carte. Vous déclarez qu'il y aura des données locales constantes et nous vérifierons le stockage local des éléments de la carte, le cas échéant. Ensuite, nous retournerons les données locales avec des parties JSON Nous transmettrons donc le JSON stocké aux données locales ou nous retournerons un tableau vide. Analysons les données locales ou le tableau vide. Quoi d'autre maintenant ? Nous allons créer un effet d'usage. va de même pour mettre à jour le stockage local lorsque les éléments de la carte seront modifiés. Donc, si nous cliquons sur le bouton « Plus » sur nos articles, ceux-ci seront ajoutés à une carte. Effet d'utilisation. Je vais y faire du stockage local, élément par article. Jason stringifie les objets de la carte. Et là, nous allons mettre le tableau avec des cartes. Ensuite, nous allons créer les fonctions d'ajout de l'article à la carte. Donc, const add to card input sera item, et nous devrons y définir les éléments de la carte Aperçu des éléments, élément constant dans la carte. Nous allons maintenant trouver les articles sur une carte, donc passer en revue les articles ne les trouve pas. Son identifiant est égal à l'identifiant de l'article. Et si l'article est sur la carte, ce sera vrai. Nous allons augmenter la quantité. Donc, retournez la carte à points des articles d'évaluation. Et là, déplaçons-le un peu, e point ID, m point ID. Je quantité, et maintenant nous allons ajouter donc la quantité I plus un incrément par un Nous pouvons le fermer là, et nous en ajouterons également d'autres. Donc, si l'article n' existe pas, nous le ferons. Sinon, si l' article n'existe pas, nous vous retournerons les articles avec la première quantité. Nous aurons maintenant besoin d' une autre fonction, et ce sera une fonction de suppression. Retirez donc constamment de la carte. Nous y saisirons l'identifiant. Et à l'intérieur, nous allons placer les objets de la carte pour les récupérer. Ensuite, nous le retournerons et nous cartographierons l'article. Et nous devrons y inscrire le point ID, l'ID de l'article. La quantité d'articles signifie la quantité d'articles moins un. Ainsi, lorsque cela sera appelé, il retirera l' article de la carte. Nous y ajouterons également le filtre. Cela filtrera donc les articles dont la quantité est nulle ou négative. Filtrez donc la quantité d'articles au-dessus de zéro. Ensuite, nous ajouterons la fonction suivante, qui permettra de réduire le nombre d'articles sur la carte. Il y aura donc une diminution constante de la quantité d'articles sur la carte. Nous y enverrons la pièce d'identité. Là, nous utiliserons, à nouveau, les éléments du set de cartes. Nous retournerons à nouveau les articles prévisualisés, puis nous cartographierons l'article, vérifierons l'identifiant et indiquerons que la quantité de l'article est supérieure à un. Et là, nous diminuerons la quantité au cas où, oui, donc la quantité de l'article moins un, et là, nous disons que nous retournerons l'article tel quel au cas où ce ne serait pas celui que nous ajustons. Nous allons donc continuer là avec également le filtre. Nous filtrerons l'article et nous filtrerons les articles dont la quantité est nulle. Donc, si la quantité d'articles est supérieure à zéro. C'est vrai, c'est exact. Nous pouvons continuer avec la fonction Clean Card. Donc, effacez la carte et là, nous placerons les éléments de la carte dans un tableau vide. LocalStorage ne supprime pas les éléments de la carte. De cette façon, nous retirerons les éléments de la carte de la mémoire locale et la fonction d'effacement de la carte sera terminée. La dernière chose que nous allons faire est de mettre le fournisseur avec la valeur contextuelle de la carte à la disposition de tous nos enfants. Retournez donc le fournisseur de contexte et la valeur de la carte comme ceci. Articles de la carte, ajoutez-les à la carte, retirez-les de la carte, réduisez la quantité d'articles et effacez la carte. Fermons-le. Et voilà, passons aux enfants. Maintenant, sauvegardons-le. Ce que nous devons faire maintenant, c'est aller sur main.j6 Nous y enverrons notre demande auprès de ce fournisseur de cartes. Là, nous ferons office de fournisseur de cartes. Il y sera importé. Maintenant, prenez l'application. En fait, nous aimons ça, cela devrait ressembler à ce que maintenant, nous avons intégré l'application dans le fournisseur de cartes, puis dans le fournisseur de snack-bar et dans le routeur du navigateur. Maintenant, nous le sauvegardons. Nous revenons à la carte individuelle alimentaire. Enfin, nous pouvons importer le contexte de la carte. Ce que nous allons faire, c'est importer Utiliser la carte à partir du contexte réel , du contexte de la carte. Sauvegardez-le, et nous pouvons commencer. Donc, tout d'abord, nous allons faire un article constant sur la carte. Nous utiliserons les éléments de la carte tels que nous pouvons maintenant les trouver et nous trouverons l'identifiant point de l'article. Avec identifiant Food Dot. Ensuite, nous avons là la quantité. Nous allons donc simplement remplacer le zéro par un article sur la carte. Point d'interrogation, article en carte, quantité. Dans le cas contraire, zéro. Ce qui se passe là-bas, c'est que nous déterminons la quantité de l'article actuel sur la carte. Et bien sûr, nous devons charger les opérations de la carte à partir du contexte de la carte, donc const, ajouter à la carte, également supprimer de la carte et les éléments de la carte équivalent à utiliser la carte Maintenant, sauvegardez, ça devrait aller. Nous avons donc les produits alimentaires actuels la carte que nous sommes en train de vérifier. Également la quantité de l'article actuel sur la carte, et nous pouvons passer à de nouvelles fonctions que nous définirons dans notre carte unique alimentaire.j6 Commençons donc le traitement constant à deux cartes avec cette fonction, nous allons gérer l' ajout à la carte. Là, nous allons simplement ajouter à la carte et y envoyer notre nourriture. va de même pour la manipulation du retrait des aliments de la carte, nous allons manipuler, retirer de la carte et retirer de la carte. Là, nous allons simplement coller l'identifiant alimentaire, et ça devrait être tout. Maintenant, cela devrait fonctionner pour nous, mais ce ne sera pas le cas. Et cela ne marchera pas parce que nous n'avons pas la carte 22. Icône de panier: Nous allons modifier tout de suite. Ce que nous devons faire, c'est examiner nos composants. Nous allons créer un nouveau dossier, la carte Pon J six. Nous allons maintenant procéder à l'implémentation, et nous utiliserons d' abord la carte d'utilisation du contexte, puis l'icône de la carte B de l'icône de réaction. Créez une constante pour les éléments de la carte que nous chargerons depuis UseCard, puis nous nous occuperons la qualité totale car nous l'indiquerons sous forme de petit nombre sur notre icône Donc quantité totale. Ce seront des articles en carte afin de réduire le total de l'article, total plus la quantité d'articles, à zéro. Cela calculera la quantité d' articles sur notre carte, et le numéro sera affiché. Alors maintenant, en retour, nous pouvons utiliser DIFF, nous allons faire le relatif Ensuite, nous utiliserons l' icône bicard avec un nom de classe de texte Excel gratuit et des textes blancs pour le moment Nous le fermerons ci-dessous, nous devrons la quantité totale. Et si c'est vrai, ce sera supérieur à zéro. Donc, s'il est vrai que la quantité sera supérieure à zéro, nous indiquerons le chiffre. Nous allons donc utiliser le Spenta , nous indiquerons la quantité totale et nous ajouterons un style Ce sera donc absolu. Ce sera un moins le haut moins deux. Le fond rouge sera de 500. Le texte sera blanc pour le moment, arrondi car il s'agira d'un cercle, d'un texte plus petit et d'un peu de rembourrage Nous n'avons pas ajouté cette icône de carte, en fait à la barre de navigation. Passons donc à la barre de navigation. Là, nous ajouterons un lien vers la carte et il y aura l'icône de la carte, cliquez sur Entrée ou appuyez sur Entrée et elle y sera importée. Maintenant que vous pouvez le voir sur notre page, je vais ouvrir la page. Alors que je clique sur les points positifs, rien ne se passe. Voyons ce qui ne va pas. Et bien sûr, il n'y a peut-être même rien de mal car pour l'instant les fonctions OnClick n'ont pas été ajoutées aux tests Donc, bien sûr, il y aura OnClick. Pour le moins, la poignée sera retirée de la carte sur le plus, il faudra cliquer sur la poignée, ajouter à la carte. Sauvegardons-le. Nous pouvons maintenant le tester. Le brief n'est pas défini. Le problème se trouve donc à la ligne 19. C'est peut-être à cause de ce point. Sauvegardons-le. Maintenant, nous allons simplement rafraîchir la page. Et ça a l'air de fonctionner. La seule chose est que nous avons déjà quelque chose sur notre carte, et il semble qu'il n' y ait pas exactement de verso avec le code, mais nous avons simplement enregistré un exactement de verso avec le code, élément dans le contexte de la carte, et maintenant que nous n'utilisons pas directement cette fonction de carte transparente actuellement, nous ne pouvons pas l'effacer. Si nous voulons l' effacer juste pour le moment, afin de l'effacer, nous pouvons simplement effacer la carte, faire la constante rapide, effacer la carte. Videz votre panier. Utilisez-le maintenant, vous n' avez même pas besoin de me suivre. Je vais juste clarifier les choses. Maintenant que vous cliquez dessus, il sera effacé. Maintenant, nous allons simplement le changer à nouveau. Alors manipulez-le en carton. Nous allons supprimer cette carte effacée, supprimer à partir de là, l'enregistrer. Maintenant, si nous revenons à notre page, nous l'aurons nettoyée comme ça et nous essaierons d'ajouter des articles, que ça compte, et nous pourrons également les retirer de la carte. Maintenant, avant de passer au codage d'un composant de carte, nous allons y aller par pages. Nous allons créer un nouveau fichier et nous allons créer contact.j6. Ensuite, nous ferons ensuite l'export dans JSix . Pied de page et contact. Ajoutons-les maintenant à notre application. Donc, dans Abid J six en bas de cette première application de retour, nous allons en dessous des itinéraires, faire le pied de page, appuyer sur Entrée, donc c'est importé, puis nous y copierons un itinéraire, et nous mettrons le contact De plus, l'URL sera contact. Nous allons le sauvegarder. 23. Pied de page: Nous allons maintenant coder d'abord le pied de page, puis un composant de contact Nous allons donc passer au pied de page. Nous y utiliserons quelques icônes. De React Icones AI. Et nous aimerions avoir Instagram, peut-être aussi Facebook. Ensuite, nous pouvons commencer. Il n'y aura donc pas de fonctions comme le pied de page, il y aura juste quelques divs Nous allons donc ajouter un div principal. Nous y ajouterons un PDingPdding par le haut. Nous y ajouterons une autre division. Ensuite, nous ajouterons un peu de pédalage, centrez-le sur un écran plus petit et au-dessus, nous modifierons le rembourrage ou le rembourrage horizontal, écran plus grand, nous recommencerons , pour qu'il soit plus réactif Nous y trouverons un mix with. Et avec ce mix, c'est pourquoi nous le centrons également sur Mix Auto Ensuite, j'y ajouterais notre logo. Le logo de mon entreprise est donc Quick Deli. J'y ajouterais un peu de style, donc du texte en noir, de la police en gras et du texte dans Excel. Ensuite, je faisais les divs. Et dans ces divs, je vais garder, aider, Colum puis devenir partenaire, puis me joindre à nous pour un peu de ressources humaines, etc. Et puis j'ajouterai également les icônes et ainsi de suite. En fait, je vais déplacer un peu la page pour que vous puissiez mieux la voir, et je vais la déplacer là. Je vais faire défiler la page vers le bas, vous pouvez déjà y voir le logo. Maintenant, nous allons continuer. Dans la première section, nous ajouterons un paragraphe avec aide et une liste modifiée avec un élément de liste d'assistance ou un élément de liste de questions et réponses À l'aide, nous allons faire passer le texte semi-boolt en noir. Pour le support, nous ferons ou la liste désordonnée, nous ferons de la marge vers le haut, certain espacement vertical entre les éléments ou les éléments de la liste Et ne faisons pas de la couleur noire, mais du texte en gris. Maintenant, en ce qui concerne les éléments de la liste, nous les mettrons dans la technologie Anchor, et cela pourra ensuite nous mener à une autre page que vous y définirez. Permettez-moi de copier cette ancre même là. Et maintenant, nous allons prendre ce voltif. Nous le copierons également pour les partenaires et également pour les ressources humaines. Joignez-vous à nous, et ce sera tout. Nous y trouverons donc des partenaires et nous pourrons faire en sorte que nos partenaires Silver et Platinum se joignent à nous. Il y aura donc un lien vers les ressources humaines et les offres d'emploi. Et ce sera en fait il y aura une plongée supplémentaire là-bas. Et à l'intérieur de cette section, nous aurons ce logo avec les liens. Maintenant, il va falloir que je le stylise un peu. Alors laisse-moi le faire maintenant, ce sera comme ça. Oui, c'est exact. OK. Et ce DIF aura nom de classe d'une grille parce que nous utiliserons une disposition en grille, et la grille s'affichera aussi sur un écran moyen et plus encore. Il aura une grille ChromSF, Il aura une grille ChromSF un écart vertical que nous pouvons définir à 12 et un écart horizontal, que nous pouvons également définir Maintenant, sauvegardons. On dirait que tout va bien. Maintenant, ci-dessous, nous pouvons commencer par les icônes. Voilà, je vais mettre une certaine marge en haut de la page. Utilisons donc 20. Je vais y faire une liste non ordonnée qui contiendra les éléments de la liste avec un texte d'ancrage Et dans ces balises d'ancrage, je vais faire remplir l'IA. D'abord Instagram. Le deuxième sera pour Facebook. L'IA échoue donc à Facebook. Ensuite, Anchor Tech aura une HRF que vous pourrez régler, mais je n'y mettrai rien pour le moment Et aussi, je vais ajouter un peu de classe à la liste non ordonnée. Donc mise en page Flexbox, Gap to five, text to white. Quoi d'autre ? Textez trois, Excel, marge vers le bas, et réinitialisez-le sur l'écran moyen et au-dessus. Vous ne pouvez pas avoir de texte en blanc. Vous avez besoin d'un texte pour ensuite ajouter un autre élément ou une liste dans laquelle nous pouvons simplement copier ces éléments de liste, mais nous supprimerons ces icônes et y ajouterons une politique de confidentialité et des termes et conditions. Un peu de style, lin, Gap Six, texte gris. Eh bien, restons en noir, comme pour les icônes. Et tout cela, nous aborderons également sur un écran plus petit et au-dessus, mise en page du livre en lin, les éléments au centre, et sur un écran plus petit et plus encore. Donc, espace vertical ou désolé, horizontal jusqu'à six. Maintenant, sauvegardez-le. Regarde , ça ressemble à ça. Je pense que ça a l'air bien. Peut-être que ce que nous pouvons faire, c'est le faire entre les deux. Ce sera donc pour le pied de page. 24. Contact: Dans le composant de contact, nous allons nouveau importer l' image du restaurant. Je vais donc utiliser le fichier assets restaurant one point PNG. Je l'ai là. Donc, pour la classe principale, nous garderons un poids maximum de 1 400 pixels. Nous allons également le centrer. Nous ajouterons une marge en haut et nous ajouterons de la literie. Ensuite, à l'intérieur, nous aurons un div qui aura un nom de classe avec une disposition en grille. Sur un écran moyen ou supérieur, nous définirons les colonnes deux, deux et un certain écart. À l'intérieur, nous aurons un premier espace qui contiendra les informations de contact, savoir le téléphone, le nom et l'e-mail, puis nous aurons l' adresse à côté. Centrons donc également cela. Nous y aurons le titre. Contactez-nous. Plus de style. Donc du texte dans Excel, la police en gras et de la marge en bas jusqu'à quatre. Maintenant tu ne peux pas le voir. Ce que nous devons faire, c'est sur notre page, cliquer sur Contact. Cela nous mènera à la page. Maintenant tu peux le voir à nouveau. Et ci-dessous, contactez-nous, nous aurons une balise de paragraphe. Dans cette balise de paragraphe, nous aurons le contact à Quigdali Viens. Et nous y aurons un tag Spen, qui indiquera e-mail Ajoutons d'abord un style à la balise de paragraphe. Nous allons donc utiliser du texte de grande taille, avec une marge en bas. Pour le Spenteg, nous ajouterons également un peu de style, donc le téléphone est semi-verrouillé et je pense que ce Nous pouvons maintenant le copier car nous allons afficher l'e-mail. Ensuite, nous vous montrerons le téléphone et le nom du restaurant. Donc, d'abord, il y a un e-mail, puis il y a un téléphone, puis il y a un nom. Le nom sera donc Quick Deli. Stro, alors nous aurons leur numéro de téléphone. Comme ça. Quoi d'autre ? Sinon, nous ajouterons en dessous de ce div avec ces premières informations, un autre div, pas des fragments vides, un autre div. Et ce div contiendra l'adresse. Nous allons donc faire cela dans la deuxième rubrique. Attendre. Adresse et ci-dessous, nous aurons des paragraphes, et il s'agira du paragraphe ou de la rue, de la ville et du pays. Utilisons donc une adresse là-bas. Je vais faire 123, rue de Berlin, puis code postal, Berlin et Allemagne. Ensuite, je centrerais ce mix Auto. Pour le titre 2, je vais laisser un texte plus gros pour le mettre en gras et le fusionner en bas. Pour la rue, j'ajouterai du texte en grand et une marge en bas. Pareil là-bas. Mais sans pays, sans marge. Donc, il suffit de gros texte comme celui-ci. Et le dernier mot que nous ajouterons, ce sera l'image. Mais pour un meilleur style, ajoutons tout cela à un autre div. Nous allons le mettre dans cette section. Un peu d'ombre l'entoure et quelques caresses. Et là, dans ce dith , mais en dehors de celui-ci, nous ajouterons l'image Permettez-moi de le styliser un peu mieux. Et cette image contiendra la source du Resta Run, ou ce sera un esta et nous ajouterons quelques classes, alors arrondissez-la à Excel avec l'objet complet à couvrir, marge vers le haut, enregistrez-la Et maintenant, nous allons consulter notre page ou la section contact. Et je pense que c'est parfaitement bien. Nous avons donc le pied de page que nous venons de créer, la section contact. Maintenant, nous rentrons chez nous. 25. Panier: Et je pense que nous pouvons aller coder la carte. Maintenant, créons-le. Donc, nouveau fichier card.j6. Utilisons-y un modèle avec exportation. Passez à Epic J six. Nous y ajouterons la carte. Donc, voilà la carte, entrez, et le chemin est carte, enregistrez-le. Revenir au composant de la carte. Nous allons donc d'abord importer certaines choses. Nous allons importer la carte d'utilisation depuis le contexte de la carte. Donc, en fait, encore une fois, le contexte, le contexte de la carte. Ensuite, nous allons importer les exilés , puis nous voudrons également importer les icônes Encore une fois, comme sur la page d'accueil ou sur le composant unique alimentaire, nous allons importer l'icône B plus et l'icône moins. Parce que nous aurons également la fonctionnalité de supprimer quelque chose d'une carte. Ensuite, nous commencerons par une constante, puis nous accéderons aux depuis le contexte de la carte, même en diminuant le nombre d'articles de la carte et en ajoutant à la carte d'utilisation de la carte. Sympa. Ensuite, nous allons afficher un message dans le boîtier, la carte sera vide. Donc, si la longueur des éléments de la carte est nulle, nous renverrons un div indiquant que votre carte est vide. Et ajoutons du style à ce div ou à ce texte, votre carte est vide. Nous ajouterons du texte en noir, du texte trois Excel, texte au centre et une marge verticale. Alors maintenant, vous pouvez le voir là-bas. Votre carte est vide. Nous l'avons sur la page car la carte est vide. Et si vous modifiiez quelque chose avec un bouton plus sur la page d'accueil, il ne serait pas vide, bien sûr, mais il ne s'afficherait pas non maintenant car nous n'en avons toujours pas la fonctionnalité. Commençons par l'interface utilisateur dès maintenant. Nous allons donc commencer par le Mandi, qui aura un peu de literie, une marge par le haut, un certain poids de mixage, car nous sommes habitués à pixeliser 1 400 pixels et à le centrer avec AMC Auto Ensuite, nous aurons leur titre, leur panier. Nous y ajouterons un peu de style, par exemple du texte dans Excel, du texte en demi-boulon au centre et à la marge verticale Ci-dessous, nous ajouterons un div. Ce div sera ou nous utiliserons une disposition en grille, deux colonnes de grille, mais à partir d'un écran moyen ou supérieur, nous n'avons pas besoin de définir une colonne de grille car c'est la valeur par défaut sur l'écran mobile. Et sur un écran plus grand, nous utiliserons les trois colonnes de la grille et nous ajouterons un peu d'écart. Nous allons commencer par récupérer les objets de la carte. Ainsi, les éléments de la carte parsèment la carte, l'élément et l'index. Nous recevons les articles de la carte, et pour chaque article de la carte, nous créerons une carte sur laquelle nous indiquerons ses informations. Commençons donc par le dif. Clôturons également cela dans cette division, nous allons faire un index clé, nous allons faire un index clé et aussi le nom de la classe, le fond blanc arrondi, grand, une ombre autour de l'élément, peu de rembourrage et une colonne de direction de flexion Utilisons donc la mise en page Flexbox. À l'intérieur du div, nous mettrons d'abord l'image du produit. La source sera donc l'image à points de l' article. Ensuite, tout sera le nom du point m, et le nom de la classe sera arrondi à la valeur moyenne, de la marge au bas, de la largeur à 64, de la taille à la hauteur totale à 64, grande à quelque chose de plus grand et de l'objet à couvrir. Nous pouvons maintenant continuer, donc en dessous de l'image. Nous connaîtrons son nom. Utilisons-leur donc le nom du point. Nous allons ajouter un peu de style. Le texte est donc trop grand, la police est trop grande pour le boulon et la marge vers le bas. Nous allons maintenant le sauvegarder. Nous allons aller sur notre page. Nous rentrerons chez nous. Nous allons cliquer dessus. Nous irons chez Card et nous pourrons y voir l'article. Alors maintenant, nous serons en mesure de le styliser correctement. Maintenant, nous pouvons continuer. Donc, sous le nom de l'article, nous ferons la technologie des paragraphes, et là, nous indiquerons le prix en centimes. Nous allons donc fixer leur prix. Nous allons faire le signe du dollar parce que mon prix sera en dollars. Ensuite, j'ouvrirai leurs bretelles bouclées. À l'intérieur, je vais mettre le prix de l'article en centimes divisé par 100 parce que je veux le montrer en dollars et en points pour en fixer deux. Donc, deux valeurs plus douces. Et je vais ajouter un peu de style, donc du texte au format moyen, et une marge vers le bas. Maintenant, vous pouvez voir sur la page le prix. Maintenant en dessous du prix. J'ajouterai DIV. Encore une fois, le DIV n'a pas été ouvert. Je vais ajouter un peu de style. Je souhaite utiliser la mise en page Flexbox, les éléments à centrer, les justifier entre les deux Il y a donc l'espacement entre les éléments, texte au moyen et la marge au bas. Sauvegardez-le. J'y ajouterai le premier paragraphe. À l'intérieur, j'ajouterai la quantité et la quantité de l'article. Ensuite, nous aurons le bouton pour diminuer ou augmenter la quantité de l'article. Donc, en dessous de la quantité, nous allons créer un nouveau di. Dans ce plongeon, nous aurons deux boutons. Il y en a un, il y en a un deuxième. Ensuite, le style de ce diff sera flexible. Donc, disposition de la boîte flexible et éléments à centrer. Le premier bouton indiquera l'icône Acheter moins. Et le deuxième bouton sera l'icône B plus. Pour la première icône, il y aura une fonction n click, qui indiquera « diminuer le nombre d'articles sur la carte », avec un identifiant à m points. Ensuite, nous pouvons le faire sur la deuxième ligne ou même là-bas. Nom de la classe, il y aura un arrière-plan, rouge, 500 sur Hering, ce sera un arrière-plan, rouge, 700 textes seront blancs, la police sera en gras Le rembourrage arrondi sera donc grand. Et je pense que ce sera tout. Pour le second bouton, on peut simplement copier ce verre. Il y aura donc un clic, et cela signifiera que nous voulons ajouter à la carte l'élément ci-dessous, nous ajouterons le nom de classe que je viens de copier, mais nous y changerons la couleur rouge en vert. Maintenant, nous pouvons le voir là-bas. Ce que nous allons également faire, c'est que maintenant, si nous l'enregistrons, nous pouvons le tester sur la page afin que vous puissiez voir la quantité augmente ou diminue. Et il y en a aussi sur la carte. Continuons en y ajoutant le prix total de la carte. Donc, en dessous de ce div, nous allons faire un nouveau div. Nous y ajouterons le nom de classe du texte au centre et une marge par le haut car il contiendra la technologie du paragraphe avec le prix total en dollars. Nous y ferons le prix total divisé par 100. Nous obtenons donc les dollars au lieu d'un cent et deux en ont fixé deux. Nous obtenons donc deux valeurs. Ensuite, au cas où il ne serait pas arrondi, nous ajouterons du texte à Excel, et nous devons définir un prix total, et nous le ferons au-dessus du rendement et en dessous. Le prix total constant est donc réduit par le point des articles en carte Je compte les articles que nous allons compter, donc le prix en cents le multiplie par la quantité d'articles et zéro. Cela permettra donc de calculer le prix des articles en carte. Comme ça. Maintenant, sur notre page, vous pouvez voir que le prix est de 66€. Mais lorsque nous retirons un article d'une carte, il y en a 44 ou 22. Ajoutons un bouton qui servira à gérer le paiement. Ensuite, nous continuerons à coder la fonction handle checkout, et nous devrons implémenter le stripe. abord, nous allons utiliser le bouton, pour qu'ils soient toujours dans cette section, mais en dessous ce paragraphe, nous aurons un bouton qui indiquera « passer au paiement ». Il y aura une fonction onclick pour gérer le paiement que nous n'avons pas encore. Nous allons le coder immédiatement. Les noms des classes seront écrits en blanc sur le tableau, et pour plus de style, nous devrons le voir. Faisons donc maintenant une fonction là-bas. Poignée Tong, vérifiez la fonction asynchrone. Sauvegardez-le. Maintenant, laissons-le vide. Nous allons le coder dans une minute. Finissons le style des boutons. Nous allons donc ajouter de la literie, verticale et horizontale, des coins arrondis, un dégradé de fond à droite. Et il passera du vert à 600. Passons à la ligne suivante. Comme ce vert, je ne sais pas, 700. Et lorsque nous passerons le curseur, ce sera du vert 800 au vert 900 Sauvegardons-le. Et vérifions le bouton. Maintenant, peut-être que pour le paragraphe, nous pouvons placer un peu de marche dans les quatre derniers. Nous pouvons augmenter le texte en Excel. Nous pouvons faire un semi-démarrage des polices. Et pour le paiement, nous pouvons peut-être augmenter le Y au bâton à quatre et les paris X à huit Et nous pouvons augmenter la taille du texte, du texte. Peut-être aussi pour Excel. Excel suffira. C'est ça. Oui, c'est mieux. Mais sur notre page, nous ne pouvons pas supprimer l'article en diminuant la qualité. Revenons donc au code. Et là, nous devrons passer au contexte des cartes, car c'est là que réduction de la quantité d' articles en carte fonction de réduction de la quantité d' articles en carte est définie. Et je pense que nous allons simplement essayer d'ajouter les égaux. Ainsi, lorsqu'il est supérieur ou égal à un, nous pourrons le diminuer. Passons maintenant à la page. Nous pouvons donc encore ajouter que les chiffres augmentent. Et là, si on le diminue, il est supprimé du 26. Stripe: Nous y aborderons la fonction Handle Checkout. Et pour cela, nous devrons d' abord nous connecter et obtenir les secrets et les clés ABI auprès de Stripe. Nous allons ouvrir stripe.com et cliquer sur Démarrer. Maintenant, une fois que vous êtes sur la page, vous allez cliquer sur les clés d'API pour les développeurs. Alors, rentrez chez vous. Ou là, je pense que c'est disponible auprès de certains développeurs de paramètres clés d'API pour les développeurs. Cliquons dessus, et vous verrez que nous avons la clé publiable et la clé secrète Et pour l'instant, nous nous intéressons à ces deux-là. Suivez-moi maintenant. Cliquez pour copier cette clé publiable, revenez au code VS Ensuite, sur la carte A six en haut du fichier, là, nous allons faire const stripe promise, load stripe Nous y collons la clé publiable. Ensuite, nous allons révéler la clé de test et cliquer pour copier, revenir au code VS. Nous allons maintenant passer aux variables d' environnement, mais pas dans le dossier frontal, mais dans le dossier principal. Là, nous allons faire secret P de Stripe soit égal à cette clé. Sauvegardez-le. maintenant à l'accès à D, maintenant nous allons y aller via les webhooks. Nous allons cliquer sur Tester dans un environnement local, et nous y trouverons le guide sur ce que nous devons faire pour configurer le strip pour les webhooks Nous devons donc d'abord télécharger le client dans lequel vous allez sélectionner votre système pour répondre à Windows. Là, je téléchargerai ce fichier Zip depuis Github. Vous le décompresserez, puis vous ouvrirez le dossier, puis vous ouvrirez les variables d' environnement sur votre ordinateur et vous y ajouterez un chemin vers ce fichier point x. Vous allez ouvrir votre terminal. Vous y écrirez une bande, et vous obtiendrez cette information. C'est ainsi que nous saurons que vous avez correctement installé le client. Là, nous reviendrons sur cette page. Ensuite, nous y mettrons cette première commande, Stripe Login. Nous allons copier l'URL, l' ouvrir là, là nous verrons le mot. Nous cliquerons sur Lo Access et l'accès sera accordé. Maintenant, si nous revenons à cette page, nous verrons que c'est terminé. Ce que nous allons faire maintenant, c'est copier cette commande, et c'est la prochaine que nous allons coller. Mais n'oubliez pas que nous devons remplacer cet hôte local 3 000 hôtes que nous utilisons ou par n'importe quel hôte local sur lequel vous vous trouvez, c'est-à-dire votre backend. Il ne s'agit donc pas de votre interface mais de vos URL principales, et puis notre serveur fonctionne sur 3 000 Copions donc ceci et changeons-le en valeur 3 000. Donc ça ressemble à ça. Stripe Écoutez avec impatience le webhook Local Host 3,000. Entrez maintenant. Et nous obtiendrons le secret de signature de ce webbook, afin de pouvoir le copier et nous passerons à notre code VS Et dans notre code VS, nous allons à nouveau créer une nouvelle variable d'environnement dans le dossier Bed. Stripe Web Book, secret est égal à ce que nous avons obtenu du terminal. Maintenant, même la vérification est terminée, ce qui est très bien. Maintenant, cela devrait fonctionner. Nous pouvons également le faire pour les tests, copiez-le. Nous l'appellerons depuis le terminal, et nous avons réussi. Cela signifie que nous pouvons continuer maintenant dans notre code VS. Nous allons donc retourner au CART et nous devrons installer la bande. Dans notre code VS, dans un terminal, nous en ouvrirons un nouveau, le front-end CD, et là nous ferons du NPM sur Stripe StripJZ Nous allons l'installer. Maintenant, nous l'avons. Nous pouvons y fermer le terminal sur la carte. Nous allons importer la bande de charge à partir de la bande Stripe Jz. Maintenant, ça devrait aller. Et c' est important parce que nous allons utiliser cette promesse rayée. Nous allons maintenant nous occuper du paiement. Donc, d'abord, nous allons utiliser Stripe et attendre que Stripe s'initialise Nous devrons donc nous y soustraire jusqu'à ce qu'il tombe en panne et nous utiliserons la promesse de Stripe Nous venons de nous y déclarer. Ensuite, nous poursuivrons la transformation constante. Permettez-moi également de le fermer comme ça. Les articles transformés en articles en cartes cartographient le deuxième article, et là, nous allons attribuer le nom à l'article, le nom du point , le prix l'article dans un sens, le prix de l'article dans un sens, nous le transformons de notre carte en bande réelle et aussi de la quantité en une quantité d'article. Génial Nous allons maintenant continuer avec un block try catch. Dans un bloc tri, nous allons d'abord commencer par la vérification. Nous devrons donc récupérer le jeton depuis le stockage local. Ensuite, nous créerons une réponse. Nous allons donc envahir Axios et utiliser un chemin que nous devrons définir dès maintenant, à une session de création de paiement Passons maintenant au backend. Nous allons ouvrir le point d'index JS. Tout d'abord dans index DJs, nous allons ouvrir un terminal Nous ferons CD Bend, nous ferons NPM, I Stripe Nous pouvons également ouvrir un robinet avec le terminal sur lequel fonctionne notre serveur, afin de nous assurer qu'il n' y a pas d'erreur. Nous y ferons abord l'initialisation de la bande avec notre clé secrète Donc, la bande C est égale à une nouvelle bande, cliquez dessus ou appuyez dessus. Vérifions maintenant qu'il est importé. C'est le cas. Et là, nous allons traiter la clé secrète à bande N que nous avons dans nos variables d' environnement Bend. Également avec le Webookygrade que nous utiliserons un peu plus tard. Et nous allons commencer par l'itinéraire. Ce sera donc un moyen de créer une session de paiement par bandes. Et dans cet itinéraire, nous allons commencer par Epi point post. Nous y utiliserons Create checkout session, une session synchrone avec la réponse à la demande dans Et d'abord, nous allons obtenir le produit et un client, donc demandez constamment le produit et le client par e-mail à Bladdy , puis nous cartographierons le produit pour aligner les articles pour Stripe Donc, les articles, la carte des points du produit avec le produit là et là, nous verrons le champ. Donc, données de prix, devise, je vais y définir les données du produit en USD. Je vais définir le nom, qui sera le nom à point du produit. Le montant unitaire compadre sera le prix au point du produit en cents. Et il y aura la quantité, et il y aura la quantité par points du produit. Sous les éléments de ligne, nous allons sérialiser les détails du produit pour les inclure dans les métadonnées Nous allons donc sérialiser les détails de nos produits en permanence. Nous devrons le stringifier, donc la carte à points des produits, le produit s'y trouve, ouvrir celui-ci, et nous ferons le nom, le nom du produit, la quantité, la quantité du produit et le prix du produit point par point Fois 100. Nous allons maintenant essayer Catch Block. Dans un bloc d'essai, nous créerons une session de paiement avec les paramètres spécifiés. Donc, session constante et attendez Stripe point checkout point session point Create. Nous devrons y mettre les informations. aura donc d'abord les types de méthodes de paiement par carte. Les articles seront les articles que nous venons de créer. Les données de méthode seront les détails du produit, les détails du produit seront sérialisés, mode sera le paiement, l'e-mail du client, l'e-mail du client, la collecte de l'adresse de facturation sera requise Nous définissons ici ce que nous attendons d'un client pour remplir la bande. Vous allez également définir une URL de réussite et une URL d'annulation. Et ces deux URL sont quelque chose que nous devrons coder, car l'URL de réussite est la page sur laquelle nous serons redirigés une fois que nous aurons payé les produits avec succès, ou la page d'annulation sera la page en cas d'échec Nous pouvons donc maintenant y mettre les URL de ces pages et coder les pages elles-mêmes. Utilisons des barres obliques inverses. Et là d'abord, nous allons commencer par le front et l'URL. Nous devons vérifier les variables d' environnement. Nous ne l'avons pas là, nous allons donc commencer par le front et l'URL. Dans notre cas, l'hôte HDDph Loco 5173. Sauvegardez-le. Nous allons maintenant l'utiliser là-bas. Donc, signe du dollar, ouvrez les accolades, traitez les variables d'environnement à points, point frontend, URL, barre oblique, L'identifiant de session en forme de point d'interrogation est égal à l'identifiant de session de paiement. Et pour l'URL d'annulation, nous utiliserons à nouveau la même chose, variables d'environnement de traitement, URL frontale, mais avec une barre oblique sur Annuler. Et ce sera tout parce que sur une page d'annulation, nous n'avons pas besoin d'identifiant de session de paiement car nous n'y écrirons aucune information connexe. Il y aura simplement un échec de paiement ou vous l'aurez annulé, passerez à une page d'accueil, etc. Et nous devons supprimer la page de réussite et la page d'annulation. Avant de le faire, nous répondrons avec l'ID de session . Nous allons donc définir la réponse avec l'ID de point de session JSON d. Et en guise de capture, nous allons faire une erreur de point sur la console. Impossible de créer une session de paiement. Message d'erreur et état de réponse 400 avec message JSON. Erreur lors du râpage. Une session de paiement. Maintenant, enregistrez-le ici dans les pages. Nous allons créer un nouveau fichier, qui sera un .j6 et un kanso.j6 réussis. Faisons-y Export. Ajoutons-les à Abito J six. Donc, il y a succès et annulation. Maintenant, nous pouvons passer au CAD et terminer la mise en œuvre du handle checkout. Donc, dans le post d'Exiles, nous ferons HTTP, Localhost 3,000 slash CRE Checkout Session et nous enverrons aux produits des articles transformés Ensuite, les en-têtes, l'autorisation doit être jeton et la redirection vers le paiement à bande. Donc, si l'identifiant des données de réponse est vrai, nous éviterons le point rayé redirigerons vers le paiement. À l'intérieur, nous allons mettre l'identifiant de session avec l' identifiant du point de réponse, et ce sera tout. Nous y ferons également autre chose. Donc, en cas d'échec, nous allons dessiner une nouvelle erreur. ID de session manquant dans la réponse. Et voilà, nous l' enregistrerons au cas où quelque chose arriverait. Donc, erreur de console, une erreur s'est du traitement de l'erreur de paiement. C'est ce qui devrait être le cas. Nous pouvons maintenant le tester. Donc, sur notre page, nous avons un article pour 22$. Nous allons cliquer sur Procéder au paiement, et nous échouons à cause des jetons JWT Et en fait, nous ne voulons pas utiliser le jeton JW pour notre client, car il ne sera pas bloqué de toute façon Et nous supprimerons ce jeton JWT de D. Checkout car tout le monde peut réellement commander notre nourriture Je vais donc le supprimer à partir de là. Et comment pouvons-nous exclure cette création de paiement de l'AV. Si vous voulez bien vérifier, nous utilisons l'AV là-bas. Donc, en fait, nous allons également déplacer les produits alimentaires sous l'AV. Nous allons le faire comme ça. Et nous allons passer à routes créer un nouveau fichier, nous allons faire stripe route point js. Nous allons maintenant revenir au point d'index JS. Nous allons découper ce mur pour créer une session de paiement même avec cette bande. Sauvegardez-le, emmenez-le sur Stripe Route. Sur un itinéraire à rayures, nous le placerons également au-dessus de l'express. Ensuite, nous allons faire Stripe, je vais m'importer. Nous allons également importer Express depuis Express. Sauvegardez-le. Ça devrait aller. Nous allons exporter le routeur par défaut. Nous allons maintenant revenir à l'index DGS. Voilà, nous allons le faire ou nous allons simplement le copier et nous le mettrons au-dessus de tout. Nous allons y faire un slash Stripe et faire un itinéraire à rayures. Bien entendu, nous devons également l'importer. Donc, ci-dessous, la route alimentaire, copions-la. Parcours à rayures. Et l'itinéraire est à rayures Route point js. Maintenant, sauvegardez-le. Retournez à Stripe Route JS. Il n'y a plus d'application point post, mais c'est point post de routeur. En fait, nous allons également placer l'itinéraire alimentaire au-dessus du O. Nous avons donc maintenant cette authentification pour que le Cloudinary télécharge l'image Et maintenant on y édite avec Stripe. Nous allons donc revenir à notre carte, et elle sera publiée après la session Stripe Slash Create Checkout Et nous avons leur faute de frappe. Un autre problème, je pense, est que nous ne l'avons pas fait, nous utilisons leur variable d'environnement et nous n'utilisons pas leur configuration, donc nous ne les lisons pas correctement. Alors allons-y. Utilise ça. Importez-le, enregistrez-le. Nous devons donc avoir importé la configuration de dotan, puis nous l'appellerons ici Cela l'appellera donc les variables d'environnement. Maintenant, essayons à nouveau. Et nous procédons avec succès au paiement. Enfin, résumons rapidement ce que nous avons fait pour résoudre ce problème. abord, depuis index point JS, nous avons déplacé la route vers un nouveau dossier, Stripe Route Dogs ou un nouveau fichier. Là, nous devions effectuer la configuration de ces importations, afin de pouvoir obtenir cette clé secrète de bande, puis définir la route elle-même. Dans la carte J six ou d'abord, commençons par le point d'index js dans le point d'index Js. Nous avons placé cet EBDodustip avec la route Stripe au-dessus du O d'abus, car nous n'avons pas besoin de le faire authentifier par les JWT Nous utiliserons cette authentification pour les JWT pour les autres éléments que nous avons , leur image de téléchargement, etc. Ensuite, avec cette carte, comme nous l'avons fait pour la barre oblique Stripe, nous devons mettre à jour cette URL non seulement pour supprimer la session de paiement GET, mais également pour supprimer la session SIPElagedCheckout nous devons mettre à jour cette URL non seulement pour supprimer la session de paiement GET, mais également pour supprimer la session SIPElagedCheckout. Nous avons également supprimé les en-têtes contenant la barrière d'autorisation, et nous n'envoyons que des produits transformés Maintenant, sur notre page, nous pouvons remplir les données, puis cliquer sur payer C'est un succès et cela nous dirigera vers la page de réussite Avant de passer à la page de réussite, changeons cela pour slash Annulez, et nous allons d'abord coder celui-ci car ce sera plus facile. 27. Annuler: Et là, nous allons simplement commencer par le premier diff. Cela aura un nom de classe d' une largeur maximale de quatre Excel. Nous allons le centrer avec Moldo, un peu de rembourrage, un peu d'arrière-plan, autres arrondis, grands, un peu d'ombre, et le déplacer avec une marge verticale jusqu' Nous allons maintenant créer le H one avec le paiement qui peut échouer ou échouer. Augmentons également ce texte sur le boulon et le texte d 800. Nous pouvons maintenant le voir sur notre page. Ci-dessous, nous ajouterons un paragraphe. Votre processus de paiement n' est pas terminé. S'il s'agit d'une erreur, vous pouvez réessayer. Et à ce paragraphe, nous ajouterons une marge en haut. Ci-dessous, nous ajouterons à nouveau un div avec une marge en haut. À l'intérieur, nous allons créer un lien. Importons donc de l'encre depuis React Router dom. Là, nous pouvons faire un lien. Cela nous dirigera vers la page d'accueil. Il indiquera « retour à la page d'accueil ». Nous allons y ajouter un peu de style. Donc, arrière-plan 600, texte sur blanc, un peu de literie, arrondi à moyen, et au survol, le fond rouge à 900 Et nous y ajouterons un peu plus de style. Augmentons donc la marge jusqu'au sommet. Alors, une fois sur notre page, nous cliquons sur un retour à la page d' accueil, cela nous y amènera. 28. Modèle de commande et itinéraire: Maintenant, pour créer une page de réussite, nous devons d' abord créer une commande. Passons à notre dossier Bend. Et là, dans les modèles, nous allons créer un nouveau fichier que nous appellerons order model point JS. Tout d'abord, nous allons y importer Mongoose. Et nous allons commencer à redéfinir le schéma de collecte des commandes Le schéma de commande C est donc nouveau. Schéma Mongoose. Tout d'abord, nous allons obtenir le champ pour l'e-mail du client. e-mail du client sera donc une chaîne de caractères et sera, bien sûr, obligatoire car nous avons absolument besoin de cette partie. Ensuite, nous aurons le numéro de commande. ID de commande sera donc une chaîne de type qui sera également requise et sera unique. Ensuite, ce que nous aurons là, ce sont les objets. Donc, le tableau des articles, nous avons le nom et aussi la quantité. Nous savons donc combien de produits nous devrons envoyer à notre client. Après ce tableau, nous enregistrerons l'adresse. Nous allons donc maintenant avoir besoin de savoir ce qui vient de Stripe. Et je sais déjà que grâce à Stripe, j'ai configuré la ligne 1, la ligne 2, la ville, l'état, code postal et le pays. Je vais donc le configurer également pour mon modèle. Ligne deux chaîne, puis nous avons la ville qui est également une chaîne. Nous avons l'état, qui est également une chaîne de caractères, le code postal. Également chaîne et pays. C'est aussi une chaîne. Ensuite, nous pouvons également ajouter leurs horodatages Vous et ce que cela fera, c'est que cela sera automatiquement ajouté créé et mis à jour lors des horodatages Et à la fin de ce fichier, nous procéderons à l'export. Exportez donc le modèle à points Deford Mangos, le schéma de commande et de commande. Nous allons maintenant l'enregistrer pour voir que nous n'avons aucun problème. Et maintenant, si vous vous souvenez, nous avons fait le modèle, puis nous avons fait les itinéraires. Nous allons donc également créer des itinéraires pour notre modèle de commande. Dans routes, nous allons créer un nouveau fichier, commander route point JS, et c'est là que nous pouvons commencer. Tout d'abord, nous allons importer Express. Ensuite, nous allons importer la commande. À partir du modèle de commande modale, nous allons créer un routeur express pour gérer les itinéraires Routeur SO C, routeur Express point. Et là, nous allons commencer par les itinéraires réels. Nous allons donc d'abord récupérer toutes les commandes, et ce sera le point G. Ce sera asynchrone avec les requêtes et les réponses, et là d'abord, nous récupérerons toutes les commandes de la base de Les commandes C attendent donc d'être trouvées, et nous vous répondrons avec la liste de toutes les commandes. Le point de réponse est activé et les commandes. Ensuite, nous pouvons avoir un itinéraire pour récupérer une seule commande. Donc, récupérer une seule commande par identifiant. Encore une fois, point de routeur G. Dans l'URL, nous aurons besoin d' un paramètre d'identification. La réponse à la demande est asynchrone, bien sûr, et nous allons d'abord extraire l'ID du paramètre de demande Nous allons donc faire un ordre constant, éviter de rechercher le point de commande par identifiant et saisir l'identifiant des paramètres de demande Et maintenant, si la commande est trouvée, nous vous répondrons. Alors, réponds, Jason, commande. Nous pouvons également fournir un itinéraire pour mettre à jour une commande existante. Donc, sortie du routeur, nous devons fournir un identifiant. Donc, continuez, mettez à jour. Commandez, attendez, commandez, recherchez par identifiant et mettez à jour. demande, paramètres, ID, corps de la demande, et nous y ajouterons également un nouveau True, ce qui signifie que les angles dans lesquels la réponse contiendront également le document mis à jour. tellement nouveau, c'est vrai, et nous y répondrons à nouveau, commande donc mise à jour. Et maintenant, nous avons également la route pour. Supprimer la commande, bien sûr, si nous n'en avons plus besoin, alors acheminez ou supprimez simplement une commande. Et nous supprimerons les points du routeur. ID, demande asynchrone et réponse. Et là, nous allons créer une commande supprimée, et nous attendrons que et nous attendrons point de commande soit trouvé par identifiant pour supprimer celle-ci. Les paramètres d'entrée sont l' ID de la demande. Et nous vous le renverrons. Réponds Jason, supprime-le. Commande. Et à la fin, nous exporterons le routeur, et nous pourrons l'utiliser dans l'index vers GS. Exportez donc le routeur par défaut. Et maintenant, si nous passons à Index dogs, nous avons l'autorisation ou les WebTkens JSN Donc, en dessous, nous pouvons faire app.us slash Order Wi Order Route et, bien sûr, importer la commande Alors, copiez-le. Itinéraire de commande. La même chose est là, sauvegardez-la. Et il y a un problème avec l' itinéraire ou le point de modèle JS, et nous sommes prêts. Maintenant, pour récupérer cette session terminée et récupérer les données saisies lors du Stripe Checkout, nous devons également cette session terminée et récupérer les données saisies lors du Stripe Checkout, créer un gestionnaire de webhook 29. Gestionnaire Webhook et routes de rayure: Dans notre dossier Becond, nous allons cliquer sur un nouveau dossier. Nous l'appellerons webhooks. À l'intérieur, nous allons créer un nouveau fichier qui s'appellera webhook handler point JS, puis nous pourrons commencer à coder le gestionnaire Webook Nous allons donc d'abord importer certains modules. Ce sera Express. Puis aussi la commande auprès des modèles. Modèle de commande, nous allons créer une instance de routeur. Maintenant, nous allons également faire une nouvelle bande à rayures constantes. Cela permettra d' importer la clé secrète point, point, bande secrète du processus . Nous pouvons également y faire une configuration et commencer par la route qui gérera les événements du webhook Gérez donc les événements Stripe Webhook et Router Dot Post. Coupez les webhooks, et là nous ferons un point express. Le type brut sera le JSON de l'application et la réponse de demande asynchrone. Et nous allons utiliser cette ligne Express Dot car cette route gérera les données JSON brutes. De plus, nous allons maintenant récupérer la signature rayée. La signature correspond donc aux en-têtes de demande. Rayure, signature. Nous allons créer un événement, et nous allons créer un trocatchblog Et nous essaierons de construire l'événement en utilisant la bibliothèque Stripe. L'événement est donc un événement à rayures, les webhooks ne construisent pas l'événement Nous y ferons la signature du copain et le secret du Webbok à rayures Et nous examinons une erreur au cas où elle échouerait. Donc, journal des points de la console, erreur Webook et état de réponse de retour, erreur du webbook envoyé à 400 points webbook envoyé Et nous allons afficher le message d'erreur, modifier ces quatre barres obliques inverses Sauvegardez-le. Maintenant, en dessous de ce bloc de grève, nous allons gérer un type d'événement spécifique, fin de la session de paiement Donc, si le type d'événement est une session de paiement terminée, nous l'avons là. Nous allons ensuite extraire les données de session de l'événement. Session donc constante, même l'objet de données. Et nous analyserons également les éléments des métadonnées de session Il y a donc des objets. Et comme ils le seront dans un JSONtrn, nous le ferons à partir de barres de points json, de points de session, de metadeta, de points Nous allons maintenant créer un nouvel ordre d'ordre constant, un nouvel ordre. Nous y connaissons déjà les champs du modèle, l' e-mail du client y figurera. Et maintenant, tous les champs seront marqués d'un point de session avec cette valeur. Donc, les détails du client, l'e-mail, puis les articles, puis l'adresse. Nous avons la ligne 1, la ligne 2. Je pense que nous pouvons essentiellement le faire, le copier. Mets-le là. À présent, nous allons modifier les valeurs. Les détails du client sont donc des points de session. Je pense que maintenant je peux faire face à cette adresse (ligne 1), point d'adresse (ligne 2), point d' adresse adresse) point d'adresse (point d'adresse). Maintenant, code postal. Et le dernier, c'est le pays. Nous allons maintenant faire Try Catch Block en plus, et nous allons essayer d' enregistrer la commande dans la base de données. Alors essayez Catch Block. J'essaie, nous attendrons la sauvegarde des points de commande, et nous enregistrerons le bloc de capture, nous ferons une erreur de point sur la console pour enregistrer les commandes. Maintenant, après cela, si nous voulons répondre à Stripe, Jason a reçu True. Et au final, nous exporterons ce routeur d'exportation sous la forme d'un WeBrookRouter. Maintenant, nous pouvons le sauvegarder. Nous reviendrons à la section Index DGs au bas du fichier Nous allons créer des livres Web App Dot Slash à partir de Webhook Router. Maintenant, la prochaine route que nous allons faire est dans strprout point chs, nous allons faire une route pour récupérer une session par son identifiant Nous allons faire router point Get slash API Session Slash Slash Slash ID de session Réponse de demande asynchrone, et là nous allons essayer catch. Et dans Try Block, nous allons maintenant récupérer une session à l'aide d'une API Stripe, c'est-à-dire une attente de session constante, sessions de paiement par points, des paramètres de demande de récupération par points, un identifiant de session. Nous y construirons un objet de réponse avec les détails de la session, c'est-à-dire réponse constante, e-mail du client, point de session, détails du client, points de courrier électronique, parties JSON, métadonnées de session, détails du produit, puis adresse, session, détails du client, adresse, détails du client , adresse, adresse, adresse, point adresse. Et maintenant, nous allons répondre avec les détails. Nous allons donc envoyer dans la réponse la réponse que nous y avons enregistrée. Et dans le bloc de capture, nous ferons une erreur Csoldt qui n'a pas réussi à récupérer la session, un message d'erreur, et nous répondrons avec un message d'erreur Stat tus 400 JSON en récupérant les détails récupérant Maintenant, sauvegardez-le. Ensuite, avant de le tester, nous passerons à la page de réussite. Nous y importerons quelques éléments supplémentaires. Utilisez donc la date et l'effet d'utilisation. Ensuite, je vais également importer use navigate et use location. abord, nous allons démarrer les hooks pour interagir avec le routeur revenir dans l'index Js, nous devrons le faire défiler vers le haut, prendre cette commande et placer en dessous de la nourriture rayée et au-dessus de l'autorisation JWT Et si nous passons commande, laissez-moi vérifier. Nous avons la route de récupération, la récupération unique, la mise à jour et la suppression Et bien sûr, nous devons également créer une nouvelle commande dans la base de données, qui se fera par point postal. Donc, en créant une nouvelle commande, nous y ferons une demande et une réponse asynchrones par ordre de point sur slash du routeur demande et une réponse asynchrones par ordre de point sur slash Nous récupérerons les données de commande dans le corps de la demande. Nous allons donc traiter les données de commande, demander le corps du point. Ensuite, nous générerons un identifiant unique pour la commande. Nous allons donc utiliser un numéro de commande constant. Nous allons maintenant utiliser crypto point create hash, et nous devrons l'importer. Nous utiliserons également les 256 has, et après avoir mis à jour par points, Jason, stringify, les données de commande et digest h. Avec cela, nous allons créer un identifiant de commande unique, et nous y ferons un bloc d'essai et de capture En cas d'erreur, nous pouvons faire erreur par point de console pour trouver le message d'erreur de commande et renvoyer l'état de la réponse ou envoyer également l'état de la réponse. 500, puis envoyez un message contenant une erreur lors de la recherche de la commande et un message d'erreur. maintenant au Trblog, nous devrons vérifier s'il existe une commande existante avec le même identifiant Nous devons donc nous assurer que cette commande n' existe pas encore dans la base de données. Il en va de même pour les commandes existantes, et nous les trouverons par numéro de commande. Si cela est vrai que quelque chose a été trouvé, nous vous renverrons la réponse avec le statut 409, et nous enverrons un message à Jason , la commande existe déjà. Si la commande n'existe pas, nous en créerons une nouvelle. Donc, commande constante, nouveau numéro de commande, données de commande. Et nous allons y faire un bloc de suivi supplémentaire. Nous y attendrons la sauvegarde de la commande. Nous enregistrerons donc la commande dans la base de données, et en cas d'échec, nous y indiquerons une erreur de point de console, une erreur d' enregistrement de la commande et un message de commande. Vous renverrez également un statut de réponse 500. Ensuite, envoyez-y un message d' erreur avec une erreur lors de l'enregistrement de la commande et un point d'erreur. Au final, nous répondrons avec les données de commande créées si elles ne sont pas saisies. Alors revenons, assurons-nous également d'y avoir importé la cryptomonnaie. Ouvrez le terminal. Nous verrons le backend N PNI crypto. Ensuite, il y a une faute de frappe. Maintenant, ça devrait aller. heure actuelle, notre page de réussite ressemble à ceci, et nous devons créer un paiement réussi. Nous allons donc mettre un article sur notre carte. Nous nous occuperons du paiement. Nous renseignerons les informations relatives à la bande. Nous allons le payer. Bien entendu, comme il s'agit d'un environnement de test, il ne sera pas réellement payé. Et maintenant, nous pouvons accéder à la page de réussite et nous y verrons la sortie de l'interface utilisateur. 30. Page de succès: J'ai déjà importé ces deux éléments ici et maintenant nous nous sommes arrêtés à la navigation que nous utiliserons plus tard pour revenir à la page d'accueil, et nous utiliserons également le crochet de localisation pour accéder à l'état de l'URL. Emplacement constant, utilisez l'emplacement. Ensuite, nous continuerons avec l'état de stockage des détails de la commande. Détails constants de la commande, définissez les détails de la commande. Et le défaut sera nul. Ensuite, nous allons récupérer l'identifiant de session à partir des paramètres de requête d' URL. Donc, identifiant de session constant, nouveaux paramètres de recherche d'URL, recherche par points de localisation, et nous obtiendrons l'identifiant de session. Nous allons maintenant créer une fonction pour publier les données de commande dans notre MongoDB. ordre de publication constant vers la base de données sera donc une donnée de publication asynchrone, et là, nous allons un tricagblock dans le Tkacheblock, nous essaierons d'envoyer une demande de publication avec les données de commande, donc réponse constante, attendez, et Maintenant, notre itinéraire est localhost 3,000 slash ORDER, la méthode sera publiée, les en-têtes seront le type de contenu Cela signifie que nous allons définir le type de contenu sur Jason, et maintenant nous allons convertir l'objet de données de publication JSNStringby Jason stringify Maintenant, si la réponse n'est pas correcte, nous allons générer une nouvelle erreur avec échec de l'enregistrement de l' ordre dans la base de données. Si c'est le cas, nous analyserons la réponse JSON en un objet JavaScript, afin de créer les données de réponse Le poids répond par JSON. Et nous l'enregistrerons également afin que nous puissions passer commande, enregistrer les données de réponse dans la base de données. Et nous allons l'enregistrer via la console afin de voir ce qui a été enregistré dans une base de données. Nous allons maintenant faire le bloc de capture, afin de corriger cette erreur et de publier la commande base de données avec une erreur, ce qui peut faire comme ceci. Nous allons maintenant utiliser l'effet pour gérer les effets secondaires, donc utiliser la constante effect récupérer les détails de la session de manière asynchrone À l'intérieur, nous allons faire Tricachblo Dans le blog tri, nous allons enregistrer la réponse, alors attendez le fetch, et maintenant HTTP, hôte local de 3 000 Identifiant de session. Nous appelons maintenant la session de l'API Stripe pour obtenir les informations à partir de là afin récupérer les détails de la session. Nous allons donc attendre Si la réponse n'est pas correcte, nous allons générer une nouvelle erreur. La réponse n'était pas correcte. Si tout va bien, nous analyserons la réponse JSON pour obtenir les données de session, donc des données constantes attendent la réponse JSON Nous définirons les détails de la commande en fonction de ces données, et nous publierons également la commande dans la base de données avec ces données. En cas d'échec, nous avons le bloc de gadgets, nous allons donc faire une erreur de point sur la console. Impossible de récupérer les détails de la session avec cette erreur. Maintenant, nous allons également vérifier si l' identifiant de session existe réellement, et nous allons récupérer les détails de la session au cas où oui À la fin, nous ajouterons également l'identifiant de session. Et cela signifie que cela sera réexécuté lorsqu'il changera. Ainsi, chaque fois que l'identifiant de session change, celui-ci sera réexécuté. Et nous pouvons commencer par DUI, nous aurons donc leur division principale. Nous allons ajouter leur largeur maximale de quatre Excel, nous pouvons les centrer sur une marge verticale, peut-être 40, un peu de rembourrage, un arrière-plan décent Nous pouvons donc faire du green 100. On peut l' utiliser autour et un peu d'ombre. Dans cette section principale, nous allons faire une première rubrique indiquant que le paiement a été effectué avec succès. Nous pouvons augmenter la taille du texte, amuser à la fois et faire un texte vert de 800. À l'intérieur, nous écrirons une information, mais si les détails de la commande sont vrais, nous les publierons au cas où ils seraient faux. Nous allons simplement afficher les détails de la commande de chargement . Je suppose qu'il n'aime pas cette balise de paragraphe car nous devons d' abord la coder ici. Donc, à l'intérieur, c'est ce que nous allons faire. Comme ça. Maintenant c'est mieux. Il y aura juste une certaine marge à partir du haut et maintenant plongée qui sera générée lorsque nous aurons les détails de la commande. À l'intérieur, nous allons donc mettre un paragraphe avec les détails de la commande de remerciement , point point l'e-mail du client pour votre achat. Voici les détails de votre commande. Un peu de style. Donc, margez depuis le haut. Ci-dessous, nous allons faire une liste non ordonnée. On peut jouer contre une marge en partant du haut. Dans cette liste non ordonnée, nous ferons les détails de la commande, la carte domstt, l'index des articles, et il y aura un élément de liste avec un index clé, l'article de commande, le nom du point index clé , la quantité de l'article , la quantité Et c'est tout pour l'élément de liste. Ci-dessous, nous allons créer une balise de paragraphe avec marge du nom de classe à partir des quatre premières adresses de livraison nommées. Et à l'intérieur, nous ajouterons un autre paragraphe avec les informations de la première ligne d'adresse ou les détails de l'adresse sur la ligne à points 1. Et maintenant, nous pouvons simplement le copier pour la ligne d' adresse deux pour la ville, l'État et le code postal, et pour le pays. Donc, la ligne d'adresse 1, il y aura la ligne d'adresse deux. Il y aura la ville, l'État et le code postal. Pour la cité-État et le code postal, nous ferons ces bretelles bouclées à l'intérieur, nous ferons des barres obliques inversées, et nous commencerons par les détails de la commande point d'adresse point Ensuite, nous y ferons une virgule, et nous continuerons afin de pouvoir le copier avec l'état et le code postal Nous allons donc faire l'état et le code postal. Sauvegardez-le. Pour le pays, nous allons simplement le remplacer par le pays. Et ce que nous ferons également ci-dessous, nous reviendrons à la page d'accueil. Alors, plongez avec le bouton pour revenir à la page d'accueil. Il peut même s'agir de Link. Importons-le donc. page d'accueil du lien 2, qui est une barre oblique, les noms des classes seront en arrière-plan vert, 600 sur Howe, ce sera arrière-plan vert 900 texte sur blanc, un peu de rembourrage, semibt Cela signifie que nous n'avons même pas besoin d'utiliser Navigate si nous utilisons le lien, nous allons maintenant l'enregistrer. Nous pouvons ajouter une marge, alors utilisons la marge du haut jusqu'à quatre Et nous avons ce problème car détails de cette session de récupération s'arrêtent là, et ils devraient s'arrêter là Et après cette récupération des détails de la session, il devrait y avoir la vérification, et l'effet d'utilisation devrait prendre fin Maintenant, nous l'enregistrons. Et si nous consultons notre page de réussite, nous pouvons y voir les informations. Ce sont les informations que nous avons renseignées dans le bandeau. Ensuite, nous avons cliqué sur Checkout, et maintenant nous sommes sur cette page réussie. Pourquoi utilisons-nous l'identifiant unique Parce que lorsque cette page a été chargée, elle a également été enregistrée dans une base de données. Mais maintenant, je vais ouvrir l'inspection, et vous pouvez voir qu'après avoir actualisé la page, une erreur de conflit s'est produite. Cela signifie que cela ne peut pas être enregistré à nouveau dans la base de données car il existe déjà une commande avec cet identifiant unique que nous avons créé. Il n'y sera donc pas enregistré à nouveau, le même numéro de commande. Une fois que nous aurons créé un nouveau paiement, que nous l'aurons payé à nouveau et que nous serons arrivés sur cette page, il sera à nouveau enregistré, mais une seule fois, nous utiliserons slash Admin Nous sommes déjà connectés. Là, nous cliquerons sur le tableau de bord, puis sur la page d'affichage des commandes. 31. Tableau de bord: Dans VS code, nous allons créer la nouvelle page, le nouveau tableau de bord, JS six, et nous allons également créer une autre page, et ce sera l'ordre de suppression. Nous y ferons l'exportation. Nous allons maintenant passer à Epi J six, et là, nous devrons modifier selon notre itinéraire d'administration Nous pouvons donc les copier deux fois. Tout d'abord, nous ajouterons le tableau de bord avec le chemin, le tableau de bord, puis nous commanderons la suppression avec identifiant, qui s'appellera delete Not food. Supprimer la commande. Sauvegardez-le. Nous pouvons maintenant coder le composant du tableau de bord. Commençons par les importations, alors réagissons. Utilisez l'effet et l'état puis les exilés. Maintenant, nous allons évaluer un état pour les commandes, afin que les commandes constantes définissent les commandes et le tableau vide par défaut. Ensuite, nous récupérerons les commandes, nous les utiliserons donc. Les exilés n'arrivent pas à Get. Là, nous recevrons la commande, nous utiliserons donc l'itinéraire que nous avons emprunté. Et c'est HDTP localhost 3,000 slash ODR. Si vous n'êtes pas sûr, nous pouvons accéder à l'index des chiens, et nous utilisons DrSlashoder, qui nous permettra de mettre Par conséquent, pour récupérer les éléments, nous n'utilisons que la barre oblique Revenons donc au tableau de bord, puis nous n'aurons qu'à slash Order comme c'est le cas dans Index DJs Ensuite, nous répondrons. Nous réglerons les commandes avec les données que nous recevrons. Donc, réponse aux données. Ensuite, nous procéderons à une capture extérieure en cas d'échec. Donc, en fait, erreur et verrouillage de la console. Erreur, peut-être devrions-nous également ajouter le chargement. Réglons donc le chargement en fonction des chutes. Là, nous réglerons également le chargement en fonction des chutes. Au début, nous allons le définir sur true. Donc là Et nous créons également un état pour le gérer, bien sûr, donc voilà, en chargeant le set loading, comme dans les autres composants que nous avons fait. Et le vol est faux. Maintenant, pour nous assurer que cela ne fonctionne qu'une seule fois, nous allons créer le tableau de dépendances et nous pouvons commencer par l'interface utilisateur. Si nous passons à un autre composant, par exemple créer de la nourriture, nous pouvons obtenir ce chargement. Dans notre tableau de bord, nous allons ouvrir le plat principal. Tout d'abord, on peut y mettre le chargement. Comme nous allons importer le spinner, nous pouvons commencer à définir l'interface utilisateur Donc, d'abord, certains mettront une certaine largeur maximale, la centreront et certains arrière-plans en gris 50, par exemple. Nous allons maintenant faire une autre différence qui tiendra la table. À l'intérieur de la table, nous allons faire la tête de table. Et à l'intérieur de la tête du tableau, il y aura la ligne du tableau, et il y aura le titre du tableau. Il y en aura donc plusieurs, et nous les utiliserons d' abord pour le numéro de commande, puis pour la nourriture commandée, puis pour la quantité, puis pour le courrier électronique et ensuite pour la rue. Nous pouvons également l'écrire ici, puis nous le styliserons immédiatement. Donc hashtag, quantité de nourriture commandée , e-mail et rue. Commençons ensuite par le style. Nous allons donc y faire de l'ombre. Pour la teinte qui le tiendra, puis pour le tableau, nous allons faire de la largeur au maximum. Nous allons ajouter du texte trop petit, du texte à gauche et du texte en gris. Utilisons 500 pour le moment. Pour le titre, nous allons faire du texte encore plus petit, du texte au gris 700. Nous pouvons faire des majuscules, et nous pouvons faire du fond jusqu'au gris 50 Rangée du tableau que nous allons quitter. Pour la tête de table, nous allons faire le scope. Colum sait donc que c'est le titre de la colonne et le nom de leur classe, avec Bedding Y à trois et battant x26 Maintenant, sur notre page, vous pouvez voir les modifications et nous pouvons continuer, et nous allons continuer avec le corps du tableau. À l'intérieur, nous devrons d'abord cartographier les commandes. Donc, les commandes cartographient l'ordre et l'index, nous allons maintenant créer la ligne du tableau. Nous y mettrons une clé, qui est l'identifiant du point de commande, et le nom d'une classe aura un fond blanc avec bordure en bas et un fond OnHer gris 50 À l'intérieur de cette ligne de tableau, nous aurons les données du tableau, qui porteront sur le numéro de commande, quantité de nourriture, l' e-mail et la rue. Il y aura donc les articles de commande en premier dans le nom du point du tableau. Ensuite, il y aura aussi le PY 24 et le Px 26. Ensuite, nous pouvons le copier pour la quantité, puis pour l' e-mail et l'adresse du client, et aussi le premier pour l'index. Nous faisons donc un index plus un parce qu'il s'agit de compter à partir de zéro, puis de la quantité, il y aura l'e-mail du client et le dernier sera l' adresse à la première ligne. Ci-dessous, il y aura également l'opération de suppression. Nous allons y coder, supprimer l'ordre J six. Nous allons donc ajouter les données du tableau. Le nom de la classe sera le même PY et de px à six. Dans les données stables, c'est ce que nous ferons. Nous allons mettre un lien. Importons-le. Dans ce lien, nous aurons une fonctionnalité de suppression. Il aura un arrière-plan rouge 500 sur Elle, un arrière-plan gradé à 900, du texte sur blanc, PI deux, Px quatre, et l'arrondi en grand. Sauvegardez-le. De plus, ce ling nous dirigera vers une barre oblique inverse, et l'itinéraire sera « Admin order delete andslander Maintenant, si nous consultons la page, nous pouvons voir que nous l'avons là comme nous le voulons. Là, nous cliquons sur Supprimer. Nous avons été redirigés vers un composant de suppression et nous pouvons le coder dès maintenant. Passons à la suppression du composant de commande. Faisons d'abord les importations. Nous allons donc importer React et Use State, Nous allons donc importer React et Use puis aussi les exhils. De plus, vous allez importer use navigate et use perms depuis React Router Dome et nous importerons également use snack bar depuis Notice Tech Ensuite, dans l'ordre de suppression, nous effectuerons les chargements. Donc , chargez, définissez le chargement. Définir la force est par défaut, puis la navigation que nous utiliserons après la suppression sera réussie, utilisez la navigation. Ensuite, nous enregistrerons l' identifiant à partir de l'URL. Utilisez donc des PAM. Ensuite, nous ferons également le crochet pour le snack-bar. Non, snack-bar, utilisez le snack-bar. Maintenant, nous allons créer une nouvelle fonction pour supprimer la commande, donc constante, gérer la commande de suppression. Là, nous réglerons le chargement sur true, afin que le spinner commence à tourner plus tard, puis nous ajouterons le spinner dans l'interface utilisateur exis point, delete, HCTP localhost Réglez ensuite le chargement sur Falls. Merci. Snakbr dont la commande a été Avec succès. Succès et accédez au tableau de bord d'administration. Après cela, nous détecterons nouveau une erreur au cas où, comme celle-ci. Nous réglerons à nouveau le chargement sur les chutes. Dans le Snack Bar, nous enverrons une erreur en supprimant l'erreur de variante de commande, et nous bloquerons l'erreur. Nous pouvons maintenant passer à l'interface utilisateur. dans le Mindy, nous allons d' abord faire un peu de pédalage, un peu d'arrière-plan, et nous utiliserons disposition Flexbox pour justifier centre et placer les éléments au Là, nous utiliserons le spinner, nous vérifierons le chargement, et si c'est vrai, nous appellerons le spinner. Ensuite, dans cette div, nous aurons un nom de classe, un conteneur, poids maximum, un centre, une ombre Nous pouvons le faire arrondir et placer le texte en arrière-plan sur blanc au centre, car ce div contiendra les informations réelles. Donc d'abord, on peut y mettre le bouton B. En fait, allons simplement créer de la nourriture. Ensuite, nous avons le bouton B sur cette ligne, alors allons-y. Mets-le là. Cela nous ramènera au tableau de bord. Je peux le faire pour que vous puissiez voir le cours dans son intégralité. Importez le lien. C'est mieux. Pour le style, je vais le faire comme ça. Nous allons continuer avec le titre deux qui dira : «  Êtes-vous sûr de vouloir supprimer cette commande ? Nous ajoutons un nom de classe. Donc, augmentez la taille du texte, marchez vers le bas, formulez le semi-démarrage, notez le texte, je ne sais pas, 800. Et là, nous ferons un bouton pour la suppression. Avec une fonction de clic pour gérer ordre de suppression et avec classe arrondie rouge à 600 sur un fond rouge à 800, texte sur blanc, un peu de literie blanc à deux, soit x24, arrondi moyen avec 24, enregistrez-le Et maintenant, essayons-le. Ajoutons-y en fait une certaine hauteur moyenne. Donc, dans le div principal, nous allons faire un écran de hauteur minimale. Maintenant, en fait, que peut faire Minnehit de 60 vues ? J'ai changé cela en 60 viewpodeit. Maintenant, ça devrait aller mieux, et je n'aime toujours pas ça. Ajoutons un peu de rembourrage. Faisons-en dix. Maintenant, dans nos commandes, nous allons essayer de supprimer cette commande qui s'y trouve, supprimer, et elle a été supprimée. Tout ce que j'ai vu, c'est une faute de frappe. Pas encore, mais oui, supprimez-le. De plus, nous passerons au composant de réussite dans l'effet d'utilisation en dessous de cette commande postérieure à la base de données, nous ferons un point de stockage local pour supprimer l'article, et là nous supprimerons les éléments de la carte car après un paiement réussi, nous ne voulons plus qu'il y ait d'autres éléments dans notre article de carte. 32. Finition Auth JWT: Maintenant, dans Index JS, nous allons supprimer cette autorisation globale avec notre jeton JWT Pour l'image à télécharger, nous allons utiliser la virgule pour qu'elle utilise l' autorisation Voilà, nous l'avons déjà. Nous allons maintenant passer à la route alimentaire, et nous y ajouterons également cette autorisation. Copions également cette importation dans food route, collons-la. Maintenant, utilisons également cette autorisation pour la suppression. Et là pour une mise à jour. Accédez à la commande, collez-la ici et utilisez également l'autorisation pour mettre à jour une commande existante. Prenons cela également pour le supprimer. Ensuite, dans dit food, delete food et delete composants de commande, nous devrons procéder à la configuration. Nous allons donc faire une constante avec le jeton. Nous l'obtiendrons depuis le stockage local, et nous ferons également une constante avec configuration où nous enverrons le jeton en en-tête. Nous effectuerons une configuration en virgule après qu'Exiles aura saisi et appelé l'URL Nous ferons la même chose pour supprimer des aliments. Nous allons donc mettre le jeton avec la configuration, mettre là dans l'appel et pareil pour l'ordre de suppression. Configuration du jeton et placez-le sur l'Exis. Nous pouvons maintenant essayer de supprimer. C'était non autorisé, et maintenant c'est autorisé. 33. Corrections et tests: Vous avez également corrigé un petit détail dans une barre de navigation : là, nous manquons l'arrière-plan Nous allons donc mettre le fond vert à 600 et replacer dans la position réelle de l'opérateur du tourneur. Maintenant, ça va ressembler à ça. Et pour le tableau de bord, nous allons ajouter overflow X Auto, afin de pouvoir le faire défiler horizontalement comme ça Passons maintenant à notre hôte local 5173 do slash Admin, et cela nous amènera à cette page d'administration Nous pouvons également créer un logo et cela nous mènera à cette page d'accueil. Sur notre page , nous allons supprimer Admin. Nous allons tester le registre. Alors, cliquons sur S'inscrire. Nous y remplirons quelques données. Je le remplis, je vais cliquer sur Enregistrer. Maintenant, il me redirigera automatiquement vers Login. Je vais renseigner les données ici. Je vais maintenant cliquer sur Login. Supprimez le produit que je possède actuellement et je créerai de nouveaux articles pour ma page. Sauvegardez-le. Et un hamburger. Maintenant, nous y sommes, le produit. Nous pouvons cliquer sur Déconnexion. Maintenant, sur notre page, en tant que client, nous pouvons voir les produits. Je peux voir que j'ai fait une faute de frappe. Nous pouvons facilement revenir à la page d'administration. Nous avons adoré OgeDo. Nous pouvons donc simplement nous reconnecter à Hamburger, nous cliquerons sur Modifier Là, nous en supprimerons 10. Nous allons enregistrer les modifications. Nous pouvons à nouveau sortir. Nous n'en avons même pas besoin. Nous pouvons supprimer la barre oblique Admin Ensuite, nous pouvons immédiatement acheter le hamburger en tant que client, accéder à notre carte où il a été montré Là, nous pouvons augmenter la quantité. Au final, je veux acheter deux hamburgers Je peux passer à la caisse. Là, je vais remplir les données et cliquer sur payer. Ils m'y dirigeront sur la page de paiement réussie où sur le backend, cette commande a été enregistrée. Alors maintenant, je vais revenir à slash Admin. Là, je vais aller au tableau de bord, et j'y verrai la commande que je viens de faire en tant que