Nützliche Tools in der Vue.js-Webentwicklung

Bei der Arbeit an einem neuen Projekt gibt es bestimmte Funktionen, die notwendig sind, je nachdem, wie die Anwendung verwendet werden soll. Wenn Sie beispielsweise benutzerspezifische Daten speichern, müssen Sie Authentifizierungen handhaben, dies erfordert die Einrichtung eines Formulars, das validiert werden muss. Dinge wie Authentifizierung und Formularvalidierungen sind üblich; Es gibt Lösungen, die möglicherweise zu Ihrem Anwendungsfall passen.

Um Ihre Entwicklungszeit richtig zu nutzen, ist es besser, das zu nutzen, was verfügbar ist, anstatt Ihre eigene zu erfinden.

Als neuer Entwickler besteht die Möglichkeit, dass Sie nicht wissen, was Ihnen das Vue-Ökosystem bietet. Dieser Artikel wird dabei helfen; Es behandelt bestimmte nützliche Tools, die Ihnen beim Erstellen besserer Vue-Anwendungen helfen.

Hinweis : Es gibt Alternativen zu diesen Bibliotheken, und dieser Artikel stellt diese wenigen in keiner Weise über die anderen. Das sind nur die, mit denen ich gearbeitet habe.

Dieses Tutorial richtet sich an Anfänger, die entweder gerade angefangen haben, sich mit Vue vertraut zu machen, oder bereits über Grundkenntnisse in Vue verfügen. Alle in diesem Tutorial verwendeten Codeschnipsel finden Sie auf meinem GitHub.

Vue-Benachrichtigung

Während der Benutzerinteraktion besteht häufig die Notwendigkeit, dem Benutzer eine Erfolgsmeldung, eine Fehlermeldung oder zufällige Informationen anzuzeigen. In diesem Abschnitt sehen wir uns an, wie Sie Ihren Benutzern mit vue-notification Nachrichten und Warnungen anzeigen können. Dieses Paket bietet eine Schnittstelle mit einer netten Animation/Übergang zum Anzeigen von Fehlern, allgemeinen Informationen und Erfolgsmeldungen für Ihre Benutzer in Ihrer gesamten Anwendung, und es erfordert nicht viel Konfiguration, um es zum Laufen zu bringen.

Installation

Sie können vue-notification in Ihrem Projekt entweder mit Yarn oder NPM installieren, je nach Paketmanager für Ihr Projekt

Garn

 yarn add vue-notification

npm

 npm install --save vue-notification

Nachdem die Installation abgeschlossen ist, fügen Sie sie als Nächstes dem Einstiegspunkt in Ihrer App, der Datei main.js , hinzu.

main.js

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

An dieser Stelle müssen wir nur die Benachrichtigungskomponente in der App.vue -Datei hinzufügen, bevor wir Benachrichtigungen in unserer App anzeigen können. Der Grund, warum wir diese Komponente zur App.vue -Datei hinzufügen, besteht darin, Wiederholungen in unserer Anwendung zu vermeiden, denn unabhängig davon, auf welcher Seite sich der Benutzer in unserer App befindet, Komponenten in App.vue (z. B. die Kopf- und Fußzeilenkomponenten) würden dies immer tun verfügbar sein. Dadurch müssen wir die Benachrichtigungskomponente nicht in jeder Datei registrieren, die wir benötigen, um dem Benutzer eine Benachrichtigung anzuzeigen.

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>

Hier fügen wir eine Instanz dieser Komponente hinzu, die eine group akzeptiert, die zum Gruppieren der verschiedenen Arten von Benachrichtigungen verwendet wird, die wir haben. Dies liegt daran, dass die Benachrichtigungskomponente eine Reihe von Props akzeptiert, die das Verhalten der Komponente bestimmen, und wir werden uns einige davon ansehen.

1. group
   Diese Eigenschaft wird verwendet, um die verschiedenen Arten von Benachrichtigungen anzugeben, die Sie möglicherweise in Ihrer App haben. Beispielsweise können Sie sich entscheiden, unterschiedliche Stile und Verhaltensweisen zu verwenden, je nachdem, welchem ​​Zweck die Benachrichtigung dienen soll, Formularvalidierung, API-Antwort usw.
2. type
   Diese Prop akzeptiert einen Wert, der als „Klassenname“ für jeden Benachrichtigungstyp dient, den wir in unserer Anwendung haben, und Beispiele können success , error und warn sein. Wenn wir einen davon als Benachrichtigungstyp verwenden, können wir die Komponente einfach gestalten, indem wir dieses Klassenformat vue-notification + '.' + type vue-notification + '.' + type geben Sie ein, dh .vue-notification.warn für warn und so weiter.
3. duration
   Diese Eigenschaft gibt an, wie lange die notification angezeigt werden soll, bevor sie verschwindet. Es akzeptiert eine Zahl als Wert in ms und akzeptiert auch eine negative Zahl (-1), wenn Sie möchten, dass sie auf dem Bildschirm Ihres Benutzers bleibt, bis er darauf klickt.
4. position
   Diese Requisite wird zum Festlegen der Position verwendet, von der aus Benachrichtigungen in Ihrer App angezeigt werden sollen. Einige der verfügbaren Optionen sind top left , top right , top center , bottom right , bottom left und bottom center .

Wir können diese Requisiten zu unserer Komponente in App.vue hinzufügen , sodass es jetzt so aussieht;

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

Wir fügen auch Stile für die verschiedenen Benachrichtigungstypen hinzu, die wir in unserer Anwendung verwenden würden. Beachten Sie, dass wir mit Ausnahme von group jede der verbleibenden Requisiten im Handumdrehen übergeben können, wann immer wir eine Benachrichtigung anzeigen möchten, und es würde immer noch entsprechend funktionieren. Um eine Benachrichtigung in einer Ihrer Vue-Dateien anzuzeigen, können Sie Folgendes tun.

vueDatei.vue

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

Hier erstellen wir error type der group Benachrichtigung von demo . Der Eigenschaftstext text die Nachricht, die die Benachrichtigung enthalten soll, und in diesem Fall lautet die Nachricht „ Dies ist eine Fehlerbenachrichtigung“. So würde die Benachrichtigung in Ihrer App aussehen.

Sie können die anderen verfügbaren Props und andere Möglichkeiten zum Konfigurieren der Benachrichtigung auf der offiziellen Dokumentationsseite herausfinden.

Gültigkeit

Eines der am häufigsten verwendeten Elemente im Web sind Formularelemente ( input[type='text'] , input[type='email'] , input[type='password'] und so weiter) und es gibt immer ein Benutzereingaben validieren müssen, um sicherzustellen, dass sie die richtigen Daten senden und/oder das richtige Format im Eingabefeld verwenden. Mit Vuelidate können Sie den Formularen in Ihrer Vue.js-Anwendung eine Validierung hinzufügen, Zeit sparen und von der in dieses Paket investierten Zeit profitieren. Ich hatte schon seit einiger Zeit von Vuelidate gehört, aber ich zögerte, einen Blick darauf zu werfen, weil ich dachte, es wäre zu komplex, was bedeutete, dass ich für die meisten Formularfelder in den Apps, an denen ich arbeitete, Validierungen von Grund auf neu schrieb.

Als ich mir schließlich die Dokumente ansah, stellte ich fest, dass es nicht schwierig war, damit anzufangen, und ich konnte meine Formularfelder im Handumdrehen validieren und mit dem nächsten Ding fortfahren.

Installation

Sie können Vuelidate mit einem der folgenden Paketmanager installieren.

Garn

 yarn add vuelidate

npm

 npm install vuelidate --save

Nach der Installation müssten Sie es als Nächstes zur Konfiguration Ihrer App in der Datei main.js hinzufügen , damit Sie es in Ihren vue-Dateien verwenden können.

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

Angenommen, Sie haben ein Formular, das in Ihrer App so aussieht;

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>

Um diesen Formulartyp zu validieren, müssen Sie zunächst entscheiden, welche Art von Validierung Sie für jedes Formularfeld benötigen. Beispielsweise können Sie festlegen, dass die Mindestlänge von fullName 10 und das Mindestalter 18 sein muss.

Vuelidate wird mit integrierten Validatoren geliefert, die wir nur importieren müssen, um sie zu verwenden. Wir können das Passwortfeld auch anhand eines bestimmten Formats validieren, z. B. Password should contain at least a lower case letter, an upper case letter, and a special character . Wir können unseren eigenen kleinen Validator schreiben, der dies tut, und ihn in die Liste der Plugins von Vuelidate einfügen.

Gehen wir es Schritt für Schritt an.

Verwenden von integrierten Validatoren

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

Hier importieren wir einige Validatoren, die wir benötigen, um unser Formular ordnungsgemäß zu validieren. Wir fügen auch eine validations hinzu, in der wir die Validierungsregeln für jedes Formularfeld definieren, das wir validieren möchten.

Wenn Sie an dieser Stelle die devTools für Ihre App untersuchen, sollten Sie etwas sehen, das so aussieht;

Die berechnete Eigenschaft $v enthält eine Reihe von Methoden, die nützlich sind, um die Gültigkeit unseres Formulars zu bestätigen, aber wir werden uns nur auf einige davon konzentrieren:

1. $invalid
   Um zu überprüfen, ob das Formular alle Validierungen besteht.
2. email
   Um zu überprüfen, ob der Wert eine gültige E-Mail-Adresse ist.
3. minValue
   Um zu überprüfen, ob der Wert des age den minValue Check besteht.
4. minLength
   Um die Länge von fullName zu überprüfen.
5. required
   Um sicherzustellen, dass alle erforderlichen Felder vorhanden sind.

Wenn Sie einen Wert für das age eingeben, der kleiner als das in der Validierung festgelegte Mindestalter ist, und $v.form.age.minValue überprüfen, wird er auf false gesetzt, und dies bedeutet, dass der Wert im Eingabefeld die minValue Validierungsprüfung nicht besteht .

Verwenden von benutzerdefinierten Validatoren

Wir müssen auch unser Passwortfeld validieren und sicherstellen, dass es das erforderliche Format enthält, aber Vuelidate verfügt nicht über einen integrierten Validator, mit dem wir dies erreichen können. Wir können unseren eigenen benutzerdefinierten Validator schreiben, der dies mit RegEx tut. Dieser benutzerdefinierte Validator würde wie folgt aussehen;

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

Hier erstellen wir einen benutzerdefinierten Validator, der einen Regex verwendet, um zu überprüfen, ob das Passwort Folgendes enthält:

1. Mindestens ein Großbuchstabe;
2. Mindestens ein Kleinbuchstabe;
3. Mindestens ein Sonderzeichen;
4. Mindestens eine Zahl;
5. Muss eine Mindestlänge von 6 haben.

Wenn Sie versuchen, ein Passwort einzugeben, das keine der oben aufgeführten Anforderungen erfüllt, wird validPassword auf false gesetzt.

Jetzt, da wir sicher sind, dass unsere Validierungen funktionieren, müssen wir die entsprechenden Fehlermeldungen anzeigen, damit der Benutzer weiß, warum er nicht fortfahren kann. Das würde so aussehen:

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

Hier fügen wir einen Absatz hinzu, der entweder einen Text anzeigt, der dem Benutzer mitteilt, dass ein Feld erforderlich ist, ein eingegebener Wert für E-Mail ungültig ist oder dass das Passwort nicht die erforderlichen Zeichen enthält. Wenn wir uns das in Ihrem Browser ansehen, würden Sie sehen, dass die Fehler bereits unter jedem Eingabefeld erscheinen.

Dies ist schlecht für die Benutzererfahrung, da der Benutzer noch mit dem Formular interagieren muss und daher die Fehlertexte zumindest nicht sichtbar sein sollten, bis der Benutzer versucht, das Formular abzusenden. Um dies zu beheben, würden wir die Bedingung „ submitted “ hinzufügen, die erforderlich ist, damit die Fehlertexte angezeigt werden, und den Wert „ submitted “ auf „ true “ setzen, wenn der Benutzer auf die Schaltfläche „Submit“ klickt.

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

Jetzt erscheinen die Fehlertexte erst, wenn der Benutzer auf die Schaltfläche „Senden“ klickt, und das ist viel besser für den Benutzer. Jeder Validierungsfehler würde auftreten, wenn der in das Formular eingegebene Wert die Validierung nicht erfüllt.

Schließlich möchten wir die Eingabe des Benutzers nur verarbeiten, wenn alle Validierungen in unserem Formular bestanden sind, und eine Möglichkeit, dies zu tun, wäre die Verwendung der Eigenschaft $invalid im form , die in der berechneten Eigenschaft $v vorhanden ist. Schauen wir uns an, wie das geht:

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

Hier prüfen wir, ob das Formular vollständig und korrekt ausgefüllt wurde. Wenn es false zurückgibt, bedeutet dies, dass das Formular gültig ist und wir die Daten aus dem Formular verarbeiten können, aber wenn es true ist, bedeutet dies, dass das Formular immer noch ungültig ist und der Benutzer sich noch um einige Fehler im Formular kümmern muss. Wir können diese Eigenschaft auch verwenden, um die Senden-Schaltfläche je nach Ihren Vorlieben zu deaktivieren oder zu gestalten.

Vuex-bestandener Zustand

Während der Entwicklung gab es Fälle, in denen Sie Daten wie Benutzerinformationen und Token in Ihrem Vuex-Shop speichern würden. Ihre Vuex-Store-Daten würden jedoch nicht bestehen bleiben, wenn Ihre Benutzer versuchen, Ihre App über den Browser zu aktualisieren oder eine neue Route über die URL-Registerkarte Ihres Browsers einzugeben, und der aktuelle Status Ihrer Anwendung damit verloren geht. Dies führt dazu, dass der Benutzer auf die Anmeldeseite umgeleitet wird, wenn die Route mit einem Navigationswächter geschützt ist, was für Ihre App ein ungewöhnliches Verhalten ist. Dies kann mit vuex-persistedstate werden, schauen wir uns an, wie.

Installation

Sie können dieses Plugin mit einer der beiden Methoden installieren:

Garn

 yarn add vuex-persistedstate

npm

 npm install --save vuex-persistedstate

Nachdem der Installationsvorgang abgeschlossen ist, besteht der nächste Schritt darin, dieses Plugin so zu konfigurieren, dass es in Ihrem Vuex-Shop verwendet werden kann.

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

An diesem Punkt würde unser gesamter Vuex Store (standardmäßig) in localStorage gespeichert, aber vuex-persistedstate bietet die Option, sessionStorage oder cookies zu verwenden.

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

Um zu bestätigen, dass unser Store nach dem Aktualisieren oder Schließen des Browser-Tabs bestehen bleibt, aktualisieren wir unseren Store so, dass er folgendermaßen aussieht:

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

Hier fügen wir einen user hinzu, der Benutzerdaten aus dem im vorherigen Abschnitt erstellten Formular speichern würde. Wir fügen auch eine SET_USER Mutation hinzu, die zum Ändern des user verwendet wird. Schließlich fügen wir eine getUser Aktion hinzu, die das Benutzerobjekt empfängt und an die Mutationseigenschaft SET_USER . Als Nächstes senden Sie diese Aktion, nachdem Sie unser Formular erfolgreich validiert haben. Das sieht so aus:

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

Wenn Sie nun das Formular korrekt ausfüllen, absenden und den Abschnitt localStorage auf der Registerkarte Anwendungen in den devTools Ihres Browsers öffnen, sollten Sie eine vuex Eigenschaft sehen, die so aussieht:

Wenn Sie zu diesem Zeitpunkt Ihren Browser aktualisieren oder Ihre App in einem neuen Tab öffnen, bleibt Ihr user über diese Tabs/Sitzungen hinweg bestehen (auf localStorage).

Fazit

Es gibt viele Bibliotheken, die bei der Webentwicklung von Vuejs sehr nützlich sein können, und manchmal kann es schwierig sein, die zu verwendende auszuwählen oder wo sie zu finden sind. Die folgenden Links enthalten Bibliotheken, die Sie in Ihrer Vue.js-Anwendung verwenden können.

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

Es gibt oft mehr als eine Bibliothek, die dasselbe tut, was Sie in Ihrer Anwendung zu erreichen versuchen, wenn Sie nach einer „Bibliothek“ suchen. Wichtig ist, sicherzustellen, dass die Option, für die Sie sich entscheiden, für Sie funktioniert und von verwaltet wird seinen Ersteller(n), damit Ihre Anwendung nicht beschädigt wird .

Weitere Ressourcen

• „Vue.js-Benachrichtigungen“, Offizielle Dokumente, GitHub
• „Vuelidate“, Offizielle Website
• „Formularvalidierung in weniger als einer Stunde mit Vuelidate“, Sarah Drasner, CSS-Tricks
• „ vuex-persistedstate “, Yarn