Welkom terug.
Dus we gaan op te pikken waar we gebleven.
We hebben behandeld index nieuws te creëren.
Nu zijn we over te gaan om te laten zien.
Dus nogmaals het punt van de show pagina is dat zij over alle gegevens of meer informatie blijkt in de index over één bepaald punt en het pad heeft een idee in.
Dus ons zal zijn bloggers slash I.D. ID in eerste instantie krijgen aanvraag.
We waren een paar doelen op de show route de sjabloon dan willen we koppelingen hebben, zodat op de indexpagina we een knop die meer zegt gelezen hebben en dat brengt ons naar de show pagina en dan gaan we op naar de show te stylen sjabloon gewoon een beetje.
Laten we beginnen met het definiëren van de route.
Dus na onze creëren we zullen voegen in een ander commentaar en dit moet worden een acteur te krijgen slash blogs slash colon ID verzoek en reactie en op te slaan en kunnen we zo simpel als dat send tonen pagina om te beginnen doen.
Zorg er wel voor dat dit werkt.
Zo start u de server en kunnen we naar bloggen slash alles en zie toon pagina.
Uiteraard zal de ideeën lang mangoest ideeën die er uitzien als dat en we komen zeker niet dit te typen, maar zal op links te klikken om ze te zien.
Dus laten we dat doen laten we nu teruggaan en voeg een link naar de show pagina op de index, zodat we een knop die Lees meer zegt hier naast het bericht zelf kan hebben.
Dat brengt ons naar de show pagina.
Dus in onze index template als we open te stellen in plaats van standpunten eerste ding dat zal doen, is net na de blog lichaam voeg een anchor tag en zal gewoon zeggen meer te lezen en de H-scheidsrechter zal slash logs zijn.
Maar dat ID is variabel door elke blog.
Dus we hebben elkaar nodig Ja.
En dat moet zijn een blog dot underscore ID zal herstart te slaan.
We hebben nu een link en als we op te kijken om de door u allen ingelogd slash.
5 6 3 terwijl blah blah.
Hetzelfde hier met een ander ID.
Oke dus nu moeten we in de logica in te vullen in de route die wordt verondersteld om deze Id nemen op zoek naar de bijbehorende blog en vervolgens maken de show template Laten we beginnen met het vinden van de juiste log in die show route.
Dus de knoeiers meth die we gebruiken is blague dot vondst van ID en dat twee argumenten van de ID en de callback neemt.
Dus de ID is hier vragen dot harams dat ID en onze callback tarief zal er een fout te hebben en dan zullen we noemen het gevonden slot.
Daar gaan we.
We zullen opnieuw te controleren voor de fout of nooit.
En laten we gewoon iets simpels te doen.
We zullen een redirect terug naar de indexpagina te doen.
Uiteindelijk Ik zal tonen u veel mooier error handling, waar we een bericht dat zegt aanmelden niet gevonden of spijt me dat ik kan dat blog niet vinden en ik zal je terug naar de pagina die u waren net op te nemen kan laten zien.
Maar voor nu we gewoon altijd terug naar Smashbox te gaan, maar er moet niet iets dat een fout in muizen veroorzaakt zijn.
Onze database is volledig uitgeschakeld of iets dergelijks.
Dus dit is echt het maakt niet uit voor ons op dit punt anders Reds maken de show template en we moeten passeren in klank blog en we noemen het blog.
Dus vond blog in de sjabloon Blog worden genoemd.
Nu moeten we die show template.
Dus laten we dat nu.
uitzicht Raak blijkt dat Aegeus openen die op en hier ga ik daadwerkelijk beginnen met het kopiëren van wat ik in New dat is een vorm en we willen niet een van die.
Dus wat we willen is een aantal van deze fundamentele dingen zoals de koptekst UI hoofdtekst containers segment we houden dat voor nu.
Maar de binnenkant van het in plaats van enorme hetter laten we toe te voegen in de titel van de post en de titel moet blog titel.
Laten we het op te slaan.
En laten we eens kijken of het werkt.
Dus nogmaals blog is wat we de binnenkant van de show hier.
We hebben gezocht naar het met de ID aangemeld up vondst van ID als we vinden het als er geen fout doorgegeven gevonden gegeseld door middel van onder de naam log om de show template in de show template.
We gebruiken blog.
Okee.
Moment van de Waarheid laten we snel een van deze links er gaan we eerste post.
Dus als ik op dit ene moet je mijn nieuwe hond te zien.
En we doen.
Grote.
Dus hebben we de basis.
Het harde deel echt gedaan.
Nu is het gewoon een kwestie van het weergeven van de informatie die we willen laten zien.
Dus we zullen terug te gaan en we zullen zeker willen het beeld weer te geven.
We willen de inhoud en weer te geven.
Dus ik zal een aantal van die stelen van de index.
We hebben al dit alles nu geschreven en we zullen gewoon stylen het een beetje anders hier.
Daar gaan we.
We zullen beginnen met deze.
Maar we zullen het maken van deze look mooier.
Laten we eens kijken wat we krijgen als we vernieuwen.
Er is onze post.
Hier is de show pagina.
Een ding dat het vermelden waard is, is dat dit momenteel niet iets dat we niet zien op de index en dat is omdat onze index laat alles zien.
Maar de meeste blogs doen, is dat zij een deel van de post te laten zien.
Dus als we een 10.000 Line blogpost we niet willen dat het hier het nemen van 10.000 lijnen.
Eerder zou u een voorbeeld van een paragraaf of zo en dan klik je op meer te lezen en we zullen dat doen in slechts een moment.
Maar laten we beginnen met het stylen dit een beetje.
Het eerste wat we hebben is onze hoofdtekst container.
We hebben een grote kop.
En dan de binnenkant van die u kunt een andere div waar we heen gaan om alles te zetten binnenkant van die div en geef het een klasse die gelijk is aan UI top bevestigd segment toe te voegen.
Wat segment doet is het zet een kleine rand rond dingen zodat het lijkt alsof in plaats van dat je gaat naar een div class gelijk aan artikel en dan in plaats van het item We zetten al onze inhoud toe te voegen.
Zo zal beginnen met het beeld en in plaats van alleen de weergave van het gehele beeld hoe het is kunnen we een semantische klasse die u noemde toevoegen ik gecentreerd Het beeld, dat is vier klassen.
Zo zal je beeld dat ik gewoon het een aardige semantische UI geven ons, maar als we geven het midden zal dan centreren de afbeelding in die container in ronde zal het enige afgeronde hoeken geven.
Het zal niet cirkelvormig zijn.
U kunt dat doen alleen met I beeldcirkel of cirkelvormige afbeelding denken, maar afgeronde verandert de hoeken een beetje.
Laten we maar eens kijken die te starten.
Daar gaan we.
We komen dichterbij en dan gaan we hier te gaan in en voeg een ander apparaat.
Deze zal klasse gelijk aan tevreden te zijn als u wilt weten waar ik het krijgen van deze uit.
Als u op punt uitzicht punt op semantische UI Dit is waar ik het nemen van.
Dus we hebben div punt in plaats van een item kunnen we een afbeelding en vervolgens de inhoud en dat is precies wat ik gedaan heb.
Dus hebben we een item met content binnen en dat is niet echt de bedoeling.
Je gaat niet om een ​​expert op het semantische UI na deze zijn.
Het is weer gewoon alleen maar om te laten zien een ander kader, maar niet te weten dat je je te maken een expert in semantische.
Oké dus in plaats van dat we dan gaan aan onze overspanning wat ze het gemaakt net als dat en zal een kleine verandering al te besparen is dat dit niet echt ideaal voor een gebruiker om te zien wat we kunnen doen is heel gemakkelijk verandering dat in een meer leesbare datum.
En er is een aantal methoden met javascript data.
Er is een zogenaamde twee string.
Er is één geroepen om datumtekenreeks dat is wat we willen en ik zal je laten zien hoe dat eruit ziet.
Als ik noem het gewoon hier en vernieuwen mededeling dat we nu ik verfrissen en ik krijg een mooi Engels menselijk leesbare versie.
1ste zondag november 2015.
Perfect.
Dus dat bewaren we.
Laten we blijven werken een beetje hier.
Laten we toe te voegen in een andere div wordt beschrijving geroepen en dit is een andere semantische klasse in plaats van daar en dit in onze paragraaf zomaar en vernieuw de pagina.
En we hebben een blog post relatief gedaan voor nu.
Ik zal zich te ontdoen van deze div krijgen met een lijn binnenkant van het.
We niet dat lijn nodig hebben.
En dat is uit het segment dat we hier hebben.
Dus als we te ontdoen van die ene en we houden de buitenste segment eindigen we met dit of kunnen we de andere kant op te gaan en zich te ontdoen van de buitenste segment en houdt de binnenste net als dit.
Wat u ook denkt dat ziet er het beste.
Ik denk dat ik terug te gaan en houdt de buitenste zeker.
Helemaal als je.
Okee.
Laten we nu een aantal post in onze database die ik heb wat langere tekst weer te geven of te kopiëren wat Lorem ipsum krijgen.
Het zit zo.
En als we teruggaan nieuwe post deze keer heb ik een ander beeld heb je het mis.
Ik zal verrast zijn.
En ik noem deze nieuwe post met langere tekst.
Verschrikkelijk titel.
Verzenden en krijgen we dit beeld gigantische hier zijn we het niet stylen.
En dan krijgen we een veel tekst.
Dus uiteraard we willen niet alle van deze tekst op de indexpagina dat zal werken op die.
En als ik klik op lees meer en nu hier mijn mooie blog post, maar merken dat alles wordt gecondenseerd.
Je hoeft niet de paragraaf lijnen die we wilden.
Je kunt geen breaks aan tussen.
Dus om dit een beetje een betere meer bruikbaar blog we moeten laten gebruikers invoeren HVM welke je waarschijnlijk als je hebt gezien als je ooit een blog voor een variant van HVM nu iets als Wordpress of als je iets als medium gebruiken.
Je hoeft niet schrijven elk T.M. jezelf, maar je kunt dingen vet kan je foto's kun je onder andere paragrafen cursief tekst op te nemen te maken.
Nou als we dat nu doen als we proberen en maak een nieuwe post zal ik hetzelfde beeld weer te houden.
En laten we stelen dat Lorem Ipsum weer.
Slechts een deel van deze laten we iets voor de hand als een sterke tag rond een deel van dit te doen.
Dus als het werkte we zouden sommige vetgedrukte tekst te zien en te dienen en ik vergat aan te scherpen.
Dat is geen probleem.
En je zult zien dat onze content wordt weergegeven, maar het is niet uit te voeren.
Het is niet getoond als een time-out en er is een goede reden voor dat wat is dat het niet altijd even veilig is om gebruikers te laten voer gewoon hun eigen HVM hun eigen code en gewoon uitvoeren.
En je zou kunnen denken Wat is het ergste dat kan gebeuren.
Het is gewoon geëtst hem uit.
Tja, wat kan gebeuren is dat iemand daadwerkelijk konden binnengaan van een script tag in run Javascript.
Dus zal ik je dat later zien.
Op dit moment al is het prima omdat we niet echt het weergeven van de HD bedrag.
Als we wilden het echt een eenvoudige verandering één teken eigenlijk.
Dus dat is de show template.
En als we kijken naar de show template rechts nu zijn we het weergeven blog dot lichaam.
Als ik dit gelijk-teken aan een streepje Nou dat daadwerkelijk zal doen veranderen, is nemen wat blog dat het lichaam terug en evalueren dat.
Start het programma als de code in plaats van alleen het weergeven van de string.
Dus als ik Vernieuw de pagina die we nu krijgen onze sterke tag daar.
En als ik verwachtte dat je zou zien dat het een echte sterke tag.
Dus het veranderen van een gelijk teken voor een streepje is echt krachtig.
Vervolgens eigenlijk evalueert de code.
Dus als we een ander beeld bericht hetzelfde en deze keer doen we een eerste paragraaf en de laatste paragraaf en vervolgens dupliceren we dat en dan een keer nog wat larm ipsum en gewoon stelen een aantal van deze lijnen.
We zullen gewoon moeten twee eenvoudige punten.
Je zult zien dat we uiteindelijk nu na onze gigantische beelden die we eindigen met twee paragrafen hier.
Dat is geweldig, want nu kan een gebruiker daadwerkelijk in te voeren in de inhoud en de stijl opgeven.
Maar hier is een probleem.
Dus als ik in iets willekeurigs hier invoeren Ik kan dit script doen en ik kan typ je gewoon een stukje code in hier en gewoon doen iets stoms zoals ik je vroeg.
Zeker.
Al deze zijn verkeerd gespeld.
En als ik dit nu in te voeren is dit HDMI het zal worden uitgevoerd en het is een script-tag, wat betekent dat dit een job script worden uitgevoerd.
Dus toen ik naar die pagina nu krijg ik dat alert.
Het is duidelijk dat een enkele waarschuwing is niet zo slecht, maar je kan waarschijnlijk voorstellen dat dingen kunnen escaleren vanaf daar.
Er zijn manieren om te voorkomen dat de kwestie van het wegwerken van eventuele scripttags.
Ik zal je laten zien hoe dat te doen aan het eind is een optionele video in deze serie.
Het heet ontsmetten onze ingangen.
Er als er een pakket genaamd de Express sanitiser dat het voor ons zal doen.
We vertellen het alleen maar om het onroerend goed die net zal zich te ontdoen van elke scripttags binnen van het te ontsmetten.
We hoeven niet naar die code te schrijven.
OK.
Dus laten we terug gaan al hebben we een paar problemen.
Eén van deze beelden.
Ja, we zullen terug naar deze styling.
Maar laten we beginnen met het afkappen van deze posten, zodat we niet al deze inhoud op de indexpagina te zien.
Laten we het aan de eerste 100 tekens en zet dan een ellips achteraf.
Dus af te bakenen een string.
Het is eigenlijk heel simpel.
We zagen al vroeg toen we spraken over javascript gebruiken we de substring methode.
Dus op onze index pagina in plaats van de hele blog lichaam zal hebben verstopt lichaam substring nul eerste teken tot.
En we willen dat de honderd achtig personage dat is prima voor nu.
En ik krijg altijd dit verkeerd.
Het is een kleine letter s substring.
Lijkt alsof het kameel geval moet worden als het is twee woorden, maar het is het niet.
Okee.
Dus nu als we dit uitproberen zie je dat we nu deze afgeknotte berichten en laten we gewoon toe te voegen in dat eenvoudige ellips hier.
Zo substring en dan buiten die ja dot dot dot en dan hebben we onze Boor link.
Dus nu de show pagina dient een doel waar we een beetje.
En dan kun je klikken Lees meer en bekijk het hele bericht.
Grote.
Dus we hebben veel in deze video gedekt.
U had het over toon gesproken over het gebruik van de ID in de route hoe zou verzoeken te krijgen.
We zetten de route namen we de ID en vond de bijbehorende blog dan een sjabloon gemaakt.
Maar we hebben ook gesproken over een aantal nieuwe dingen zoals de show template met behulp van hier het dashboard in plaats van een gelijk teken dat daadwerkelijk code zal verlenen aan de code uit te voeren en maken het resultaat.
En dan hebben we zagen ook tot op heden koord dat is een leuke manier van het transformeren van een datum in een betere indeling.
Het is nog niet zo flexibel.
Er zijn grote bibliotheken die een zogenaamde Moment Jap's waarmee u de exacte indeling die u wilt opgeven.
We zouden willen iets dat lijkt op de maand slash de dag slash het jaar en we misschien iets waar de maand wordt afgekort willen of kunnen we de hele maand en de hele dag van de week in plaats van Zon in november willen
U kunt dat doen met ogenblik J s veel betere manier van omgaan met data als je wilt zeer expliciet in het formaat dat je wilt zijn.
Het is gewoon een eenvoudige bibliotheek kun je het net als Jay Querrey of andere client-side library maar we installeren gaat om te gaan met dit voor nu.
Ingebouwd in javascript.
We hebben geen extra code anders dan een enkele lijn hier nodig hebben.
Grote.
En dan is het laatste wat met het gebruik substring in plaats van een index die meer voor een uitzicht heb je dit niet gezien in een tijdje, maar we zagen het vroeg op.
Eerste argument is waar we willen maken van de eerste snede tweede argument is waar we willen de tweede snede te maken.
We nemen alles daar tussenin.
Grote.
Okee.