Non plus.
Nous saluons le retour.
Donc, dans cette leçon, nous nous concentrons sur l'amélioration de l'utilisabilité de notre camp.
À l'heure actuelle, c'est une sorte de désastre en ce qui concerne la rétroaction, les messages d'erreur ou les messages de réussite pour nos utilisateurs.
Et par désastre, je veux juste dire qu'il n'existe pas du tout.
Nous avons un journal du conseil qui évidemment nos utilisateurs ne peuvent pas voir.
Nous le voyons comme des développeurs dans notre consul ici où les serveurs sont en cours d'exécution, mais personne ne voit cela.
Donc, nous allons nous concentrer sur l'ajout de quelques messages et je vais vous montrer ce que cela ressemble dans un instant.
Avant de faire cela, nous avons trois objectifs principaux, je vais en parler maintenant.
Donc je veux la démo.
Tout d'abord vous montrer à quoi vous attendre comment il va regarder comment il se comporte alors nous allons réellement installer et configurer un paquet appelé connecter flash.
Donc ce que nous faisons est d'ajouter en Flash ou le flasher un flash de ses différents pronoms et les gens l'appellent.
Dans d'autres cadres le hachage flash.
Les gens l'appellent des messages flash, mais essentiellement l'idée est que nous allons montrer un message à un utilisateur comme connecté avec succès ou déconnecté avec succès.
Ou peut-être quelque chose comme vous n'avez pas la permission de le faire.
Ou Connectez-vous avant d'ajouter un terrain de camping quelque chose comme ça.
Nous voulons le montrer à un utilisateur une seule fois et nous ne voulons pas qu'il soit un élément permanent sur la page.
Nous voulons juste le clignoter pour eux une fois, puis il va à la page suivante ou si l'utilisateur rafraîchit et puis la dernière chose est d'ajouter dans nos messages flash à l'en-tête et ajouter dans certaines classes d'amorçage qui seront de style.
Donc, il ya certains construit dans les moyens de faire les choses avec bootstrap.
Il s'agit d'une caractéristique commune à avoir des messages qui sont flashé à votre utilisateur sur toutes sortes de sites que bootstrap a construit dans le style pour que ce qui profitera.
Je vais donc commencer par vous montrer à quoi il ressemblera.
Donc j'ai le camp en cours d'exécution.
Permettez-moi bien je vais vous montrer si je me déconnecte maintenant, donc je suis connecté en tant que congélateur si je me déconnecte, je reçois un message qui dit loungy jusqu'à nous pouvons changer ce texte de message.
Évidemment, si j'essaie d'ajouter un nouveau terrain de camping en ce moment, alors que je ne suis pas connecté, je devrais maintenant recevoir un message indiquant que vous devez être connecté pour le faire.
Et remarquez qu'il est lu ici.
C'est donc une classe d'amorçage.
Cette alerte que nous obtenons si j'étais frais la page disparaît.
Donc maintenant, si j'essaie de m'inscrire, je dois dire que je m'inscris comme resti qui existe déjà.
Donc je ne devrais pas pouvoir faire cela dans le passé.
La page vient de rafraîchir.
Mais ce que nous finirons par être un message qui dit un utilisateur avec un nom d'utilisateur donné est déjà enregistré.
D'ACCORD.
Alors laissez-moi m'inscrire comme quelqu'un de nouveau.
Essayons de faire la bêtise.
J'ai maintenant déménagé apparemment des légumes aux appareils électroménagers et je reçois un message de réussite signé avec succès.
Ravi de te rencontrer, Bunder.
Et si je rafraîchis la page, elle disparaît.
Donc il ya d'autres endroits où nous avons ces messages, mais je vais vous montrer.
Par exemple, si j'essaie de modifier ce camping que je ne possède pas.
Tater tots le possède.
Je suis connecté dans ce mixeur.
Je n'ai pas de lien pour aller à Modifier ici parce que cela est caché.
Mais techniquement, je pourrais toujours aller à slash là où je reçois maintenant un message qui dit que vous n'avez pas la permission de le faire.
Il me redirige ici.
La même chose avec les commentaires si je si il y avait un commentaire ici et il a été créé par quelqu'un d'autre.
Si je suis allé manuellement à ce lien et a ajouté slash à elle, alors je verrais aussi un message, mais c'est beaucoup de travail parce que nous devons trouver l'ID.
Et de toute façon, je ne veux pas y entrer maintenant, mais ce sera le même morceau de code que nous ajoutons qui dira que vous n'avez pas la permission de le faire.
Et puis enfin si je me déconnecte et que je retourne et j'essaie d'ajouter de nouveaux commentaires, je reçois le même message.
Vous devez être connecté pour le faire.
Juste comme si j'essayais de créer un terrain de camping quand je ne l'ai pas signé.
D'ACCORD.
Donc, c'est l'objectif final et c'est assez facile pour nous de faire ce travail.
En utilisant ce paquet nous pourrions faire ceci sans un paquet bien sûr ce que nous pourrions faire quelque chose comme.
Lorsque nous ouvrons la bonne version.
J'ai donc fait une nouvelle version pour ce v 11 que je vais travailler à l'intérieur de.
Donc, voyons dans le v. 11 et laissez-moi clair tout et ouvrez oui.
D'ACCORD.
Nous allons donc travailler ici.
Encore une fois, c'est V 11 au cas où vous suiviez.
La première chose que je vais faire est de vous montrer le paquet que nous allons utiliser.
Donc, il est appelé flash Kinect.
Il y avait d'autres paquets là-bas qui font cela.
Si vous jetez un coup d'oeil à la remise à domicile repo la documentation est en fait un peu obsolète.
Nous utilisons express pour lequel est sorti plus tôt en 2015.
Les docs parlent d'Express au point X et de trois points X pour le prochain.
Donc, ces instructions ne sont pas exactement les mêmes, bien que si vous retournez à Connect flash, vous verrez que certains des premiers liens externes sont exprimés 4.00 mis en place avec flash K'NEX que j'ai déjà pris un coup d'oeil ou vous pourriez toujours utiliser quelque chose Comme cela avait exprimé pour après et vous pouvez voir que nous obtenons ce même lien et il ya des tutoriels ici-bas il ya un message de débordement pile à ce sujet si vous voulez jeter un oeil.
Je l'ai fait plus tôt.
Quelque chose que vous devez faire beaucoup quand vous savez que le code est mis à jour quand de nouvelles choses sortent.
Surtout avec quelque chose comme Express 4.0 où les choses changent assez significativement.
Beaucoup de choses qui faisaient partie d'Express ont été déplacés de l'express comme des paquets séparés.
Certains noms et syntaxe ont changé.
Donc, je dis toujours que c'est quelque chose que vous faites juste beaucoup lorsque vous essayez de faire quelque chose que vous n'avez pas encore fait dans Express ajouter dans Express pour vos recherches, car souvent vous trouverez de grands tutoriels pour elle.
Il ya deux ans encore 90 pour cent de la même chose, mais que 10 pour cent est vraiment important que vous comprenez comment il est différent de vous savez il ya deux ans contre Express actuel.
D'accord.
Donc la première chose que nous voulons faire est d'installer ce paquet.
Ainsi, il est appelé flash de connexion.
Donc, nous voulons NPM installer tableau de bord enregistrer enregistrer flash tableau de bord.
D'ACCORD.
Maintenant que c'est fait ici, nous allons simplement ajouter en Flash.
Nous allons simplement appeler flash plutôt que de connecter le flash est égale besoin de connecter flash tableau de bord.
Assurez-vous que nous avons une virgule là-bas alors ce que nous devons faire est de dire express dire à l'application d'utiliser Flash.
Nous avons donc pris le contenu de Flash K'NEX que le paquet et enregistré dans la variable flash et nous allons avoir besoin d'exécuter cette application variable utiliser flash comme ça.
Alors techniquement, c'est tout ce que nous devons faire.
Nous avons maintenant Connect Flash installé et si nous revenons en arrière et jetons un coup d'oeil aux docs il y a une autre configuration qu'ils font ici avec l'analyseur de cookie dans la session mais nous avons déjà déjà mis en place là où nous faisons déjà notre.
Où demandez-vous une séance expresse et nous établissons un secret.
Nous ne devons donc pas nous inquiéter parce que nous avons déjà configuré notre application pour utiliser la session Express.
OK alors ce que nous allons faire, c'est que sur chaque page, nous allons montrer le contenu du flash.
Nous allons prendre le message qui est là.
Il pourrait être bon ou pourrait être mauvais, il pourrait être vide et nous allons le montrer en haut de la page et cela se passera dans notre fichier d'en-tête.
E.J ..
Oui, nous allons avoir un code qui affiche simplement l'erreur ou le message de succès et puis tout ce que nous allons faire est quand nous rencontrons une erreur ou un endroit que nous voulons un message de sorte qu'une instance de cela pourrait être au lieu de faire des terrains de camping et Au lieu de nos terrains de camping car nous avons cela est connecté à Middleware où vous ne pouvez pas ajouter un nouveau terrain de camping à moins que vous êtes connecté.
Si nous, si nous allons à ce middleware et nous allons regarder est connecté, nous pourrions vouloir avoir un message qui dit que vous devez être connecté pour le faire ou Connectez-vous.
Donc, ce code irait juste ici.
Donc, avant de rediriger vers la barre oblique, nous allons ajouter quelque chose au flash.
Donc, cela ressemble exactement à ce fait, demandez flash point.
Et puis nous pouvons lui donner une clé.
Donc, dans un instant, je vais vous montrer.
Nous allons utiliser la réussite et l'erreur et nous allons simplement l'utiliser pour déterminer si le message de l'alerte doit être vert ou rouge.
Donc, cette partie n'a pas d'importance pour l'instant, mais cette partie importe où nous allons passer dans un message.
Alors nous pourrions faire quelque chose comme S'il vous plaît vous connecter en premier.
Encore une fois c'est à l'intérieur de l'est connecté dans Middleware.
C'est donc vérifier si la demande est authentifiée si les utilisateurs se sont connectés.
Alors continuez à ce que vous faisiez avant.
Mais si ce n'est pas le cas avant de vous rediriger vers le slash log in.
Oui, n'oubliez pas si nous redirigons vers la barre oblique.
Sans cette ligne, ça continue.
Je vais devoir ouvrir l'itinéraire mais il ira droit au code et à l'ouverture de barre oblique qui est juste ici.
Donc, il rend le log in pour avant que nous faisons que si nous allons exécuter ce code flash.
Et ce que cela va faire est essentiellement de prendre S'il vous plaît vous connecter en premier et il va l'ajouter au flash et il ne sera pas affiché jusqu'à la prochaine chose que nous voyons.
Donc, dans ce cas, cela ne rend pas réellement quoi que ce soit, il nous redirige simplement à barre oblique de connexion et la façon dont le Flash fonctionne est vraiment sympa en ce qu'il n'est pas seulement de se lancer instantanément tout de suite immédiatement.
Il ne fonctionne que ou il apparaît à la page suivante.
Donc, vous le faites réellement avant de rediriger.
Donc, dans ce cas, s'il vous plaît connectez-vous d'abord, puis nous redirigons vers barre oblique de connexion, puis sur le journal et le formulaire, nous espérons voir un message.
À l'heure actuelle, nous ne montrons pas que si.
Donc encore une fois pour réitérer juste en ajoutant cette ligne ne sera pas afficher quoi que ce soit pour nous tout ce que cela fait est il nous donne la capacité, il nous donne un moyen d'accéder à cette sur la prochaine demande.
Donc, nous ne clignons pas tout de suite, nous ne voyons rien, nous ne montrons pas à l'utilisateur quelque chose.
Tout cela ne se dit dans le flash et plutôt que de succès, je pense qu'il est plus logique d'appeler cette erreur dans le flash add S'il vous plaît connectez-vous d'abord pour la prochaine demande et ensuite nous rediriger vers l'ouverture de session slash.
Donc nous devons gérer cela en logon qui est juste ici slash log in.
Alors je pouvais faire quelque chose comme passer dans le message.
Et bien sûr, tout ce que je peux juste vous montrer cela pour commencer, donc si nous avons juste le message d'erreur, vous l'avez raté juste comme ça, nous pourrions simplement afficher que sur notre modèle de sorte que le journal slash qui est à l'intérieur de fusible log in.
Oui, juste au sommet, je pouvais juste avoir un H-1 qui affiche le message juste comme ça.
Rien de très nouveau.
Alors je vais juste vous montrer ce que cela ressemble en ce moment.
Démarrez le serveur vers le haut de la redirection à la barre oblique se loguer et j'obtiens ce message chaque erreur d'heure.
Vous l'avez gâchée.
Comme vous pouvez le voir qui est espérons ce que vous attendiez à ce point parce que je hardcoded à chaque fois que nous allons à barre oblique de connexion, nous voyons vous gâché.
OK donc en utilisant flash ce que nous pouvons faire est maintenant dire message est égal à la demande de flash et nous pouvons simplement faire l'erreur dans le flash.
Donc, c'est un peu confus.
Mais essentiellement l'idée est en ce moment si je viens de rafraîchir la page de redémarrer le serveur et de rafraîchir il ne devrait pas y avoir d'erreur dans le flash.
Nous ne voyons donc rien.
Mais alors, si nous faisons ce code exécuter wups ce code ici et la façon dont nous faisons ce qui est d'essayer d'accéder à quelque chose où nous devons être connecté où ce middleware est appelé alors ce qui se passera est que nous l'ajoutons au flash sous L'erreur clé avec la valeur s'il vous plaît connectez-vous d'abord, puis nous allons slash log in.
Ensuite, à l'intérieur de l'ouverture de session slash, nous envoyons sous la clé de la demande de message jusqu'à l'erreur flash qui est beaucoup de choses qui doivent être connectés et il est un peu confus encore.
Mais laissez-moi vous montrer maintenant.
Alors je recommence.
En fait, je n'ai pas eu à le faire cette fois, mais nous ne voyons rien.
Maintenant, laissez-moi aller dans les terrains de camping et essayez d'ajouter un nouveau terrain de camping, même si je ne suis pas connecté.
Et maintenant, je reçois ce message qui dit S'il vous plaît vous connecter en premier qui n'était pas là avant et si je rafraîchir la page, il s'en va.
C'est donc une version très simple de ce que nous pouvons accomplir en utilisant Flash.
Donc, avant de passer à la prochaine vidéo à la mise en œuvre de cette avec tous les différents messages et le style.
Résumons simplement comment cela fonctionne à nouveau.
Donc, chaque fois que nous voulons afficher un message, que ce soit un message de succès ou un message d'erreur quel qu'il soit, nous allons utiliser cette ligne ici.
Demande de flash.
Et puis nous transmettons une clé et une valeur et nous le faisons avant de rediriger.
C'est vraiment important si je mets cette ligne après la redirection.
Cela ne fonctionnera pas.
Donc, avant de rediriger et puis vous avez encore à gérer dans le modèle vous-même pour le gérer et l'itinéraire tout ce qu'il vous donne est la capacité d'ajouter des données avant de redirection.
Cela le rend à la prochaine route.
Et que les données ne persisteront pas sur chaque demande unique à cette route.
Donc c'est une chose une fois.
C'est pourquoi il est appelé Flash.
D'ACCORD.
Donc, dans la prochaine vidéo, je vais vous montrer comment mettre en œuvre réellement pour de vrai où nous n'avons pas à le faire.
Transmettre le message à chaque modèle où nous pouvons style pense très bien avec le bootstrap où nous pouvons avoir des messages rouges et verts, nous pouvons avoir des couleurs différentes si nous voulons mettre rouge et vert sont les standards.
D'ACCORD.
C'est dans la prochaine vidéo.