Vue.js: Generowanie widoku konfiguratora
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 zajmiemy się wyświetlaniem całego naszego widoku na podstawie danych json.
Będzie tutaj sporo pracy, więc polecam Ci pisać razem ze mną i w razie czego pauzować.
Na początek chcę ci powiedzieć o jednej ważnej rzeczy.
Do tej pory przez cały ten kurs w pliku index mieliśmy podłączony framework spectre css, ale chcę Ci pokazać
jak można go dołączyć
z użyciem webpack'a, czyli usuniemy te dwie linijki, które są tutaj. Te style też moglibyśmy usunąć, ale ja
je tutaj zostawię, to nie jest aż tak istotne.
I teraz będę chciał ten framework, który możesz znaleźć pod takim adresem, zainstalować, tak jak tutaj jest
napisane z użyciem npm, czyli wpiszemy npm
install spectre.css w naszym terminalu.
Musimy tutaj w tym katalogu będą,c zatrzymać sobie serwer.
Ja przejdę do tego pierwszego katalogu to jest tutaj 37 i zainstaluje sobie pectre css.
I co ważne, będziemy sobie to mogli zaimportować w dowolnym miejscu np. w naszej głównej aplikacji.
Dodajmy tutaj blok style i będę chciał zrobić po prostu import spectre css.
To wystarczy, bo taka jest nazwa tego, tej paczki, którą zainstalowaliśmy.
To zostanie poprawnie zaimportowane spróbujmy tutaj zrobić npm start.
Czy to poprawnie wystartuje.
Ale tak być powinno.
I od tej pory, te style powinny być również wstrzykiwane.
Więc zobaczmy, co się tutaj zmieni.
Jak widzisz wszystko wygląda tak samo.
A to znaczy, że nam to zadziałało.
Druga rzecz, o której jeszcze nie powiedziałem to jest to że np. w komponencie product korzystamy ze styli,
w zapisie Sass.
Napisałem tutaj lang scss i mogę korzystać z zapisu Sass. Natomiast, aby to było możliwe, musisz najpierw
w terminalu wpisać sobie taką komendę, jak teraz widzisz na ekranie, po to żeby zarówno zainstalować sobie
sass-loader, jak i node-sass.
Ja już to zrobiłem wcześniej, więc u ciebie powinno to bez problemu działać.
OK, teraz skupmy się na tym, jak moglibyśmy tę aplikację podzielić.
Tutaj nie będziemy nic zmieniać.
Natomiast mamy istotną rzecz, w tym produkcie. Wszystko jest tutaj w jednym miejscu, a ja chciałbym móc
to podzielić.
No i oczywiście zajmiemy od czyszczenia, zajmiemy się tym czyszczeniem, zaczniemy od czyszczenia, chciałem
powiedzieć. Usuniemy te niepotrzebne boksy, bo one za chwilę będą generowane w sposób dynamiczny.
Więc tak to będzie wyglądać.
Może zanim jeszcze przejdziemy dalej, to cenę byśmy sobie tutaj zmienili.
Napiszemy tutaj price i podaliśmy ją na Vuex storze, być może to pamiętasz, jest to w tym miejscu i ja
będę chciał ją sobie pobierać.
Natomiast ta cena, która jest w tym miejscu, ona będzie wyliczana dynamicznie za pomocą getterów, w zasadzie ona
tutaj nie będzie konieczna, bo będziemy to mieli getterach.
Ja wstawiłem tutaj wcześniej przez pomyłkę, więc przejdźmy do getterów i stwórzmy sobie taki getter, które nam będzie
zwracał cenę. Na razie cenę bazową, ale później będziemy ją również przeliczać, więc napiszemy tutaj price.
Taki getter otrzyma dostęp do state, a jeżeli ma dostęp do state, to wiemy, że na state mamy produkt, a jeżeli
zajrzy do tego json'a, który jest w produkcie i może sobie go tutaj po prostu wyświetlimy,
to się okaże, że tam jest coś takiego jak cena.
Czyli skoro mamy w Vuex storze, to możemy tutaj napisać return state product i następnie price.
Taki getter nam się utworzy i teraz w naszym produkcie skoro skorzystałem z price, to dodam sobie taki
computed, który po prostu nazwiemy price i w nim będzie coś takiego,
getters price, ok, czyli myślę, że dla ciebie nic nowego.
Cena się nam ładnie powstawia, później będziemy ją jeszcze odpowiednio przeliczać.
Teraz chciałbym się skupić na tym, już konkretnie na samym widoku, żebyśmy mogli tutaj generować odpowiednie
opcje.
Chciałbym taki element
option__group, w zasadzie z całą tą opcją, zawrzeć w komponencie, który nazwiemy option__group.
Więc chciałbym tutaj móc napisać coś takiego,
podać taki komponent i będziemy chcieli zaraz zrobić tutaj pętle before, więc od razu uprzedzając fakty,
musimy sobie taki komponent zaimportować. Ja go nazwę, po prostu, OptionGroup from, z katalogu components będzie
to ProductOptionGroup. Możesz sobie nazywać oczywiście ten plik jak tylko chcesz.
Pamiętaj, że tutaj, żeby ten komponent mógł działać, to musimy jeszcze podać taki obiekt components
i tutaj wstawimy OptionGroup.
Ok, ja teraz będę chciał go utworzyć w katalogu 37 src components ProductOptionGroup, OK.
I wstawiamy sobie tutaj template. Wstawię ten fragment, który przed momentem wyciąłem. Będziemy go chcieli
zdynamizować za moment. Następnie zrobimy sobie script, export default.
Mam nadzieję, że piszesz razem ze mną, nie robiłem tego wcześniej, tylko teraz chcę Ci to pokazać, żebyś
mógł również widzieć, jak można gotowy layout, przygotowany wcześniej, statyczny, podzielić na odpowiednie
komponenty. Nazwiemy to może OptionGroup, ok. I chciałbym, żeby tutaj był przyjmowany prop, który się nazywa
feature i zaraz do tego przejdziemy.
OK, zobaczymy czy nam się to jakoś komplikuje.
Nie ma błędów, tutaj jeszcze otworzymy konsole, powinno być w porządku.
Jak widzimy jest, tutaj się tak naprawdę OptionGroup wczytał.
Natomiast brakuje nam styli, bo teraz musimy z uwagi na to, że tam robiliśmy w product te style, to musimy
sobie skopiować te, które były dla OptionGroup, czyli w zasadzie tutaj gdybyśmy w procuct sobie podejrzeli, co dokładnie
wycięliśmy.
No właśnie ten element z klasą option, to musimy zabrać jeszcze jego style, które się znajdowały w tym
miejscu, więc ja je, po prostu, wytnę i wstawimy je sobie w tym miejscu.
I to również, jak widzisz, będzie zapis scss.
Teraz powinno to wyglądać lepiej po odświeżeniu.
Zgadza się, więc tutaj jest wszystko w porządku.
Teraz mówiłem ci o tym, że będziemy chcieli wyświetlać to w pętli, dlatego że w tym json'ie, dla każdego
elementu z features, czyli takiego jak jest tutaj, chcę wyświetlić taki jeden komponent OptionGroup.
Dlatego będę chciał stworzyć tutaj pętle for, w naszym produkcie, w miejscu gdzie korzystamy z tego komponentu,
czyli jest to dokładnie
tutaj. Możemy napisać v-for i będziemy chcieli sobie to kierować po rzeczach, które mamy w tym produkcie,
czyli product features. Napiszemy feature in product.feature.
W razie czego, raz jeszcze podejrzyj dokładnie, co to jest features. To jest taka tablica, więc pod feature będę
miał taki oto element i to feature będę chciał przekazać jako prop, więc tutaj będę mógł napisać feature
równa się feature, czyli właśnie ten jeden z pętli i on nam wpadnie tutaj do ProductOptionGroup, bo zdefiniowaliśmy,
że taki prop powinien tutaj przyjmować.
Więc tak to dokładnie będzie wyglądać.
Prawdopodobnie wygeneruje nam ostrzeżenie, tak też się stało, że powinniśmy jakiś unikalny klucz, nadać
również dla tego komponentu,
kiedy robimy to w pętli, więc zbindujemy mu key i możemy to zrobić jako feature.code.
Wiemy, że jest on unikalny, bo jeżeli znowu zerkniesz do json'a, każdy feature ma swój własny kod, takie jak procesor,
memory itd.
I teraz już będzie w porządku, nie będzie tego ostrzeżenia.
I zauważ, że wygenerowaliśmy dla każdego z nich właśnie coś takiego. Na razie nie jest to uzupełnione danymi,
ale tym się zajmiemy dosłownie za sekundę.
Natomiast wcześniej możemy tutaj jeszcze uzupełnić dane, które mieliśmy, czyli możemy napisać product,
name. Znowu przypominam, wszystko bierzemy z tego json'a, name, description czy image, będę chciał sobie tutaj
wstawić.
Jeżeli chodzi o obrazek, zbindujemy dynamicznie jego atrybut i zrobimy tutaj w zasadzie bez tych nawiasów,
wtedy product.image.
I tutaj zrobimy sobie jeszcze product.description.
Ok.
Cenę już sobie wyświetlamy, pozostałe rzeczy tutaj już są statyczne, więc jeżeli teraz odświeżymy, wszystko
z tego json'a powinno zostać załadowane, a obrazek już z zupełnie innego serwera, który powinien mieć
uruchomiony z katalogu servers 02, ok. Teraz chciałbym stworzyć kolejny komponent, kiedy przejdziemy do
ProductOptionGroup, to tutaj chciałbym generować sobie te opcje, jak widzisz, dla poszczególnego takiego
elementu, również jako osobne komponenty, więc chciałbym mieć jeszcze jeden komponent, który możemy teraz
utworzyć w katalogu 37 src components. Nazwiemy go ProductOption.vue i znowu template, czyli ten,
który jest nam potrzebny, znowu script i znowu będą jakieś style,
ok.
Teraz tutaj, zamiast wpisywać to wszystko w ten sposób, to zrobimy sobie tutaj import tego komponentu.
Może jeszcze uzupełniamy tylko te najważniejsze rzeczy,
export default, będzie to name, nazwijmy to Option i pozostałe rzeczy tutaj za moment sobie uzupełnimy.
Ok.
Jego templatką będzie coś takiego, czyli taki oto button, ja go stąd wytnę. To będzie jego templatka, będzie dynamicznie
za moment uzupełniona. Ok i teraz ten komponent tutaj będę chciał zaimportować,
import Option from i napiszemy ProductOption, ok i components również musimy tutaj podać.
Dzięki temu, w tym miejscu, gdzie to wyciąłem option group, będziemy mogli wykonać sobie pętle.
Wiemy, że tutaj przyjmujemy sobie
prop feature, która została przekazana dokładnie w tym miejscu i taki pojedynczy feature dla nas będzie,
coś takiego, więc jeżeli napiszemy feature kropka options, to będziemy mieli dostęp do tego, co jest tutaj
wewnątrz.
Dlatego tutaj taką pętlę w ProductOptionGroup, chciałbym właśnie wykonać, czyli dla komponentu Option,
który sobie tutaj zaimportowaliśmy,
chciałbym wykonać v-fir i napiszemy option in
feature. Również musimy jakiś unikalny kod podać, key, więc napiszemy option.code. Znowu jeżeli zajrzysz do
json'a, zobaczysz, że to jest unikalne i od razu powiem ci, że będziemy potrzebowali tutaj prop, takie
jak option, które chcemy tam przekazać, ale również,
to nam się przyda w kolejnej lekcji, więc chciałbym to przekazać tutaj od razu, więc napiszmy sobie tutaj option
i przekażemy tę jedną opcję z pętli i następnie feature i również ją przekażemy.
Postaraj się to na spokojnie przeanalizować na pewno zobaczysz, że ma to sens i w taki sposób to przekazujemy
poniżej.
Dzięki temu będziemy mieli tutaj dostęp do option i do feature.
I dzięki temu w tym komponencie tutaj, ja usunę jeszcze button primary, żeby on nie był zaznaczony.
Będziemy mieli dostęp
do tych danych, które nas interesują, czyli poprzez option
będziemy mieli dostęp do code, name oraz price.
Chcę tutaj wyświetlić name, czyli option.name. Zobaczmy.
Tutaj coś poszło nie tak, jak widzimy nie wyświetliło nam się to poprawnie, zobaczymy tutaj czy zostało przekazane option
Zgadza się, tutaj powinniśmy napisać feature.options. Dokładnie w tej tablicy
chcemy iterować. Po odświeżeniu, jak widać, to już wygląda poprawnie.
Natomiast jeszcze ten tytuł powinniśmy sobie zmienić, to będziemy mieli właśnie pod feature name.
Dlatego feature też tutaj przekazałem, bo chciałbym tutaj móc ten tytuł dostosowywać, chociaż okazyjnie.
To nie jest w tym komponencie, to feature nam się przyda później, ale sam tytuł zmienimy przecież, dokładnie w tym
miejscu, czyli tutaj będziemy mieli feature.name.
Okej, powinno to już wyglądać w porządku.
Trzeba na spokojnie sobie zerknąć, jak to jest poukładane.
I mam wrażenie, że rzeczywiście wygląda dobrze.
Czyli wszystko nam się generuje tak jak powinno,
z naszego json'a i teraz pozostało nam dodać jeszcze logikę, żebyśmy mogli zaznaczać te elementy i
żeby aktualizowała się nasza cena i żeby były one zapisywane w Vuex storze.
Więc jeżeli ta lekcja była zbyt szybka, postaraj się jeszcze raz ją przerobić, tak abyś był na bieżąco.
Jeżeli się temu przyjrzysz, to okaże się że te rzeczy nie są aż tak bardzo skomplikowane, jak mogłoby się
wydawać.
Jeszcze tylko jedna rzecz tutaj w stylach, zrobimy coś takiego tu gdzie mieliśmy button, wewnątrz.
Będę chciał go wyciąć i wstawić tutaj i nazwać to po prostu button, OK.
I teraz one powinny być odpowiednio również ostylowane i wygląda na to, że wszystko jest w porządku.
Przejdźmy zatem do kolejnej lekcji, gdzie kończymy ten projekt, pisząc jego logikę.