1 00:00:00,390 --> 00:00:01,300 Welkom terug. 2 00:00:01,560 --> 00:00:24,100 In deze video gaan we om u door de stappen van het creëren van een eenvoudige applicatie zeer eenvoudig en het doel is hier om je te laten zien hoe POST-aanvragen werken en uit te drukken hoe creëren we routes die luisteren voor post verzoeken dan hoe we kunnen testen ze met postbode en dan zien hoe we een formulier op een andere express template kan schrijven en hebben die vorm maakt een POST-verzoek aan onze uitdrukkelijke app. 3 00:00:24,180 --> 00:00:31,380 Dus zoals ik al zei gaan we een eenvoudige toepassing samen en ik ga vanaf nul te beginnen en te installeren en omvatten Express. 4 00:00:31,380 --> 00:00:34,180 En dan zullen we de slag te gaan op de feitelijke toepassing logica. 5 00:00:34,410 --> 00:00:56,310 Dus ik ga nu beginnen en gewoon een nieuwe map die ik Aanvraag demo-cd zullen noemen in dat en we zullen NPM draaien in en we zullen gewoon druk op enter een paar keer te veranderen entry point. 6 00:00:56,560 --> 00:00:57,310 OK. 7 00:00:57,900 --> 00:00:59,310 Daar gaan we. 8 00:00:59,310 --> 00:01:07,010 Wij hebben ons pakket dat Jason laten we nu installeren uitdrukkelijke dash dash save. 9 00:01:08,580 --> 00:01:14,590 En NPM terwijl we hier laten installeren E.J. s zo goed en behalve dat. 10 00:01:15,080 --> 00:01:15,650 OK. 11 00:01:15,870 --> 00:01:17,450 Laten we nu onze app te creëren. 12 00:01:17,510 --> 00:01:18,750 Ja. 13 00:01:19,350 --> 00:01:26,020 En dan zullen we openen die op en aan onze fundamentele geuit code die we nodig hebben. 14 00:01:26,190 --> 00:01:34,470 Dus we gaan importeren met vragen en maak vervolgens een app variabele waar we uit te voeren. 15 00:01:34,470 --> 00:01:45,880 Express en terwijl we hier zullen we ook doen app doet de motor ingesteld u om Ejay Ja en ik zal behalve dat. 16 00:01:46,050 --> 00:01:52,650 En dan hebben we ook doen ons apt up luisteren op de bodem in plaats van hier zal doen jullie dat te verwerken. 17 00:01:52,660 --> 00:01:55,630 En we kregen. 18 00:01:56,010 --> 00:02:01,750 En om ENFP IP en onze callback functie te verwerken. 19 00:02:01,980 --> 00:02:10,110 En tot slot zal ik gewoon een zeer eenvoudige komen tot de log-server gestart. 20 00:02:10,890 --> 00:02:11,180 OK. 21 00:02:11,190 --> 00:02:12,510 Dus hebben we dat opgezet. 22 00:02:12,570 --> 00:02:28,460 Laten we nu creëren onze brute route net als dat en we zullen gewoon maken een sjabloon voor nu restaurant render belde naar huis, net als dat en op te slaan. 23 00:02:28,530 --> 00:02:30,020 Laten we nu maken dat sjabloon. 24 00:02:30,120 --> 00:02:37,650 Dus moeten we een gebruikte directory uitzicht directory en je moet raak je bestandsweergaven slash huis. 25 00:02:37,760 --> 00:02:38,490 Ja. 26 00:02:38,760 --> 00:02:49,850 En open dat bestand en de binnenkant van daar zullen we een eenvoudige H-1 dat de home page zegt net als dat te doen en wij zorgen ervoor dat werkt. 27 00:02:50,070 --> 00:02:58,350 Dus laten we lopen knooppunt Apalachee we gaan hier terug te vernieuwen en krijgen we home page. 28 00:02:58,790 --> 00:03:05,270 OK dus hebben we de basis skelet opgezet we hebben uitdrukkelijk opgenomen hebben we Ejaz inbegrepen. 29 00:03:05,340 --> 00:03:09,260 We hebben de standaard weergave-engine en we hebben onze route route. 30 00:03:09,690 --> 00:03:18,780 De app die we gaan maken is in feite een lijst met vrienden of vrienden lijst die u vervolgens kunt gaan en door middel van een formulier kunt u een nieuwe vriend toe te voegen aan je lijst. 31 00:03:18,960 --> 00:03:28,610 En dit zou kunnen zijn om het even wat vrienden of aan of contacten of honden gewoon iets dat we gaan om een ​​lijst van die we kunnen vervolgens een nieuw exemplaar met behulp van een formulier te maken hebben te doen. 32 00:03:28,800 --> 00:03:41,410 Dus we vrienden doen en we gaan te voegen in app en krijg slash vrienden en dit zal de pagina zijn de sjabloon die een lijst van vrienden laat zien. 33 00:03:42,990 --> 00:03:50,120 En in plaats van hier gaan doen een roodstaart te maken en we zullen gewoon noemen het vrienden en nu moeten we dat sjabloon te maken. 34 00:03:50,400 --> 00:04:00,430 Dus we doen contact uitzicht slash vriend die Ejay ons en open dat bestand net als dat. 35 00:04:00,790 --> 00:04:12,720 En de binnenkant van hier voegen we nog een H-1 precies goed vrienden lijst gaat maar hier en wij draaien onze server ervoor te zorgen dat het werkt. 36 00:04:12,930 --> 00:04:17,290 Als we naar vrienden slash krijgen we vrienden lijst gaat hier. 37 00:04:17,610 --> 00:04:18,270 OK. 38 00:04:18,270 --> 00:04:21,010 Dus wat we gaan doen is een lijst met vrienden te tonen. 39 00:04:21,210 --> 00:04:22,890 En dus moeten we die lijst te maken. 40 00:04:22,890 --> 00:04:23,970 We moeten de gegevens. 41 00:04:24,210 --> 00:04:46,080 Dus ik ga een serie van vrienden namen te creëren en het gaat heel eenvoudig net ver vrienden gelijk te zijn en we zullen gewoon toe te voegen in een paar namen hier als Tony en Justin Pierre en Lilly. 42 00:04:46,290 --> 00:04:46,860 OK. 43 00:04:47,140 --> 00:04:57,580 Dus hebben we een scala aan vrienden en dan gaan we die reeks van vrienden door te geven aan onze vrienden sjabloon waar we vervolgens doorlopen en weer elke vriend als een item in de lijst. 44 00:04:57,640 --> 00:04:59,220 Dus we moeten passeren die in. 45 00:04:59,300 --> 00:05:02,770 Vergeet niet dat het een object en we hebben twee dingen moeten doen. 46 00:05:02,770 --> 00:05:15,730 We moeten het een naam of een eigenschap die we gebruiken om het op te zoeken in de opvatting die ik gewoon vrienden en onze data dat we passeren als ook vrienden die is verwarrend als je net begint zou noemen geven . 47 00:05:15,760 --> 00:05:21,560 Maar dit is wat je vooral zult zien waar je precies dezelfde naam gebruiken, maar vergeet niet dat dit kan helemaal niets zijn. 48 00:05:21,580 --> 00:05:24,810 En dit verwijst hier naar onze vriend array. 49 00:05:25,150 --> 00:05:32,070 OK dus nu laten we gaan naar de template vriend studie genie en aan onze lijn en ik ga een te doen voor elk. 50 00:05:32,290 --> 00:05:36,690 Dus ik zal gewoon schrijven de reguliere javascript eerste zonder de beugels zonder Ejay ons. 51 00:05:36,820 --> 00:05:50,760 Dus hebben we vrienden voor elke functie en onze functie zal vriend parameter er te nemen en dan hebben we onze opening sluiten accolades net als dat. 52 00:05:50,920 --> 00:05:59,620 En in plaats van hier wat we zullen doen is een bondgenoot voor een ieder die zegt dat ik heb een vriend, net als dat. 53 00:05:59,610 --> 00:06:06,120 Laten we nu terug gaan en toe te voegen in de zinnen die we geen isgelijkteken nodig hebt of onthoud dit is alleen voor de logica. 54 00:06:06,280 --> 00:06:09,800 We willen niet iets te laten zien op deze twee lijnen. 55 00:06:09,970 --> 00:06:21,640 Dus hebben we dat gedaan en als we op te slaan en te vernieuwen moeten we een bondgenoot die zegt dat ik heb een vriend voor elke vriend die in die lijst te zien en laten we proberen dat uit te maken dat we geen fouten hebben. 56 00:06:21,880 --> 00:06:26,890 Vernieuw de pagina en we krijgen 5 lijst met items die zeggen dat ik heb een vriend. 57 00:06:27,530 --> 00:06:32,690 Nu gaan we weer terug en in plaats van te gaan dan alleen maar te zeggen dat ik heb een vriend laten we eigenlijk de naam van de vriend te drukken. 58 00:06:32,950 --> 00:06:40,620 Dus deze keer doen we moeten het isgelijkteken want we willen de waarde die geëvalueerd om het team zelf toe te voegen hier. 59 00:06:40,750 --> 00:06:47,750 We willen dat het wordt vervangen door de waarde van een vriend, die afkomstig is van hier in onze voor elk. 60 00:06:47,740 --> 00:06:49,140 Ook dit kan van alles zijn. 61 00:06:49,140 --> 00:06:50,620 Noem het wat we willen x. 62 00:06:50,720 --> 00:06:54,010 Als hier zet X het zal werken. 63 00:06:54,430 --> 00:07:07,090 Dus laat me gewoon laten zien dat vernieuwen en krijgen we onze vijf vrienden en omdat X is een verschrikkelijke naam van de variabele velen terug naar een vriend, net als dat van de server opnieuw op te starten. 64 00:07:07,120 --> 00:07:10,690 Nog één keer en je kunt niets veranderingen te zien. 65 00:07:10,690 --> 00:07:12,910 OK dus we hebben deze lijst met vrienden. 66 00:07:13,060 --> 00:07:16,880 Nu, wat we gaan doen is praten over het opzetten van de post route. 67 00:07:17,110 --> 00:07:27,760 Het doel in het einde is om een ​​formulier aan de onderkant van deze pagina en we kunnen typen in een naam in die vorm en de druk op de submit knop en het zal dan een nieuwe vriend aan onze lijst. 68 00:07:27,790 --> 00:07:37,250 Dus zullen we het duwen van een nieuwe naam in de Friends array en vervolgens waardoor deze sjabloon weer die vervolgens voegt een nieuw punt en nieuw item in de lijst voor die nieuw toegevoegde vriend. 69 00:07:37,390 --> 00:07:55,400 We moeten om te beginnen door het opzetten van een post-weg en vergeet niet dat we gebruik maken van een post Strout elke keer als we zijn het toevoegen van gegevens aan iets als we het verzenden van gegevens door en wij willen toevoegen aan de database of we tot de ondertekening van een gebruiker of we het creëren van een nieuw bericht of het creëren van een nieuwe post of in dit geval een nieuwe vriend een post route. 70 00:07:55,420 --> 00:07:59,390 Is wat maakt het meest logisch maar het is niet de enige optie. 71 00:07:59,530 --> 00:08:02,120 Voor nu gaan we om het te behandelen alsof het de enige optie is. 72 00:08:02,140 --> 00:08:10,810 Dus maak je het alleen voor het ophalen van informatie en een post is voor het verzenden van nieuwe gegevens toe te voegen of om een ​​of andere manier worden gebruikt op de server kant. 73 00:08:11,140 --> 00:08:26,290 En alles wat we nodig hebben om te schrijven is apt-up post en de naam van de route laten we noemen het toevoegen vriend, net als dat en het ziet er hetzelfde uit met het verzoek en reactie en wij zullen het voor nu laten zoals deze. 74 00:08:26,410 --> 00:08:31,770 En binnen zullen we gewoon een rust up send We zullen niet een template res net dot sturen. 75 00:08:32,080 --> 00:08:41,040 U hebt de post route zomaar bereikt. 76 00:08:41,080 --> 00:08:47,820 Dus nu laten we eens kijken of we dit kunnen veroorzaken of we kunnen raken vriend toe te voegen als een post verzoek met behulp van postbode. 77 00:08:47,950 --> 00:08:55,090 Dus ik ga naar deze URL te nemen en kopieer deze naar postbode en waar we willen een verzoek in te dienen. 78 00:08:55,090 --> 00:09:02,270 We kunnen beginnen door gewoon te doen sosh vrienden als een GET-verzoek en u zien we terug elk team hem met de vijf vrienden. 79 00:09:02,270 --> 00:09:08,970 Maar nu laten we een bericht aanvraag en we maken het naar slash vriend toevoegen. 80 00:09:09,550 --> 00:09:15,290 En nu als we een post te versturen krijgen we een bericht kan niet plaatsen vriend toevoegen en dat is voor een domme reden. 81 00:09:15,400 --> 00:09:18,490 We moeten de server elke keer als we een nieuwe route toe te voegen opnieuw op te starten. 82 00:09:18,850 --> 00:09:22,770 En nu als we terug gaan en stuur het verzoek krijgen we weer een bericht. 83 00:09:22,930 --> 00:09:24,740 U hebt de post route bereikt. 84 00:09:24,820 --> 00:09:31,010 Dus we het verzenden van in post verzoek en wij doen het door de postbode in plaats van een vorm, maar het is precies dezelfde gedachte. 85 00:09:31,030 --> 00:09:32,130 Het werkt op dezelfde manier. 86 00:09:32,170 --> 00:09:36,650 Wij sturen een post verzoek en deze code wordt hier uitgevoerd. 87 00:09:36,710 --> 00:09:42,300 OK dus de volgende ding dat we willen doen is gebruik maken van een formulier om die post te versturen. 88 00:09:42,430 --> 00:09:51,320 Dus ik ga naar de vrienden studeren elke pagina en op de bodem veel van vorm en dit formulier zal voorleggen aan die route. 89 00:09:51,670 --> 00:09:54,390 Dus vergeet niet er zijn twee belangrijke eigenschappen. 90 00:09:54,440 --> 00:09:57,900 Er is actie en vervolgens methode. 91 00:09:58,540 --> 00:09:59,790 Dus laten we beginnen met methode. 92 00:09:59,920 --> 00:10:06,780 We willen een bericht te versturen en actie is het je een geheel dat slash en vriend. 93 00:10:07,420 --> 00:10:10,700 En weer dat moet dit percentage hier aan te passen. 94 00:10:10,990 --> 00:10:13,440 Slash vriend toevoegen als een post. 95 00:10:13,910 --> 00:10:14,620 Okee. 96 00:10:14,620 --> 00:10:25,880 En in plaats van hier gaan we een enkele input type hebben gelijk tekst en dan willen we ook een tijdelijke aanduiding die zegt de naam of wat we willen daar te zetten hebben. 97 00:10:25,900 --> 00:10:37,180 Dat is gewoon de placeholder tekst en dan zullen we ook een knop toe te voegen aan het einde en dit zal alleen maar zeggen dat ik een nieuwe vriend en behalve dat. 98 00:10:37,890 --> 00:10:40,320 En dus dit zal een formulier voor ons nu te creëren. 99 00:10:40,690 --> 00:10:55,090 Als ik de server opnieuw en ik ga terug en ik Vernieuw de pagina Ik heb nu een vorm hier en als we inspecteren het heeft die twee attributen waar we actie is het ADD vriend methode is post en het heeft een enkele ingang. 100 00:10:55,420 --> 00:11:00,150 En als ik iets typt in hier heb ik een nieuwe vriend vandaag de naam Bob en ze klikken. 101 00:11:00,160 --> 00:11:02,500 Ik maakte een nieuwe vriend. 102 00:11:02,770 --> 00:11:04,560 Je kunt zien dat we krijgen die reactie. 103 00:11:04,570 --> 00:11:09,980 U hebt de post route bereikt, wat betekent dat we een post verzoek verzendt en dat we het verzendt naar de juiste plaats. 104 00:11:10,030 --> 00:11:14,140 Slash vriend toevoegen, maar we zijn niet iets in die route te doen. 105 00:11:14,140 --> 00:11:21,240 Afgezien van het reageren met deze boodschap en wat we eigenlijk willen doen is de gegevens van het formulier dat u wilt Bob te nemen.