OK wrócimy w ciągu najbliższych kilku filmów.
Będziemy koncentrować się na tworzeniu aplikacji na blogu, który pokazałem w poprzednim filmie.
I to zajmie kilka filmów.
Mamy zamiar przejść jedną trasę w czasie, ponieważ, jak ważne są te spokojny trasy są w tym pierwszym filmie.
Będziemy koncentrować się na indeksie, a potem pójdziemy w porządku.
Skoncentruj się na nowe i tworzyć, a następnie pokazać edytować i aktualizować.
I wreszcie film o zniszczenie, a wraz z tworzeniem aplikacji i dodanie w siedmiu tras, które najbardziej potrzebują zamiar wprowadzić semantycznej UI, która jest inna ramy tam podobny do załadowania na CSSA i JavaScript.
Więc jeszcze raz w ciągu ostatnich kilku wspominałem Dlaczego tak naprawdę po prostu lubię, jak to wygląda.
To jeden z powodów, ale przede wszystkim po prostu chcę narażać cię do innego ramy, dzięki czemu można zobaczyć, jak podobne rzeczy.
Być może ci być myślenie, że to zły pomysł mi pokazać inny ram bombardować Ci wszystkich informacji, ale dobrą wiadomością jest rzeczy są tak podobne.
Gdy zauważysz, dwa lub trzy zaczniesz widzieć, jak wiele mają ze sobą wspólnego i że to naprawdę bardziej, że mają ze sobą wspólnego, niż robią inaczej.
Więc semantycznie dlaczego, ale mamy zamiar zacząć od tworzenia naszej aplikacji.
Więc jestem wewnątrz katalogu o nazwie spokojny routingu.
Jeśli chcesz podążać istnieje rozwiązanie już istnieje.
Więc jeśli chcesz się odwoływać, że czują się swobodnie zrobić, a jeśli nie chcesz, aby przejść przez proces tworzenia aplikacji, jeśli nie chcesz, aby objąć nowe i tworzenia indeksu, ponieważ widziałem, że zanim będzie można przejść od razu ,
Ale polecam Ci przejść przez wszystkie trasy ze mną wzdłuż kodu.
To bardzo ważne, że mamy to w dół.
To naprawdę chleb i masło z naszych ekspresowych aplikacji.
OK.
Więc tworzymy naszą aplikację Ja po prostu nazwać to aplikacja blogu.
Właściwie nazwijmy to spokojny aplikację blogu, a następnie CD, a następnie nasz ulubiony NPM i faktycznie tak jest nasz punkt wyjścia.
Wspaniały.
W porządku.
OK.
Teraz zainstalować kilka rzeczy, które musimy więc NPM instalacji i pierwszym jest oczywiście ekspresowa a następnie będzie również dodać mangusty.
I choć jesteśmy tu zrobimy parser ciała.
Więc te trzy kreska kreska chyba pamiętać, że parser ciało jest jak uzyskać dane z formularza formularz wysyła dane do treści żądania, a następnie przeanalizować treści żądania używając osoby ciała.
Więc to będzie w następnym filmie.
Na razie jesteśmy po prostu robi indeks.
Mamy więc, że ustanowiony stwórzmy a właściwie tak.
Teraz możemy otworzyć aparat i zrobić nasz standardowy początku pliku gdzie wymaga wyraźnej wymaga wyraźnej i wtedy zrobimy aplikacja równa Express i również dodać Vadi parser właśnie skoro już tu jesteśmy, ponieważ wymagają Dasch ciała parsera.
I wreszcie zrobimy mangusty, a ja lubię to posprzątać.
Chciałbym zamówić je pod względem długości, jak również.
Tak więc skończyć z pierwszej części ciała lub, jeśli kierujemy moją konwencję.
Ale to nie jest takie ważne, ale po prostu powiedzieć, że nie lubię tego robić.
Części ciała są, a potem następne mamy mangusty, a następnie wyrazić, a następnie przy ul.
I to właśnie je układać według długości, a następnie możemy wciąć rzeczy, jeśli naprawdę chcemy, ale to nie o to chodzi w tym filmie, więc nie będę spędzać zbyt dużo czasu w ten sposób.
OK, więc musimy to zrobić teraz.
Upewnij się, że każdy średnik.
Następna w kolejce musimy skonfigurować mangusty.
Więc to nasz blog modelu.
Będzie się nazywać blog będzie mieć tytuł, który będzie miał obraz, który AREL a następnie będziemy musieli my po prostu nazwać to organ, który będzie tekst blog treść tego postu.
Więc tytuł obrazu i ciało i są wszystkie ciągi, a także dodać coś nowego jeszcze nie widać, który jest tworzony tak, data będzie datą.
Więc to się na to.
I zanim możemy zrobić żadnej z tych rzeczy musimy skonfigurować mongoose Dlatego musimy połączyć nasze mangusta i zamierzamy połączyć się Mongo Divi Cole and slash slash hosta lokalnego slash nazwę naszej aplikacji i naszej aplikacji będzie nazwany spokojny blog.
I znowu, że nie ma znaczenia.
Tworzymy go po raz pierwszy.
Tak długo, jak nie zmieni się w przyszłości zawsze będzie łączyć się spokojny spacer na pierwszy raz.
Będzie go utworzyć.
OK.
I tak nie mamy to zrobić później.
Ale skonfigurować naszego zestawu danych widoku silnika być tak które również trzeba instalować.
A gdy będziemy czekać na to, aby przejść zróbmy wykorzystanie aplikacji wyrazić, że statyczne i folder publiczny tak, że możemy służyć naszą arkusz niestandardowy styl.
Kiedy dostać się do tego po prostu dobrej praktyki zrobić na początku wyraźnego aplikacji, a także dodać aplikację nie używać parser korpus, który jest nasze ciało parser.
wszystko czego są kodowane prawdziwe rozszerzoną rozmowy i prawdziwe rodzaju łyk ale może te trzy linie można po prostu skopiować z istniejących aplikacji, jak również.
Mamy więc założyć, że potem na samym dole, żeby upewnić się nasz ekspresowy aplikacja działa.
Zróbmy lekcji zrezygnować gdzie mamy proces tatusia w procesie portu env kropką IP i dodać callback Rady serwera dziennika dorosłych pracuje.
W porządku.
Sprawdźmy to.
Bez problemów.
Wspaniały.
Więc teraz niech pracują na mangusty.
Mamy więc mangusta podłączony.
Teraz musimy stworzyć naszą schematu i nasz model.
Więc zaczniemy od schematu.
Będziemy po prostu zrobić schemat dziennika var równa nowy mongoose tym schemacie tak i mieć to tytuł, który jest ciągiem obraz, który jest ciągiem organem, który jest również ciągiem.
A potem my mamy nasze dane ścieka wzywając utworzony.
I co możemy zrobić, to po prostu powiedzieć, że nie jest to wygodne, ponieważ będziemy musieli ręcznie określić datę.
Nie chcemy używać lub faktycznie wpisać datę.
Chcieliśmy po prostu wziąć bieżącą datę, kiedy użytkownik stworzyła stanowisko lub stworzył blog.
Wystarczy chwycić tę datę, dzięki czemu możemy ustawić wartości domyślne do czegoś nowego.
Mamy typ jak data, ale potem także określić domyślną datę kropkę.
Teraz i że będzie działać dobrze dla nas.
I to mówi, że stworzył powinna być data i że nie jest to dane wartości domyślne teraz.
Więc możemy też zrobić to samo dla obrazu, jeśli chcieliśmy mieć obraz domyślny.
Mogliśmy zrobić typu string, a następnie domyślnie jeśli użytkownik nie wprowadzić obraz.
Moglibyśmy mieć ciąg jak zastępczego obrazu i PEG czy coś ale nie zrobi tego, ale możemy łatwo zrobić, jeśli chcieliśmy.
OK.
I ostatnia uwaga tutaj zobaczysz tę wcięte czasem w ten sposób.
To tylko przedmiot tak dlatego, że jest krótki.
Nie mam zamiaru tego robić.
To zajmuje zbyt dużo miejsca, a właściwie tak.
Czy to będzie bałagan, jak to jest.
Więc zostawiam to tak.
OK ciała Tytułowy obraz utworzony, a potem następny krok.
Pozbądź się ich teraz jest skompilować go do tego modelu.
Do tej pory blog równa mangusta dot schematu dziennika modelu dziennika.
No to jedziemy.
Zapamiętaj to i mam zamiar dodać w komentarzu tutaj, że po prostu mówi modelu mangusta ukośnik config.
Tu dodam tylko kolejny komentarz.
To się nazywa aplikacja config, a następnie dodamy w komentarzu tutaj trasach.
Miejmy tylko nazwać odpocząć Rex.
Więc to gdzie my teraz idź i dodać naszą trasę indeksu lub trasę nowa stworzyć wszystkie siedem powtórzeń.
I tak ten plik będzie trochę bałagan.
Znowu jestem złamany rekord w tej sprawie, ale będzie to dzielenie się na odrębne rzeczy bardzo szybko.
Pokażę ci, jak możemy mieć modelki plików wielu modeli plików, jak możemy mieć pliki trasy dojazdu i możemy mieć pliki do konfiguracji i oprogramowania pośredniczącego.
Wiele różnych rzeczy, ale keep it simple.
Na początku nie chcę się mylić i myślę, że to trudne do oglądania, jeśli ktoś przełącza pliki stale.
Trudno śledzić.
Więc mamy zamiar zrobić to w jednym pliku.
Ale pamiętaj, to niekoniecznie jest najlepszą praktyką.
Jeśli to było naprawdę duże app a zwłaszcza jeśli mieliśmy dużo programistów pracujących nad nim.
Więc teraz zaczęliśmy okłady zmagać.
Pamiętaj więc zaczynamy z indeksem nazw indeksów.
Ścieżka ta powinna być blogi ukośnik jako żądanie GET i należy go wymienić wszystkie blogi.
Więc zróbmy to teraz, zanim to zrobimy niech upewnić rzeczy działają.
Jeśli uruchomię moją aplikację jeszcze żadnych problemów.
I niech faktycznie jeden stworzenie bloga, więc mamy coś dla oka.
Więc będziemy bardzo proste.
Ta recenzja blog nie tworzy, a następnie chcemy mieć tytuł po prostu nazwać to testy blog obrazu i wezmę obraz z tej strony i splash dot com jest doskonałym źródłem informacji.
Pokażę wam w przyszłym filmie, który ma kilka wolnych darmowych obrazów, które można robić, co chcesz z.
I tak to się dzieje, aby skorzystać z jednego z psem i kopiować, że tam, że naprawdę może być dowolny wiesz po prostu chcemy mieć coś do przetestowania, a następnie będziemy mieć nasz organizm i nasze ciało będzie tylko cześć.
To blogu i stworzyliśmy puste.
Wszystko rzepaku.
Więc po prostu spróbować.
Nie będziemy nic robić miarę zwrotnego musimy po prostu przyjąć, że to działa i wtedy będziemy testować w naszych wad Mongo ..
Więc nie miejmy uruchomić plik.
Nic się nie dzieje i wydaje się, jakby nic się nie stało.
Ale jeśli pójdziesz do Mangu i używamy odpoczynek pełny raport o tak nazwaliśmy go po prostu do podwójnego sprawdzenia, a następnie robimy D-B dot loguje się znalezisko mamy nasz pierwszy blog tam co jest dobre.
Tak więc te dwie rzeczy dla nas.
Jeden okaże się, że nasz model poprawnie skonfigurowany ale raz mamy indeks dzieje chcemy mieć pewność, że mają coś do zobaczenia, bo to ma listę wszystkich blogów.
Jeżeli nie mamy żadnych blogów, aby zobaczyć, że jest to trochę rozczarowująca i nie będzie w stanie stwierdzić, czy to działa.
Więc wyjść stamtąd.
Teraz skupmy się na naszej trasie.
Chodzi mi o to, aby pozbyć się tego nie chcę, aby utworzyć nowy blog za każdym razem mogę uruchomić tę aplikację specjalnie nie to samo jedno kółko jednak, że pies jest naprawdę urocza.
To, co chcemy zrobić, to stworzyć naszą trasę indeksu.
Znowu slash blogów, jak dostać się wniosek, że tylko wygląda jak apt kłody get ukośnik dodać w naszej standardowej zwrotnego odpowiedzi na żądanie, a potem zrobimy restart tynku i szablon, który będzie świadczyć będzie po prostu zwany wskaźnik dot Ejay nami, a my nie trzeba, że ​​Ejay Tak czy tylko indeksu.
I to ponownie z powodu tej linii tutaj nie musimy, że Ejay nam ale musimy to szablon zwany indeks jest katalog o nazwie widoki.
Więc zrobimy to teraz.
Bądź widoki katalogów dotykać poglądy slash indeksu.
I nam się mały błąd, który jest indeksowany.
EJ Tak.
Tak więc na trochę więcej praktyki lub usuń ten plik będę go usunąć lub przynajmniej użyć indeksu Flash, a następnie odtworzyć go.
Dotknij kropkę wykorzystanie indeksu ukośnik.
EJ Tak.
A potem go otworzyć, a my właśnie rozpoczął tę prostą H-1 strony indeksu i oszczędzać.
Zobaczmy więc, że mamy tę stronę indeksu.
Teraz to nie jest pełnienie funkcji strony indeksu.
Teraz, jeśli idziemy do podglądu, który można dostać z kilku sposobów, ja po prostu pójść do Web Dev Bootcamp dot com kreską nauczyć z kodem dot C9, że uczysz mnie lub można przejść do podglądu aplikacji podglądu uruchomiony.
Będzie go otworzyć tutaj, ale wtedy można kliknąć ten przycisk, aby zobaczyć go w przeglądarce lub można ją zatrzymać się tutaj, jeśli go preferują.
OK.
Więc pojawia się błąd tu i to dlatego, że nie mamy trasy trasy więc musimy ciąć kłody i mamy naszą stronę indeksu trasą.
Jest to typowe w stronę trasy na stronie głównej, aby przejść do indeksu czymś myśleć Reddit czy Facebook.
Na przykład na reddit przejść do strony głównej, a zobaczysz spis wszystkich stanowisk Reddit na Facebooku można zobaczyć spis wszystkich stanowisk i zdjęć i co tam jeszcze jest.
Więc zróbmy to teraz po uzyskać funkcję ukośnik odpowiedzi na żądanie, a my po prostu zrobić redstart przeczytać bezpośrednio na slash blogów.
Teraz restart możemy odświeżyć.
Nic nie powinno się zmienić.
Ale jeśli pójdę ciąć I skończyć na blogach ukośnik, jak również.
OK.
Teraz chciałbym dodać funkcjonalność indeksu.
Więc musimy pobrać wszystkie blogi z bazy danych.
Tak, że będzie to blog się znaleźć na wszystko, a potem będziemy mieć naszą rozmowę z powrotem z błędem.
I wtedy nasze dane, które Zadzwonię blogi i wtedy zrobimy błąd F i to jest po prostu przyjść do tego dziennika.
Nigdy jeszcze dodamy do naszej pleszka renderowanie indeksu chyba nie chcemy, aby tylko utrzymać go w taki sposób.
Chcemy uczynić indeksu z danymi.
Tak więc nasze dane będą nazwijmy to blogi, a także równe blogów.
Więc jesteśmy przekazując dane wraca z bazy danych z naszego Dopp znaleźć cokolwiek wraca.
Jesteśmy następnie wysłanie go za pośrednictwem blogów pod nazwa.
Tak, to jest trochę mylące, ale to jest naprawdę dość konwencjonalne, aby zobaczyć, gdzie mają dokładnie taką samą nazwę.
OK, więc teraz chodźmy do szablonu i dodać trochę kodu.
Miejmy tylko spojrzeć na blogach, aby rozpocząć tak po prostu.
Upewnij się, że robi się tam.
Odśwież stronę.
I jesteśmy coraz naszej liście.
To jeden blog już teraz, ale widzimy go tutaj.
Wspaniały.
Więc teraz niech wyświetlić to trochę ładniejszy.
Nie będziemy nic robić szalony, ale co możemy zrobić, to pętla po wszystkich blogach więc blogi dla każdego dziennika funkcji, a następnie musimy to tutaj.
A potem tu musimy inne znaczniki klamrę zamykającą każdy pójść i to musimy nawiasów, jak również.
I dla każdego z nich zrobimy div wewnątrz tego div.
Zróbmy to H 2.
I to byłby tytuł Lugg ten tytuł.
Pamiętaj, musimy znak równości tam, ale nie na każdej lub wsporników.
Następnie wyświetli obraz i źródłem jest równa nawiasach Ejaz.
Lagata obrazu i zapomniałem o tym wspomnieć.
Jeśli spojrzeć na tworzone widać mamy ten miły szalony czas tutaj datę, który został stworzony dla nas automatycznie, bo powiedział to jako wartość domyślna więc możemy wyświetlić, że aby tuż pod obrazem.
Wystarczy zrobić rozpiętości do teraz, że ma Lagata utworzony i wtedy oczywiście musimy naszym blogu, który będzie sam paragraf, który jest ciałem.
W porządku.
Wiele treści tam.
Odśwież stronę i widać nasz pierwszy post jest tutaj.
Musisz po prostu zaufać, że to działa na razie.
Tak to pokazuje nam jeden.
Technicznie nie wiemy, czy to pokazuje nam wszystkie z nich jednak, bo mamy tylko jedną bazę danych w następnym filmie.