‫Jonas : Utilisons maintenant la page du compte
‫utilisateur afin de permettre aux utilisateurs de mettre à jour leurs données.
‫Nous allons donc permettre à l'utilisateur de
‫mettre à jour à la fois le nom et l'adresse e-mail pour le moment.
‫Et nous ajouterons la photo de l'utilisateur ici un
‫peu plus tard dans la section suivante.
‫Bon, maintenant il y a deux manières de faire ça.
‫La première consiste à soumettre une demande de publication à notre API comme nous
‫l'avons fait avec le formulaire de connexion, vous vous en souvenez ?
‫Et en fait, nous allons le faire dans la prochaine conférence.
‫Mais dans celui-ci, je veux vous montrer
‫une autre voie qui est une voie normale plus traditionnelle.
‫Ainsi, de cette manière plus
‫traditionnelle, nous spécifions la méthode de publication directement sur
‫le formulaire, ainsi que l'URL à laquelle la demande de publication doit être envoyée.
‫Donc, fondamentalement, en utilisant cette méthode, nous n'avons pas besoin
‫de JavaScript pour faire la demande, cela se
‫produit automatiquement avec le formulaire HTML qui publiera ensuite les données sur
‫le point de terminaison de l'URL dans notre backend que nous avons spécifié.
‫Personnellement, je n'aime pas vraiment cette solution, car elle force
‫le rechargement de la page et nous
‫oblige également à créer une
‫autre route et un autre gestionnaire de route dans notre backend.
‫Et enfin, cela rend également un
‫peu plus difficile la gestion des erreurs.
‫Cependant, je pense toujours qu'il est très important que
‫vous sachiez comment utiliser les formulaires de cette manière,
‫car cela pourrait avoir plus
‫de sens dans l'application que vous créez.
‫Par exemple, votre application n'a peut-être même pas besoin d'une API, et donc
‫dans ce cas, lorsque vous ne construisez
‫qu'un site Web rendu, il n'est bien sûr pas logique
‫de soumettre des formulaires à l'aide d'un appel d'API,
‫et à la place, vous
‫faites-le comme nous allons le faire dans cette vidéo.
‫D'accord, et c'est pourquoi nous procédons de cette façon
‫dans cette conférence, puis en
‫utilisant la méthode API dans la prochaine conférence.
‫Donc, ce que nous devons faire dans
‫notre formulaire afin de le soumettre
‫automatiquement, sans avoir à
‫passer par JavaScript comme je l'ai
‫mentionné précédemment, donc en gros, la publication automatique des
‫données sur notre point de terminaison, c'est de spécifier ce point de terminaison, et
‫nous le faisons donc ici dans le formulaire, où nous spécifions l'attribut action.
‫Donc l'action, et disons que nous allons créer
‫un point final appelé soumettre les données utilisateur, comme ceci.
‫D'accord, puis nous spécifions également la
‫méthode, qui est post, d'accord, donc cela doit toujours se
‫produire sur l'élément de formulaire que nous soumettons, d'accord.
‫Laissons lui un peu plus d'espace ici,
‫afin qu'il soit plus facile
‫à comprendre, et donc tout cela ici est
‫notre formulaire, et donc lorsque nous cliquons
‫sur cet élément de bouton, automatiquement le formulaire sera soumis, et
‫les données seront envoyées en utilisant une demande de publication vers cette URL, d'accord.
‫Il existe également différentes manières d'envoyer
‫les données, mais celle par défaut est appelée URL codée,
‫et c'est donc celle que nous utilisons ici.
‫Et donc, en gros, ce que
‫cela va faire, c'est encoder toutes les données que nous
‫soumettons dans l'URL un peu comme une chaîne de requête.
‫D'accord, mais plus à ce sujet lorsque nous travaillons
‫réellement à obtenir les données sur le serveur et à travailler avec.
‫Donc, voici la première étape pour faire fonctionner cette méthode, et la
‫seconde consiste à spécifier les propriétés de nom sur les
‫champs que nous voulons réellement envoyer.
‫C'est donc cette entrée et cette entrée,
‫et leurs valeurs seront envoyées avec
‫une requête basée sur leurs attributs de nom.
‫D'accord, disons ici, le nom est égal au nom, d'accord,
‫c'est donc le nom d'utilisateur, et celui-ci ici aura
‫le nom égal à l'e-mail.
‫D'accord, et ce sera alors le nom de ce champ, et
‫le corps que recevra notre application.
‫Très bien, et donc maintenant, lorsque nous soumettons le formulaire, le
‫corps que nous recevrons alors n'aura
‫que le nom et l'e-mail, car ce sont
‫les deux seuls champs
‫qui ont réellement un attribut de nom.
‫Très bien, implémentons maintenant cette route ici, d'accord, donc comme je
‫l'ai dit avec cette méthode, nous devons
‫implémenter encore une autre route.
‫D'accord, donc routeur, et n'oubliez pas qu'il s'agit d'une demande de publication.
‫D'accord, et donc celui-ci sera dans viewsController, et
‫disons updateUserData, d'accord, enregistrez-le et créons
‫maintenant ce gestionnaire.
‫Donc ici dans ce fichier.
‫Et la première chose que je veux
‫faire ici est de jeter un coup d'œil au corps. corps, d'accord, et donc fondamentalement dans ce
‫cas, juste pour vous montrer que cela ne fonctionnera pas comme ça.
‫D'accord, et je vais vous dire pourquoi après
‫l'avoir expérimenté, d'accord, alors pour
‫l'instant, voyons simplement si nous sommes déjà connectés.
‫Donc, si la soumission de
‫ce formulaire déclenchera réellement ce gestionnaire ici, d'accord, ajoutons
‫également une chaîne ici juste pour nous en assurer.
‫Très bien, alors rechargeons ceci
‫ici afin d'obtenir notre nouveau formulaire, et juste pour être sûr,
‫jetons un coup d'œil à cela.
‫D'accord, donc vous voyez
‫ici, l'action et la méthode que nous avons
‫ajoutées, et bien sûr aussi ces noms, d'accord,
‫et donc ajoutons un deuxième prénom ici, je ne sais pas, disons Sarah,
‫puis ici l'e-mail ajoutons le nom
‫de famille, maintenant nous obtenons cette erreur, veuillez fournir un e-mail et un
‫mot de passe, et donc ce genre de vient du formulaire
‫de connexion, à droite, donc c'est bizarre.
‫Jetons donc un œil à notre formulaire ici,
‫et en effet, ce formulaire ici a la classe form.
‫Et je pense que c'est celui que nous avons utilisé aussi
‫dans notre index. js, à droite.
‫Donc, ici, nous avons essentiellement
‫obtenu ce formulaire en utilisant la classe de formulaire, et quand cela
‫existe et qu'il est soumis, nous essayons de nous connecter, ici.
‫D'accord, et ce n'est bien sûr pas correct, et nous devrions
‫donc sélectionner notre formulaire de connexion d'une autre manière.
‫Alors corrigeons très rapidement cela, ici nous avons login, alors
‫ajoutons simplement une
‫autre classe ici, form login, et c'est un peu bizarre car nous avons déjà
‫un formulaire de connexion ici, mais ce n'est
‫pas vraiment sur un élément de formulaire.
‫Nous ne devrions donc pas utiliser cela,
‫et créons donc ici un formulaire avec un modificateur de login, d'accord.
‫Mettons cela ici, sauvegardons-le, et maintenant cela ne devrait plus
‫se produire, car maintenant nous n'avons
‫plus ce gestionnaire d'événement attaché
‫à ce formulaire.
‫Rechargeons-le donc rapidement, et réessayez, et
‫maintenant vous voyez qu'il fait quelque chose, mais bien sûr, il
‫ne s'arrêtera jamais de tourner ici, car
‫nous n'avons en fait renvoyé aucune réponse, et donc
‫le cycle de réponse à la demande n'est jamais terminé.
‫Mais de toute façon, je voulais juste regarder le corps de la requête,
‫tu te souviens de ça ?
‫Et donc, comme je l'ai mentionné précédemment, c'est maintenant en fait MT.
‫Bon, comme je le disais, cela ne fonctionnera pas
‫vraiment comme ça, car nous devons ajouter
‫un autre middleware afin d'analyser les données provenant d'un formulaire.
‫Faisons-le donc dans notre application. js.
‫Mais d'abord, fermons en fait certains de ces fichiers ici.
‫D'accord, celui-ci aussi, et maintenant, allons à l'application. js, ajoutons cette clause à notre analyseur de
‫corps, alors nous y
‫sommes, car en fait, c'est très similaire.
‫Donc appli. utiliser, et c'est toujours un middleware Express
‫intégré, donc express. urlencoded, d'accord, et il s'appelle ainsi car
‫rappelez-vous, la façon dont le formulaire
‫envoie des données au serveur est en fait également appelée URL
‫codée, et donc ici, nous avons besoin de ce middleware pour analyser
‫essentiellement les données provenant d'un formulaire URL codé.
‫Ensuite, nous passons dans certains paramètres, et nous pouvons dire étendu vrai,
‫et cela nous permettra simplement de passer des
‫données plus complexes, ce qui dans ce cas n'est pas vraiment nécessaire, mais
‫utilisons-les quand même
‫ici, et nous pouvons également
‫définir la limite propriété comme nous l'avons fait dans l'analyseur
‫de corps, donc ici, et disons encore 10 kilo-octets.
‫D'accord, et donc si nous essayons à nouveau ici, nous
‫devrions en effet obtenir ces données, et ces données.
‫Ajoutons à nouveau ces différentes données ici, afin que nous
‫soyons sûrs qu'ils n'obtiennent pas l'utilisateur actuel, mais vraiment les
‫données provenant du formulaire, d'accord, et encore une
‫fois, cela continue de
‫tourner pour toujours
‫ici, ou jusqu'à ce qu'il expire, mais ce
‫qui nous intéresse, c'est d'obtenir ces nouvelles données ici maintenant dans notre corps.
‫Super, donc ça marche, et nous avons donc maintenant
‫notre formulaire HTML vraiment connecté à ce gestionnaire de route ici.
‫Et maintenant, nous pouvons aller de l'avant et mettre à jour
‫l'utilisateur en fonction de ces nouvelles données, d'accord.
‫Alors, débarrassons-nous de cela, puis mettons
‫à jour l'utilisateur car nous savons déjà comment le faire.
‫Maintenant, tout d'abord, nous allons devoir importer
‫le modèle utilisateur, alors faisons-le.
‫User, ici avec un
‫petit U, d'accord, et disons maintenant que
‫l'utilisateur est égal à wait User. findByIdAndUpdate.
‫Bon, alors bien sûr,
‫comme toujours, marquez celui-ci comme asynchrone et détectez toutes les erreurs.
‫Bon, alors quelle est l'ID que nous recherchons ?
‫Et j'espère qu'à ce stade vous savez où il se
‫trouve, ce sera à la demande. utilisateur. identifiant.
‫Oh, et une chose
‫importante que nous devons faire, ce que je
‫n'ai pas encore fait, est de protéger cette route
‫ici aussi, d'accord, car ce n'est qu'alors que
‫nous avons réellement cet utilisateur sur la demande, n'est-ce pas,
‫et bien sûr De plus, nous ne voulons pouvoir accéder à cet
‫itinéraire que si nous sommes connectés, sinon tout
‫le monde pourrait simplement aller de l'avant et mettre à jour certaines données.
‫Donc, ici dans la
‫route, ajoutons bien sûr authController. protéger.
‫D'accord, c'est
‫l'ID, alors nous avons besoin des nouvelles données, et
‫disons que nous voulons un nom égal à request. corps. nom et l'adresse e-mail à
‫demander. corps. e-mail.
‫Et rappelez-vous que ce sont les
‫noms des champs, car nous leur avons donné l'attribut name dans le formulaire HTML.
‫N'oubliez pas qu'avant, lorsque nous mettions à jour certaines données, nous transmettions
‫l'intégralité de la demande ici à la méthode de mise à jour, d'accord,
‫mais dans ce cas, nous ne voulons vraiment
‫mettre à jour que le nom et l'e-mail, et ainsi,
‫nous sommes sûr que tout le reste est fondamentalement supprimé du
‫corps, car un pirate informatique pourrait bien sûr maintenant
‫aller de l'avant et ajouter des champs supplémentaires au code HTML,
‫puis, par exemple, soumettre des données comme
‫des mots de passe et des trucs comme ça,
‫et bien sûr nous le faisons Je ne
‫veux pas stocker ces données malveillantes dans notre
‫base de données, n'est-ce pas.
‫De plus, les mots de passe sont à nouveau traités séparément,
‫car rappelez-vous que nous ne pouvons jamais mettre à jour les mots
‫de passe à l'aide de findByIdAndUpdate.
‫Encore une fois, parce que cela ne va pas exécuter le middleware
‫sécurisé qui se chargera de chiffrer nos mots de passe.
‫D'accord, et c'est pourquoi nous avons une route distincte pour
‫cela dans notre API, et nous avons
‫également une route distincte pour cela dans notre interface utilisateur.
‫Et c'est généralement ce que vous voyez toujours
‫dans les applications Web lorsque vous souhaitez mettre à jour
‫vos mots de passe, vous avez généralement un
‫formulaire séparé uniquement pour cela, d'accord.
‫Quoi qu'il en soit, continuons maintenant ici avec nos
‫options, où nous disons que nous voulons
‫obtenir le nouveau, donc essentiellement le document mis à jour
‫en conséquence, et que nous voulons également exécuter les validateurs.
‫C'est donc exactement comme nous l'avons fait auparavant dans notre API.
‫Génial, appelons-le en fait updateUser.
‫D'accord, et qu'est-ce qu'on veut faire maintenant ?
‫Eh bien, après avoir soumis les données sur notre site Web,
‫ce que nous voulons essentiellement, c'est simplement revenir à
‫cette page ici, mais bien sûr, avec les
‫données mises à jour ici, d'accord.
‫C'est donc facile, tout ce que nous aurons à faire est
‫de restituer à nouveau la page du compte.
‫Et donc c'est similaire à celui-ci, copions-le, d'accord,
‫mais maintenant il y a en
‫fait une différence importante, car pour le moment, nous devons
‫également transmettre l'utilisateur, donc
‫l'utilisateur mis à jour, car sinon,
‫l'utilisateur que le modèle va utiliser, est celui qui vient
‫du middleware de protection, rappelez-vous, et de
‫sorte que l'on ne va pas
‫être l'utilisateur mis à jour.
‫D'accord, et nous devons donc transmettre l'utilisateur est mis à jourUser.
‫D'accord, et donc, cela devrait suffire.
‫Donc, si nous rechargeons maintenant ceci, ou en fait si maintenant
‫enregistrez ceci ici, alors vous voyez que nous sommes en fait revenus exactement à la même page et
‫que les données sont toujours les mêmes.
‫Alors prouvons cela, allez sur une
‫autre page, puis revenez à la page des paramètres.
‫Et donc, cela prouve que les données sont
‫désormais effectivement mises à jour.
‫Donc, si nous nous déconnectons maintenant,
‫essayons de nous connecter avec ce nouvel e-mail.
‫Je voulais donc me déconnecter, d'accord, et maintenant me reconnecter.
‫Et donc maintenant, nous allons utiliser ce nouvel e-mail, et bien sûr toujours l'ancien
‫mot de passe, test1234, et en effet,
‫c'est maintenant la nouvelle adresse
‫e-mail que nous devons utiliser pour nous connecter.
‫Voyons maintenant ce qui se passe lorsque nous transmettons
‫des données erronées ici.
‫Par exemple, Google Chrome nous permet de soumettre une adresse
‫e-mail comme celle-ci, mais bien sûr,
‫notre modèle Mongoose n'autorise pas un
‫e-mail avec ce format.
‫Et donc nous devrions maintenant obtenir une erreur, et
‫en effet, nous obtenons
‫cette erreur, veuillez fournir un e-mail valide, mais c'est une
‫sorte d'expérience utilisateur terrible, n'est-ce pas, nous ne faisions que soumettre
‫nos données, et puis tout d'un coup, nous sommes
‫allés à une toute nouvelle page.
‫Et en fait, nous voyons que nous sommes également
‫arrivés à cette nouvelle URL, donc celle à laquelle nous avons soumis les données.
‫Et donc oui, c'est un peu terrible, et comme
‫je le disais au début, cette
‫façon de faire est en fait un peu
‫pire pour gérer les erreurs, ce qui est
‫une des raisons pour lesquelles je préfère personnellement utiliser
‫l'API que nous déjà créé afin de mettre à jour
‫les données de l'utilisateur, et en général de faire ce genre de choses.
‫Très bien, alors faisons
‫exactement cela dans la prochaine vidéo.