Witamy z powrotem do naszego ostatniego filmu na tym blogu.
Więc musimy się zmienić.
Mamy zamiar zrobić.
Pierwszym z nich jest wprowadzenie środka odkażającego ekspresowych, które wymieniłem, które pomogą nam z tym problemem, gdzie w przypadku wyświetlania HDMI Olafur faktycznie renderowania mu użytkownik może potencjalnie podać szkodliwy skrypt zamiast hack skryptu.
Nie chcemy, aby uruchomić ten kod więc używamy środka odkażającego, aby pomóc nam, że w zasadzie trwa to wejście i usuwa wszystkie skrypty z niego i po prostu daje nam peer wieku go.
A potem my także chcemy projektować strony indeksu trochę.
To wygląda trochę szorstka i ostatnią rzeczą będzie zrobić to mała aktualizacja do spokojnego tabeli Rhodes żeby uczynić go trochę bardziej przydatne dla Ciebie.
Więc zacznijmy się do dezynfekcji.
Więc mam zamiar zainstalować pakiet o nazwie ekspresowe odkażającym kreska kreska kreska.
Zapisać.
OK.
Teraz, kiedy jest to robione w naszej aplikacji tak będziemy wymagać, aby express środka odkażającego wynosi wymaga wyraźnej DESCH środka odkażającego tak po prostu.
A potem musimy powiedzieć naszą aplikację, aby używać go używać aplikacji Express, środka odkażającego, a jedynym wymogiem jest to, że jedzie po wszystkich parsera.
Określ tutaj.
OK.
I to wszystko.
Teraz, aby używać go chcesz to zrobić, aby rozpocząć zamiast są tworzone podczas tworzenia nowego bloga.
Więc to naprawdę stworzyć aktualizacji.
Są dwa miejsca, w których bierzemy danych i zapisywanie do bazy danych.
Za każdym razem chcesz się upewnić, zdezynfekować wejścia i zamiast stworzyć to, co chcemy zdezynfekować jest zwrócić się ciała się dziennik ciała, która jest swego rodzaju bałagan pamiętam zwrócić się ciało, co pochodzi od postaci, co dane jest w żądaniu organ, który w naszym przypadku jest pochodzących z formularza następnie blog właśnie z powodu tej linii tutaj.
Tytuł Blogu obrazu i znaleźć w końcu ciało blogu.
I to jest ten, który nam zależy.
Tak więc mamy do czynienia blogu ciało kropka.
Więc jest to rodzaj długiej długiej nazwie tutaj jednak zwrócić ciała z ciałem blog temp.
I mamy zamiar zmienić go tak, że jest równe prośbą o dezynfekcji i jedziemy do dezynfekcji całą tę rzecz.
Więc bierzemy to, co jest aktualnie równa odkażania go, a następnie zmieniając całą prośbę nora ciała zalogowany ciało dorównać tym.
Więc pozwól mi to wyjaśnić Ci zróbmy Constable bloga.
Zażądać, aby ciało przed i po.
Właśnie tak.
I dodam coś zrobić to trochę łatwiejsze do zobaczenia.
Wspaniały.
OK.
Więc dajmy mu szansę już teraz.
Zacznij świeżym Serwer strony.
Będziemy musieli stworzyć nowy post.
Zróbmy jedną tylko nazwie Demo losowo obrazu i dodajmy w jakiejś dobrej HMO, który chcemy wykorzystać lub wprowadzić, a potem coś złego, który będzie po prostu alert ponownie.
No to jedziemy.
Więc jeśli działa to powinniśmy zobaczyć, że dotąd oba te i po to ma tylko.
Rzućmy okiem na to, co przyjdzie do około.
Idealny.
Widać pierwsze ciało czas jest równa do tego.
Albo mieliśmy znacznika script tam po raz drugi.
Ciało ma tylko H-1.
Więc to wszystko, co mamy zrobić, aby zdezynfekować coś.
A jeśli teraz wyświetlać zrobił idziemy do naszego nowego postu, który ich zdaniem jest to jeden.
Poniżej przyjrzymy.
Jesteśmy widać problem sam, ale nie ma tagu skrypt w ogóle.
Tak, że działa świetnie.
Ostatnią rzeczą, którą chce zrobić, to uruchomić tego samego kodu, ale zrobić to zamiast aktualizacji.
Jesteśmy tam, zanim żądanie aktualizacji up na blogu.
Dobrze zrobił to samo.
A minor No.
To byłby dobry przypadek użycia przez co jest znane jako warstwy pośredniej, która tak naprawdę nie rozmawialiśmy jeszcze o ale to jest coś, że mamy powtarzać dwa razy w dwóch różnych trasach.
Co możemy zrobić, to napisać middleware, który będzie działał ten kod przed tymi dwiema drogami, ale omówimy middleware.
W dalszej części tego kursu pod koniec EXPRESS więc jesteśmy pozostawiając ją, jak to jest teraz.
I to działa dobrze.
Że będzie zdezynfekować zarówno czas podczas aktualizacji ktoś stworzyć następne.
Skupmy się na lub indeks, który E.J ..
Tak.
Dlatego wymaga trochę pracy.
Wygląda na to teraz.
Zacznijmy usuwając kilka rzeczy.
I to był jeden z tych stanowisk, które miałem wcześniej utworzonych dodaliśmy środka odkażającego w.
I Aby usunąć niektóre z nich te, które nie mają obrazów tak, że możemy skończyć z czymś łatwiejsze do stylu, w którym możemy rzeczywiście zobaczyć obrazy.
OK, więc mamy to co chcemy zrobić, to centrum im start i mam zamiar używać dużo kodu, które już zostały użyte.
Więc zamiast indeksu mamy nagłówek, który jest dobry, ale potem mamy zamiar umieścić wszystko wewnątrz div i to div będzie mieć klasę równą UI główny kontener tekstu, który jest to, co daje nam, że skoncentrowany pojemnik.
A potem wewnątrz będzie mieć naszą div.
I to jest w zasadzie recyklingu z ostatniego małej linii w ostatniej odrobinie pisaliśmy na formach i na stronie pokazu.
Więc klasa równa Ci ogromny nagłówek, a następnie będziemy po prostu umieścić zestaw stronie indeksu.
Załóżmy, wystarczy umieścić go odpocząć blogu.
Właśnie tak.
A potem, kiedy mamy to zrobione dobrze dodałem kolejny div.
Ten będzie miał nasz segment w nim, które daje ten UI górną dołączony odcinek, który daje tylko tę małą linię w oknie, a następnie wewnątrz nie będą przelotowego.
I ruszyliśmy jeszcze jedną linię zanim nawet dostać się do pętli, która jest div z klasą UI podzielonych przedmiotów, a następnie dla każdej pozycji jedziemy wewnątrz was dzieli przedmioty i dostajemy automatyczny dzielnik umieścić między nimi.
Więc mamy zamiar skopiować ten kod do tego jesteś podzielony przedmiotów.
Co musimy dokonać pewnych zmian.
Pierwszym z nich jest po prostu w długach, ale nie jesteśmy po prostu będzie wydrukować wnętrze.
Mamy zamiar stworzyć div class równą pozycję, a następnie wewnątrz elementu mamy pierwsze zdjęcie, a obraz trafi zamiast div z klasą równej obrazu, a my umieścić, że tam, i że będzie wspomóc ograniczanie rozmiar obrazu, więc nie dostać te gigantyczne obrazy objęciem całego ekranu więcej.
OK, tak samo obraz umieścić obraz w środku, to potrzebujemy innego div class równą zawartości.
I to jest, gdy położę się kilku rzeczy.
Pierwszy z nich to tytuł i zamiast dokonywania H-2 z tytułem rzeczywiście i zrobić tag kotwicy i lub tag kotwicy będzie miał klasę równą Hetter ale też ref równą strony które przedstawiają i Riskin kopię, która jesteś tutaj, podobnie jak to, co już masz.
Więc czytaj więcej odnośnik więc powodu Robimy to tak, że możemy skończyć z naszym nagłówku każdego bloga mogę kliknąć na nim, aby przejść do strony pokaż lub kliknij na czytaj więcej.
Upewnijmy się, że mamy mały błąd składni.
Jesteśmy brakujących nasz zamykający cudzysłów tu dla Atra japonki.
OK.
Atra jest strona pokaż, a następnie w nawiasie mamy tytuł bloga.
To trochę bałaganu.
Następnie po tym dodamy w div z klasą równej Metta który jest tylko miejsce dla nas, aby umieścić tu informacje o tym konkretnym punkcie, który w naszym przypadku będzie tylko przęsło z datą, które już mamy.
Ale mam zamiar sformatować tę datę, jak również tak blogu kropkę utworzony najświeższe ciąg, który już widział na stronie pokazu, a następnie zamykamy, że nie żyje wtedy będziemy mieć div class równą opisem.
I w tym miejscu umieścimy tę zawartość.
Rzeczywista ciało blogu.
I zamiast robić znak równości będę go zmienić z powrotem na desce rozdzielczej, czy nie zmienić go z powrotem, ale będziemy go zmienić na Dasht dzięki czemu otrzymujemy rzeczywisty wiek naszego forum, który jest teraz oczyszczone.
Wreszcie mam div klasycznej do dodatkowych i zamiast tego wprowadzi przycisk, aby przeczytać więcej i sprawi, że znacznik zakotwiczenia i mam zamiar skopiować tag już mamy i zmienić go tylko trochę.
Więc nie musimy klasyczny już do nagłówka, ale chcemy, a nie to duży przycisk.
Więc płynął podstawowe.
Wybierz swój kolor zrób Violet ponownie.
I możemy to zrobić trochę.
To na pewno ma wiele do zobaczenia.
Warto więc umieścić to postawmy to się tylko trochę.
Więc po otwarciu tutaj następnie ustawić znacznik zakotwiczenia Musimy Czytaj więcej i dodamy na ikonę ikonę podwójnej strzałki, która będzie tylko mała strzałka po więcej.
OK maraton tam.
Dużo rzeczy dodaliśmy w.
Wystarczy upewnić się, że wszystko jest OK, a patrząc na pewno wystarczy spojrzeć na kod rozwiązanie, jeśli nie chcesz, aby wziąć to od podstaw.
Zobaczmy jak to wygląda bo nie ma żadnych błędów składniowych.
To albo idziemy właśnie to, czego szukasz.
Więc jesteśmy obcinania pierwszych 100 znaków w tym lub tyle znaków, ile jest w tym poście.
W tym przypadku bardzo krótkie kliknięcie czytaj więcej prac link przeniesie nas do strony pokazu.
możemy edytować wrócić.
Mamy tu swoje obrazy.
Po podzielić linie mamy Hetter mamy ten segment dzieje wokół wszystkiego i skończymy bardzo dużo.
Więc znowu nie masz ochoty na pewno nie masz ochoty trzeba znać wszystkich tych klas.
I niby właśnie zrobił.
Wiesz dał je do Ciebie.
Szybki styl ogień.
Bo nie chodzi o to, że uczysz się wszystko.
Ale jeśli chcesz dowiedzieć się więcej i pójść do semantycznej dashi dlaczego Dotcom.
Jest wiele świetnych tutoriali i zasobów.
To nie jest jeszcze tak szeroko stosowany jako bootstrap ale zdecydowanie rośnie.
Zauważyłem dużo moich studentów byłoby go znaleźć na własną rękę.
Podczas gdy w przeszłości chciałbym go wprowadzić do nich po Bluechip w większości dwóch ostatnich klasach I uczy studentów bardzo szybko zakochał się w niej bez mnie kiedykolwiek przedstawiający go do nich i skończyło się to nad bootstrap.
Większość studentów, ale całkowicie do Ciebie.
I cieszył się nimi obydwoma a bootstrap jest zdecydowanie bardziej popularny teraz.
OK, tak więc ostatnią rzeczą, jaką możemy zrobić, to wymienić byłaby naszym stole tylko odrobinę.
I wszystko co chcę zrobić, to dodać w ostatniej kolumnie dla metody mangusty, która odpowiada każdemu z nich.
Więc znaleźć, id znaleźć o 80 find aktualizacja przez ID dodaj usuń i tak dalej.
Będę szybki przegląd jak działają tabele.
Więc tu jest wykres, który z wiekiem ilość musimy dodać w innym TH, a my po prostu nazwać to metoda mangusta i otwórzmy się na podglądzie podgląd gotowania i przenieść go do dna tutaj.
Jest nasz stół lub nową th.
A potem do indeksu dodamy telewizor w metodzie mangusty tam dla psa powinien być psem znaleźć.
Proszę bardzo.
Następna w kolejce mamy nowe, które w rzeczywistości nie posiada metody mnisich w ogóle.
Więc zamiast pozostawiać go puste ja po prostu umieścić w pliku, który robi to uczynić formularz.
Następnie mamy tworzyć i tworzyć zrobi psa dot tworzenia.
I jeszcze jedna bardzo fajna funkcja, jeśli można to zrobić podgląd życie jest jako MIDI edycji przyszedł zauważyłem, że pokazuje mi, gdy jestem wybierając na dole, która jest dość chłodno.
Więc nie trzeba nawet otwierać inspektora i po prostu zobaczyć na żywo.
A jeśli coś zmienić je aktualizować na żywo, jak również bez konieczności zapisywania lub odśwież stronę.
OK.
Tak więc mamy pokaz, który robi psa, który znaleźć przez ID to mamy go.
Który również ma psa dostać grzywną przez ID.
Musimy znaleźć psa, który mamy do edycji i to w formie, a następnie zmiana ma psa, który trimed przez ID i aktualizacji długa.
A jest on także dość długo pies może znaleźć przez ID i usunąć każdy iść.
Spójrzmy.
Oto nasz stół.
Wygląda na to, że przypadkowo usunięte jedna z płyt tutaj który ma wyświetlać co zmiana ma więc zmiana ma na celu zaktualizowanie pies stuper drażniącymi psa następnie przekierować gdzieś.
W porządku.
Teraz powinniśmy wrócić do normy.
Oto nasz stół.
Tak więc jedynym, który nie ma żadnych metod Mongoose w ogóle.
To będzie nowa, bo nowa nie jest znalezienie czegokolwiek w bazie danych to nie dodając niczego.
To po prostu sprawia nam formularz.
Wspaniały.
Więc mam nadzieję, że jest to przydatne dla Ciebie w przyszłości może odnosić się do tej tabeli.
Będę odsyłając do niego z pewnością obejmuje wiele ważnych informacji, które będziemy używać dużo.
W porządku.
Tak więc zakończyć to teraz mamy przejść do niektórych bardziej ciekawego niektórych bardziej skomplikowanych aplikacji.
Zauważyłem, że był trochę Ameryki na pokryte dużo.
To zawsze jest trudne do wykonania.
Ciekawe, bo po prostu dużo informacji.
Ale, ale ważne jest, aby mieć, że wiarygodność móc tworzyć odczytu aktualizacji i usuwania podmiot zajmuje dużo tajemnicy.
W porządku.
Do zobaczenia w przyszłym roku.