Przydatne narzędzia w tworzeniu stron internetowych Vue.js

Podczas pracy nad nowym projektem pewne funkcje są niezbędne w zależności od tego, w jaki sposób aplikacja ma być używana. Na przykład, jeśli będziesz przechowywać dane specyficzne dla użytkownika, będziesz musiał obsługiwać uwierzytelnienia, co będzie wymagało skonfigurowania formularza, który musi zostać zweryfikowany. Rzeczy takie jak uwierzytelnianie i walidacja formularzy są powszechne; istnieją rozwiązania, które prawdopodobnie pasują do twojego przypadku użycia.

Aby właściwie wykorzystać swój czas rozwoju, lepiej wykorzystać to, co jest dostępne, zamiast wymyślać swoje.

Jako nowy programista istnieje możliwość, że nie będziesz świadomy wszystkiego, co zapewnia Ci ekosystem Vue. Ten artykuł pomoże w tym; obejmie pewne przydatne narzędzia, które pomogą Ci w tworzeniu lepszych aplikacji Vue.

Uwaga : istnieją alternatywy dla tych bibliotek, a ten artykuł w żaden sposób nie stawia tych kilku nad innymi. To tylko ci, z którymi pracowałem.

Ten samouczek jest skierowany do początkujących, którzy dopiero rozpoczęli naukę o Vue lub mają już podstawową wiedzę o Vue. Wszystkie fragmenty kodu użyte w tym samouczku można znaleźć w moim serwisie GitHub.

Powiadomienie Vue

Podczas interakcji z użytkownikiem często zachodzi potrzeba wyświetlenia użytkownikowi komunikatu o powodzeniu, komunikatu o błędzie lub losowych informacji. W tej sekcji przyjrzymy się, jak wyświetlać komunikaty i ostrzeżenia użytkownikowi za pomocą vue-notification . Ten pakiet zapewnia interfejs z ładną animacją/przejściem do wyświetlania błędów, ogólnych informacji i komunikatów o sukcesie w aplikacji i nie wymaga dużej konfiguracji, aby się uruchomić.

Instalacja

Możesz zainstalować vue-notification w swoim projekcie za pomocą Yarn lub NPM, w zależności od menedżera pakietów dla twojego projektu

Przędza

 yarn add vue-notification

npm

 npm install --save vue-notification

Po zakończeniu instalacji następną rzeczą byłoby dodanie go do punktu wejścia w aplikacji, pliku main.js.

main.js

 //several lines of existing code in the file import Notifications from 'vue-notification' Vue.use(Notifications)

W tym momencie wystarczy dodać składnik powiadomień w pliku App.vue , zanim będziemy mogli wyświetlać powiadomienia w naszej aplikacji. Powodem, dla którego dodajemy ten komponent do pliku App.vue , jest uniknięcie powtórzeń w naszej aplikacji, ponieważ bez względu na to, na której stronie w naszej aplikacji znajduje się użytkownik, komponenty w App.vue (np. komponenty nagłówka i stopki) zawsze będą być dostępnym. To sprawia, że ​​trzeba zarejestrować składnik powiadomień w każdym pliku, którego potrzebujemy, aby wyświetlić powiadomienie dla użytkownika.

Aplikacja

 <template> <div> <div> <router-link to="/">Home</router-link> | <router-link to="/about">Notifications</router-link> </div> <notifications group="demo"/> <router-view /> </div> </template>

Tutaj dodajemy jedną instancję tego komponentu, która akceptuje właściwość group , która byłaby używana do grupowania różnych typów powiadomień, które mamy. Dzieje się tak, ponieważ składnik powiadomień akceptuje szereg właściwości, które dyktują zachowanie składnika, a my przyjrzymy się kilku z nich.

1. group
   Ten rekwizyt służy do określania różnych typów powiadomień, które możesz mieć w swojej aplikacji. Na przykład możesz zdecydować się na użycie różnych stylów i zachowań w zależności od celu, w jakim ma służyć powiadomienie, walidacji formularza, odpowiedzi API itp.
2. type
   Ta właściwość przyjmuje wartość, która służy jako „nazwa klasy” dla każdego typu powiadomienia, który mamy w naszej aplikacji, a przykłady mogą obejmować success , error i warn . Jeśli użyjemy jednego z nich jako typu powiadomienia, możemy łatwo nadać styl komponentowi, używając tego formatu klasy vue-notification + '.' + type vue-notification + '.' + type , tj .vue-notification.warn dla warn i tak dalej.
3. duration
   Ta właściwość określa, jak długo składnik notification powinien się pojawiać, zanim zniknie. Akceptuje liczbę jako wartość w ms , a także akceptuje liczbę ujemną (-1), jeśli chcesz, aby pozostała na ekranie użytkownika, dopóki na nią nie kliknie.
4. position
   Ten rekwizyt służy do ustawiania pozycji, z której mają pojawiać się powiadomienia w Twojej aplikacji. Niektóre z dostępnych opcji to top left top right top center , bottom right bottom left bottom center .

Możemy dodać te rekwizyty do naszego komponentu w App.vue , więc teraz wygląda to tak;

 <template> <div> <div> <router-link to="/">Home</router-link> | <router-link to="/about">Notifications</router-link> </div> <notifications :group="group" :type="type" :duration="duration" :position="position" /> <router-view /> </div> </template> <script> export default { data() { return { duration: -1, group: "demo", position: "top center", type: "info", }; }, }; </script> <style> .vue-notification.info { border-left: 0; background-color: orange; } .vue-notification.success { border-left: 0; background-color: limegreen; } .vue-notification.error { border-left: 0; background-color: red; } </style>

Dodaliśmy również stylizację dla różnych typów powiadomień, których używalibyśmy w naszej aplikacji. Zwróć uwagę, że oprócz group , możemy przekazać każdy z pozostałych rekwizytów w locie, kiedy tylko chcemy wyświetlić powiadomienie i nadal działałoby to odpowiednio. Aby wyświetlić powiadomienie w dowolnym pliku Vue, możesz wykonać następujące czynności.

vueFile.vue

 this.$notify({ group: "demo", type: "error", text: "This is an error notification", });

Tutaj tworzymy powiadomienie type error pod powiadomieniem group demo . text właściwości akceptuje komunikat, który ma zawierać powiadomienie, i w tym przypadku komunikat to „ To jest powiadomienie o błędzie”. Tak będzie wyglądało powiadomienie w Twojej aplikacji.

Możesz dowiedzieć się o innych dostępnych rekwizytach i innych sposobach konfiguracji powiadomienia na oficjalnej stronie z dokumentami.

Vuelidate

Jednym z najczęściej używanych elementów w sieci są elementy formularzy ( input[type='text'] , input[type='email'] , input[type='password'] itd.) i zawsze istnieje muszą zweryfikować dane wprowadzone przez użytkownika, aby upewnić się, że wysyłają właściwe dane i/lub używają właściwego formatu w polu wejściowym. Dzięki Vuelidate możesz dodać walidację do formularzy w swojej aplikacji Vue.js, oszczędzając czas i korzystając z czasu włożonego w ten pakiet. Od jakiegoś czasu słyszałem o Vuelidate, ale trochę nie chciałem się temu przyjrzeć, ponieważ uważałem, że będzie to zbyt skomplikowane, co oznaczało, że pisałem walidacje od podstaw dla większości pól formularzy w aplikacjach, nad którymi pracowałem.

Kiedy w końcu spojrzałem na dokumenty, dowiedziałem się, że rozpoczęcie pracy nie było trudne i mogłem w mgnieniu oka sprawdzić poprawność pól formularza i przejść do następnej rzeczy.

Instalacja

Możesz zainstalować Vuelidate za pomocą dowolnego z następujących menedżerów pakietów.

Przędza

 yarn add vuelidate

npm

 npm install vuelidate --save

Po instalacji następną rzeczą byłoby dodanie go do konfiguracji aplikacji w pliku main.js , aby można było go używać w plikach vue.

 import Vuelidate from 'vuelidate' Vue.use(Vuelidate)

Zakładając, że masz w swojej aplikacji formularz, który wygląda tak;

vuelidate.vue

 <template> <form @submit.prevent="login" class="form"> <div class="input__container"> <label for="fullName" class="input__label">Full Name</label> <input type="text" name="fullName" v-model="form.fullName" class="input__field" /> </div> <div class="input__container"> <label for="email" class="input__label">Email</label> <input type="email" name="email" v-model="form.email" class="input__field" /> </div> <div class="input__container"> <label for="email" class="input__label">Age</label> <input type="number" name="age" v-model="form.age" class="input__field" /> </div> <div class="input__container"> <label for="password" class="input__label">Password</label> <input type="password" name="password" v-model="form.password" class="input__field" /> </div> <input type="submit" value="LOGIN" class="input__button" /> <p class="confirmation__text" v-if="submitted">Form clicked</p> </form> </template> <script> export default { data() { return { submitted: false, form: { email: null, fullName: null, age: null, password: null, }, }; }, methods: { login() { this.submitted = true; }, }, }; </script>

Teraz, aby sprawdzić poprawność tego typu formularza, najpierw musisz zdecydować, jakiego typu walidacji potrzebujesz dla każdego pola formularza. Na przykład możesz zdecydować, że minimalna długość fullName ma wynosić 10 , a minimalny wiek to 18 .

Vuelidate ma wbudowane walidatory, których potrzebujemy tylko zaimportować, aby używać. Możemy również wybrać walidację pola hasła na podstawie określonego formatu, np. Password should contain at least a lower case letter, an upper case letter, and a special character . Możemy napisać nasz własny mały walidator, który to zrobi i podłączyć go do listy wtyczek Vuelidate.

Zróbmy to krok po kroku.

Korzystanie z wbudowanych walidatorów

 <script> import { required, minLength, minValue, email, } from "vuelidate/lib/validators"; export default { validations: { form: { email: { email, required, }, fullName: { minLength: minLength(10), required, }, age: { required, minValue: minValue(18), }, }, }, }; </script>

Tutaj importujemy kilka walidatorów, których potrzebujemy do poprawnej walidacji naszego formularza. Dodajemy również właściwość validations , w której definiujemy zasady walidacji dla każdego pola formularza, które chcemy sprawdzić.

W tym momencie, jeśli sprawdzisz devTools dla swojej aplikacji, powinieneś zobaczyć coś, co wygląda tak;

Obliczona właściwość $v zawiera szereg metod, które są przydatne w potwierdzaniu poprawności naszego formularza, ale skupimy się tylko na kilku z nich:

1. $invalid
   Aby sprawdzić, czy formularz przeszedł wszystkie walidacje.
2. email
   Aby sprawdzić, czy wartość jest prawidłowym adresem e-mail.
3. minValue
   Aby sprawdzić, czy wartość age przechodzi test minValue .
4. minLength
   Aby zweryfikować długość fullName .
5. required
   Aby upewnić się, że podane są wszystkie wymagane pola.

Jeśli wprowadzisz wartość dla age poniżej minimalnego wieku ustawionego w walidacji i sprawdzisz $v.form.age.minValue , zostanie ona ustawiona na false , a to oznacza, że ​​wartość w polu wejściowym nie przechodzi kontroli walidacji minValue .

Korzystanie z niestandardowych walidatorów

Musimy również zweryfikować nasze pole hasła i upewnić się, że zawiera wymagany format, ale Vuelidate nie ma wbudowanego walidatora, którego możemy użyć, aby to osiągnąć. Możemy napisać własny niestandardowy walidator, który robi to za pomocą RegEx. Ten niestandardowy walidator wyglądałby tak;

 <script> import { required, minLength, minValue, email, } from "vuelidate/lib/validators"; export default { validations: { form: { //existing validator rules password: { required, validPassword(password) { let regExp = /^(?=.*[0-9])(?=.*[!@#$%^&*])(?=.*[AZ]+)[a-zA-Z0-9!@#$%^&*]{6,}$/; return regExp.test(password); }, }, }, }, }; </script>

Tutaj tworzymy niestandardowy walidator, który używa Regex, aby sprawdzić, czy hasło zawiera następujące elementy;

1. Przynajmniej jedna duża litera;
2. Co najmniej jedna mała litera;
3. Co najmniej jeden znak specjalny;
4. Przynajmniej jeden numer;
5. Musi mieć minimalną długość 6.

Jeśli spróbujesz wprowadzić hasło, które nie spełnia żadnego z powyższych wymagań, parametr validPassword zostanie ustawiony na false .

Teraz, gdy mamy pewność, że nasze walidacje działają, musimy wyświetlić odpowiednie komunikaty o błędach, aby użytkownik wiedział, dlaczego nie może kontynuować. Wyglądałoby to tak:

 <template> <form @submit.prevent="login" class="form"> <div class="input__container"> <label for="fullName" class="input__label">Full Name</label> <input type="text" name="fullName" v-model="form.fullName" class="input__field" /> <p class="error__text" v-if="!$v.form.fullName.required"> This field is required </p> </div> <div class="input__container"> <label for="email" class="input__label">Email</label> <input type="email" name="email" v-model="form.email" class="input__field" /> <p class="error__text" v-if="!$v.form.email.required"> This field is required </p> <p class="error__text" v-if="!$v.form.email.email"> This email is invalid </p> </div> <div class="input__container"> <label for="email" class="input__label">Age</label> <input type="number" name="age" v-model="form.age" class="input__field" /> <p class="error__text" v-if="!$v.form.age.required"> This field is required </p> </div> <div class="input__container"> <label for="password" class="input__label">Password</label> <input type="password" name="password" v-model="form.password" class="input__field" /> <p class="error__text" v-if="!$v.form.password.required"> This field is required </p> <p class="error__text" v-else-if="!$v.form.password.validPassword"> Password should contain at least a lower case letter, an upper case letter, a number and a special character </p> </div> <input type="submit" value="LOGIN" class="input__button" /> </form> </template>

Tutaj dodajemy akapit, który wyświetla tekst informujący użytkownika, że ​​pole jest wymagane, wprowadzona wartość adresu e-mail jest nieprawidłowa lub że hasło nie zawiera wymaganych znaków. Jeśli spojrzymy na to w Twojej przeglądarce, zobaczysz błędy już pojawiające się pod każdym polem wejściowym.

Jest to niekorzystne dla doświadczenia użytkownika, ponieważ użytkownik nie wchodzi jeszcze w interakcję z formularzem i dlatego teksty błędów nie powinny być przynajmniej widoczne, dopóki użytkownik nie spróbuje przesłać formularza. Aby to naprawić, dodamy submitted do warunku wymaganego do wyświetlenia tekstów błędów, a także zmienimy wartość submitted na true , gdy użytkownik kliknie przycisk prześlij.

 <template> <form @submit.prevent="login" class="form"> <div class="input__container"> <label for="fullName" class="input__label">Full Name</label> <input type="text" name="fullName" v-model="form.fullName" class="input__field" /> <p class="error__text" v-if="submitted && !$v.form.fullName.required"> This field is required </p> </div> <div class="input__container"> <label for="email" class="input__label">Email</label> <input type="email" name="email" v-model="form.email" class="input__field" /> <p class="error__text" v-if="submitted && !$v.form.email.required"> This field is required </p> <p class="error__text" v-if="submitted && !$v.form.email.email"> This email is invalid </p> </div> <div class="input__container"> <label for="email" class="input__label">Age</label> <input type="number" name="age" v-model="form.age" class="input__field" /> <p class="error__text" v-if="submitted && !$v.form.age.required"> This field is required </p> </div> <div class="input__container"> <label for="password" class="input__label">Password</label> <input type="password" name="password" v-model="form.password" class="input__field" /> <p class="error__text" v-if="submitted && !$v.form.password.required"> This field is required </p> <p class="error__text" v-else-if="submitted && !$v.form.password.validPassword" > Password should contain at least a lower case letter, an upper case letter, a number and a special character </p> </div> <input type="submit" value="LOGIN" class="input__button" /> </form> </template>

Teraz teksty błędów nie pojawiają się, dopóki użytkownik nie kliknie przycisku przesyłania, co jest znacznie lepsze dla użytkownika. Każdy błąd walidacji pojawiłby się, gdyby wartość wprowadzona w formularzu nie spełniała walidacji.

Wreszcie, chcielibyśmy przetworzyć dane wejściowe użytkownika tylko wtedy, gdy wszystkie walidacje w naszym formularzu przejdą pomyślnie, a jednym ze sposobów, w jaki możemy to zrobić, byłoby użycie właściwości $invalid w form , który jest obecny we właściwości obliczonej $v . Zobaczmy, jak to zrobić:

 methods: { login() { this.submitted = true; let invalidForm = this.$v.form.$invalid; //check that every field in this form has been entered correctly. if (!invalidForm) { // process the form data } }, },

Tutaj sprawdzamy, czy formularz został całkowicie wypełniony i poprawnie wypełniony. Jeśli zwróci false , oznacza to, że formularz jest prawidłowy i możemy przetwarzać dane z formularza, ale jeśli jest true , oznacza to, że formularz jest nadal nieprawidłowy i użytkownik nadal musi mieć tendencję do błędów w formularzu. Możemy również użyć tej właściwości, aby wyłączyć lub zmienić styl przycisku przesyłania w zależności od Twoich preferencji.

Vuex-persistedstate

Podczas opracowywania zdarzają się sytuacje, w których można przechowywać dane, takie jak informacje o użytkowniku i token, w sklepie Vuex. Ale dane sklepu Vuex nie zostaną zachowane, jeśli użytkownicy spróbują odświeżyć aplikację z przeglądarki lub wprowadzą nową trasę z karty URL przeglądarki, a obecny stan aplikacji zostanie z nią utracony. Powoduje to przekierowanie użytkownika do strony logowania, jeśli trasa jest chroniona przez strażnika nawigacji, co jest nienormalnym zachowaniem dla Twojej aplikacji. Można to naprawić za pomocą vuex-persistedstate , spójrzmy, jak to zrobić.

Instalacja

Możesz zainstalować tę wtyczkę, korzystając z jednej z dwóch metod:

Przędza

 yarn add vuex-persistedstate

npm

 npm install --save vuex-persistedstate

Po zakończeniu procesu instalacji następnym krokiem będzie skonfigurowanie tej wtyczki, aby była gotowa do użycia w sklepie Vuex.

 import Vue from 'vue' import Vuex from 'vuex' import createPersistedState from "vuex-persistedstate"; Vue.use(Vuex) export default new Vuex.Store({ state: {}, mutations: {}, actions: {}, modules: {}, plugins: [createPersistedState()] })

W tym momencie cały nasz sklep Vuex byłby przechowywany w localStorage (domyślnie), ale vuex-persistedstate ma opcję korzystania z sessionStorage lub cookies .

 import Vue from 'vue' import Vuex from 'vuex' import createPersistedState from "vuex-persistedstate"; Vue.use(Vuex) export default new Vuex.Store({ state: {}, mutations: {}, actions: {}, modules: {}, // changes storage to sessionStorage plugins: [createPersistedState({ storage: window.sessionStorage }); ] })

Aby potwierdzić, że nasz Sklep będzie działał po odświeżeniu lub zamknięciu zakładki przeglądarki, zaktualizujmy nasz sklep tak, aby wyglądał następująco:

 import Vue from 'vue' import Vuex from 'vuex' import createPersistedState from "vuex-persistedstate"; Vue.use(Vuex) export default new Vuex.Store({ state: { user: null }, mutations: { SET_USER(state, user) { state.user = user } }, actions: { getUser({ commit }, userInfo) { commit('SET_USER', userInfo) } }, plugins: [createPersistedState()] })

Tutaj dodajemy stan user , który przechowuje dane użytkownika z formularza utworzonego w poprzedniej sekcji. Dodajemy również mutację SET_USER , która będzie używana podczas modyfikowania stanu user . Na koniec dodajemy akcję getUser , która otrzyma obiekt użytkownika i przekaże go do właściwości mutacji SET_USER . Kolejnym byłoby wysłanie tej akcji po pomyślnym zweryfikowaniu naszego formularza. Wygląda to tak:

 methods: { login() { this.submitted = true; let invalidForm = this.$v.form.$invalid; let form = this.form; //check that every field in this form has been entered correctly. if (!invalidForm) { // process the form data this.$store.dispatch("getUser", form); } }, },

Teraz, jeśli poprawnie wypełnisz formularz, prześlesz go i otworzysz sekcję localStorage w zakładce Applications w devTools Twojej przeglądarki, powinieneś zobaczyć właściwość vuex , która wygląda tak:

W tym momencie, jeśli odświeżysz przeglądarkę lub otworzysz aplikację w nowej karcie, stan user nadal będzie się utrzymywał na tych kartach/sesji (w localStorage).

Wniosek

Istnieje wiele bibliotek, które mogą być bardzo przydatne w tworzeniu stron internetowych Vuejs i czasami może być trudno wybrać tę, której chcesz użyć lub gdzie ją znaleźć. Poniższe łącza zawierają biblioteki, których możesz używać w swojej aplikacji Vue.js.

1. vuejsexamples.com.
2. madewithvuejs.com.

Często istnieje więcej niż jedna biblioteka, która robi to samo, co starasz się osiągnąć w swojej aplikacji podczas wyszukiwania „biblioteki”, ważne jest, aby upewnić się, że opcja, którą wybierasz za prace dla Ciebie i jest utrzymywana przez jego twórcy, aby nie powodowało awarii aplikacji .

Dalsze zasoby

• „Powiadomienia Vue.js”, oficjalne dokumenty, GitHub
• „Vuelidate”, oficjalna strona internetowa
• „Walidacja formularzy w niecałą godzinę za pomocą Vuelidate”, Sarah Drasner, CSS-Tricks
• „ vuex-persistedstate ”, Yarn