Nuxt.js: Strona ładująca losowe artykuły

0:01Cześć w tej lekcji.

0:01Analogicznie na lekcji poprzedniej będziemy rozwijać mini o dodatkowe

0:05funkcjonalności bazując na wiedzy, którą już obecnie posiadamy.

0:09Czyli jest to taka forma ćwiczeń i powtarzania poprzez praktykę.

0:14Ja też zachęcam do tego, abyś

0:16robił robiła dokładnie to samo równolegle ze mną,

0:19bądź jeżeli będziesz miał jakiś pomysł zaimplementować go samodzielnie.

0:24W tej lekcji stworzymy odnośnik, który będzie generował nam losowe artykuły.

0:29Już mamy tutaj takie miejsca przygotowane

0:32w naszej aplikacji i trzeba je tylko wypełnić odpowiednimi danymi i uzupełnić

0:36fragmenty naszego kodu, abyśmy mieli osobny page do tego bądź

0:40osobny middleware i w związku z czym stworzymy sobie nowy page Random View.

0:47Kopiujemy nasz login jako punkt odniesienia.

0:51Tak naprawdę tego już bardzo nie potrzebujemy.

0:53Bardzo stary jest to komponent naszym blogiem kawą.

0:58Pozbądźmy się też niepotrzebnych styli

1:00random page, pozbądźmy się logo i w sumie analogicznie możemy zostawić to do.

1:07Loginu.

1:09W związku z czym teraz odwiedzając stronę random.

1:17Będziemy faktycznie mieli tutaj wyświetlana taką informację.

1:19Nie wiem skąd się wziął ten znak równości

1:21i tutaj się zaczaił na nas i jest też w loginie więc go usuniemy.

1:27Zapisujemy i to co chcielibyśmy zrobić to

1:30oczywiście pobrać losowy artykuł z wikipedii.

1:33I tutaj ponownie ratuje nas Wikipedia.

1:35Jest w dokumentacji, jest do tego odpowiednia metoda.

1:40W związku z czym z powrotem do dokumentacji.

1:43I tutaj mamy metodę random.

1:46Dzięki temu, że w poprzedniej lekcji zmodyfikowaliśmy troszkę nasze wpisy, nie

1:49musimy dodawać nowego endpoint get dla każdej jednej metody.

1:54Ale co możemy zrobić to stworzyć nowy middleware.

1:59Nazwać go random. Kropka.

2:02Czy jest?

2:04I tutaj sobie skopiować powiedzmy.

2:08Viki Translation istnieje, który jest prostszy, ma mniej kodu.

2:12Może samo tutaj.

2:17Deklarację funkcji przechowujemy i teraz co możemy zrobić to wykonać

2:21ponownie zapytanie, tak samo z prośbą o informację o losowym artykule.

2:28Const random.

2:31Równa się tutaj i wpiszemy go po prostu do konsoli.

2:36Zapiszemy i w naszym page'u.

2:39Tym razem za deklarujemy minus.

2:44Random i ponownie nazwa middleware bierze się z nazwy pliku.

2:48Tutaj w zakładce middleware.

2:50Czyli w tym momencie ten numer nie będzie robił nic poza logowaniem do konsoli.

2:53Możemy go sobie tutaj wypisać i po wejściu na stronę random możemy ją odświeżyć.

2:59Dla pewności to pass defined.

3:02Zobaczmy gdzie jest tutaj zadeklarowane.

3:06Oczywiście nie zaktualizowaliśmy naszego endpoint, więc tutaj pobierzemy sobie

3:11metodę random i zobaczmy czy w ogóle ma to sens, abyśmy przekazywali tutaj page'a.

3:17W naszym wiki dzieje się co się stanie, jeżeli Page nie istnieje.

3:26Czy on nam tutaj zrobi coś złego? Chyba nie.

3:28Chyba możemy zostawić to jako taką wartość.

3:32Nie jest to najlepsza taktyka, zdecydowanie.

3:34Ale powiedzmy, że damy sobie tutaj.

3:38Not available bez slasha.

3:40I mam nadzieję, że w tym momencie zadziała.

3:43Link nie jest zdefiniowany i to jest akurat prawda.

3:47Language musimy wyjąć sobie z.

3:50Naszego i 18 albo bezpośrednio 18 lokal.

3:59Cieszmy.

4:01Request wpływ.

4:04Error kod FIFA changed i nie ma takiego artykułu jak Dash.

4:09Dlatego też uważałem, że nie jest to najlepsze rozwiązanie.

4:11Zobaczmy czy API w ogóle wymaga pobrania.

4:15Tutaj Tajga nie wymaga super, tak bym się tego spodziewał.

4:21Natomiast w takim razie nie ma sensu wykorzystywać do tego tej metody.

4:24Tworzymy sobie po prostu nowy endpoint.

4:27Jest to dosyć specyficzne, bo ten endpoint

4:30nie jest zależny w żadnym stopniu od Page'a, więc.

4:35Router.

4:37Dla pewności po prostu napiszemy.

4:40I tutaj.

4:43Random możemy zawsze odkodować request response.

4:49I po prostu skopiuj tę treść.

4:53Wraz z językiem.

4:55Język się nam może akurat przydać, więc język sobie tutaj przekażmy.

5:00I w sumie te też część możemy sobie skopiować.

5:03Więc teraz dobierzemy się jeszcze do języka.

5:09Nie potrzebujemy funkcji.

5:11Potrzebujemy nowej instancji w odpowiednim języku.

5:15I tutaj zamiast wiki zrobimy sobie wiki random.

5:19I jako parametr możemy podać liczbę randomowych artykułów.

5:23Więc możemy też zrobić links albo count.

5:28Count.

5:30I tutaj będzie to ilość.

5:33Celowo domyślnie.

5:363.

5:37I przekażemy sobie to tutaj jako wartość i jako zwrotka.

5:43To jest po prostu promise, który daje nam

5:44tablicę wyników, w związku z czym nie potrzebujemy tutaj żadnego kontentu.

5:49Możemy zmienić nazwę tej funkcji.

5:52Na Random Articles, podmienić ją tutaj i pozbyć się tego identyfikatora.

5:59W tym momencie gdy zaktualizuje to failed powinna być to funkcja asynchroniczne.

6:08Oczywiście zapisujemy i powinno się to nam

6:11ładnie przebudować, więc teraz możemy odnieść się do tego.

6:16Ola.

6:19Random Middleware.

6:20Podmienić informacje o języku tutaj.

6:30I moglibyśmy w jakiś sposób jeszcze

6:31przekazywać tutaj parametry do tego middleware.

6:34Może np. przez roota?

6:37Ale w tym momencie powiedzmy, że domyślnie

6:40weźmiemy sobie jeden artykuł na sobie, zapiszemy.

6:45I teraz po wejściu na naszą stronę losową.

6:49Dalej dostają 500k request wpływ error kod five changed.

6:57W takim razie zobaczmy co tam może być problemem, ale nic się nie pisało na.

7:03Konsoli, więc

7:04po prostu serwer w międzyczasie i zobaczę czy nie ma tutaj żadnej literówki.

7:08Random język. Język.

7:10Count count.

7:12Random język. Język.

7:14Count Count.

7:15Super.

7:18Nie ma tutaj żadnego błędu.

7:21Powinno być ok.

7:23Być może po prostu przez to, że serwer się wywrócił.

7:26Wcześniej, gdy nieodłącznej słowa kluczowego they sing.

7:32I po prostu nie chciał się już później przeładować.

7:33Zobaczymy. Mam nadzieję, że to jest to.

7:36I faktycznie to był problem.

7:38Więc mamy tutaj informacje o danej nazwie Flaga.

7:41Jestem ciekawy, czy zmieniając.

7:45Wersję językową powiedzmy na francuski.

7:48I biorąc losowy artykuł to jest chyba ten odnośnik.

7:53Widzę, że tu się chyba nie zaktualizował.

7:59Bo daleko Ćwieczka.

8:00No i zobaczmy.

8:03Same nazwiska trafiają, a chciałbym jakąś jakieś słowo po.

8:07Po francusku.

8:08Wydaje mi się, że to mogło być po francusku.

8:11Franka zaimki.

8:13I tak jak najbardziej w tym momencie dostajemy tę informację po francusku, w

8:17związku z czym następne kroki będą naprawdę proste.

8:20Jako że to jest tablica stringów, tablica nazw, które chcemy wyszukać.

8:25No to możemy zrobić prosty redirect na poziomie middleware.

8:29Czyli tutaj możemy sobie zobaczyć jak się robi redirect w dokumentacji rutera ruter

8:36serwer i tutaj jest to jeden z pierwszych przykładów.

8:40Nie o to mi chodziło.

8:41Routera router middleware.

8:49Zdecydowanie nie o to mi chodziło.

8:50A mi chodziło.

8:53Tak i tutaj mamy sekcje, że możemy

8:55tworzyć, tak jak już wspominaliśmy, anonimowe middleware.

8:59Niekoniecznie, ale jest tutaj też metoda

9:01redirect i z niej właśnie chcemy skorzystać.

9:03Więc wykorzystamy tutaj.

9:07Ten relikt.

9:12I przekieruje Cię na losowy artykuł, który znaleźliśmy, czyli tutaj.

9:18Pobierzemy sobie.

9:21Pierwszy wpis

9:23chcemy przekierować na odpowiedni język, więc ustawiamy sobie tutaj.

9:27Lang równa się i 18 cal.

9:30Możemy w sumie to przesunąć wyżej i tutaj wstawić link.

9:35I przekierowanie na blank.

9:40Tutaj stringi, żeby wstawić wygodnie zmienną Viki.

9:45I tutaj nazwa naszego artykułu, czyli random.

9:48Z tym, że tutaj prawdopodobnie powinniśmy występować białe znaki.

9:52Zobaczmy czy to zadziała.

9:57Zapiszemy.

10:01I faktycznie nie zadziałało bez

10:03skopiowania białych znaków, w związku z czym teraz faktycznie jak już wyjdziemy na

10:06losowe artykułu, co jest też podobno zachowaniem tego jak Wikipedia działa,

10:11czyli klikając tutaj mamy odnośnik do losowego artykułu.

10:15Nie jestem pewien dlaczego w wersji francuskiej to się nam tutaj nie ustawia.

10:21Wejdźmy na stronę główną.

10:26Strona główna nie ma chyba odnośnika z

10:27obecnym językiem ustawionym na random article.

10:33Tutaj widzę, że się na mnie ustawia. Ciekawe.

10:35Wydawało mi się, że zaktualizowałem już.

10:39Stronę Playa Chciałem być może nie.

10:42W związku z czym tutaj random article możemy zmienić na plik tekstowy.

10:51Możemy go tutaj sekcji na hosting.

10:57Widzę, że w niektórych części dokumentacji

11:01komponenty były pisane z wielkich liter, niektórym małymi.

11:04Podzielone myślnikiem, czyli tak zwanym kebab.

11:07Ja osobiście preferuję kebab case,

11:09ale wydaje mi się, że większość community wie.

11:13Jednak preferuję notację płaska, czyli z wielkich liter bez myślników.

11:20Ale wracając do clue.

11:24Możemy tutaj wpisać random jako przekierowanie i base jako wartość.

11:30Tutaj wklejamy.

11:34Usuwamy stare odnośniki, zapisujemy.

11:38I w tym momencie random article powinien nas przenosić na odpowiednie wpisy.

11:44Jestem ciekawy czy.

11:46Nie zadziałało odpowiednio.

11:48Mamy domyślny język ustawiony na angielski.

11:53Chyba tak jest, w związku z czym

11:55niestety ten random art w języku angielskim będzie to problematyczne.

12:00Ale z drugiej strony jak nie ustawiliśmy tego w nast config, że jest.

12:08W tym miejscu na default local.

12:11To wtedy nam niestety homepage troszkę nie działał.

12:16Zobaczymy czy to coś zmieni.

12:19Prawdopodobnie będziemy mieli dużo błędów związanych z językiem angielskim.

12:24To się daje, przebudowuje.

12:29Na stronie głównej dostajemy page not

12:31found właśnie ze względu na to, że prawdopodobnie teraz musimy dawać wszędzie

12:35wersję językową, ale z drugiej strony działa nam w tym momencie random article.

12:40W języku angielskim również.

12:42W każdym razie właśnie tam się załadował.

12:45Niektóre artykuły będą krótsze, ale cóż na to poradzić, Jestem ciekawy.

12:51Jest to ciekawy problem związany z tym.

12:54Domyślnym full bak lokal.

12:57Ja chyba zostawię to w tym momencie w

12:58takiej formie, aby te losowe artykuły nam działały.

13:01Jeszcze tylko ustawię w naszym layoucie.

13:04Taką zasadę, aby nasze linki, które.

13:09Są linkami martwymi, chociaż ciężko to

13:11teraz będzie wykryć, bo do każdej z nich mamy kotwicę.

13:15Było jakoś wyróżnione, więc może zostawię to tak jak jest.

13:19W każdym razie mamy stworzony nowy.

13:23Endpoint oraz middleware, który losuje nam wybrane

13:27artykuły za pomocą endpoint oraz za każdym razem, gdy wejdziemy na stronę Random.

13:36Poprzedzoną oczywiście odpowiednim country kodem.

13:39Będziemy dostawali losowe artykuły w tym języku.

13:42I też warto zauważyć, że tutaj nam się zmieni ścieżka do tego artykułu.

13:46Dlatego tak kluczowe jest zrozumienie

13:49wszystkich relacji między store, między middleware, między partiami i między

13:53naszymi API, aby móc tworzyć rozwiązania tego typu w sposób szybki i wydajny.