Vue.js: Wyświetlanie podsumowania
Techniki Zaawansowane
5 godz. 11 min · Vue.js · Full-stack i Programowanie
Piotr PalarzWeb DeveloperCzego się nauczysz
- Zaawansowane techniki pracy z Vue.js
- Praca z wieloplikowymi komponentami
- Zarzadzanie stanem aplikacji z VueX
- Routing z uzyciem vue-router
- Praca z danymi z uzyciem axios
- Techniki walidacji formularzy
- Praktyczne projekty
- Masa przydatnych wskazówek
Kurs, który masz przed sobą, to kontynuacja wydanego wcześniej kursu Vue.js od Podstaw. W pierwszym kursie omówione zostały najważniejsze koncepcje pracy z Vue, a w tym materiale poruszamy już bardziej zaawansowane tematy. Przede wszystkim skupimy się na pracy z użyciem nowoczesnego workflow, co da nam niezwykłą swobodę tworzenia aplikacji internetowych. Jeśli zatem znasz już podstawy pracy z tym frameworkiem i chcesz wskoczyć na kolejny poziom wtajemniczenia, ten kurs jest zdecydowanie dla Ciebie. A co znajdziesz w materiale?
Zaawansowane koncepcje
Na początku zobaczysz, jak szybko tworzyć pliki startowe do nowej aplikacji z użyciem narzędzia vue-cli. Omówimy możliwość dzielenia kodu na wiele plików, tworzenia szablonów, a także wykorzystywania bezpośrednio funkcji renderującej, do której zamieniane są na etapie builda wszystkie szablony.Zobaczysz również czym są i jak pracować z komponentami funkcyjnymi i tzw. mixinami, które pozwolą reużywać raz napisany fragment kodu.
Zarządzanie stanem aplikacji z VueX
Przepływ informacji to bardzo ważny temat w każdej aplikacji internetowej. Vue oferuje kilka sposobów na to, aby komponenty mogły się ze sobą komunikować. Ich omówienie zaczniemy od najprostszych technik, które świetnie sprawdzają się w wielu przypadkach. Następnie rozszerzymy możliwości instancji Vue w ten sposób, aby wszystkie komponenty miały dostęp do scentralizowanego miejsca, gdzie przechowywany będzie stan aplikacji.Tam jednak, gdzie aplikacja wymaga zarządzania większą ilością danych jednocześnie, powyższe techniki mogą być niewystarczające. Z tego powodu, podobnie jak w innych frameworkach, Vue posiada oficjalny wzorzec oraz bibliotekę do zarządzania stanem aplikacji. Rozwiązanie to nazywa się VueX i w kursie zostanie ono dokładnie omówione. Zobaczysz zatem jak skonfigurować tzw. store, jak przechowywać w nim dane, jak je wyświetlać w widokach, aktualizować za pomocą tzw. mutacji czy pracować z nimi wykorzystując akcje. Przekonasz się, że początkowa większa ilość pracy, aby wszystko skonfigurować, w pewnym momencie zaczyna się opłacać.
Routing w aplikacji
Tworzenie nowoczesnych aplikacji typu SPA (Single Page Application) nie może się obejść bez zmian widoków. Dobrą praktyką jest, aby wraz z takimi zmianami, aktualizowany był również pasek adresu. Wykonanie takiego zadania umożliwiają nam tzw. routery. Vue posiada oficjalny dodatek o nazwie vue-router, który w tym kursie dokładnie omówimy.Zobaczysz jak dołączyć router do swojego projektu, a także jak konfigurować ścieżki. Poruszymy tematy takie jak generowanie odnośników, dynamiczne parametry, tworzenie zagnieżdżonych ścieżek czy nawigacja z poziomu kodu JavaScript. Dowiesz się również, jak tworzyć tzw. guardy, które umożliwią lub zablokują możliwość wyświetlania wybranego widoku, np. w zależności od tego czy użytkownik jest aktualnie zalogowany.
Praca z danymi z serwera
Trzecim, po zarządzaniu stanem aplikacji i wykorzystaniu routingu, komponentem, który niezbędny jest do tworzenia aplikacji napędzanych danymi, jest możliwość wysyłania zapytań HTTP.Tę czynność umożliwi nam bardzo popularna, acz niezależna od Vue biblioteka axios. Zobaczysz jak za jej pomocą pobierać i wysyłać dane. Aby jednak jak najwygodniej pracować z tym rozwiązaniem, połączymy axios z Vue, udostępniając tak naprawdę jej metody wewnątrz każdego komponentu.
Walidacja formularzy
W jednym z rozdziałów kursu podejmiemy temat walidacji formularzy. Zobaczysz jak z pomocą popularnego pluginu dla Vue, robić to w bardzo prosty sposób.Omówimy różne funkcje walidujące, które umożliwią sprawdzenie poprawności pól tekstowych, radio czy checkboxów. Zobaczysz jak w łatwy sposób wyświetlać komunikaty o błędach i warunkowo zmieniać wygląd pól. Nie zabraknie również informacji o asynchronicznej walidacji, która pozwoli nam na żywo sprawdzać czy wpisany adres email jest dostępny czy też nie.
Praktyczne projekty
Kurs ten oczywiście to nie tylko niezbędna teoria, ale także praktyczne przykłady. Aby jak najlepiej poznać omawiane techniki, wykorzystamy je do stworzenia ciekawych aplikacji.Pierwszą z nich będzie konfigurator produktu, który umożliwi użytkownikowi wybór podzespołów zamawianego komputera. Każdy taki wybór będzie wpływał na końcową cenę, która będzie na bieżąco aktualizowana. Po wybraniu wszystkich opcji, dane prześlemy na serwer. To projekt który pokaże Ci jak przechowywać dane z użyciem VueX, a także jak na ich podstawie wyświetlić widok i napisać logikę.Innym projektem, który wykonamy, będzie Quiz. To aplikacja, gdzie użytkownik odpowiadał będzie na serię pytań pobranych z serwera, a do wyboru będą 3 odpowiedzi. Po przejściu przez wszystkie pytania, wyślemy do serwera zapytanie, a ten w zamian zwróci nam listę poprawnych odpowiedzi. Dzięki temu pokażemy użytkownikowi, gdzie miał rację, a gdzie popełnił błąd. Aplikacja ta wykorzystywać będzie wszystkie najważniejsze techniki, tj. VueX, routing, a także Ajax.
Dla kogo jest ten kurs?
Kurs ten jest dla wszystkich osób, które czują się już swobodnie w pracy z frameworkiem Vue. Jeśli zatem masz już solidną wiedzę podstawową lub przerobiłeś kurs Vue.js od Podstaw, to zdecydowanie jesteś gotów na poszerzenie swoich umiejętnośći w pracy z tym frameworkiem. Co ważne, doświadczenie w pracy z innymi frameworkami JavaScript nie jest tutaj wymagane, a jedyne co będzie bardzo pomocne, to znajomość nowej składni EcmaScript 6.
Vue.js 2.x.x
W tej lekcji dodamy jeszcze możliwość generowania podsumowania.
Będę chciał to zrobić w taki sposób że tutaj będziemy mieli ukośnik summary więc może zacznijmy od dodania
tego w naszym routerze.
Pamiętasz być może że utworzyliśmy sobie coś takiego jak podsumowanie, będziemy musieli to dynamicznie
wyświetlić ale na razie jak widzisz jest wszystko ok bo mamy taki komponent więc możemy przejść do routes
i będę chciał tutaj utworzyć nową ścieżkę.
Będzie to path ukośnik summary i komponent który chcemy wtedy czytać to będzie Summary.
Oczywiście musimy sobie go tutaj wstawić w ten oto sposób i powinno być w porządku.
Może jeszcze zróbmy name żebyśmy mogli się odwoływać do tego właśnie po takim imieniu po takiej nazwie,
ok, czyli to powinno nam wystarczyć zobaczmy czy jeśli byśmy przeszli do summary to nam się to wyświetli.
Zgadza się, natomiast do summary będziemy chcieli przechodzić za pomocą przycisku czyli kiedy odpowiemy
na wszystkie pytania chciałbym tutaj zmienić ten przycisk i teraz jak możemy to zrobić, jeżeli przejdziemy
do quiz to chciałbym tutaj zrobić dla tego przycisku jeszcze v-if.
Czyli ma się pokazywać,
jeżeli nie odpowiedzieliśmy na wszystkie, zrobimy taki computed allAnswered.
i jeżeli nie odpowiedzieliśmy na wszystkie to wtedy on się pojawia a w przeciwnym wypadku zrobimy button
btn.btn-successs next i on będzie miał v-else czyli on się wyświetli przeciwnym wypadku, jeżeli są obok siebie
dwa elementy to v-fi i v-else działa poprawnie i tutaj zrobimy sobie zakończ, ok i teraz po allAnswered jak sprawdzić czy
na wszystkie pytania odpowiedzieliśmy, dodajemy sobie computed i wystarczy że sprawdzimy ile mamy tutaj
kluczy czyli w tym Vuex'ie,
jeżeli mamy answers, jest to obiekt to sprawdźmy ile ten obiekt ma kluczy jeżeli ma np. pięć kluczy
i jest pięć odpowiedzi to na wszystkie odpowiedzieliśmy więc tutaj wystarczy zrobić coś takiego,
return Object.keys, Object.keys jeżeli mu podamy jakiś obiekt to zwróci nam jego klucze czyli np. w naszym
przypadku tam będzie 1, 2, 3 bo takie klucze będą pod tymi identyfikatorami.
Więc tutaj musimy podać ten obiekt a więc this store.
Następnie state.answers, nie zrobiliśmy do tego computed property więc musimy to pobrać w ten sposób
i to nam zwróci tablicę z kluczami więc sprawdzimy jaka jest długość tej tablicy czyli po prostu ile
takich kluczy tam jest, length.
Jeżeli to jest równe this.questions.length, to wiemy że odpowiedzieliśmy na wszystkie pytania.
Zobaczmy czy to w ogóle nam zadziała.
Odpowiadam na pierwsze, przechodzę dalej.
Drugie, trzecie, czwarte, piąte.
Ok.
Prawdopodobnie jakiś błąd się pojawił, jeżeli nie to być może coś się znowu nie odświeżyło.
Mam wrażenie że napisaliśmy jednak wszystko w porządku.
Zaglądamy sobie do Vuex store'a i tak będzie najprościej,
ok czyli tutaj mamy jakiś pack, mamy pięć tych elementów, Object.keys powinno zwrócić pięć to jest pięć więc
tutaj coś ewidentnie nam nie zadziałało.
Przejdźmy jeszcze raz do kodu allAnswered tutaj również.
Więc naprawdę wygląda to wszystko w porządku.
Natomiast tutaj się pojawiła popularna dla mnie literówka length
i nie mogło to zadziałać poprawnie, bo tam było zwracane undefined dla właśnie takiej właściwości, więc
raz jeszcze spróbujmy przejść przez wszystkie z tych pytań i jak odpowiedziałem na ostatnie, pojawiło
się zakończ, świetnie i teraz do tego przycisku zakończ będę chciał przypisać zdarzenie kliknięcia
więc napiszemy mu tutaj click i on wywoła metodę finish. Metodę utworzymy sobie tutaj,
finish.
Ja będę chciał żeby ona wywoływała asynchroniczne akcje bo serwer który przygotowałem będzie pozwalał
na przyjęcie danych więc będę chciał je tam wysłać.
Dlatego zrobimy coś takiego,
this store dispatch. Pamiętasz, że akcje mogą być asynchroniczne i one będą zmieniały później nasz store, czyli
commit'owały mutacje.
Zrobimy dispatch którą nazwiemy ckeck albo możemy ją nazwać np. finish.
To nie ma znaczenia i będziemy chcieli jej przekazać jakiś payload, chociaż w zasadzie do tego payload'u przecież
będziemy mieli dostęp, czyli do przekazanych odpowiedzi
bez żadnego problemu więc chcemy zrobić coś takiego ale ja chciałbym sobie z tej akcji zwrócić promise.
Dzięki temu będę mógł napisać then, czyli ta akcja wyśle nam zapytanie do serwera, serwer sprawdzi poprawność
odpowiedzi i je odeśle, ustawiamy je również na naszym storze i wtedy tutaj wewnątrz store ustawimy na summary i ja
wtedy będę chciał o tym wiedzieć.
Czyli w tym miejscu jeżeli będę o tym wiedział, to będę mógł zrobić coś takiego,
this router push i będziemy chcieli sobie przejść do ścieżki którą nazwaliśmy summery OK.
I to nam tak naprawdę powinno wystarczyć.
Przejdźmy jeszcze do tych akcji i stwórzmy taką akcję więc tutaj musimy ją zrobić nazwijmy ją finish
i akcję być może pamiętasz otrzymują context i możemy sobie zrobić destructuring z tego kontekstu i od razu wyciągnąć
state i commit.
Więc tutaj mam u góry import axios i jak mogłeś zauważyć i chciałbym za pomocą axios wysłać zapytanie
do serwera który mamy uruchomiony, mam nadzieję że nie zapomniałeś o nim na porcie 3000 i on
ma tam taki end point jak check i chciałbym mu przesłać nasze odpowiedzi więc chciałbym tutaj napisać
answers i przekazać mu state.answers, ten obiekt mu prześlemy i ten serwer powinien nam zwrócić jakieś
dane i te dane kiedy nam zwróci i to tutaj się wykona then.
Tutaj sobie zrobię destructuring tego data bo wie że tutaj będzie Object response ok i będę chciał zrobić commit.
Czyli tak naprawdę będziemy musieli sobie dodać jeszcze jedną mutację ale napiszemy tutaj commit summary
i przekażemy jej payload, w którym będziemy właśnie mieli te dane, czyli przekażmy sobie tutaj może data
w ten sposób czyli data data OK.
Mam nadzieję że to ma sens.
Natomiast mówiłem że z tej akcji chciałbym zwrócić promise.
No więc jeżeli zwrócę to w ten sposób to axios zwraca nam zawsze promise czyli nasz Quiz tutaj będzie
działał, będę mógł napisać then dokładnie na tej promise'ie i mam nadzieję że to wygląda w porządku więc jeszcze
przejdźmy do mutacji i dodajmy taką mutację o nazwie summary, może tu skopiujemy żeby było troszeczkę szybciej.
Ona się odwoła do state.summary i przypiszę tam payload.data.
Tak to powinno wyglądać.
Wydaje mi się że wtedy będzie OK i tutaj przekazujemy obiekt, wygląda w porządku więc w zasadzie nie
pozostaje nam nic innego jak sprawdzić jak tutaj odpowiem na te pytania.
Będziemy poglądać co się tutaj dzieje.
Odpowiedziałem przechodzimy dalej na ostatnie teraz kliknę zakończ, powinno się wysłać zapytanie AJAX.
Wysłało się czyli jest wszystko w porządku zobaczmy i summary się uzupełniło, serwer zwrócił nam takie
oto odpowiedzi, tak go przygotowałem, że na pierwsze pytanie, to z identyfikatorem 1 mamy odpowiedź poprawną.
I tutaj mamy jaka jest poprawna, jakie jest pytanie jaka jest nasza odpowiedź. Jeżeli mamy nie poprawną
gdzieś tutaj np. ostatnią.
Wygląda na to, że na wszystkie przez przypadek odpowiedziałem poprawnie, ale gdybyśmy mieli jakąś niepoprawną
to również byśmy to tutaj zobaczyli i na tej podstawie będziemy mogli sobie wygenerować tabelkę.
Więc zróbmy to tak jak tutaj chcieliśmy, czyli przechodzimy do summary
I ostatnia rzecz to po prostu uzupełnienie tego summary.
Tutaj będziemy chcieli mieć computed w którym będziemy mieli question.
Więc dajmy sobie computed.
Może w ten sposób albo tak naprawdę może answers bo serwer nam coś takiego zwraca.
I odwołamy się również do naszego zcentralizowanego store'a.
Tam już będziemy mieli pod state answers pod state summary.
Tak naprawdę to co jest nam potrzebne zwrócimy tutaj z tego miejsca i teraz widzisz mamy klasy correct
i incorrect, to będziemy chcieli tutaj uzupełnić a więc będę chciał tutaj zrobić sobie v-for for answer
in answers.
Tak naprawdę, musimy mieć jakiś unikalny klucz więc tam będziemy mieli po prostu id.
Powinno być w porządku i klasę którą chce zbindować.
To jest właśnie correct i incorrect więc tutaj stworzymy taki obiekt i chcę przypisywać klasę correct.
Jeżeli answer correct, a klasę incorrect jeżeli tam jest wartość incorrect albo w zasadzie answer.correct
to zawsze to będzie correct tylko true lub false,
więc incorrect jeżeli to jest false, ok można to złamać oczywiście do kolejnej linijki, będzie trochę bardziej czytelne.
No i teraz tutaj wewnątrz będziemy chcieli wyświetlić pytanie czyli answer.question, następnie będziemy
chcieli wyświetlić poprawną odpowiedź, czyli to będzie answer.correct
Answer.
Tak to przygotowałem z serwera.
No i jeszcze ostatnia rzecz, tutaj będzie yourAnswer, OK.
Mam nadzieję że ma to sens.
Pewnie tutaj jakieś błędy się pojawiły.
Prawdopodobnie to wynika po prostu z tego że trzeba parokrotnie odświeżyć chociaż zobaczymy.
Spróbujmy przejść przez to wszystko.
Czy nadal będą się pojawiać błędy.
Bardzo szybko odpowiem na wszystkie pytania.
I rzeczywiście te błędy są więc musimy się zastanowić gdzie, answer is not defined.
OK teraz zauważyłem błąd, zauważ jak mało nam podpowiedział tutaj webpack, tutaj tak naprawdę brakowało
nam odpowiedniego apostrofu i teraz powinno być już w porządku odświeżmy sobie tutaj.
I te pytania one tutaj się oczywiście pojawią tylko że musimy przejść przez cały proces
raz jeszcze, zobaczmy czy wreszcie nam się to uda.
Zakończ.
I rzeczywiście widzimy podsumowanie. Także nasza aplikacja na tym etapie jest już gotowa, aczkolwiek żeby
ona była taka naprawdę dobra to dużo jeszcze brakuje, aczkolwiek nie jesteśmy w stanie poświęcić na jedną
aplikację w kursie np. 10 godzin.
Przypuszczam że zdecydowanie więcej na dobry quiz musielibyśmy poświęcić bo tutaj będzie można nawigować z powrotem
do pytań na przykład czego byśmy nie chcieli i tak dalej.
Natomiast jest to pole dla ciebie do tego żeby rozwijać tę aplikację.
Spróbuj dodać guardy tak jak Ci pokazałem że jeżeli ktoś np. spróbuje tutaj przejść do kolejnego pytania
np. do 2 to sprawdź czy poprzednie już ma odpowiedź.
Jeżeli nie ma to w takim guardzie możesz zrobić nextFalse i nie pozwolić przejść dalej.
Możesz również zrobić coś takiego że kiedy jesteśmy już tym samymsummary, w tym podsumowaniu to żeby nie było możliwości
powrotu żeby tamte komponenty się nie wczytywały.
Wtedy można taki guard uruchomić po prostu jeżeli tutaj mamy store i summary nie ma wartości null czy już coś
tam jest to taki guard również może to sprawdzić.
Możliwości tutaj jest naprawdę wiele, możemy dodać również animacje i naprawdę wiele innych ciekawych
rzeczy.
Mam nadzieję że taką wiedzę z Vue już masz że przy odrobinie chęci spróbujesz te projekty które tworzyliśmy
w tym kursie rozwijać.
Ja starałem się jak najdokładniej je pokazać ale im bardziej się coś tworzy tym więcej moglibyśmy wymyślić
rzeczy, na co jeszcze zwrócić uwagę,
co zabezpieczyć itd.
Dlatego jak wiesz w kursie nie jesteśmy w stanie tego zrobić chyba że mielibyśmy kurs gdzie tworzymy
wyłącznie jedną aplikację.
Niewykluczone że taki materiał też się pojawi.
Jeżeli zatem chodzi o ten projekt to jest wszystko.
Natomiast to jeszcze nie wszystko co znajdziesz w tym kursie więc zapraszam Cię do kolejnych lekcji.