Instrumente utile în dezvoltarea web Vue.js

Când lucrați la un proiect nou, există anumite caracteristici care sunt necesare în funcție de modul în care se presupune că trebuie utilizată aplicația. De exemplu, dacă veți stoca date specifice utilizatorului, va trebui să vă ocupați de autentificări, aceasta va necesita configurarea unui formular care trebuie validat. Lucruri precum autentificarea și validările de formulare sunt comune; există soluții care se potrivesc posibil cazului dvs. de utilizare.

Pentru a vă folosi în mod corespunzător timpul de dezvoltare, este mai bine să utilizați ceea ce este disponibil, în loc să îl inventați pe al dvs.

În calitate de dezvoltator nou, există posibilitatea ca tu să nu fii conștient de tot ceea ce îți oferă ecosistemul Vue. Acest articol va ajuta cu asta; va acoperi anumite instrumente utile care vă vor ajuta să construiți aplicații Vue mai bune.

Notă : Există alternative la aceste biblioteci și acest articol nu le plasează în niciun fel pe aceste câteva peste celelalte. Sunt doar cei cu care am lucrat.

Acest tutorial se adresează începătorilor care fie tocmai au început să învețe despre Vue, fie au deja cunoștințe de bază despre Vue. Toate fragmentele de cod utilizate în acest tutorial pot fi găsite pe GitHub-ul meu.

Notificare Vue

În timpul interacțiunii cu utilizatorul, este adesea nevoie să afișeze utilizatorului un mesaj de succes, un mesaj de eroare sau informații aleatorii. În această secțiune, vom analiza cum să afișați mesajele și avertismentele utilizatorului dvs. folosind vue-notification . Acest pachet oferă o interfață cu o animație/tranziție plăcută pentru afișarea erorilor, a informațiilor generale și a mesajelor de succes către utilizatorul dvs. în aplicația dvs. și nu necesită multă configurare pentru a începe și rula.

Instalare

Puteți instala vue-notification în proiectul dvs. folosind fie Yarn, fie NPM, în funcție de managerul de pachete pentru proiectul dvs.

Fire

 yarn add vue-notification

npm

 npm install --save vue-notification

După finalizarea instalării, următorul lucru ar fi să îl adăugați la punctul de intrare în aplicația dvs., fișierul main.js.

main.js

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

În acest moment, trebuie doar să adăugăm componenta de notificări în fișierul App.vue înainte de a putea afișa notificări în aplicația noastră. Motivul pentru care adăugăm această componentă la fișierul App.vue este pentru a evita repetarea în aplicația noastră, deoarece indiferent de pagina pe care se află utilizatorul în aplicația noastră, componentele din App.vue (de exemplu, componentele antet și subsol) ar fi întotdeauna a fi disponibil. Acest lucru este dificil de a înregistra componenta de notificare în fiecare fișier de care avem nevoie pentru a afișa o notificare utilizatorului.

App.vue

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

Aici, adăugăm o instanță a acestei componente care acceptă un suport de group care ar fi folosit în gruparea diferitelor tipuri de notificări pe care le avem. Acest lucru se datorează faptului că componenta de notificări acceptă o serie de elemente de recuzită care dictează modul în care se comportă componenta și vom analiza câteva dintre acestea.

1. group
   Această reclamă este folosită pentru a specifica diferitele tipuri de notificări pe care le puteți avea în aplicația dvs. De exemplu, ați putea decide să utilizați stiluri și comportamente diferite, în funcție de scopul pe care se presupune că ar trebui să servească notificarea, validarea formularului, răspunsul API etc.
2. type
   Acest prop acceptă o valoare care servește drept „nume de clasă” pentru fiecare tip de notificare pe care îl avem în aplicația noastră, iar exemplele pot include success , error și warn . Dacă folosim oricare dintre acestea ca tip de notificare, putem stila cu ușurință componenta folosind acest format de clasă vue-notification + '.' + type vue-notification + '.' + type , adică .vue-notification.warn pentru warn și așa mai departe.
3. duration
   Această reclamă specifică cât timp trebuie să apară componenta de notification înainte de a dispărea. Acceptă un număr ca valoare în ms și acceptă, de asemenea, un număr negativ (-1) dacă doriți ca acesta să rămână pe ecranul utilizatorului până când acesta face clic pe el.
4. position
   Acest element de sprijin este folosit pentru a seta poziția din care doriți să apară notificările în aplicația dvs. Unele dintre opțiunile disponibile sunt top left top right top center , bottom right bottom left jos și bottom center .

Putem adăuga aceste elemente de recuzită la componenta noastră în App.vue , așa că acum arată așa;

 <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>

Adăugăm, de asemenea, stil pentru diferitele tipuri de notificări pe care le-am folosi în aplicația noastră. Rețineți că, în afară de group , putem trece din mers fiecare dintre elementele de recuzită rămase ori de câte ori dorim să afișăm o notificare și va funcționa în continuare în consecință. Pentru a afișa o notificare în oricare dintre fișierele tale Vue, poți face următoarele.

vueFile.vue

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

Aici, creăm o notificare de error de type sub notificarea de group a demo . text proprietății acceptă mesajul pe care doriți să îl conțină notificarea și, în acest caz, mesajul este „ Aceasta este o notificare de eroare”. Așa ar arăta notificarea în aplicația dvs.

Puteți afla celelalte elemente de recuzită disponibile și alte modalități de a configura notificarea pe pagina oficială de documente.

Vuelidate

Unul dintre cele mai frecvente elemente utilizate pe web sunt elementele de formular ( input[type='text'] , input[type='email'] , input[type='password'] și așa mai departe) și există întotdeauna o trebuie să valideze intrarea utilizatorului pentru a se asigura că trimit datele corecte și/sau utilizează formatul potrivit în câmpul de introducere. Cu Vuelidate, poți adăuga validare la formularele din aplicația ta Vue.js, economisind timp și beneficiind de timpul pus în acest pachet. Am auzit de Vuelidate de ceva vreme, dar am fost puțin reticent să-l arunc, deoarece am crezut că va fi prea complex, ceea ce însemna că scriam validări de la zero pentru majoritatea câmpurilor de formular din aplicațiile la care am lucrat.

Când m-am uitat în cele din urmă la documente, am aflat că nu era dificil să încep și că puteam să-mi validez câmpurile formularului în cel mai scurt timp și să trec la următorul lucru.

Instalare

Puteți instala Vuelidate folosind oricare dintre următorii manageri de pachete.

Fire

 yarn add vuelidate

npm

 npm install vuelidate --save

După instalare, următorul lucru ar fi să îl adăugați la configurația aplicației dvs. în fișierul main.js , astfel încât să îl puteți utiliza în fișierele vue.

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

Presupunând că aveți un formular care arată astfel în aplicația dvs.;

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>

Acum, pentru a valida acest tip de formular, mai întâi trebuie să decideți ce tip de validare aveți nevoie pentru fiecare câmp de formular. De exemplu, puteți decide că lungimea minimă a fullName trebuie să fie 10 și vârsta minimă să fie 18 .

Vuelidate vine cu validatoare încorporate pe care trebuie doar să le importăm pentru a le folosi. De asemenea, putem alege să validăm câmpul pentru parolă pe baza unui anumit format, de exemplu, Password should contain at least a lower case letter, an upper case letter, and a special character . Putem scrie propriul nostru mic validator care face acest lucru și îl putem conecta în lista de plugin-uri Vuelidate.

Să o luăm pas cu pas.

Utilizarea validatoarelor încorporate

 <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>

Aici, importăm câțiva validatori de care avem nevoie pentru a ne valida corect formularul. Adăugăm, de asemenea, o proprietate de validations în care definim regulile de validare pentru fiecare câmp de formular pe care dorim să-l validăm.

În acest moment, dacă inspectați devTools pentru aplicația dvs., ar trebui să vedeți ceva care arată așa;

Proprietatea calculată $v conține o serie de metode care sunt utile pentru a confirma validitatea formularului nostru, dar ne vom concentra doar pe câteva dintre ele:

1. $invalid
   Pentru a verifica dacă formularul trece toată validarea.
2. email
   Pentru a verifica dacă valoarea este o adresă de e-mail validă.
3. minValue
   Pentru a verifica dacă valoarea age trece de verificarea minValue .
4. minLength
   Pentru a verifica lungimea fullName .
5. required
   Pentru a vă asigura că sunt furnizate toate câmpurile obligatorii.

Dacă introduceți o valoare pentru age mai mică decât vârsta minimă stabilită în validare și verificați $v.form.age.minValue , aceasta ar fi setată la false și aceasta înseamnă că valoarea din câmpul de intrare nu trece verificarea de validare minValue .

Utilizarea validatorilor personalizat

De asemenea, trebuie să ne validăm câmpul de parolă și să ne asigurăm că conține formatul necesar, dar Vuelidate nu are un validator încorporat pe care să îl putem folosi pentru a realiza acest lucru. Putem scrie propriul nostru validator personalizat care face acest lucru folosind RegEx. Acest validator personalizat ar arăta astfel;

 <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>

Aici, creăm un validator personalizat care utilizează un Regex pentru a verifica dacă parola conține următoarele;

1. Cel puțin o majusculă;
2. Cel puțin o literă mică;
3. Cel puțin un caracter special;
4. Cel putin un numar;
5. Trebuie să aibă o lungime minimă de 6.

Dacă încercați să introduceți o parolă care nu îndeplinește niciuna dintre cerințele enumerate mai sus, validPassword va fi setat la false .

Acum că suntem siguri că validările noastre funcționează, trebuie să afișăm mesajele de eroare corespunzătoare, astfel încât utilizatorul să știe de ce nu poate continua. Acesta ar arăta astfel:

 <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>

Aici, adăugăm un paragraf care afișează fie un text care spune utilizatorului că un câmp este necesar, o valoare introdusă pentru e-mail nu este validă sau că parola nu conține caracterele necesare. Dacă ne uităm la asta în browserul dvs., veți vedea erorile care apar deja sub fiecare câmp de introducere.

Acest lucru este rău pentru experiența utilizatorului, deoarece utilizatorul nu a interacționat încă cu formularul și, ca atare, textele de eroare nu ar trebui să fie vizibile cel puțin până când utilizatorul încearcă să trimită formularul. Pentru a remedia acest lucru, am adăuga submitted la condiția necesară pentru ca textele de eroare să fie afișate și, de asemenea, am comuta valoarea submitted la true atunci când utilizatorul face clic pe butonul de trimitere.

 <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>

Acum, textele de eroare nu apar până când utilizatorul face clic pe butonul de trimitere și acest lucru este mult mai bine pentru utilizator. Fiecare eroare de validare ar apărea dacă valoarea introdusă în formular nu satisface validarea.

În cele din urmă, am dori să procesăm intrarea utilizatorului numai atunci când toate validările de pe formularul nostru au trecut și o modalitate prin care putem face acest lucru ar fi să folosim proprietatea $invalid pe form care este prezentă în proprietatea calculată $v . Să aruncăm o privire la cum să facem asta:

 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 } }, },

Aici, verificăm pentru a ne asigura că formularul a fost complet completat și completat corect. Dacă returnează false , înseamnă că formularul este valid și putem procesa datele din formular, dar dacă este true , înseamnă că formularul este încă invalid și că utilizatorul trebuie să se ocupe de unele erori din formular. De asemenea, putem folosi această proprietate pentru a dezactiva sau a stila butonul de trimitere, în funcție de preferințele dvs.

Vuex-stare a persistat

În timpul dezvoltării, există cazuri în care ați stoca date, cum ar fi informațiile și simbolul unui utilizator, în magazinul Vuex. Dar datele din magazinul Vuex nu ar persista dacă utilizatorii dvs. încearcă să vă reîmprospăteze aplicația din browser sau să introducă o nouă rută din fila URL a browserului dvs. și starea actuală a aplicației dvs. se pierde odată cu aceasta. Acest lucru face ca utilizatorul să fie redirecționat către pagina de conectare dacă ruta este protejată cu protecție de navigare, ceea ce este un comportament anormal pentru aplicația dvs. Acest lucru poate fi rezolvat cu vuex-persistedstate , să vedem cum.

Instalare

Puteți instala acest plugin folosind oricare dintre cele două metode:

Fire

 yarn add vuex-persistedstate

npm

 npm install --save vuex-persistedstate

După finalizarea procesului de instalare, următorul pas ar fi configurarea acestui plugin pentru a fi gata de utilizare în magazinul dumneavoastră 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()] })

În acest moment, tot Magazinul nostru Vuex ar fi stocat în localStorage (în mod implicit), dar vuex-persistedstate vine cu opțiunea de a utiliza sessionStorage sau cookies -uri.

 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 }); ] })

Pentru a confirma că Magazinul nostru va persista după reîmprospătarea sau închiderea filei browser, permiteți-ne să ne actualizăm magazinul astfel încât să arate astfel:

 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()] })

Aici, adăugăm o stare user care ar stoca datele utilizatorului din formularul creat în secțiunea anterioară. Adăugăm, de asemenea, o mutație SET_USER care ar fi folosită în modificarea stării user . În cele din urmă, adăugăm o acțiune getUser care ar primi obiectul utilizator și îl va transmite proprietății de mutație SET_USER . Următorul ar fi să trimitem această acțiune după validarea cu succes a formularului nostru. Acesta arată astfel:

 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); } }, },

Acum, dacă completați corect formularul, îl trimiteți și deschideți secțiunea localStorage din fila aplicații din devTools a browserului dvs., ar trebui să vedeți o proprietate vuex care arată astfel:

În acest moment, dacă vă reîmprospătați browserul sau deschideți aplicația într-o filă nouă, starea dvs. user va persista în continuare în aceste file/sesiuni (pe LocalStorage).

Concluzie

Există o mulțime de biblioteci care pot fi foarte utile în dezvoltarea web Vuejs și uneori poate fi greu să o alegeți pe cea pe care să o folosiți sau unde să le găsiți. Următoarele linkuri conțin biblioteci pe care le puteți utiliza în aplicația Vue.js.

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

Există adesea mai multe biblioteci care fac același lucru pe care încercați să îl realizați în aplicația dvs. atunci când căutați o „bibliotecă”, lucru important este să vă asigurați că opțiunea pe care o alegeți funcționează pentru dvs. și este întreținută de creatorii săi, astfel încât să nu provoace întreruperea aplicației dvs. .

Resurse suplimentare

• „Notificări Vue.js”, Documente oficiale, GitHub
• „Vuelidate”, site-ul oficial
• „Validarea formularului în mai puțin de o oră cu Vuelidate”, Sarah Drasner, CSS-Tricks
• „ vuex-persistedstate ”, Yarn