Vue.js: Wyświetlanie błędów
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 pokażę ci w jaki sposób możemy wyświetlić zmiany w interfejsie użytkownika na podstawie
tego czy są jakieś błędy czy też tych błędów nie ma.
Na początek to co chciałbym zrobić to przeniesiemy sobie ten tag na górę bo będziemy dużo lepiej widzieć co się
dzieje a jest to bardzo istotne żeby zrozumieć jak działa nasza walidacja. Zamknę sobie
może też konsole żeby było trochę więcej miejsca.
I tutaj mamy wszystkie poszczególne reguły, natomiast poniżej mamy reguły które są dostępne bezpośrednio
na $v.
Zauważ, że mamy tutaj invalid true i tak długo będzie invalid true, aż cały nasz formularz będzie uznawany
za niepoprawny, czyli jeżeli którakolwiek z tych reguł, które są wymagane nie jest spełniona mamy invalid true.
i co nam to mówi?
Otóż możemy sobie np. zablokować przycisk który mamy na samym dole pisząc disabled.
Jeżeli v invalid, bezpośrednio na tym v, zobaczmy, przycisk jak widzisz się zablokował i dopiero
kiedy wszystkie pola uzupełnimy poprawnie ten przycisk nam się odblokuje. Mamy również coś takiego jak
dirty, to się tutaj nie zmienia ale zaraz pokaże w jaki sposób można to zmienić.
Będę chciał wyświetlić błąd i zauważ że w momencie kiedy mamy tutaj imię i nazwisko nie wypełnione to
name ma na invalid wartość true.
Jeżeli wpiszemy cokolwiek to to pole dalej jest niepoprawne, ale spełniliśmy przynajmniej jedno wymaganie
czyli required, do tego już się możemy odwołać,
minLength, powiedzieliśmy 2, więc dopiero jeżeli piszemy dwie literki to mamy minLength true, a invalid zmienił
wartość na false i teraz do czego nam się to może przydać.
To jest bardzo dobre pytanie, chciałbym dodać sobie klasę tutaj zbindować ją dynamicznie która będzie
nam pokazywać błędy i w tym framework'u spectre css który tutaj mamy to możemy to zrobić w ten sposób że dopiszemy
klasę has-errors
jeżeli v name, tutaj name normalnie, is invalid.
W ten oto sposób, natomiast to nam zrobi pewien problem.
Zobacz, po odświeżeniu.
Ok, tutaj chyba coś się nie odświeżyło.
Otworzę sobie konsolę wtedy na pewno wszystko nam się odświeży, OK.
Widzę że tutaj się to nie pojawiło chociaż has-error zostało dodane to znaczy że popełniłem błąd w samej
klasie czyli powinno to być has-error OK.
Zobacz tylko jaki jest problem.
Już zaraz po wdczytaniu się strony pokazujemy że to pole jest niepoprawne.
Może oczywiście ono jest niepoprawne ale chcielibyśmy zrobić tak że dopiero jeżeli ktoś w ogóle próbował
coś do niego wpisać i z niego wyskoczył to tylko wtedy chcemy pokazywać że jest niepoprawny i do tego
służy flaga dirty.
Natomiast ona nie jest zmieniana automatycznie.
Musimy to zrobić ręcznie na tym polu.
Czyli tutaj gdzie mamy model musimy przypisać zdarzenie input i wtedy odwołamy się do v name i mamy taką
funkcję dolar touch i zobaczysz jak to się teraz zmieni.
Czyli kiedy odświeżymy stronę dirty ma wartość false.
Jeżeli cokolwiek tutaj wpisze dirty będzie miało wartość true.
Czyli znaczy że już z tym polem mieliśmy do czynienia.
Dlatego możemy taką walidację tutaj sobie sprawdzić.
Wtedy w ten sposób jeżeli v name dirty i jest niepoprawne to tylko wtedy chcemy wyświetlać taki błąd.
Zauważ że teraz go nie widać chociaż to pole jest niepoprawne.
Przycisk też jest zablokowany natomiast jeżeli spróbuje go walidować i wyskoczy to dopiero teraz nadajemy
klasę has-error OK.
Zatem wyświetlmy sobie jeszcze jakieś błędy, możemy tutaj zrobić rzecz następującą, tu gdzie mamy input
to możemy wstawić sobie coś takiego p z klasą form input hint.
I tutaj wpiszemy sobie oczywiście zrobimy jeszcze v-if.
Czyli jeżeli będziemy mieli coś takiego jak widzisz w tym miejscu tą samą regułę może tutaj zróbmy to
jeżeli mamy coś takiego to wtedy chcemy wyświetlać ten element i w nim napiszemy sobie pole nie jest
poprawne.
OK i zobaczymy jak to będzie wyglądać.
Czyli na początku tego nie ma ale potem mam już wyskakuje.
Natomiast dzięki temu że tutaj mamy required true, a minLength false to możemy sobie jeszcze sprawdzić.
Jeżeli np. v name minLength to wtedy możemy wyświetlić inny komunikat że powinieneś wpisać przynajmniej
dwa znaki.
Czyli tutaj możemy zrobić coś takiego w zasadzie nawet nie musi być invalid bo invalid nam mówi że te
dwie reguły które do niego przypisaliśmy które tutaj były czyli required i minLength nie są obydwie spełnione ale
tutaj wystarczy że zrobimy sobie coś takiego. Jeżeli dirty,
tutaj mamy name required.
Jeżeli to ma wartość
false to napiszemy pole jest wymagane
ok i pod spodem zrobimy sobie drugiego if'a i tutaj zrobimy minLength.
I napiszemy że pole albo wpisz treść o przynajmniej dwóch znakach.
Jeśli to jakkolwiek brzmi ok po odświeżeniu wpisz treść przynajmniej dwóch znakach jak widzisz się
pojawia natomiast jeżeli to usunę to będziemy mieli pole jest wymagane.
Jeżeli natomiast będzie poprawne to będzie to wyglądać następująco.
Więc jak widzisz bardzo łatwo można takie reguły walidacji tworzyć i możemy je spokojnie uzupełnić teraz
również np. dla adresu e-mail zrobiliśmy rzecz bardzo podobną z tym że ważny jest tutaj ten input, on
input który musimy tutaj dodać i wtedy odwołamy się do e-mail i też będziemy chcieli dodać coś takiego
jak wyżej czyli tutaj troszeczkę tego kodu będziemy musieli niestety zduplikować.
Ok.
I tutaj się odwiedzamy do email i chciałbym jeszcze wyświetlić znowu sobie dwa takie elementy.
Też się oczywiście obawiamy do email i tutaj zrobimy pole jest wymagane a w tym miejscu będziemy wiedzieli
że chodzi o e-mail czyli o walidację którą dokładnie podaliśmy tutaj jest to taki oto walidator więc
będziemy mogli wpisać adres e-mail jest niepoprawny
OK więc tak to by mogło wyglądać.
Adres e-mail jest niepoprawny teraz adres jest wymagany.
Jak widzisz w ten sposób możemy to ustawiać, pole jest wymagane i musimy wpisać poprawny adres.
Wtedy powinno to zniknąć.
Okazuje się że dokładnie tak to działa.
Tak zatem możesz wyświetlać te błędy.
Podobnie będzie z checkboxem czy z innymi jeszcze rzeczami.
Ja nie będę teraz już tym nudził natomiast w plikach końcowych do tej lekcji znajdziesz uzupełnione
wszystkie te błędy bo ja za sekundę to zrobię.
Natomiast w kolejnej lekcji będziemy jeszcze temat walidacji kontynuować.