Voortbouwend op ons vorige werk, zullen we onze notities app afmaken.
Afhankelijk van je vaardigheidsniveau, zullen de volgende stappen je ongeveer 20 tot 45 minuten kosten om te voltooien.
In onze vorige blogpost hebben we al leesnotities gemaakt, maar daarvoor moesten we ze handmatig toevoegen in onze Firestore-database. Laten we nu de functionaliteit creëren waarmee we rechtstreeks via de interface van onze applicatie notities kunnen toevoegen. In Notes.vue:
De bovenstaande code laat zien dat we een@click="addDialogVisible = true" handler hebben toegevoegd aan onze knop 'Notitie toevoegen' en deze hebben geregistreerd in onze 'data'-haak zodat deze standaard false is.
We hebben ook het dialoogvenster zelf toegevoegd dat wordt weergegeven op basis van deze 'addDialogVisible'-waarde. In dit dialoogvenster hebben we een ElementUI-formulier toegevoegd met titel- en inhoudsvelden die enkele validatieregels hebben, ook gespecificeerd in onze 'data hook'.
Als we nu op de knop drukken om de notitie toe te voegen, geven we de refs van onze formname door, die een Vue-object retourneert met de velden die moeten worden gevalideerd.
Vervolgens voegen we onze database query toe. Wijzig de methode 'addNoteForm' als volgt:
Nadat je dit hebt getest door een geldig formulier in te dienen, zie je de succesmelding. Maar er is nog steeds een probleem met het tonen van de nieuw toegevoegde notitie in onze tabel. Door de pagina te verversen, wordt hij wel getoond.
De reden hiervoor is dat we de database-aanroep om de notities op te halen hebben uitgevoerd via de 'created' haak. Dit zal één keer gebeuren als we de pagina openen, maar niet nadat we onze database hebben bijgewerkt. Laten we dat wat flexibeler maken door de get query naar een methode te verplaatsen:
Als je goed kijkt, heb ik ook een orderBy('date') toegevoegd aan de query. Als we nu nog een noot toevoegen, wordt onze tabel foutloos bijgewerkt en wordt de laatste noot toegevoegd aan de onderste rij. Als je dit andersom wilt, verander dan orderBy('date') in orderBy('date', 'desc').
Het verwijderen van een item is vrij eenvoudig, maar moet vanuit het oogpunt van gebruikerservaring ook niet te eenvoudig zijn. Daarom heb ik besloten om het verwijderen af te handelen na een bevestigingsvenster van ElementUI.
Voeg eerst een @click handler toe aan het verwijder icoon waar we de ID van de notitie die we willen verwijderen naartoe sturen:
Merk op dat ik ook de slot-scope="scope" heb veranderd in slot-scope="props" in de template tag om overeen te komen met de rest van de props die worden doorgegeven aan de tabel.
Laten we nu de deleteNote methode registreren:
En voilà! Het verwijderen van notities is nu volledig afgedekt.
Voeg net als bij het verwijderen een bewerkingshandler toe aan de bewerkingsknop, samen met een 'editDialogVisible'-waarde zoals we die hebben toegevoegd voor de 'addDialog'.
Vervolgens moeten we ook het dialoogvenster maken waarin de bewerking plaatsvindt:
Onze data hook (we hebben editDialogVisible en editNoteRuleForm toegevoegd) moet dan worden bijgewerkt tot:
Daarnaast moeten we ook een editNote methode toevoegen die de gegevens ophaalt op basis van de notitie ID en de waarde van de editDialog velden invult:
Tot zover is het ophalen van de notitie in ons bewerkingsvenster behandeld, maar we hebben nog steeds de methode saveEditedNote nodig:
Hier stellen we onze database record in op de nieuwe waarde gespecificeerd door onze gevalideerde formuliervelden, een bijgewerkte datum wordt ook doorgegeven. Bij succes wordt er een 'Note successfully edited' bericht getoond.
Dat was het! Onze missie om een basis CRUD-applicatie te maken op basis van VueJS en Firebase is een feit!
Iemand vroeg me naar de authenticatiefunctionaliteit in onze vorige blogpost, dus ik zal het hebben over het maken van een basisauthenticatie voor onze app, gebaseerd op de authenticatie-API die Firebase biedt.
Ga naar je Firebase console en navigeer naar de link 'Authenticatie' in de zijbalk onder 'Ontwikkelen'. Schakel nu de eenvoudige Email/Paswoord Authenticatie in.
Nu kunnen we beginnen met het bouwen van de login- en registratiepagina's. Dat zijn in principe gewoon formulieren zoals we eerder hebben gedaan. Het enige verschil hier is dat we de methodesfirebase.auth().createUserWithEmailAndPassword enfirebase.auth().signInWithEmailAndPassword gebruiken.
Inloggen.vue:
Aanmelden.vue:
We kunnen deze weergaven nog steeds niet zien omdat we onze routes nog moeten bijwerken. Ga naar main.js en vervang deze door het volgende (vergeet je API-sleutel en Project ID niet):
Hier hebben we een aantal routes toegevoegd voor inloggen en aanmelden, en meta: { requiresAuth: true; } toegevoegd aan de pagina's waarop we beperkte toegang willen. We controleren met Firebase of de gebruiker is geauthenticeerd in de functie router.beforeEach, voordat we hem registreren in onze app. Als de auth-status verandert, wordt de controle opnieuw uitgevoerd.
Nu werkt het dus vrij goed, maar we willen de navigatie in de zijbalk verbergen als de gebruiker niet is ingelogd, dus we hebben de aangemaakte haak en de v-if op <el-aside> toegevoegd. We hebben ook een uitloglink toegevoegd aan de navigatie. Ons App.vue bestand ziet er nu zo uit:
En daar hebben we het, een toepassing voor notities op één pagina waar je een account kunt aanmaken, kunt inloggen en notities kunt maken, lezen, bijwerken en verwijderen.
Voel je vrij om deze code / kennis aan te passen of op voort te bouwen om je eigen VueJS / Firebase projecten te maken. Laat me weten hoe je het hebt gedaan!
Krijg je het niet aan de praat? Heb je meer uitleg nodig over bepaalde stukjes code? We zijn een en al oor. Laat het ons weten en we nemen zo snel mogelijk contact met je op.