OK we komen terug voor de volgende paar video's.
We zullen zich richten op het creëren van de blog app die ik liet in de laatste video.
En het gaat om een ​​paar video's te nemen.
We gaan een route te gaan in een tijd als gevolg van hoe belangrijk deze rustgevende routes zijn in deze eerste video.
We zullen focussen op index en dan gaan we in orde is.
Focus op nieuwe en maken en dan laten bewerken en bijwerken.
En dan eindelijk een video op te vernietigen en samen met het maken van de app en het toevoegen in de zeven routes die we het meest nodig hebben gaan semantische UI dat is een ander kader daar vergelijkbaar met bootstrappen voor CSSA en Javascript te introduceren.
Dus nogmaals in de laatste paar ik noemde Waarom echt dat ik net Ik hou van hoe het eruit ziet.
Dat is een reden, maar het allerbelangrijkste ik wil gewoon u worden blootgesteld aan een ander kader, zodat u kunt zien hoe soortgelijke dingen zijn.
Je zou kunnen zou je kunnen denken dat het een slecht idee voor mij om te laten zien een ander kader om u te bestoken met al deze informatie, maar het goede nieuws is dat dingen zijn zo op elkaar lijken.
Zodra je twee of drie begin je te zien hoeveel ze gemeen hebben en dat het eigenlijk meer dat ze met elkaar gemeen hebben dan ze anders doen.
Dus semantisch waarom, maar we gaan beginnen met het creëren van onze app.
Dus ik ben binnenkant van een map genaamd rustgevende routing.
Als u wilt volgen langs is er een oplossing er al.
Dus als je wilt verwijzen, dat voel je vrij om dat te doen en als je niet wilt gaan door middel van de oprichting van de app als je niet wilt indexeren dekken nieuw en maken, omdat je hebt gezien dat voordat je vooruit kunt overslaan .
Maar ik raad je door alle routes met mij code samen.
Het is echt belangrijk dat we dit naar beneden.
Het is echt het brood en boter van onze uitdrukkelijke apps.
OK.
Dus we onze applicatie Ik kom net noem het de blog app.
Eigenlijk laten we noemen het rustgevende blog app en vervolgens cd en dan is onze favoriet NPM en het eigenlijk ja is onze entry point.
Grote.
Dat is geen probleem.
OK.
Laten we nu een aantal dingen die we nodig hebben, zodat NPM installeren en de eerste is natuurlijk express en dan zal ook toevoegen in mangoest installeren.
En terwijl we hier zullen we lichaam parser doen.
Dus die drie dash dash opslaan herinneren dat lichaam parser is hoe we de gegevens van het formulier het formulier stuurt gegevens in het verzoek lichaam te krijgen en dan ontleden we het verzoek lichaam met behulp van het lichaam persoon.
Dus dat zou in de volgende video.
Voor nu zijn we gewoon doen index.
Dus hebben we dat het opzetten van laten maken of eigenlijk ja.
Nu gaan we het openstellen van apparaten en doen ons standaard top van het bestand waar we nodig nodig express Express en dan gaan we doen app gelijk Express en zal ook toevoegen in Vadi parser net terwijl we hier omdat vereisen lichaam Dasch parser.
En tot slot zullen we mangoest te doen en ik wil graag van deze schoon te maken.
Ik wil ze te bestellen op lengte ook.
Dus eindigen we met lichaamsdelen of eerst als we volg mijn conventie.
Maar het is niet zo belangrijk, maar gewoon nee zeggen Ik wil graag om dit te doen.
Lichaamsdelen zijn eerst en dan de volgende we hebben mangoest en vervolgens uit te drukken en vervolgens op.
En dat is alleen maar om ze line-up door de lengte en dan kunnen we de dingen inspringen als we echt willen, maar het is niet het punt van deze video, zodat ik niet te veel tijd door te brengen om dit te doen.
OK dus we hebben dat nu gedaan.
Zorg ervoor dat elke puntkomma.
Next up moeten we zetten mangoest.
Zo zijn onze blog model.
Het gaat blog genoemd te worden zal een titel die een afbeelding die u Arel zal moeten hebben en dan zullen we moeten we gewoon noemen het orgaan dat het blog de tekst van de inhoud van dat bericht zal zijn.
Dus imago en body titel en ze zijn allemaal strings en ook toevoegen in iets nieuws je niet hebt gezien wat een date, zodat gecreëerd zal een datum.
Dus het is gekomen op dat.
En voordat we een van die we nodig hebben om mangoest configureren kan doen Dus moeten we onze mangoest verbinden en we gaan om verbinding te maken Mongo divi Cole en slash slash lokale host slash de naam van onze app en onze app zal rustgevende blog genoemd worden.
En nogmaals, dat doet er niet toe.
We zijn het maken ervan voor de eerste keer.
Dus zolang we het niet in de toekomst niet veranderen zal het altijd verbinden met rustgevende wandeling bij de eerste keer.
Het zal het te maken.
OK.
En net zo hoeven we niet om dit later te doen.
Maar het opzetten van onze dataset oog engine om ja te zijn die we nodig hebben ook te installeren.
En terwijl we wachten om dat te laten gaan laten we een app gebruik te uiten dat statische en de publieke directory, zodat we onze aangepaste style sheet te dienen.
Als we dat gewoon goede praktijken te doen aan het begin van elke uitdrukkelijke app en zal ook een app geen gebruik maken van het lichaam parser die ons lichaam parser toe te voegen.
Jullie zijn allemaal gecodeerd ware doorverbonden gesprek en de ware aard van een mondvol, maar kunnen deze drie lijnen kun je gewoon kopiëren van reeds bestaande apps ook.
Dus hebben we dat het opzetten van dan op de bodem alleen maar om ervoor te zorgen dat onze uitdrukkelijke app werkt.
Laten we de opt out les waar we proces papa in de haven proces env dot IP en voeg in callback Raad volwassen log server draait.
Okee.
Laten we eens testen het uit.
Geen problemen.
Grote.
Dus laten we nu werken aan mangoest.
Dus hebben we mangoest verbonden.
Nu moeten we ons schema en onze model te maken.
Dus we zullen beginnen met het schema.
We zullen gewoon een var log schema gelijk nieuwe mangoest dat schema als dat en om het te hebben titel die een string een beeld dat is een string een lichaam dat is ook een string.
En dan zijn we met onze data druppelen roeping gemaakt.
En wat we kunnen doen is gewoon zeggen dat dit niet zo handig, want we moeten de datum handmatig op te geven.
We willen niet te gebruiken of om daadwerkelijk te typen in de datum.
We wilden alleen maar om de huidige datum te nemen wanneer deze gebruiker de post gecreëerd of gemaakt van de blog.
Net pak die datum, zodat we een standaard waarde om iets nieuws te kunnen stellen.
We geven aan type als datum, maar dan hebben we ook aangeven standaard datum stip.
Nu en dat werkt prima voor ons.
En dit zegt dat gecreëerd moet een datum zijn en dat er een standaardwaarde data nu.
Dus konden we ook hetzelfde doen voor het als we wilden op de foto om een ​​standaard te hebben.
We konden doen het type string en vervolgens in gebreke blijft als de gebruiker niet een beeld heeft ingevuld.
We kunnen een string beeldplaceholder en pin of iets dergelijks, maar we zullen dat niet doen, maar we konden gemakkelijk doen dat als we wilden.
OK.
En een laatste opmerking hier zie je dit ingesprongen soms als dit.
Het is gewoon een object dus, want het is kort.
Ik ben niet van plan om dit te doen.
Het kost te veel ruimte of juist ja.
Is het gaat worden rommelig zoals het is.
Dus laat ik het zo.
OK image titel lichaam gemaakt en dan is de volgende stap.
Te ontdoen van deze nu is om het te compileren in dat model.
Tot nu toe zijn blog gelijk mangoest dot het model log inloggen schema.
Daar gaan we.
Behalve dat en ik ga toe te voegen in een commentaar dat alleen maar zegt mangoest slash model config.
Hier zal ik gewoon hier toevoegen andere commentaar.
Het heet app config en dan gaan we toe te voegen in een reactie hier routes.
Laten we noemen het rusten voor Rex.
Dus dit is waar we nu ga en voeg onze index route of tonen route nieuws te creëren alle zeven herhalingen.
En ja dit bestand gaat een beetje rommelig te zijn.
Nogmaals, ik ben een gebroken record op dit, maar we zullen splitsen deze af in afzonderlijke dingen heel snel.
Ik zal je laten zien hoe we het bestand meerdere modellen bestanden van een model hoe we files route kunnen hebben kunnen en we kunnen bestanden voor configuratie en voor middleware.
Veel verschillende dingen, maar het simpel te houden.
Vroeg ik wil niet te verwarren u of ik denk dat het moeilijk om naar te kijken als iemand schakelt bestanden voortdurend.
Het is moeilijk bij te houden.
Dus we gaan om het te doen in een bestand.
Maar vergeet niet dat dit is niet per se de beste praktijk.
Als dit was echt een groot app en vooral als we hadden veel ontwikkelaars die werken aan het.
Dus nu zijn we begonnen met de worsteling wraps.
Dus onthoud we beginnen met indexnamen index.
Dat pad moeten slash blogs als een GET-verzoek en het moet een lijst van alle blogs.
Dus laten we dat nu doen, voordat we dat doen laten we ervoor zorgen dat dingen werken.
Als ik zonder mijn app nog geen problemen.
En laten we eigenlijk een enkele oprichting van een blog te doen, zodat we iets om naar te kijken.
Dus we echt eenvoudig zijn.
Deze beoordeling blog schept en dan willen we de titel het testen blog noem het en ik zal een foto te nemen van deze site en splash dot com is een geweldige bron te hebben.
Ik zal je laten zien in een toekomstige video, die een bos van gratis gratis afbeeldingen die je kunt doen wat je wilt met heeft.
En zo gaat dit een van een hond te nemen en te kopiëren dat er zijn die kunnen eigenlijk geen weet je we willen gewoon iets om te testen en dan zullen we ons lichaam te hebben en ons lichaam zal gewoon hello zijn.
Dit is een blog post en we hebben leeg gemaakt.
Alle verkrachting.
Dus laten we dit gewoon proberen.
We zullen niets doen voor zover callback gaan we gewoon aannemen dat het werkt en dan zullen we uit te testen in onze Mongo cons ..
Dus laten we niet het bestand uit te voeren.
Er gebeurt niets of lijkt het alsof er niets gebeurd is.
Maar als je naar Mangu en we gebruiken rust vol log bij, dus we noemden het gewoon om dubbel te controleren en dan doen we D-B dot logt up vinden we hebben onze eerste blog daar wat geweldig is.
Dus die twee dingen voor ons.
Men blijkt dat ons model correct ingesteld, maar om zodra we de index gaan we willen ervoor zorgen dat we iets te zien, omdat het zou moeten een lijst van alle blogs.
Als we geen blogs om te zien dat het een beetje underwhelming hebben en zullen we niet in staat zijn om te zeggen of het werkt.
Dus ik verlaat daar weg.
Laten we nu concentreren op onze route.
Ik bedoel, om zich te ontdoen van dit wil ik niet om een ​​nieuwe blog te maken elke keer dat ik zonder deze app zeker niet het zelfde over en al die hond is echt schattig.
Wat wij willen doen is het creëren van onze index route.
Opnieuw slash blogs zoals u verzoek dat net lijkt alsof apt get slash logs aan onze standaard verzoek reactie callback en dan zullen we doen een doorstart maken en de sjabloon die zal maken zal gewoon worden opgeroepen index dot Ejay ons en wij niet moet dat Ejay Ja of gewoon index.
En dat is weer als gevolg van deze lijn hier hoeven we niet dat Ejay ons, maar we hebben wel een template genaamd index wordt een map met de naam uitzicht.
Dus we dat nu doen.
Maak uitzicht directory raken uitzicht slash index.
En ik maakte een klein foutje, die wordt geïndexeerd.
E.J. Ja.
Dus voor wat meer praktijk of te verwijderen dat bestand zal ik het verwijderen of in ieder geval te gebruiken Flash-index en opnieuw maken.
Raak het gebruik slash index stip.
E.J. Ja.
En open het op en we zullen net begonnen met deze eenvoudige H-1 indexpagina en op te slaan.
Dus laten we zien dat we dat indexpagina.
Op dit moment is het niet voldoen aan de indexpagina functionaliteit.
Nu als we naar een voorvertoning die u kunt krijgen van een paar manieren Ik ga gewoon naar Web Dev Bootcamp dot com dash te leren met code dot C9 dat je mij of je leren kunt naar preview preview actieve toepassing.
Het maakt het openstellen hier, maar dan kunt u klikken op deze knop om het te zien in uw browser of u kunt het hier te houden als je het liever.
OK.
Zo krijgen we een fout hier en dat is omdat we niet over een route route dus we moeten slash logs en wij krijgen onze indexpagina route.
Het is gebruikelijk voor de route pagina de startpagina te gaan naar de index van iets wat je van Reddit of Facebook.
Bijvoorbeeld op reddit ga je naar de homepage en je ziet een index van alle Reddit posts op Facebook zie je een index van alle berichten en foto's en alles wat er is.
Dus laten we dat nu doen na krijg slash functie verzoek respons en we zullen gewoon een roodstaart lezen rechtstreeks naar blogs slash.
Nu herstart frissen we.
Niets moet veranderen.
Maar als ik naar slash ik uiteindelijk op slash blogs ook.
OK.
Nu zou ik toe te voegen in de index functionaliteit.
Dus moeten we allemaal van de blogs op te halen uit de database.
Dus dat gaat worden een blog up te vinden over alles wat en dan gaan we onze oproep terug met een fout te hebben.
En dan is onze gegevens die ik blogs bellen en dan zullen we een F fout doen en dat is alleen maar om dat log te komen.
Ooit anders zullen we aan onze roodstaart renderen index behalve wij willen niet gewoon blijven het als dat.
We willen index met data te maken.
Dus onze data zal laten we noemen het blogs evenals gelijk aan blogs.
Dus we het passeren van de gegevens terug te komen uit de database van onze Dopp vinden wat terugkomt.
We zijn dan het verzenden van het door onder de naam blogs.
Ja, het is een beetje verwarrend, maar dit is echt heel gebruikelijk om te zien waar ze precies dezelfde naam.
OK dus nu laten we naar een sjabloon en voeg wat code.
Laten we eens een kijkje op blogs te beginnen, net als dat.
Zorg ervoor dat het wordt steeds daar.
Ververs de pagina.
En we krijgen onze lijst.
Het is een blog op dit moment maar we zijn hier te zien.
Grote.
Dus laten we nu weer het een beetje mooier.
We zullen niets doen gek, maar wat we zullen doen is lus door alle blogs dus blogs voor elke functie log en dan moeten we dit hier beneden.
En dan is hier beneden moeten we andere labels het haakje sluiten elke gaan en dan moeten we haakjes ook.
En voor een ieder dat we een div binnen die div te maken.
Laten we doen een H2.
En dat zou de titel Lugg die titel.
Vergeet niet dat we het isgelijkteken er maar niet nodig heeft op het stuk of de beugels.
Dan zal een beeld weer te geven en de bron is gelijk aan Ejaz haakjes.
Lagat afbeelding en ik vergat dit te vermelden.
Als u een kijkje nemen op gemaakt u kunt zien hebben wij dit leuke gekke datum tijd hier, dat is gemaakt voor ons automatisch, omdat we zeiden dat als de standaard waarde, zodat we weer te geven die tot net onder de afbeelding.
Doe een overspanning voor nu dat heeft Lagat gemaakt en dan natuurlijk moeten we onze blog post zelf, die een paragraaf die het lichaam zal zijn.
Okee.
Een groot deel van de inhoud daar.
Vernieuw de pagina en je kunt zien onze eerste I post is hier.
Je moet gewoon op vertrouwen dat dit werkt voor nu.
Ja, het toont ons één.
Technisch weten we niet als het toont ons allemaal nog, want we hebben maar één van de databank in de volgende video.