Welkom terug in deze les ga ik je laten zien hoe we kunnen schrijven.
H m l.
In een apart bestand en kunnen we dat bestand terug in de reactie te sturen in plaats van wat we tot nu toe gedaan met behulp van roodstaart send.
Er zijn drie hoofddoelstellingen hier.
De eerste is het gebruik van roodstaart maken om hem uit te maken om een ​​bestand van elk bestand terug te sturen en dat zal meer zin te maken als we praten over wat ieder van ons is.
En dat is het volgende doel.
Leg uit wat Ejaz is en waarom we het gebruiken.
En dan tot slot passeren variabelen Ejay als templates.
Dus om hier te beginnen Ik ga een nieuwe Express-app nodig hebben en ik ga om te gaan door middel van het creëren van de Basic Express app vanuit het niets die ik niet zal blijven doen in elke video, maar het is nog steeds vrij vroeg in de loop .
En ik wil alleen maar om ervoor te zorgen dat je wennen aan het zien en te doen, want het is iets dat je non-stop zult moeten doen.
Dus ik heb een map met de naam Meer drukken waar ik zal werken vanuit dit toestel en ik zal een nieuwe directory maken binnenkant van dat en we zullen gewoon noemen Ejay ons demo.
En dan in plaats van Ejaz demo zullen we NPM draaien in het en ik zal gewoon snelheid door dit.
Dus dat de naam is prima.
Versie is prima beschrijving is leeg.
Ik vind het altijd leuk om dit te veranderen naar app.
Ja.
Slechts een persoonlijke voorkeur.
Druk op enter nog een paar keer.
U hoeft niet om een ​​van deze te vullen en daar gaan we.
En nu, als we ons in staat hebben we een pakket dat Jason laten we creëren onze act uit J ons en we zullen ook draaien NPM installeren uitdrukkelijke dash dash op te slaan.
Daar gaan we.
Laten we nu het openstellen van de jazz-bestand en start het toevoegen van enkele code in.
En in plaats van gewoon te doen ls en vervolgens te klikken op J.S. en te klikken op open Ik vond onlangs een andere manier om dat te doen.
Dat Cloud 9 recent toegevoegd dat is als je typt C9 ruimte en vervolgens de naam van een bestand of het pad naar een bestand.
Dus C9 base app.
J Ja, dat zal openstellen voor u in de editor.
Het is veel sneller dan te moeten ls typen en klik vervolgens op het bestand en klik op Openen.
Dus laten we de fundamentele uitdrukkelijke code hier tot nu toe uitdrukkelijk gelijken vereisen express en dan gelijk var app uit te drukken voer het uit als een functie.
Een ding dat je af en toe ziet is dit waar iemand zei Savar app gelijk aan express nodig hebben en dan alleen nog maar als een functie onmiddellijk.
De meeste mensen zullen wel doen als dit in twee afzonderlijke stappen en meestal zul je gewoon zien Xpress en app dat die alles kan zijn.
Nu laten we de act op.
Luister gaan op de bodem die de server zal beginnen, zodat het de haven, die is proces dat de haven en vervolgens proces dat D-NV IP en dat zijn omgevingsvariabelen die 9 wolk heeft opgezet dat we de toegang tot de haven en EMV nodig zou hebben IP adres.
En dan voeg ik in mijn callback dat wordt uitgevoerd zodra de server is ingesteld zodra het luisteren en we zien wel wat er komt over log.
De server luistert, net als dat en zal redden.
Laten we nu aan onze eerste route en wij zullen de route route te doen.
Ik vind het altijd leuk om daar te beginnen en dat is altijd een verwarrende zin om een ​​aantal van mijn studenten, omdat dit woord, dat ik uitspreken route zal een aantal van hen als root uit te spreken.
Ik probeer het heel duidelijk te maken wanneer ik wortels zeggen.
Ik ben alleen over R O T zoals in deze.
De wortel route.
OK dus laten we toevoegen dat in apt get root of slash en dan is onze callback functie zal worden uitgevoerd wanneer een verzoek om verzoeken te krijgen wordt verwezen naar slash en dan zullen deze twee voorwerpen verzoeken reactie en we zullen doorgaan en gewoon bellen met de rez sturen en we zullen gewoon een simpel ding.
Welkom op de home page.
Net als die moeten allemaal beoordeling op dit punt.
Laten we beginnen met de server omhoog zodat knooppunt j.
Het lijkt erop dat alles goed is.
Laten we nu naar de root-pagina hier en te vernieuwen.
Welkom op de home page.
Uiteraard is dit type inhoud een enkele regel tekst is vrij saai.
Wat we kunnen doen om het sparren een beetje is kunnen we terug gaan naar binnen en maken dit een aantal H-2A Mel.
Als we wilden, net als dat en dan kunnen we toevoegen in onder dat en H-2 dat blah blah zegt.
Gewoon zo.
Daar gaan we.
En als we sla dit en de server opnieuw op.
En dan terug te gaan we hier en vernieuwen.
We krijgen HVM albums worden bewezen aan ons, maar dat is nog steeds ongelooflijk pijnlijk om daadwerkelijk uittypen een hele pagina.
Het is technisch mogelijk, maar het zou zo moeilijk.
Het is gewoon niet een goed idee.
Dus gelukkig is er een eenvoudiger manier waar we al onze code in een apart bestand de hele tijd dat we willen kan schrijven alle C Ss en ja alle front-end javascript dat we terug willen naar de gebruiker te sturen, zodat we kunnen een methode gebruiken riep maken en dat maken methode woont op de response object wat we noemen het.
In ons geval toeren dus rust niet maken.
En dan geven we het een naam van een bestand, zoals homepage of thuis dot hem in de leeftijd of Dogstar out leeftijd van hem of iets dergelijks.
En natuurlijk moeten we hebben dat bestand gemaakt en het nodig heeft om bepaalde inhoud in hebben.
Maar zelfs voordat we doen dat er een klein probleem Ik zal zich te ontdoen van deze lijn en het probleem is wanneer we Express gebruiken we niet gewoon h m l bestanden weg te schrijven.
Er zijn manieren om dat te doen.
Het vereist een beetje meer setup, maar de meeste van onze web-apps zijn niet van plan om net standaard Tim statische bestanden die worden teruggestuurd.
Wat wij op zoek bent naar zijn Dynamic HTML-bestanden die sjablonen worden geroepen en in de tweede helft van deze video zullen we die te introduceren.
Maar nu ga ik hier te gaan en verander dit E.J. s en alles wat ik zal zeggen over E.J. is dat het staat voor embedded javascript en dat je veel meer over leert in ongeveer vijf minuten, wanneer het te krijgen verzoek wordt gedaan om onze code slash zal een bestand genaamd Dogstar maken.
Ja.
En laten we het veranderen in huis, alleen maar omdat dat maakt meer zin met de route route.
En dus moeten we dat bestand aan te maken en we eigenlijk niet als daadwerkelijk in dezelfde map met ons op.
Wat we moeten doen is het maken van een nieuwe map genaamd standpunten en dat is niet een willekeurige naam dat is een map die uitdrukkelijk is gaan kijken voor.
Dus wanneer we een bestand wat het ook heet het gaat om eerst te kijken van het uitzicht directory en probeer en vind precies dit bestand in een zekering te maken.
Dus laten we nu te maken dat.
Dus ik doe een vleugje uitzicht slash huis dat Ejay ons net als dat.
En dan is het volgende wat ik wil doen is het toevoegen van een aantal content.
Dus laten we dat bestand te openen met die nieuwe C9 command C-9 uitzicht slash huis.
E. J ..
Ja, en laten we voeg wat spullen in hier.
Dit is de homepage.
Laten we dit op te lossen.
En laten we ook een afbeelding toe te voegen en ik heb een beeld dat ik wil hier te gebruiken.
Dit is zoiets als een palm ski.
Het is een Pommeren en een husky mix.
Naar verluidt is dit een volwassen Parsky die vrij gek als dat waar is.
Het ziet eruit als een geminiaturiseerde husky of gewoon een permanente husky puppy.
In ieder geval dus we zullen deze URL te kopiëren en terug te gaan.
En je kunt natuurlijk elke afbeelding die u wilt doen.
Je hoeft niet te gaan vinden dat of typeless je Ellaby jezelf en zal redden.
En nu zullen we sluiten uit dit en we moeten goed om te gaan.
Behalve voor het missen van een ding en ik ben eigenlijk van plan te laten drukken ons vertellen wat we missen.
We zullen een foutmelding krijgen.
Dus ik ga dit ontruimen gewoon om wat meer ruimte voor u te maken.
En nu ga ik naar de server te starten.
En als we naar de route route zal bellen met de render methode die op zoek gaan naar huis.
Ja.
Binnen van een map met de naam uitzicht.
En dan een keer het vindt dat het zal de inhoud te nemen en te sturen dat terug in de reactie, zodat het we terug naar onze app ga en verfrissen en we krijgen een foutmelding hier zegt het niet kan vinden Montreuil.
E. J ..
Ja.
En wat dat betekent is dat uitdrukkelijk op zoek is naar een pakket met de naam Ejay ons dat het nodig heeft om te gebruiken om Ejaz bestand maken en.
Dus we moeten NPM ons installeren Ejay en dit zal allemaal zinvol waarom we gebruiken Ejaz in slechts een paar minuten.
Maar voor nu gewoon geloof me NPM installeren Ejay ons en wij zullen doen dash dash op te slaan.
En zodra dat klaar is kunnen we gewoon doen node.
J.S. opnieuw en nu Vernieuw de pagina en krijgen we dit is de startpagina en onze schattige puppies laatste volledige gegroeid Tomsky.
Dus nu hebben we een bestand van h t m l die we hebben geschreven dat we nu terug te sturen naar de gebruiker en dat wordt weergegeven in de browser.
En dat is geweldig, maar dit is nog steeds zeer beperkt voor web applicaties.
Dit zal alleen terug te sturen de exact dezelfde pagina elke keer en in de meeste web-apps dat is niet wat we willen.
Misschien is de home page is hetzelfde of de inlogpagina is hetzelfde.
Maar zodra de gebruiker is ingelogd in bijvoorbeeld er meestal een bericht dat zegt welkom terug oproepen of welkom terug.
Schattige puppy Parsky slash volwassene.
Laat me zien wat ik bedoel met een snel voorbeeld.
Dus ik zal terug te gaan en te voegen in een nieuwe route en onze route gaat om iets als Slash zijn.
Verliefd op en dan zoiets Rustie en dan kunnen we ook gaan om verliefd te worden met een palm ski.
Ik denk dat dat is hoe het is gespeld.
En we willen een HMO bestand dat ons een bericht dat de variabele uit de route die parameter pad bevat zal laten zien.
Dus het zou iets te zeggen als je verliefd op roestige zo viel te doen dat je nodig hebt om te bepalen of je slash verliefd op Slash ding.
Dat is wat we zullen noemen.
En dan ons verzoek en de reactie in de callback moeten we.
En net als de vorige oefening zal ding dat zal vangen VAR's ding is gelijk aan te vragen up harams ding en dan kunnen we beginnen met deze eenvoudige rode stip te sturen, net als wij deden met het dier spreekoefening.
Het varken zegt knor.
De koe zegt moo kan hetzelfde doen hier.
Dus we gewoon zeggen dat je verliefd op een plus ding.
Okee.
Dus dit is een beoordeling en als ik de server nu opnieuw opstarten en ga ik terug en nu ga ik naar verliefd slash met Slash SKE we krijg je verliefd op Tomsky oprijlaan die precies grammaticaal correct, maar dan weer geen van beide is het woord pompen.
Dus ik zal teruggaan en nu wat we willen doen is erachter te komen hoe we een H om hem Ik kom terug bestand dat zegt dat je verliefd op plus en nog wat dat we kunnen beginnen met het maken van het bestand en we kunnen sturen 'll gewoon bellen dit bestand in de standpunten directory en noem het wat je wilt natuurlijk, maar ik ga gewoon met liefde EJ om het kort te houden en dan zullen we dat invullen in.
Dus we moeten C-9 keer bekeken slash.
Hou van dat.
Ja, we hebben die open en laten we beginnen door gewoon toe te voegen in je verliefd op en dan moeten we in de blanco te vullen.
Maar we weten niet wat te zetten hier toch dus we zullen laat het gewoon zo en laten we een briefje hier dat P.S. zegt Dit is de liefde die Ejay ons bestand gewoon zo dat je weet dat het komt uit het bestand Ejaz.
Het is niet de roodstaart sturen die we nu hebben.
In feite om zich te ontdoen van dat.
Dus wat we willen doen is te maken dat bestand dus lees is niet te maken.
En de naam van het bestand is de liefde die E. J ..
Ja, het zal automatisch kijken in de standpunten directory die is daar.
Daar gaan we we hebben twee bestanden laten we beginnen met de server up Node.
Ja zal opnieuw opstarten en vernieuwen.
OK.
Dus ons bestand is hier.
Je werd verliefd op en we moeten in de blanco te vullen hier.
En ik weet dat dit een heel eenvoudig voorbeeld dat is het punt dat ik wil niet te verwarren met iets geks alleen nog maar dit soort logica is heel belangrijk waar we een sjabloon in kunt vullen met data terug te komen uit een database of data dat een gebruiker heeft gegeven waar het niet een statisch kill-bestand.
Dat is precies hetzelfde elke keer.
We willen in principe om variabelen toe te voegen in HTL en dat is wat elk Ja laat ons doen.
Dus E.J. S staat voor embedded javascript.
Het laat ons verankeren javascript code variabelen als statements loops binnenkant van H Timo.
Dus het is hoe we iets konden doen.
Je werd verliefd op en vervolgens hier dit zal gewoon nog niet, maar we konden zetten onze variabele genaamd ding laten we het gewoon doen in hoofdletters ding variabele.
Maar dit zal niet werken, omdat het gewoon behandelen als gewone HMO en het zal alleen maar tonen ons het woord ding variabele.
We moeten iets aan ieder van ons te vertellen dat dit javascript code niet leren hem dat ik dit behandelen als javascript doen.
Gelukkig is het gewoon geeft ons een manier om dat te doen.
Het is een beetje raar als je het ziet voor de eerste keer.
Het ziet er als volgt uit.
Dus hebben we onze beugels en vervolgens procent tekenen en dan gelijk teken op de opening beugel en wat gaat tussen deze twee haakjes hier gaat zoals Javascript te worden behandeld.
Dus ik zal je laten zien wat ik bedoel we kunnen gewoon gebruik maken van iets als vijf plus vijf, die in de reguliere H M L en ik zal dat eigenlijk doen om te laten zien vijf plus vijf.
Zonder deze Ejay Ja beugels zal gewoon uitprinten vijf plus vijf, maar als we het goed doen hier zullen we eigenlijk 10 afgedrukt.
Dus ik zal redden dit sjabloon te verlaten of start de server opnieuw knooppunt na J ons en vernieuw de pagina en we krijgen je verliefd met vijf plus vijf tien.
En ik snap het.
Als ik pauze vijf tien is een complete vangst goed al goed.
Dus zullen we teruggaan.
Dus we willen niet dat de vijf plus vijf is er om te worden afgedrukt.
Maar we eigenlijk willen is het ding variabele.
We noemen het het ding VAR of dat laten we gewoon doen ver.
En dit moet van onze code te komen hierheen.
Dus wat we moeten doen is voorbij deze waarde ding om onze liefde die E.J. als template en we willen het uit te printen en terwijl we hier ook te ontdoen van de vijf plus vijf.
Zo krijgen we je verliefd op en dan moeten we het ding veel te definiëren en je zou denken dat we konden alleen maar doen dit var zaak.
Var is gelijk aan te vragen uit sleuf zaak.
En je zou kunnen worden in de hoop dat automatisch uitgedrukt stuurt al die variabelen een of andere manier aan deze sjabloon.
En het is gewoon weet ding var.
Helaas dat is niet hoe het werkt.
En ik zal je dat de server ik een foutmelding herstart te laten zien en het vertelt me ​​niets var is niet gedefinieerd.
Dus nu moet ik terug te gaan en te bepalen wat bar.
En de manier waarop ik dat doen is eigenlijk doorgeven door naar mijn geliefde E.J. s template en ik doe dat op de stip te maken lijn als je het passeren als een object.
En in dat object kan ik meerdere stukken van gegevens die ik wil in mijn sjabloon te hebben gezet.
Dus in plaats van de dingen gewoon te noemen ding om dit duidelijker te maken en dan hier ga ik om gegevens te passeren en ik ga zeggen in de sjabloon ding var moet gelijk zijn aan zaak.
Wat dit zal doen is de waarde van de zaak en plak het hier.
Dus het zal zien als een ding toe is gelijk aan Rusty.
En dan hier ding var zal worden vervangen.
Dit alles zou worden vervangen door roestig.
OK dus zullen we het bij laten.
Ga hier terug en waarom beginnen we niet alleen door harde codering als Resti net als dat en zal de server opnieuw en ik zal de pagina te vernieuwen en ik krijg je verliefd met Rusty.
Dus in plaats van het doen van een string is de volgende stap is gewoon om terug te gaan naar wat we hadden dat is het hele ding variabele opslaan en ik zal passeren, dat door middel van onder de naam ding bar en dan maken we dat hier met daar.
E.J. heeft deze wonky kijken ding getagd.
Start de server weer terug.
Nu ben ik het krijgen van u verliefd op Parsky.
En als ik naar je dat je verliefd op Tater Tots dat hier ook is terug te vinden.
Dit is een zeer krachtig concept dat we gebruiken.
Zoals ik al zei en vrijwel elke app van hier op uit het hebben van deze dynamische pagina's met jeukte hem alle reacties die afhankelijk van wat de gebruiker gevraagd om in specifieke delen van de gegevens in het verzoek kan veranderen.
Het andere wat ik zal laten zien is dat dit gewoon normale Javascript.
Dus hier kan ik dingen doen, zoals in hoofdletters en dit zal eerst worden uitgevoerd en dan zal het iets dat zal worden afgedrukt, zoals verroeste terugkeren.
Dus het is gewoon normale javascript en we zullen meer over wat hier moet gaan en wat moet niet praten.
Omdat er een aantal regels die u niet wilt dat rommel je hem uit al uw Ejaz sjabloon met tonnen en tonnen javascript jaar.
Je wilt het tot een minimum beperken, maar voor nu zal ik dit te doen en op te slaan.
En dit zal het laatste wat we doen.
Start de server vernieuwen.
En nu heb ik een geactiveerde versie te krijgen.
Oke dus nu laten we samenvatten alles wat we over gesproken.
Er is nogal een beetje in deze les.
Ten eerste is dat we de inhoud van een bestand terug te kunnen sturen met behulp van roodstaart maken als we hier en hier deed en deze sjablonen moeten bestaan ​​in de standpunten directory uiten ziet er automatisch.
Het volgende wat we gesproken over zijn Ejaz wat staat voor embedded javascript en het is wat ons in staat stelt om dynamische templates HDMI erop dat zal veranderen, afhankelijk van een aantal gegevens die wij leveren.
We zagen dat we nodig hadden om elke Yes doen en hebben dan ons dossier iets te noemen DOD Ejay Ja.
En dan hebben we ook nodig om te draaien NPM installeren Ejay ons en dan het laatste is dat we Ejay ons beugels die heel raar in eerste instantie om te typen zijn kunnen gebruiken.
Je hebt waarschijnlijk zijn niet gewend aan het gebruik van dit gedeelte van het toetsenbord zo heel veel, maar er zijn beugels, waar het percentage teken en een gelijke en vervolgens aan de andere kant is het gewoon een percentage teken en wat gaat naar binnen wordt eerst en vervolgens behandeld als JavaScript-code wat dat code rendement wordt vervolgens afgedrukt naar de HMO en om gegevens te passeren.
We kunnen pas een object in het red dot render oproep waar we belangrijke waarde paren.
Het is gewoon een regelmatige javascript object.
En in de matrijs hebben we toegang tot de variabelen die we definiëren de eigenschappen van het object.
In dit geval ding zijn die gelijk is aan wat de waarde van de zaak is die elke keer verandert is.
En hier kunnen we dan gebruiken ding voor.
OK, dus ik weet dat er veel in deze video een veel te verteren.
We zullen het krijgen van een veel meer oefenen met deze concepten in het bijzonder.
E. J ..