Sådan oprettes en realtids redigerbar datatabel i Vue.js

I datadrevne applikationer bruges en datatabel til at vise data i et tabelformat med muligheden for at redigere og slette poster på plads. Når du arbejder med Vue, er der forskellige open source-komponenter, der kan bruges til nemt at tilføje en datatabel til din applikation.

Mange applikationer i dag har realtidsfunktioner, og du undrer dig måske over, hvordan du kan synkronisere redigering og sletning af data i realtid. Der er tre muligheder for dette:

  1. Brug WebSocket API. Dette er ikke en god mulighed, hvis nogle af dine brugere bruger browsere, der endnu ikke understøtter WebSocket.
  2. Brug et bibliotek, der opsummerer disse forskelle på tværs af browsere med en reservemekanisme, såsom Socket.IO, SignalR og SockJS. Med denne mulighed skal du styre den server, der håndterer et stort antal åbne forbindelser og håndtere skalering.
  3. Brug en tjeneste, der leverer et bibliotek, der gør det samme som den forrige mulighed, men administrerer serveren og skalerer korrekt. Dette er en foretrukken mulighed for virksomheder og teams, der anvender (eller har vedtaget) den serverløse tilgang.

Jeg viser dig, hvordan du opretter en redigerbar datatabel i realtid i Vue.js ved hjælp af Hamoni Sync som realtidsstatus-synkroniseringstjeneste. Billedet nedenfor viser, hvad vi skal bygge:

For at følge med skal du have nogle grundlæggende viden om Vue. Hvis du ikke har kendskab til Vue, kan du læse mit tidligere indlæg for at komme i gang med Vue.js. Du har også brug for følgende værktøjer:

  1. Node.js & npm (følg linket for at downloade et installationsprogram til dit operativsystem)
  2. Vue CLI til stillads til et nyt Vue-projekt. Hvis du ikke har dette, skal du køre npm install -g [email protected]fra kommandolinjen for at installere det.

Opsæt projektet

Vi opretter projektet ved hjælp af Vue CLI og en skabelon fra Vuetify. Åbn kommandolinjen, og kør kommandoen vue init vuetifyjs/simple realtime-datatable-vue. Du bliver bedt om et navn og en forfatter, så accepter standardværdien ved at trykke på enter for hver prompt. Dette stilladserer et nyt Vue-projekt med en enkelt index.htmlfil.

Denne fil indeholder scripthenvisninger til Vue og Vuetify. Vuetify er en materialedesignkomponent til Vue.js. Den har en v-data-tablekomponent med funktioner til sortering, søgning, paginering, inline-redigering, header-værktøjstip og rækkevalg.

Tilføj datatabelkomponenten

Åbn filen index.htmlmed din teksteditor (eller IDE). Udskift indholdet på linje 50 med følgende:

 New Item   {{ formTitle }}                         Cancel Save      {{ props.item.name }}{{ props.item.calories }}{{ props.item.fat }}{{ props.item.carbs }}{{ props.item.protein }}  edit   delete  

Koden ovenfor tilføjer en v-dialogkomponent til visning af en dialog til at indsamle data til nye poster eller redigere en eksisterende post. Det tilføjer også det, v-data-tableder gengiver bordet. Vi er nødt til at definere de data og metoder, der bruges af disse komponenter. Efter linje 126 skal du tilføje følgende kode til dataegenskaberne:

dialog: false,headers: [ { text: 'Dessert (100g serving)', align: 'left', sortable: false, value: 'name' }, { text: 'Calories', value: 'calories' }, { text: 'Fat (g)', value: 'fat' }, { text: 'Carbs (g)', value: 'carbs' }, { text: 'Protein (g)', value: 'protein' }, { text: 'Actions', value: 'name', sortable: false }],desserts: [],editedIndex: -1,editedItem: { name: '', calories: 0, fat: 0, carbs: 0, protein: 0},defaultItem: { name: '', calories: 0, fat: 0, carbs: 0, protein: 0},listPrimitive: null

De dessertsdata ejendom vil holde data, der skal vises i tabellen. Den editedItemegenskab vil holde værdier for the record, der redigeres, og det editedIndexvil holde indekset for the record, der redigeres.

Tilføj følgende egenskaber efter dataegenskabsdefinitionen efter linje 189 :

computed: { formTitle() { return this.editedIndex === -1 ? 'New Item' : 'Edit Item' }},
watch: { dialog(val)  this.close() },

Vi tilføjede en computedog watchejendom. De computedejendom definerer formTitlesom giver dialogen komponent en titel baseret på værdien af editedIndex. Den watchegenskab ure dialogtil, når dens værdi ændrer sig. Hvis værdien ændres til falsk, kalder den den funktion, close()der defineres senere.

Tilføj Hamoni Sync

På dette vejkryds skal vi tilføje Hamoni Sync. Det bruges til at synkronisere applikationstilstanden og håndterer konfliktløsning for at undgå, at en bruger tilsidesætter en anden brugers data. For at bruge Hamoni Sync skal du tilmelde dig en konto og et applikations-id. Følg disse trin for at oprette en applikation i Hamoni.

  1. Registrer og log ind på Hamoni-instrumentbrættet.
  2. Indtast dit foretrukne applikationsnavn i tekstfeltet, og klik på knappen Opret. Dette skal oprette appen og vise den i applikationslistesektionen.
  3. Klik på knappen "Vis konto-id" for at se dit konto-id.

Under scripthenvisningen til Vuetify på linje 139 skal du tilføje en henvisning til Hamoni Sync:

Så er vi nødt til at initialisere Hamoni Sync, når Vue-komponenten er monteret. Tilføj en mountedejendom under watchejendommen:

mounted: function () { let hamoni = new Hamoni("ACCOUNT_ID", "APP_ID");
 hamoni.connect().then(() => { hamoni .get("vue-table") .then(primitive => { this.listPrimitive = primitive this.desserts = [...primitive.getAll()] this.subscribeToUpdate() }).catch(error => { if (error === "Error getting state from server") { this.initialise(hamoni); } else { alert(error); } }) }).catch(alert)},

Fra koden ovenfor initialiserer vi Hamoni Sync med en konto og et applikations-id. Udskift strengpladsholderne med kontoen og applikations-id'et fra instrumentbrættet. Derefter forbindes den til Hamoni-serveren ved at ringe, hamoni.connect()hvilket giver et løfte.

Når vi er forbundet, kalder vi hamoni.get()med navnet på den stat, der er gemt i Hamoni. For at hente en stat fra Hamoni skal den være oprettet, ellers returnerer den en fejl. Det, jeg har gjort her, er at håndtere denne fejl i fangstblokken, sådan at den kalder en anden funktion til at initialisere tilstanden i Hamoni Sync.

Hvis opkaldet til at få en applikationstilstand lykkes, returnerer det et objekt, der vil blive brugt til at ændre data indeholdt i denne tilstand. Dette objekt kaldes en Sync-primitiv. Der er tre typer Sync-primitiver:

  1. Værdiprimitiv: Denne form for tilstand indeholder enkle oplysninger repræsenteret med datatyper som streng, boolsk eller tal. Det er bedst egnet til tilfælde som ulæst antal beskeder, skifter osv.
  2. Objekt Primitiv: Objekttilstand repræsenterer tilstande, der kan modelleres som et JavaScript-objekt. Et eksempel på brug kan være lagring af partituret for et spil.
  3. Liste Primitiv: Dette indeholder en liste over statsobjekter. Et statsobjekt er et JavaScript-objekt. Du kan opdatere et element baseret på dets indeks på listen.

Vi har brugt en liste primitiv til dette eksempel. Vi kalder for primitive.getAll()at få staten og videregive den til desserts. Derefter kalder det funktionen subscribeToUpdate(). Denne funktion bruges til at abonnere på tilstandsændringshændelser fra Hamoni Sync.

Tilføj følgende kode efter mountedejendommen på linje 215 :

methods: { initialise(hamoni) { hamoni.createList("vue-table", [ { name: 'Frozen Yogurt', calories: 159, fat: 6.0, carbs: 24, protein: 4.0 }, { name: 'Ice cream sandwich', calories: 237, fat: 9.0, carbs: 37, protein: 4.3 }, { name: 'Eclair', calories: 262, fat: 16.0, carbs: 23, protein: 6.0 } ]).then(primitive => { this.listPrimitive = primitive this.desserts = this.listPrimitive.getAll() this.subscribeToUpdate(); }).catch(alert) },
 subscribeToUpdate() { this.listPrimitive.onItemAdded(item => { this.desserts.push(item.value) })
 this.listPrimitive.onItemUpdated(item => { //update the item at item.index this.desserts.splice(item.index, 1, item.value); })
 this.listPrimitive.onItemDeleted(item => { //remove the item at item.index this.desserts.splice(item.index, 1); }) },
 editItem(item) { this.editedIndex = this.desserts.indexOf(item) this.editedItem = Object.assign({}, item) this.dialog = true },
 deleteItem(item) { const index = this.desserts.indexOf(item) confirm('Are you sure you want to delete this item?') && this.listPrimitive.delete(index) },
 close() { this.dialog = false setTimeout(() => { this.editedItem = Object.assign({}, this.defaultItem) this.editedIndex = -1 }, 300) },
 save() { if (this.editedIndex > -1) { this.listPrimitive.update(this.editedIndex, this.editedItem) } else { this.listPrimitive.push(this.editedItem) }
 this.close() }}

The code above defines the functions we’ve been referencing thus far.

The initialise() function creates the list primitive with name as vue-table.

The subscribeToUpdate() functions contain code to handle when an item is added, updated, or deleted from the list primitive.

The deleteItem()function removes an item from the list primitive by calling listPrimitive.delete(index) with the index of the item to delete.

The save() function calls listPrimitive.push(editedItem) to add a new item to the list primitive, and calls listPrimitive.update(editedIndex, editedItem) to update the record at a certain index.

This is all the code that’s needed to achieve our objective of a real-time editable data table. Open the index.html file in your browser and the application is ready to use!

That’s A Wrap!

Vi har bygget en realtids redigerbar datatabel i Vue.js. Hamoni Sync gør det nemt at tilføje realtidsfunktionalitet. Både Vuetify og Hamoni Sync har npm-pakker, hvis du arbejder med et build-system og bruger enkeltfilkomponenter. Du kan finde kildekoden på GitHub.

Ressourcer

  • Hamoni Sync (docs)
  • Vuetify
  • Vue CLI
  • Introduktion til Vue.js essentials