Vue.js: Dodanie logiki quizu
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 logikę, aby można było na te pytania rzeczywiście odpowiadać i wyświetlać aktualnie
zaznaczoną odpowiedź i zaczniemy od tego, że w miejscu gdzie robiliśmy sobie
Question, czyli wyświetlaliśmy Answer.
Możemy to tak naprawdę podzielić na wiele linii, żeby to było bardziej czytelne.
Polecam Ci też to zrobić i teraz będę chciał tutaj dodać zdarzenie kliknięcia, czyli jeżeli klikniemy
na taki element answer to chciałbym wywołać metodę select i przekazać jej key.
Pamiętasz, że kluczem tutaj będzie np. a, b lub c, a dostęp do aktualnego pytania mamy dlatego, że tutaj
pod question mamy do niego dostęp, czyli mamy po prostu jego identyfikator, więc możemy spokojnie już
z tego poziomu zapisać sobie, że dla id np. 1,
padła odpowiedź c, z tym że tutaj tak jak mieliśmy w przypadku konfiguratora produktu, żeby to kliknięcie
mogło działać chociażby na answer, czyli tak naprawdę na tym przycisku było zarejestrowane.
Musimy tutaj dodać modyfikator native i teraz nam to powinno działać ale metoda select pamiętaj musi
być dodana tutaj czyli w tym miejscu w którym jesteśmy w tym komponencie.
Dodajemy zatem metodę select.
Ona przyjmie właśnie ten klucz czyli tak naprawdę naszą odpowiedź, możemy to nazwać answer, OK.
I tutaj będziemy chcieli dodać do naszego store'a, tutaj do aswers, id
i do tego id dodać odpowiedź czyli na przykład 1:b. Tak będziemy chcieli to zrobić ale pamiętasz
że zmieniamy stan za pomocą mutacji więc będę chciał tutaj zrobić this store i commit i mutacje nazwiemy
sobie select, za moment ją utworzymy, a payload jaki jej przekażemy będzie wyglądał następująco, tam będzie id
pytania, a więc this.question.id.
No i odpowiedź jaka padła którą mamy pod answer.
Nie muszę tutaj pisać tego po dwukropku drugi raz.
Pamiętaj ES6, jest to wszystko przez webpack'a kompilowane do ES5,
w tym przypadku, kiedy korzystamy z Vue CLI, ok i teraz jeżeli przejdziemy do mutacji, to musimy tutaj utworzyć
taką mutację, którą nazwiemy właśnie select.
Może pamiętasz że ona otrzymuje context i payload, no i context ma dostęp do state czyli context
state moglibyśmy napisać no i tam mamy,
jeśli sobie zerkiemy do Vuex'a, taki obiekt jak answers, więc wydawałoby się że znowu możemy sobie tutaj
dodać coś takiego jak payload, payload.id.
I że będzie w porządku, natomiast pokazywałem już w tym kursie że nie będzie to działać reaktywnie.
Dlatego mam tutaj u góry zaimportowane Vue i chcę powiedzieć Vue.set, czyli ustaw na tym obiekcie właściwość
która będzie się nazywać payload.id,
czyli w zasadzie tutaj będzie 1, 2, 3 itd.
I wartość jaka tam ma być, to ma być payload.answer, OK.
I to powinno nam zadziałać.
Więc spróbujmy.
Nie mamy tutaj nic w answers, teraz jeżeli kliknę tutaj jakiś błąd się pojawił, czyli jakieś property on
udefined albo null, context.state i oczywiście answers, czyli wiemy do czego chcieliśmy się odwołać.
Przejdźmy teraz jeszcze do tego obiektu.
Wybieram b.
Jeszcze jakiś błąd się pojawił, zobaczmy.
Ok tutaj się pospieszyłe.
Przecież to nie jest context, tak jak ci mówiłem ale state, context będziemy otrzymywać w przypadku
akcji.
Do tego jeszcze wrócimy czyli tutaj bezpośrednio state.
Być może też to już zauważyłeś, jeszcze raz klikamy b, no i pojawiło się pytanie o
id 1.
Mamy tutaj odpowiedź b, czyli jest wszystko w porządku, gdybyśmy zmienili tak jak wcześniej, tutaj
vm0 store i następnie state currentQuestion na przykład na 2.
Ono się zmieni, jeżeli teraz odpowiem tutaj c to zobaczmy.
Mamy dla pytania o identyfikatorze
2.
Mamy odpowiedź c, więc zaczyna to już fajnie działać, natomiast chciałabym teraz żeby te odpowiedzi były
podświetlane w tym momencie w którym jest jakaś z tych odpowiedzi aktywna czyli jeżeli jest zaznaczona
i chciałbym to móc zrobić za pomocą odpowiedniego gettera, który wykonamy sobie w funkcji czy w metodzie
computed a więc przechodząc do naszego answer chciałbym zrobić tak żeby tutaj dodawać klasę czyli zbindujemy to
sobie, która się będzie nazywała btn-primary, pod warunkiem że to computed jest zaznaczone czyli selected.
I teraz musimy sobie właśnie tutaj dodać computed property
selected i w nim musimy zdecydować czy aktualna nasza odpowiedź jest zaznaczona czy nie, zauważ, że tutaj
mamy dostęp do tej odpowiedzi oraz mamy dostęp również do pytania, czyli mamy jego identyfikator.
Zatem ja będę chciał sobie utworzyć getter za moment ale wpiszmy go tutaj od razu, odwołamy się do this store.
Następnie getters, chciałbym mieć takich getter selected, on będzie funkcją, więc go wywołamy i jemu będziemy
przekazywać id,
czyli this question id
i następnie this.answer.key, czyli przekażemy mu np. 1 i c tak jak tutaj zaznaczyliśmy.
I dzięki temu ten getter będzie mógł sprawdzić w stanie w state czy pod 1 mamy dokładnie taką odpowiedź
więc coś takiego będziemy chcieli sobie zrobić.
Przejdźmy teraz do teraz do getters i stworzymy sobie taki getter selected czyli tutaj getters selected, gettery otrzymują state
oczywiście i z niego będę chciał zwrócić funkcję.
I to właśnie do tej zwróconej funkcji będziemy przekazywać te parametry,
co zrobiliśmy przed momentem, czyli jeszcze raz w answer selected to jest funkcja zwrócona, przekazujemy
ide oraz key więc możemy tutaj te parametry nazwać np. questionId oraz answerKey.
Może w ten sposób i tutaj będziemy się chcieli móc odwołać do state czyli z tej funkcji będziemy zwracać state.answers.
i następnie tutaj będziemy chcieli znaleźć questionId.
Czyli będziemy mieli np. jeden. To nam zostanie zwrócona wartość b i chcemy sprawdzić czy ona jest równa
answerKey.
Więc dokładnie będziemy chcieli porównać czy to jest to samo co answerKey.
Mam nadzieję że ma to dla ciebie sens, teraz jeżeli odświeżymy, zaznaczę pierwszą odpowiedź jak widzisz
ona jest zaznaczona czyli to computed property bez problemu zaczęło działać. Przy okazji tutaj widzimy wszystkie
commit'y gdybyś chciał wrócić do jakiegoś z nich. Bez problemu to działa.
No i ta odpowiedź, co jest ważne też się tutaj zmienia.
Więc jeszcze jedna rzecz którą chciałbym zrobić, mianowicie taka żeby te przyciski tutaj blokować i odblokowywać
w zależności od tego czy mamy jakieś następne pytania czy nie, bo zauważ że jeżeli otworzymy, jesteśmy
na pierwszym pytaniu, to nie mamy poprzedniego pytania, więc w zasadzie moglibyśmy ten przycisk zablokować.
Kiedy będziemy na ostatnim, to ten przycisk można by było również zablokować, więc to będziemy mogli zrobić
dokładnie tutaj gdzie te przyciski są, czyli one są w quizie.
W tym miejscu i będę chciał do takiego przycisku dodać disabled, jeżeli nie ma następnej strony czy nie
ma poprzedniej. Jeżeli not prev a tutaj będę chciał dodać disabled jeżeli not isNext.
Dokładnie tak to chciałem nazwać isPrev, isNext. To będą computed property, które musimy sobie tutaj dodać
więc będzie to isPrev.
I teraz jak sprawdzić czy mamy jakąś poprzednią stronę.
Moim zdaniem wystarczy po prostu porównać czy aktualne pytanie jest większe niż 1 czyli currentQuestion, które mieliśmy
w zasadzie możemy sobie tutaj też dodać takie computed property i będziemy z tego chcieli dokładnie
to zwracać, więc tu będzie można napisać od razu currentQuestion.
Zauważ że ja nie korzystam tutaj z tych funkcji o których mówiłem które możesz z Vuex'a zaimportować i one
mogą ci pomóc tutaj mapować.
Wydaje mi się że jest to na tyle proste i czytelne że nie muszę z tego korzystać.
Ok czyli currentQuestion będzie nam zwracało dokładnie coś takiego i teraz w isPrev wystarczy sprawdzić czy this currentQuestion
jest większa od 1, jeżeli tak to mamy jakąś poprzednią stronę do której można wrócić.
Może na momencik to sobie jeszcze stąd usunę.
Chciałbym tylko sprawdzić czy to zacznie działać.
Jak widzisz działa, ten przycisk jest wyłączony.
Jeżeli będziemy mieli wartość currentQuestion większą to on się odblokuje.
Więc teraz zróbmy to samo z isNext.
Tutaj oczywiście musi być troszeczkę inna logika.
Tutaj będę chciał sprawdzić czy currentQuestion jest mniejsza od długości tablicy, czyli zrobimy coś takiego
return this.currentQuestion.
Powiedzmy że mamy trzy elementy w tablicy, jeżeli currentQuestion to jest trzy, to wiemy, że jeżeli length tablicy to jest
trzy to jesteśmy na ostatnim elemencie, czyli jeżeli currentQuestion jest mniejsza od this.questions, zauważ że to
nam zwróci computed property i wszystkie pytania, length.
To wtedy wiemy że mamy jakąś następną stronę, ok.
Tutaj jakiś błąd się pojawił, w porządku. Zobaczmy, działa, mamy jakąś następną stronę, wiemy że mamy 5 pytań
to jeżeli ustawię currentQuestion teraz tutaj vm0 store state currentQuestion i ustawie go na wartość 5 to zobaczysz że
ten przycisk się zablokował, natomiast przycisk wstecz jest odblokowany. Te przyciski będą działać kiedy
damy sobie routing.
Natomiast jeżeli chodzi o samą logikę to wydaje mi się, że już jest w porządku. Mogę zaznaczać tutaj te
pytania i jak widzisz mamy tutaj wstawiane również odpowiedzi.
Tak więc jeżeli chodzi o samą tutaj logikę, to na razie tyle. W kolejnej lekcji zajmiemy się tym żeby
dodać tutaj VueRouter.