Witam ponownie.
Więc mamy zamiar odebrać w którym skończyliśmy.
Omówiliśmy Indeks nowe stworzenie.
Teraz mamy pokazać przejściem.
Więc znowu punkt strony pokazują, że to pokazuje wszystkich informacji lub uzyskać więcej informacji na temat indeksu jednej konkretnej pozycji i ścieżka ma pomysł w nim.
Więc nasza będzie blogerzy slash średnica wewnętrzna ID początkowo uzyskać żądania.
Byliśmy kilka bramek na trasę szablon następnie chcemy mieć linki tak, że na stronie indeksu możemy mieć przycisk z napisem Czytaj więcej i że zabierze nas do widoku pokazu, a następnie idziemy do stylu show szablon tylko trochę.
Zacznijmy od zdefiniowania trasy.
Więc po naszym stworzyć dodamy w innym komentarzu, a to musi być aktorem uzyskać blogi slash slash Request-ID okrężnicy i odpowiedź i zapisać i możemy zrobić tak proste, jak ta strona wyślij pokaż zacząć.
Wystarczy upewnić się, że to działa.
Więc ponownie uruchomić serwer i możemy przejść do bloga ukośnik wszystko i zobaczyć pokaz stronę.
Oczywiście idee będą długie pomysły mongoose, które wyglądają tak, a my przyzwyczajenie się pisząc to, ale będzie kliknięcie łącza, aby je zobaczyć.
Więc zróbmy to teraz wróćmy i dodać link do strony pokaż na indeksie, dzięki czemu możemy mieć przycisk z napisem Czytaj więcej tutaj obok samego słupka.
To przeniesie nas do strony pokazu.
Tak więc w naszym szablonie indeksu gdybyśmy go otworzyć, a nie poglądów Pierwszą rzeczą, która zrobi to zaraz po ciało blog dodać znacznik zakotwiczenia i będzie po prostu powiedzieć, czytaj dalej, a sędzia H będzie kłody slash.
Ale, że ID jest zmienna przez każdego bloga.
Więc potrzebujemy siebie Tak.
I to musi być blog kropka podkreślenia ID uratuje restart.
Mamy teraz link i jeśli klikniemy na nim oglądać wszyscy jesteście zalogowany ukośnik.
5 6 3 podczas bla bla.
To samo tutaj z innym identyfikatorem.
Dobrze, więc teraz musimy wypełnić logiki w trasę która ma wziąć ten identyfikator znaleźć odpowiedniego bloga, a następnie renderować szablon pokazu Pozwala rozpocząć od znalezienia poprawnego dziennika wewnątrz tej trasę.
Więc manglers met że używamy jest blague dot odkrycie przez ID i pobiera dwa argumenty identyfikator i zwrotne.
Więc identyfikator jest tutaj zwrócić dot harams że identyfikator i nasz oddzwaniania nie będzie miał błąd i wtedy będziemy nazywać go znaleźć blokadę.
No to jedziemy.
Będziemy sprawdzać błędu ponownie, jeśli kiedykolwiek.
I niech po prostu zrobić coś prostego.
Zrobimy przekierowanie z powrotem do strony indeksu.
W końcu będę pokazując wiele ładniejszy obsługę błędów, gdzie możemy pokazać się komunikat Nie znaleziono zalogować lub przykro mi, że nie mogę znaleźć tego bloga i zabiorę cię z powrotem do strony, którą właśnie on.
Ale teraz będziemy po prostu zawsze wrócić do Smashbox, ale nie powinno być coś, co powoduje błąd na myszach.
Nasza baza jest całkowicie wyłączony, czy coś.
Więc to naprawdę nie ma znaczenia dla nas w tym momencie else Reds wykonywali szablonu pokazać i musimy przekazać w blogu dźwięku, a my po prostu nazwać to blog.
Więc znaleźć blog wewnątrz szablonu zostanie wywołana Blog.
Teraz musimy pokazać, że szablon.
Więc zróbmy to teraz.
Dotknij poglądy pokazują, że Aegeus otwarcie, że i tu mam zamiar zacząć faktycznie kopiowanie tego, co mam w Nowym która jest formą, a nie chcemy żadnej z tych rzeczy.
Więc co chcemy to niektóre z tych podstawowych rzeczy, takich jak nagłówek UI głównym segmencie kontenerów tekstu będziemy utrzymywać, że do teraz.
Ale w jej wnętrzu, zamiast ogromnego hetter dodajmy w tytule postu i tytuł powinien być tytuł bloga.
Ratujmy go.
I zobaczmy, czy to działa.
Więc znowu blog jest cokolwiek znaleźć wewnątrz wystawie tutaj.
Szukaliśmy z identyfikatorem zalogować się znaleźć, ID, jeśli go znaleźć, jeśli nie ma błędu przepuszczane znaleziono wychłostać za pośrednictwem dziennika pod nazwą szablonu do pokazania w szablonie pokazu.
Używamy bloga.
W porządku.
Moment prawdy niech szybkie jeden z tych linków nie idziemy pierwszy post.
Więc jeśli kliknę na ten jeden powinien zobaczyć mój nowy pies.
I robimy.
Wspaniały.
Mamy więc podstawy.
Najtrudniejsze naprawdę zrobić.
Teraz to tylko kwestia wyświetlając informacje, które chcemy wyświetlić.
Więc wrócimy i na pewno chcemy, aby wyświetlić obraz.
Chcemy, aby wyświetlić zawartość, jak również.
Więc będę kraść, że niektóre z indeksu.
Mamy już wszystko napisane teraz, a my po prostu stylem To trochę inaczej niż tutaj.
No to jedziemy.
Będziemy po prostu zacząć z tym.
Ale będziemy przeprowadzenie tej wyglądają ładniej.
Zobaczmy, co możemy uzyskać, jeśli odświeżyć.
Jest naszą pocztę.
Oto nasza strona pokaż.
Jedną rzeczą, którą warto zwrócić uwagę jest to, że obecnie nie pokazuje nic, że nie widzimy na indeksie, a to dlatego, że nasz wskaźnik pokazuje wszystko.
Ale większość blogów zrobić to, że wykazują one część słupka.
Więc jeśli mieliśmy 10000 Linia blogu nie chcemy go do objęcia 10000 wierszy tutaj.
Raczej można mieć podgląd akapitu lub tak, a następnie kliknij na czytaj dalej, a my zrobimy to za chwilę.
Ale zacznijmy od stylizacji tego trochę.
Pierwszą rzeczą, którą mamy, jest naszym głównym kontenerów tekstu.
Mamy ogromny nagłówek.
A potem wnętrze, które można dodać inny div, gdzie mamy zamiar umieścić wszystko wewnątrz tego div i nadać mu klasę równą UI załączonym górnym segmencie.
Co segmentu robi to stawia małą ramkę wokół rzeczy, więc wygląda na to, że zamiast masz zamiar dodać div class równą pozycję, a następnie zamiast elementu jesteśmy oddanie wszystkich naszych treści.
Tak rozpocznie się z obrazem i zamiast po prostu wyświetla całego obrazu, jak to możemy dodać semantyczne klasy o nazwie cię I skupione to obraz, który jest cztery klasy.
Więc mam obraz będzie po prostu dać nam ładny semantycznej UI obraz ale jeśli dajemy go na środku będzie następnie wyśrodkować obraz w tym pojemniku zaokrąglonymi dadzą mu trochę zaokrąglone narożniki.
To nie jest okrągły.
Można to zrobić z myślę okrąg obrazu lub obraz okrągły, lecz zaokrąglone rogi po prostu zmienia się trochę.
Niech tylko to sprawdzić, aby rozpocząć.
No to jedziemy.
Jesteśmy coraz bliżej, a potem pójdziemy tutaj i dodać kolejne urządzenie.
Ta klasa będzie równa zawartości, jeśli chcesz wiedzieć, gdzie jestem coraz to od.
Jeśli pójdziesz na pozycji postrzega pozycję na semantycznej UI To gdzie Biorę go od.
Mamy więc element div zamiast element możemy mieć obraz i treść, która jest dokładnie to, co zrobiłem.
Mamy więc element z zawartością środka i to naprawdę nie jest celem.
Nie zamierzamy być ekspertem w semantycznej UI po tym.
To ponownie tylko po prostu pokazać wam innego ramy, ale nie dostać wiesz, aby ci eksperta w semantycznej.
No dobrze, więc zamiast tego mamy wtedy zamiar dodać w naszej rozpiętości co ją stworzył tak po prostu i pozwoli zaoszczędzić jedną małą zmianą jest jednak, że nie jest to idealne dla użytkownika, aby zobaczyć, co możemy zrobić, to bardzo łatwo zmiana które w bardziej czytelnej daty.
I jest kilka metod z datami javascript.
Jest jeden nazywa dwa ciąg.
Jest jeden nazywa najświeższe ciąg, który jest to, co chcemy, a pokażę ci, co to wygląda.
Jeżeli po prostu nazwać to tu i odświeżyć informuje, że mamy teraz odświeżyć i uzyskać ładny angielską wersję ludzkiego czytelny.
1 niedziela listopada 2015.
Idealny.
Będziemy więc zapisać, że.
Trzymajmy pracy trochę tutaj.
Dodajmy w innym div nazywa opis i jest to kolejny semantyczne klasy zamiast tam i to na naszych ust, tak jak to i odświeżyć stronę.
I mamy blogu stosunkowo zrobić teraz.
będę pozbyć się tego div z linią wewnątrz niego.
Nie potrzebujemy tej linii.
A to z segmentu że mamy tutaj.
Jeśli więc pozbyć się tego jednego i trzymamy segment zewnętrzny możemy skończyć z tym lub możemy pójść w drugą stronę i pozbyć segmentu zewnętrznej i utrzymać wewnętrzną jednego tylko takiego.
Niezależnie od tego, myślisz wygląda najlepiej.
Myślę, że wrócę i zachować zewnętrzną jeden pewny.
Całkowicie jeśli ciebie.
W porządku.
Teraz przejdźmy jakieś stanowisko w naszej bazie danych, że mam trochę dłuższy tekst, aby wyświetlić lub skopiować jakąś lorem ipsum.
To jest tak.
A jeśli wrócimy nowy post, tym razem mam inny obraz jesteś w błędzie.
Będę zaskoczony.
A ja po prostu nazywają ten nowy post z dłuższym tekście.
Groźny tytuł.
Prześlij i otrzymujemy ten gigantyczny obraz tutaj nie jesteśmy jej stylizacji.
A potem mamy dużo tekstu.
Tak oczywiście nie chcemy się z treścią tekstu na stronie indeksu, który będzie działał w tej sprawie.
A jeśli kliknę Czytaj więcej i teraz dostać mój piękny blogu tutaj, ale zauważ, że wszystko jest skondensowane.
Nie masz te linie akapitów, które chcieliśmy.
Nie można dodawać przerw pomiędzy nimi.
Tak więc, aby ten trochę lepiej bardziej użyteczny blogu powinniśmy pozwolić użytkownikom wprowadzić HVM z czego zapewne widzieli Jeśli jesteś jeśli kiedykolwiek blog jakiegoś wariantu HVM teraz coś podobnego Wordpress lub jeśli używasz coś takiego medium.
Nie piszesz każdy T. M. siebie, ale można zrobić rzeczy pogrubione można zawierać obrazy można zawierają akapity tekstu kursywą.
Dobrze, jeśli możemy to zrobić teraz, jeśli staramy się zrobić nowy post będę ten sam obraz ponownie.
I niech kradną, że Lorem Ipsum ponownie.
Tylko część tego zróbmy coś oczywistego jak silny tagu wokół trochę tego.
Więc jeśli to działało chcemy zobaczyć jakiś pogrubiony tekst i złożyć, a ja zapomniałem dokręcić.
W porządku.
A zobaczysz, że nasza treść jest wyświetlana, ale nie jest uruchomiony.
To nie jest pokazany jako czas na zewnątrz i tam jest dobry powód do tego, co jest, że nie zawsze jest to bezpieczne, aby umożliwić użytkownikom wpisanie własnych HVM własnego kodu i po prostu go wykonać.
I może być myślenie Co najgorsze, co może się zdarzyć.
To tylko wyryte go.
Cóż, co może się zdarzyć, że ktoś może rzeczywiście wprowadzić znacznik skryptu w wykonywanie kodu JavaScript.
Więc pokażę ci, że później.
Teraz jednak jest to w porządku, bo nie jesteśmy w rzeczywistości wyświetlania kwoty HD.
Gdybyśmy chcieli to naprawdę prosta zmiana o jeden znak w rzeczywistości.
Więc to jest szablon pokaz.
A jeśli spojrzymy na szablonie pokazują teraz jesteśmy wyświetlania blogu ciało kropka.
Jeśli zmienię ten znak równości do studzienki rozdzielczej, która faktycznie jest podjąć wszelkie blogu, że ciało i ocenia, że ​​wrócił.
Uruchom go jako kod, a nie tylko wyświetlanie znaków.
Więc jeśli odświeżyć stronę możemy teraz uzyskać naszą silną tag właśnie tam.
A gdybym spodziewał, że widać, że jest to rzeczywista silne tag.
Więc zmieniając go od znaku równości do kreska jest naprawdę potężny.
Jest to w rzeczywistości ocenia kod.
Więc jeśli robimy innym poście sam obraz i tym razem robimy akapit pierwszy i akapit zamykającą a następnie powielić, a następnie, że gdy trochę Lärm Ipsum i po prostu ukraść niektóre z tych linii.
Musimy tylko dwa proste akapity.
Zobaczysz, że kończy się po naszych olbrzymich obrazów skończymy z dwoma akapitami tutaj.
Który jest wielki, bo teraz użytkownik może faktycznie wprowadzić w treści i określić styl.
Ale tu jest problem.
Więc jeśli wchodzę w coś losowego tutaj mogę zrobić tego skryptu i mogę po prostu wpisać jakiś kod tutaj i po prostu zrobić coś głupiego, jak cię prosiłem.
Pewnie.
Wszystkie one są błędnie.
A jeśli wejdę to teraz jest to HDMI to będzie działać i to jest tag skrypt co oznacza, że ​​zostanie to uruchomić skrypt pracy.
Więc kiedy idę do tej strony teraz otrzymuję tego wpisu.
Oczywiście jeden alert nie jest tak źle, ale można sobie wyobrazić, że rzeczy mogą eskalować stamtąd.
Istnieją sposoby zapobiegania tej kwestii pozbycia się wszelkich tagów skryptu.
Pokażę ci, jak to zrobić na końcu jest opcjonalne wideo w tej serii.
To się nazywa odkażania nasze wejść.
Nie, jeśli nie jest to pakiet o nazwie środka odkażającego ekspresowe, które zrobi to za nas.
Po prostu powiedz to zdezynfekować go nieruchomości, które będzie po prostu pozbyć się znaczniki skryptów w jej wnętrzu.
Nie trzeba pisać tego kodu.
OK.
Więc wróćmy jednak mamy kilka problemów.
One te obrazy.
Tak będziemy wracać do stylizacji nich.
Ale zacznijmy od obcinanie tych stanowisk, więc nie widzimy wszystkie treści na stronie indeksu.
Zostawmy go do pierwszych 100 znaków, a następnie umieścić wielokropek później.
Więc wytyczają ciąg.
To rzeczywiście bardzo proste.
Widzieliśmy na początku, gdy rozmawialiśmy o javascript używamy metody podciągu.
Dlatego na naszej stronie indeksu zamiast całego ciała blogu zrobi zatkany ciało podciąg pierwszego znaku zerowego aż.
I chcemy stu owski charakter, że jest w porządku teraz.
I zawsze robi to źle.
Jest to mała litera s podciąg.
Wydaje się, że powinna to być sprawa wielbłąda jak to dwa słowa, ale tak nie jest.
W porządku.
Więc teraz, gdy staramy się tego widać, że mamy teraz tych skróconych posty i niech to wystarczy dodać w tym prostym elipsy tutaj.
Więc podciąg a następnie na zewnątrz że tak kropka kropka kropka, a następnie mamy odnośnik rebore.
Więc teraz nasza strona pokaż służy określonemu celowi, gdzie widzimy trochę.
A potem można kliknąć Czytaj więcej i zobaczyć cały post.
Wspaniały.
Więc omówiliśmy wiele w tym filmie.
Mówiłeś o wystawie mówił o użyciu identyfikatora w trasie jak by uzyskać żądań.
Założyliśmy trasę Wzięliśmy identyfikator i znaleźć odpowiedni blog następnie renderowane szablonu.
Ale też o kilku nowych rzeczy, w tym na szablonie pokaz z użyciem myślnika tutaj zamiast znaku równości, które będą faktycznie wykonywali kod, aby uruchomić kod i renderować wynik.
A potem widzieliśmy również najświeższe ciąg, który jest miły sposób przekształcania datę w lepszej formie.
To nie jest jeszcze, że elastyczne.
Istnieją wielkie biblioteki, który z nich zwane Moment Jap, która pozwala określić dokładny format, który chcesz.
Możemy chcesz coś, co wygląda jak miesiąc slash slash dzień w roku, a może chcemy coś gdzie miesiąc jest skrócona lub może chcemy cały miesiąc i cały dzień tygodnia niż Słońce w listopadzie
Można to zrobić w chwili J s znacznie lepszy sposób postępowania z dat, jeśli chcesz być bardzo wyraźne w formacie, który chcesz.
To tylko prosta biblioteka, można go zainstalować tak jak Jay Querrey lub innej biblioteki po stronie klienta, ale mamy zamiar iść z tym na razie.
Wbudowany w javascript.
Nie potrzeba żadnego dodatkowego kodu innego niż jednej linii tutaj.
Wspaniały.
A potem ostatnią rzeczą, z wykorzystaniem podciąg zamiast indeksu, który jest bardziej na widoku, nie widziałem tego na jakiś czas, ale widzieliśmy go na początku.
Pierwszym argumentem jest, gdy chcemy, aby pierwsze cięcie Drugi argument jest, gdy chcemy mieć drugie cięcie.
Bierzemy wszystko pomiędzy.
Wspaniały.
W porządku.