Vue.js: Pobieranie danych z serwera

Vue.js 2.5.x

0:00W tej lekcji chciałbym do naszej aplikacji dodać możliwość pobierania adresu

0:04obrazków z serwera. Do tej pory w tym kursie tego nie robiliśmy, czyli nie korzystaliśmy

0:08z Ajax'a, ale w zasadzie jest to bardzo proste i jest to niezależne można powiedzieć

0:12zupełnie od Vue, ale jest bardzo ciekawa biblioteka, bardzo popularna Axios,

0:17niezależna od Vue i można za jej pomocą wykonywać zapytania Ajax,

0:21ona bazuje na promise, więc będziemy chcieli sobie ją zainstalować, co ważne

0:25można ją również zintegrować z Vue za pomocą takiego pluginu

0:29Axios Vue, jeżeli byś chciał, ale w naszym przypadku nie będzie to konieczne, zainstalujemy

0:34ją z użyciem npm install axios, więc muszę przejść do terminala, jeżeli masz serwer

0:38uruchomiony to Control C zatrzymać i wpisać takie oto polecenie

0:42i to nam się zainstaluje i będziemy to mogli sobie zaimportować, a webpack

0:46zadba o resztę, więc zaraz to powinno

0:50działać. Uruchamiam raz jeszcze ten serwer i będziemy mogli z Axios skorzystać. Bardzo

0:54łatwo, wystarczy napisać axios get, podać adres z którego chcemy coś pobrać

0:58i mamy funkcje then, czyli promise gdzie będziemy mieli obiekt response i response kropka

1:03data, to będą te dane. Jeżeli będzie bład, to wykona się block cache, więc sprawa jest

1:08bardzo prosta, okej i teraz dlaczego ja chcę

1:12to zrobić ten sposób. Po prostu chcę ci to pokazać do tej pory wstawialiśmy te

1:16obrazki tutaj w app w mail w zasadzie

1:20tutaj w app one były wstawione jako taka tablica. Ja bym teraz chciał żeby tej tablicy

1:24tutaj nie było w data, Tylko żeby ta aplikacja mogła przyjąć prop

1:28i żeby to prop to

1:33było właśnie images i żeby to była tablica, taką walidację sobie wykonamy,

1:37pytanie teraz jak tutaj przekazać prop. Możemy to zrobić z głównej aplikacji, czyli

1:41tutaj w main, okej i tutaj gdzie to renderujemy możemy zrobić coś

1:45takiego. Napisać props i przekazać

1:50nazwę tego prop'a, ja tutaj się pospieszyłem, bo nie do końca chcę tutaj przyjmować od razu images,

1:54więc wróćmy jeszcze do tej postaci, którą mieliśmy przed momentem, okej wytnę

1:58sobie tylko te rzeczy, które są tutaj. Chciałbym żeby images to była pusta tablica, a jako

2:03prop chciałbym przyjmować coś innego. Chciałbym, żeby to był adres, z którego sobie to będziemy

2:07mogli pobrać, więc tutaj możemy napisać, że props to będzie

2:11end point i żeby to był string, okej, pospieszyłem

2:16się z myślami, tak będzie w porządku i tutaj będę chciał zaimportować sobie Axios

2:20from axios, jeżeli coś importujemy, co

2:24było zainstalowane z użyciem npm, to nie podajemy tutaj żadnej relatywnej ścieżki tylko

2:29po prostu nazwę i z katalogu node modules będzie to podłączone. No i teraz z tego axiosa

2:33można skorzystać. Mamy pustą tablicę images, która wiemy, że będzie przekazywana

2:37do komponentu slideshow, czyli tam się po prostu nic nie wyświetli.

2:41Sprawdźmy, tak też się dzieje, pokaz zdjęć. Co

2:45my tutaj mamy, zerknijmy tak dokładnie, H1 i nic więcej, bo

2:50mamy puste images, ona jest przekazywane do slideshow. On

2:54tutaj otrzymał ten images, okej. No,

2:58ale tak naprawdę nie wiedział co z tym zrobić, nie potrafię tego przekazać dalej, więc

3:02tak to wygląda. Pytanie czy jakiś błąd się pojawił. Zgadza

3:06się mamy błąd property url undefined, czyli żeby tego błędu nie było,

3:10to może najpierw się tym zajmiemy. Spróbujmy zrobić coś takiego, że tutaj wszystko opleciemy

3:15sobie tagiem template, możesz mieć template w template, czyli tak jak robiliśmy wcześniej

3:19w tym kursie i zróbmy sobie v-if. Błąd się pojawił

3:25dlatego, że  że ten slajd próbuje się odwołać do active url, a ta computed property próbuje

3:30to wyliczyć, ale tablica jest pusta i jest problem, więc zrobimy sobie v-if

3:34i tym razem to już nie będzie tak jak wcześniej kiedy mieliśmy żywą templatkę

3:38w DOM, że te elementy tam są później Vue je usuwa. Tutaj jeżeli zrobimy v-if, one

3:43nigdy nie trafiają do DOM'u tak naprawdę i zrobimy sobie users

3:48length, czyli tylko wtedy ten element będzie widoczny. Do

3:53users mamy dostęp, nie jest to images, przepraszam, korzystaliśmy z użytkowników,

3:57więc tak to zapamiętałem, teraz tego błędu

4:01być już nie powinno. Zgadza się, czyli jeżeli tablica na początku będzie pusta nie będzie

4:06błędu, ale ja ją chce uzupełnić wysyłając zapytanie Axios'em. Tylko,

4:11że muszę wiedzieć gdzie go wysłać i stąd nie chcę tutaj na sztywno zapisywać url'a

4:16tylko właśnie chciałem go zrobić w tym miejscu, dlatego tutaj podamy props endpoint

4:20i tutaj będę chciał wstawić taki adres i to powinno nam

4:24zwracać json'a oczywiście potwierdźmy czy na pewno jest adres poprawny. Jak

4:30widzisz tak i zrobiłam mu jeszcze taką jedną rzecz, żeby zasymulować, że to chwilę

4:34trwa. Jeżeli dodamy parametr wait równa się 1, to dwie sekundy serwer

4:38poczeka, zanim nam podeśle te dane, więc chciałbym to zasymulować, bo czasami może to być bardzo szybko

4:43przysyłane i nie będziemy widzieć wszystkich naszych rzeczy, czyli taki endpoint z

4:47głównej instancji trafi do app, które

4:51jest tutaj i to możemy zamknąć a tutaj w app otrzymamy to w props pod

4:55endpoint i teraz w hook'u created będziemy

4:59mogli za pomocą Axios wysłać zapytanie. Axios get this

5:03endpoint i kiedy się uda pobrać

5:07te dane, tutaj będzie funkcja taka strzałkowa, będziemy mieli response, można to zapisać skrótowo

5:12tak i pod res kropka data będą te dane, więc chcę je przepisać do this images,

5:16to będzie już tablica poprawnie ten json przez axios zostanie sparsowany, więc

5:21this images chcę nadpisać tym co będzie w res data. Tyle

5:25wystarczy, żeby wysłać takie zapytanie, natomiast wspomniałem, że można zintegrować axios

5:29z Vue jeszcze bardziej, za pomocą Vue Axios i gdybyś tak zrobił

5:33i ustawił na Vue tutaj w tej głównej aplikacji Vue

5:38kropka use w ten sposób można używać używać plugin'ów, to wtedy w każdym komponencie,

5:42który masz tutaj, w jego metodach mógłbyś korzystać z this http get

5:47i to byłby alias do axios get. Możesz tak zrobić, poczytaj

5:51sobie o tym natomiast tutaj mi wystarczy mieć zaimportowany axios, również to axios

5:55mogę importować w innych komponentach, na przykład tutaj i ważne jest to, że

5:59webpack nie będzie tego w wynikowym build'ie dwa razy wrzucał, tylko zadba o to, żeby axios

6:04znalazło się tam wyłącznie raz, ale będzie działać poprawnie, czyli teraz

6:08kiedy się utworzy taka aplikacja wysyłamy zapytanie pod endpoint i nadpisujemy images. To

6:14wszystko działa reaktywnie, więc kiedy się nadpisze to również tutaj images length się

6:18zmieni i powinno to wszystko zacząć działać poprawnie. Sprawdźmy, odświeżam.

6:23Nic się nie dzieje rzeczywiście i później nam to wskakuje, więc

6:27zrobimy jeszcze jedną kolejną rzecz w tym czasie kiedy nic się nie dzieje, czyli czekamy te

6:31dwie sekundy na serwer. Będę chciał wyświetlić tutaj loader,

6:35okej w jaki sposób możemy to zrobić. Przyjdziemy sobie dla slideshow

6:39i tutaj tą klasę is loading dodawaliśmy i chciałbym

6:44tutaj zrobić jeszcze jedną rzecz, czyli do tej klasy loading, jeżeli is loading, czyli wiem,

6:48że po prostu preload obrazka robimy, bo to było od tego lub not

6:53loaded. Możemy taki warunek zrobić, bo chciałem teraz tutaj dodać coś

6:57takiego właśnie jak loaded i to będzie uznane

7:01za false, również na początku, czyli że jeszcze aplikacja się nie wczytała. Jeszcze

7:05ta tablica przekazana tutaj jest pusta, więc dopiero jak to się zmieni na true to

7:10dopiero wtedy będę chciał zdjąć ten preloader, w

7:14ogóle sprawdźmy jak to będzie wyglądać teraz. Mamy

7:19taki preloander i kiedy się to załaduje to wtedy on powinien zniknąć, ale on nie

7:23znika nigdy, bo nigdy nie zmieniamy tego loaded, więc jak

7:27możemy sprawdzić, że tutaj z tej pustej na początku przekazanej tablicy coś

7:31się zmieniło. Możemy sobie to obserwować, więc

7:35gdybyśmy sobie dodali watch to dodajmy sobie watch,

7:39który będzie obserwował naszą tablice, czyli images. To

7:44jest funkcja i tutaj będzie new value i old value, nie wiem czy to pamiętasz, jak ci to pokazywałem,

7:48czyli nowa wartość, to będzie ta nowa tablica, old value to będzie stara tablica, czyli

7:53jeżeli stara tablica miała length zero, była pusta, a w nowej jest

7:57jakiś length, to znaczy, że została wczytana. Ja sobie tak to wymyśliłem. Być może jest lepszy

8:01sposób, żeby to zrobić i tutaj chciałbym wstawić taki fragment logiki, czyli

8:06jeżeli tak jak mówiłem old value length jest zero, czyli poprzednia tablica miała wartość zero,

8:11a moja ma więcej niż zero teraz, czyli została nadpisana to wtedy dopiero

8:15będę chciał this loaded ustawić na true. Okej,

8:20czekamy dwie sekundy i zniknął nam ten

8:24preloader. Natomiast jest jeszcze jedna bardzo mam taka brzydka rzecz, może tego do końca nie

8:28widzisz, ale w momencie kiedy to zmienimy this loaded na true to

8:32wskakuje nam cała ta aplikacja i pierwszy obrazek, który

8:36jest podłączony. On nie ma tego preload, bo mamy preload kiedy klikniemy strzałkę w prawo. Dopiero

8:40wczytujemy drugi obrazek kiedy on się wczyta to go podstawiamy, a ten jest podstawiany

8:44od razu i to widać, że on tak trochę brzydko wskakuje, zobaczmy i też

8:49możemy na to zareagować oczywiście w nieskończoność nie będziemy rozwijać tej aplikacji, ale

8:53pokażę ci jak ja bym to zrobił. W tym miejscu zanim zmienimy loaded na true to

8:57chciałbym zrobić preload tego pierwszego obrazka i skoro już tutaj sobie zaimportowaliśmy

9:01naszą funkcję pomocniczą to nic nie stoi na przeszkodzie, żeby zrobić preload image. Jako url

9:07przekażemy mu this active url, czyli naszą computed property. Zobacz jak

9:11to się fajnie wszystko składa i kiedy on zostanie wczytany, to

9:17dopiero wtedy ustawię this loaded na wartość true. Super proste rzeczy dzięki

9:21temu że stworzyliśmy taką funkcję pomocniczą. Odświeżam, po dwóch sekundach

9:25mamy dane json i dopiero kiedy później załadujemy pierwszy obrazek to chcę go wstawić

9:30na stronę. Może wizualnie akurat ty w tym kursie nie widzisz, że to jest jakaś duża różnica, ale

9:34przy wolniejszym połączeniu gdybym go zasymulował, byłoby to widać, ten obrazek

9:38się tutaj pojawia dopiero wtedy kiedy został pobrany, więc

9:43tak mogłoby to wyglądać z użyciem Axios i myślę, że to

9:47jest tyle w tej lekcji. Pamiętaj, że możesz

9:51korzystać z dowolnej biblioteki Ajax'owej jakiej chcesz. Po prostu kiedy masz dane przypisz

9:56je do tutaj akurat this images, ale do dowolnej właściwości, a wszystko

10:00będzie reaktywne. Natomiast pamiętaj, że Axios możesz tak jak mówiłem tak skonfigurować,

10:05że w metodach poprzez this http get będzie dostępny.

10:09Natomiast ja nie będę tutaj tego robił. W kolejnej lekcji pokażę ci jeszcze jak do

10:13naszej aplikacji dodać rauter, żeby slajdy, które będziemy zmieniać pokazywały

10:18się również tutaj na pasku.