1 00:00:00,390 --> 00:00:01,300 Nous saluons le retour. 2 00:00:01,560 --> 00:00:24,100 Dans cette vidéo, nous allons vous faire passer les étapes de création d'une application simple très très simple et le but ici est de vous montrer comment POST demandes de travail et d'exprimer comment nous créons des routes qui sont à l'écoute pour les demandes de poste, puis comment nous pouvons tester Les avec le facteur et puis voir comment nous pouvons écrire un formulaire sur un modèle express différent et ont ce formulaire faire une demande POST à ​​notre application express. 3 00:00:24,180 --> 00:00:31,380 Donc, comme je l'ai mentionné, nous allons faire une application simple ensemble et je vais commencer à partir de zéro et installer et inclure Express. 4 00:00:31,380 --> 00:00:34,180 Et puis nous allons aller sur la logique de l'application réelle. 5 00:00:34,410 --> 00:00:56,310 Donc, je vais commencer maintenant et juste faire un nouveau répertoire que je vais appeler post demo de demande de CD dans ce domaine et nous allons exécuter NPM en elle et nous allons juste frapper entrer quelques fois changer point d'entrée. 6 00:00:56,560 --> 00:00:57,310 D'ACCORD. 7 00:00:57,900 --> 00:00:59,310 Voilà. 8 00:00:59,310 --> 00:01:07,010 Nous avons notre paquet que Jason nous laisser maintenant installer tiret express tableau de bord sauver. 9 00:01:08,580 --> 00:01:14,590 Et pendant que nous sommes ici, nous allons installer NPM E.J. S ainsi et sauf cela. 10 00:01:15,080 --> 00:01:15,650 D'ACCORD. 11 00:01:15,870 --> 00:01:17,450 Maintenant, créons notre application. 12 00:01:17,510 --> 00:01:18,750 Oui. 13 00:01:19,350 --> 00:01:26,020 Et puis nous allons ouvrir cela et ajouter dans notre code exprimé de base dont nous avons besoin. 14 00:01:26,190 --> 00:01:34,470 Donc, nous allons l'importer avec require et ensuite créer une variable d'application où nous exécutons. 15 00:01:34,470 --> 00:01:45,880 EXPRESS Et pendant que nous sommes ici, nous allons aussi faire l'application ne vous mettre le moteur d'être Ejay Oui et je vais enregistrer cela. 16 00:01:46,050 --> 00:01:52,650 Et puis nous faisons aussi notre apt écouter en bas au lieu d'ici va vous faire traiter cela. 17 00:01:52,660 --> 00:01:55,630 Et nous l'avons. 18 00:01:56,010 --> 00:02:01,750 Et pour traiter l'IP ENFP et notre fonction de rappel. 19 00:02:01,980 --> 00:02:10,110 Et enfin je vais juste faire un très simple venir au serveur de journal a commencé. 20 00:02:10,890 --> 00:02:11,180 D'ACCORD. 21 00:02:11,190 --> 00:02:12,510 Donc, nous avons cette mise en place. 22 00:02:12,570 --> 00:02:28,460 Maintenant, nous allons créer notre itinéraire brut comme ça et nous allons simplement rendre un modèle pour le restaurant maintenant rendue appelée à la maison comme ça et sauver. 23 00:02:28,530 --> 00:02:30,020 Maintenant, faisons ce modèle. 24 00:02:30,120 --> 00:02:37,650 Donc, nous avons besoin d'un répertoire utilisé faire des vues répertoire et vous devez toucher vos vues de fichier slash home. 25 00:02:37,760 --> 00:02:38,490 Oui. 26 00:02:38,760 --> 00:02:49,850 Et puis ouvrir ce fichier et à l'intérieur de là, nous allons faire un H-1 simple qui dit page d'accueil comme ça et nous allons nous assurer que ça fonctionne. 27 00:02:50,070 --> 00:02:58,350 Donc nous allons exécuter le noeud Apalachee nous revenons ici rafraîchir et nous obtenons la page d'accueil. 28 00:02:58,790 --> 00:03:05,270 OK donc nous avons le squelette de base mis en place, nous avons express inclus, nous avons Ejaz inclus. 29 00:03:05,340 --> 00:03:09,260 Nous avons défini le moteur de visualisation par défaut et nous avons notre itinéraire. 30 00:03:09,690 --> 00:03:18,780 L'application que nous allons faire est essentiellement une liste d'amis ou liste d'amis que vous pouvez ensuite aller dans et à travers un formulaire, vous pouvez ajouter un nouvel ami à votre liste. 31 00:03:18,960 --> 00:03:28,610 Et cela pourrait être quelque chose d'amis ou de faire ou de contacts ou de chiens juste quelque chose que nous allons avoir une liste de ce que nous pouvons ensuite créer un nouveau en utilisant un formulaire. 32 00:03:28,800 --> 00:03:41,410 Donc nous allons faire des amis et nous allons ajouter dans l'application et obtenir des amis barre oblique et ce sera la page le modèle qui montre une liste d'amis. 33 00:03:42,990 --> 00:03:50,120 Et au lieu d'ici vont faire un redstart rendre et nous allons juste appeler amis et maintenant nous devons créer ce modèle. 34 00:03:50,400 --> 00:04:00,430 Donc, nous allons faire le point de vue vues ami que Ejay nous, puis ouvrez ce fichier juste comme ça. 35 00:04:00,790 --> 00:04:12,720 Et à l'intérieur d'ici, nous ajouterons un autre H-1 juste la liste d'amis juste va ici et nous allons exécuter notre serveur assurez-vous qu'il fonctionne. 36 00:04:12,930 --> 00:04:17,290 Si nous allons à des amis de barre oblique nous obtenons la liste d'amis va ici. 37 00:04:17,610 --> 00:04:18,270 D'ACCORD. 38 00:04:18,270 --> 00:04:21,010 Donc, ce que nous allons faire est d'afficher une liste d'amis. 39 00:04:21,210 --> 00:04:22,890 Nous devons donc créer cette liste. 40 00:04:22,890 --> 00:04:23,970 Nous avons besoin des données. 41 00:04:24,210 --> 00:04:46,080 Donc, je vais créer un tableau de noms d'amis et ça va être très simple tout simplement amis loin égaux et nous allons simplement ajouter en quelques noms ici comme Tony et Justin Pierre et Lilly. 42 00:04:46,290 --> 00:04:46,860 D'ACCORD. 43 00:04:47,140 --> 00:04:57,580 Nous avons donc un groupe d'amis et nous allons passer cette liste d'amis par le biais de notre modèle d'amis où nous allons ensuite en boucle et afficher chaque ami comme un élément de liste. 44 00:04:57,640 --> 00:04:59,220 Donc nous devons transmettre cela. 45 00:04:59,300 --> 00:05:02,770 Rappelez-vous que c'est un objet et nous avons deux choses à faire. 46 00:05:02,770 --> 00:05:15,730 Nous devons lui donner un nom ou une propriété que nous allons utiliser pour le regarder dans la vue que je voudrais appeler les amis et nos données que nous sommes en passant comme amis, ce qui est source de confusion lorsque vous venez de commencer . 47 00:05:15,760 --> 00:05:21,560 Mais c'est ce que vous verrez le plus souvent où vous utilisez juste le même nom, mais rappelez-vous cela peut être n'importe quoi du tout. 48 00:05:21,580 --> 00:05:24,810 Et cela se réfère à notre réseau d'amis ici. 49 00:05:25,150 --> 00:05:32,070 OK, maintenant, allons-y au modèle d'étude ami ami et ajoutez dans notre boucle et je vais faire un pour chacun. 50 00:05:32,290 --> 00:05:36,690 Alors je vais juste écrire le javascript régulier d'abord sans les parenthèses sans l'Ejay nous. 51 00:05:36,820 --> 00:05:50,760 Ainsi nous avons des amis pour chaque fonction et notre fonction prendra paramètre d'ami là et puis nous avons notre ouverture fermant des accolades juste comme cela. 52 00:05:50,920 --> 00:05:59,620 Et au lieu d'ici ce que nous allons faire est de faire un allié pour chacun qui dit que j'ai un ami juste comme ça. 53 00:05:59,610 --> 00:06:06,120 Maintenant, revenons en arrière et ajoutez dans les phrases que nous n'avons pas besoin de signe égal ou rappelez-vous cela est juste pour la logique. 54 00:06:06,280 --> 00:06:09,800 Nous ne voulons pas que quelque chose se présente sur ces deux lignes. 55 00:06:09,970 --> 00:06:21,640 Donc, nous avons fait et si nous sauvegardons et rafraîchir, nous devrions voir un allié qui dit que j'ai un ami pour chaque ami dans cette liste et essayons de s'assurer que nous n'avons pas d'erreurs. 56 00:06:21,880 --> 00:06:26,890 Actualisez la page et nous obtenons 5 éléments de liste qui disent que j'ai un ami. 57 00:06:27,530 --> 00:06:32,690 Maintenant, nous allons revenir en arrière et plutôt que de simplement dire que j'ai un ami nous allons effectivement imprimer le nom de l'ami. 58 00:06:32,950 --> 00:06:40,620 Donc, cette fois, nous avons besoin du signe égal car nous voulons que la valeur qui a été évaluée soit ajoutée à l'équipe elle-même ici. 59 00:06:40,750 --> 00:06:47,750 Nous voulons qu'il soit remplacé par la valeur d'un ami qui vient de droite ici dans notre pour chacun. 60 00:06:47,740 --> 00:06:49,140 Encore une fois ceci peut être n'importe quoi. 61 00:06:49,140 --> 00:06:50,620 Nommez-nous ce que nous voulons x. 62 00:06:50,720 --> 00:06:54,010 Et si elle met X ici, ça marchera. 63 00:06:54,430 --> 00:07:07,090 Alors laissez-moi juste vous montrer que rafraîchir et nous avons nos cinq amis et parce que X est un nom de variable terrible beaucoup de revenir à un ami comme ça pour redémarrer le serveur. 64 00:07:07,120 --> 00:07:10,690 Une fois de plus et vous pouvez voir rien ne change. 65 00:07:10,690 --> 00:07:12,910 OK, nous avons cette liste d'amis. 66 00:07:13,060 --> 00:07:16,880 Maintenant, ce que nous allons faire est de parler de la mise en place de la voie post. 67 00:07:17,110 --> 00:07:27,760 Le but à la fin est d'avoir un formulaire au bas de cette page et nous pouvons taper un nom dans ce formulaire et cliquez sur le bouton de soumettre et il ajoutera alors un nouvel ami à notre liste. 68 00:07:27,790 --> 00:07:37,250 Nous allons donc pousser un nouveau nom dans le tableau des amis et ensuite rendre ce modèle à nouveau qui va ensuite ajouter un nouveau point de balise et un nouvel élément de liste pour cet ami nouvellement ajouté. 69 00:07:37,390 --> 00:07:55,400 Nous devons commencer par mettre en place un post-road et rappelez-vous que nous utilisons un poste Strout à chaque fois que nous ajoutons des données à quelque chose quand nous envoyons des données et nous voulons l'ajouter à la base de données si nous signons un Utilisateur ou nous créons un nouveau commentaire ou créez un nouveau message ou, dans ce cas, un nouvel ami un itinéraire post. 70 00:07:55,420 --> 00:07:59,390 Est ce qui fait le plus de sens même si ce n'est pas la seule option. 71 00:07:59,530 --> 00:08:02,120 Pour l'instant, nous allons le traiter comme si c'était la seule option. 72 00:08:02,140 --> 00:08:10,810 Donc, il est juste pour récupérer des informations et un post est pour l'envoi de nouvelles données à ajouter ou à utiliser d'une manière ou d'une autre sur le côté serveur. 73 00:08:11,140 --> 00:08:26,290 Et tout ce que nous avons besoin d'écrire est apt up post et le nom de l'itinéraire que nous appelons ajouter un ami comme ça et il ressemble le même avec la demande et la réponse et nous allons laisser comme cela pour l'instant. 74 00:08:26,410 --> 00:08:31,770 Et à l'intérieur nous allons juste faire un repos jusqu'à envoyer Nous ne ferons pas un modèle juste point RES envoyer. 75 00:08:32,080 --> 00:08:41,040 Vous avez atteint l'itinéraire de la poste comme ça. 76 00:08:41,080 --> 00:08:47,820 Donc maintenant voyons voir si nous pouvons déclencher cela si nous pouvons le frapper ajouter un ami comme une demande de poste en utilisant le facteur. 77 00:08:47,950 --> 00:08:55,090 Donc, je vais prendre cette URL et de copier ce plus de postman et où nous voulons faire une demande. 78 00:08:55,090 --> 00:09:02,270 Nous pouvons commencer en faisant juste des amis de sosh comme une demande d'obtention et vous voyez que nous obtenons de nouveau chaque équipe lui avec les cinq amis. 79 00:09:02,270 --> 00:09:08,970 Mais maintenant, nous allons faire une demande de post et nous le faisons à la barre oblique ajouter un ami. 80 00:09:09,550 --> 00:09:15,290 Et maintenant, si nous envoyons une demande de poste, nous obtenons un message ne peut pas poster ajouter un ami et c'est pour une raison idiote. 81 00:09:15,400 --> 00:09:18,490 Nous devons redémarrer le serveur chaque fois que nous ajoutons un nouvel itinéraire. 82 00:09:18,850 --> 00:09:22,770 Et maintenant, si nous retournons et envoyons la demande à nouveau, nous obtenons un message. 83 00:09:22,930 --> 00:09:24,740 Vous avez atteint la route post. 84 00:09:24,820 --> 00:09:31,010 Nous envoyons donc une demande de poste et nous le faisons par le biais d'un facteur plutôt que d'utiliser un formulaire, mais c'est la même idée exacte. 85 00:09:31,030 --> 00:09:32,130 Il fonctionne de la même manière. 86 00:09:32,170 --> 00:09:36,650 Nous envoyons une demande de post et ce code est exécuté ici. 87 00:09:36,710 --> 00:09:42,300 OK alors la prochaine chose que nous voulons faire est d'utiliser un formulaire pour envoyer cette demande de post. 88 00:09:42,430 --> 00:09:51,320 Donc je vais aller à l'étude des amis chaque page et au fond beaucoup de formulaire et ce formulaire se soumettra à cette route. 89 00:09:51,670 --> 00:09:54,390 Rappelez-vous donc qu'il ya deux attributs importants. 90 00:09:54,440 --> 00:09:57,900 Il y a action et puis méthode. 91 00:09:58,540 --> 00:09:59,790 Commençons donc par la méthode. 92 00:09:59,920 --> 00:10:06,780 Nous voulons envoyer une demande de post et l'action est le vous êtes un tout qui est slash et ami. 93 00:10:07,420 --> 00:10:10,700 Et encore une fois, cela doit correspondre à ce taux ici. 94 00:10:10,990 --> 00:10:13,440 Slash ajouter un ami comme un post. 95 00:10:13,910 --> 00:10:14,620 D'accord. 96 00:10:14,620 --> 00:10:25,880 Et au lieu d'ici, nous allons avoir un seul type d'entrée est égal au texte et nous voulons aussi avoir un espace réservé qui dit le nom ou ce que nous voulons mettre là. 97 00:10:25,900 --> 00:10:37,180 C'est juste le texte d'espace réservé et puis nous ajouterons également un bouton à la fin et ceci juste dira que j'ai fait un nouvel ami et économiser cela. 98 00:10:37,890 --> 00:10:40,320 Et donc cela va créer une forme pour nous en ce moment. 99 00:10:40,690 --> 00:10:55,090 Si je redémarre le serveur et je retourne et je rafraîchir la page, j'ai maintenant un formulaire ici et si nous l'inspecter, il a ces deux attributs où nous avons l'action c'est ADD ami méthode est post et il a une seule entrée. 100 00:10:55,420 --> 00:11:00,150 Et si je tape quelque chose ici, j'ai fait un nouvel ami nommé aujourd'hui Bob et ils cliquent. 101 00:11:00,160 --> 00:11:02,500 J'ai fait un nouvel ami. 102 00:11:02,770 --> 00:11:04,560 Vous pouvez voir que nous obtenons cette réponse. 103 00:11:04,570 --> 00:11:09,980 Vous avez atteint la route post, ce qui signifie que nous envoyons une demande de post et que nous l'envoyons au bon endroit. 104 00:11:10,030 --> 00:11:14,140 Slash ajouter un ami mais nous ne faisons rien dans cette voie. 105 00:11:14,140 --> 00:11:21,240 Mis à part répondre avec ce message et ce que nous voulons réellement faire est de prendre les données de la forme que vous souhaitez prendre Bob.