So erstellen Sie eine in Echtzeit bearbeitbare Datentabelle in Vue.js

In datengesteuerten Anwendungen wird eine Datentabelle verwendet, um Daten in einem Tabellenformat anzuzeigen und vorhandene Datensätze zu bearbeiten und zu löschen. Wenn Sie mit Vue arbeiten, gibt es verschiedene Open-Source-Komponenten, mit denen Sie Ihrer Anwendung auf einfache Weise eine Datentabelle hinzufügen können.

Viele Anwendungen verfügen heute über Echtzeitfunktionen, und Sie fragen sich möglicherweise, wie Sie das Bearbeiten und Löschen von Daten in Echtzeit synchronisieren können. Hierfür gibt es drei Möglichkeiten:

  1. Verwenden Sie die WebSocket-API. Dies ist keine gute Option, wenn einige Ihrer Benutzer Browser verwenden, die WebSocket noch nicht unterstützen.
  2. Verwenden Sie eine Bibliothek, die diese browserübergreifenden Unterschiede mit einem Fallback-Mechanismus wie Socket.IO, SignalR und SockJS abstrahiert. Mit dieser Option müssten Sie den Server verwalten, der eine große Anzahl offener Verbindungen verarbeitet, und sich mit der Skalierung befassen.
  3. Verwenden Sie einen Dienst, der eine Bibliothek bereitstellt, die dasselbe wie die vorherige Option tut, jedoch den Server verwaltet und entsprechend skaliert. Dies ist eine bevorzugte Option für Unternehmen und Teams, die den serverlosen Ansatz anwenden (oder übernommen haben).

Ich zeige Ihnen, wie Sie in Vue.js eine bearbeitbare Echtzeit-Datentabelle mit Hamoni Sync als Echtzeit-Status-Synchronisierungsdienst erstellen. Das Bild unten zeigt, was wir bauen werden:

Um mitmachen zu können, müssen Sie über Grundkenntnisse in Vue verfügen. Wenn Sie keine Kenntnisse über Vue haben, können Sie meinen vorherigen Beitrag lesen, um sich mit Vue.js vertraut zu machen. Sie benötigen außerdem die folgenden Tools:

  1. Node.js & npm (folgen Sie dem Link, um ein Installationsprogramm für Ihr Betriebssystem herunterzuladen)
  2. Vue CLI zum Gerüst eines neuen Vue-Projekts. Wenn Sie dies nicht haben, führen Sie es npm install -g [email protected]über die Befehlszeile aus, um es zu installieren.

Richten Sie das Projekt ein

Wir richten das Projekt mithilfe der Vue-CLI und einer Vorlage von Vuetify ein. Öffnen Sie die Befehlszeile und führen Sie den Befehl aus vue init vuetifyjs/simple realtime-datatable-vue. Sie werden nach einem Namen und einem Autor gefragt. Akzeptieren Sie daher den Standardwert, indem Sie für jede Eingabeaufforderung die Eingabetaste drücken. Dadurch wird ein neues Vue-Projekt mit einer einzigen index.htmlDatei erstellt.

Diese Datei enthält Skriptverweise auf Vue und Vuetify. Vuetify ist eine Material Design-Komponente für Vue.js. Es verfügt über eine v-data-tableKomponente mit Funktionen zum Sortieren, Suchen, Paginieren, Inline-Bearbeiten, Kopfzeilen-Tooltips und Zeilenauswahl.

Fügen Sie die Datentabellenkomponente hinzu

Öffnen Sie die Datei index.htmlmit Ihrem Texteditor (oder Ihrer IDE). Ersetzen Sie den Inhalt in Zeile 50 durch Folgendes:

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

Der obige Code fügt eine v-dialogKomponente zum Anzeigen eines Dialogfelds hinzu, um Daten für neue Datensätze zu sammeln oder einen vorhandenen Datensatz zu bearbeiten. Außerdem wird v-data-tabledas hinzugefügt, was die Tabelle rendert. Wir müssen die Daten und Methoden definieren, die von diesen Komponenten verwendet werden. Fügen Sie nach Zeile 126 den Dateneigenschaften den folgenden Code hinzu:

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

Die dessertsDateneigenschaft enthält die Daten, die in der Tabelle angezeigt werden sollen. Die editedItemEigenschaft enthält Werte für den zu bearbeitenden Datensatz und editedIndexden Index des zu bearbeitenden Datensatzes.

Fügen Sie nach der dataEigenschaftsdefinition nach Zeile 189 die folgenden Eigenschaften hinzu :

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

Wir haben ein computedund watchEigentum hinzugefügt . Die computedEigenschaft definiert, formTitlewelche der Dialogkomponente einen Titel basierend auf dem Wert von gibt editedIndex. Die watchEigenschaft überwacht, dialogwann sich ihr Wert ändert. Wenn sich der Wert in false ändert, close()wird die später definierte Funktion aufgerufen.

Hamoni Sync hinzufügen

An dieser Kreuzung müssen wir Hamoni Sync hinzufügen. Es wird zum Synchronisieren des Anwendungsstatus verwendet und behandelt die Konfliktlösung, um zu vermeiden, dass ein Benutzer die Daten eines anderen Benutzers überschreibt. Um Hamoni Sync verwenden zu können, müssen Sie sich für ein Konto und eine Anwendungs-ID anmelden. Befolgen Sie diese Schritte, um eine Anwendung in Hamoni zu erstellen.

  1. Registrieren Sie sich und melden Sie sich beim Hamoni-Dashboard an.
  2. Geben Sie Ihren bevorzugten Anwendungsnamen in das Textfeld ein und klicken Sie auf die Schaltfläche Erstellen. Dadurch sollte die App erstellt und im Abschnitt mit der Anwendungsliste angezeigt werden.
  3. Klicken Sie auf die Schaltfläche "Konto-ID anzeigen", um Ihre Konto-ID anzuzeigen.

Fügen Sie unter dem Skriptverweis auf Vuetify in Zeile 139 einen Verweis auf Hamoni Sync hinzu:

Dann müssen wir Hamoni Sync initialisieren, sobald die Vue-Komponente bereitgestellt ist. Fügen Sie eine mountedEigenschaft unterhalb der watchEigenschaft hinzu:

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

Aus dem obigen Code initialisieren wir Hamoni Sync mit einem Konto und einer Anwendungs-ID. Ersetzen Sie die Zeichenfolgenplatzhalter durch die Konto- und Anwendungs-ID aus dem Dashboard. Dann wird es durch einen Anruf mit dem Hamoni-Server verbunden, der hamoni.connect()ein Versprechen zurückgibt.

Sobald die Verbindung hergestellt ist, rufen wir hamoni.get()mit dem Namen des in Hamoni gespeicherten Staates an. Um einen Status von Hamoni abzurufen, muss er erstellt worden sein, sonst wird ein Fehler zurückgegeben. Was ich hier getan habe, ist, diesen Fehler innerhalb des catch-Blocks so zu behandeln, dass eine andere Funktion aufgerufen wird, um den Status in Hamoni Sync zu initialisieren.

Wenn der Aufruf zum Abrufen eines Anwendungsstatus erfolgreich ist, wird ein Objekt zurückgegeben, mit dem die in diesem Status enthaltenen Daten geändert werden. Dieses Objekt wird als Sync-Grundelement bezeichnet. Es gibt drei Arten von Sync-Grundelementen:

  1. Wertprimitiv: Diese Art von Status enthält einfache Informationen, die mit Datentypen wie Zeichenfolge, Boolescher Wert oder Zahlen dargestellt werden. Es ist am besten für Fälle wie ungelesene Nachrichtenanzahl, Umschalten usw. geeignet.
  2. Objektprimitiv: Der Objektstatus repräsentiert Zustände, die als JavaScript-Objekt modelliert werden können. Eine beispielhafte Verwendung könnte das Speichern der Punktzahl eines Spiels sein.
  3. Listenprimitiv: Enthält eine Liste von Statusobjekten. Ein Statusobjekt ist ein JavaScript-Objekt. Sie können ein Element basierend auf seinem Index in der Liste aktualisieren.

Für dieses Beispiel haben wir ein Listenprimitiv verwendet. Wir rufen primitive.getAll()an, um den Staat zu bekommen und an ihn weiterzugeben desserts. Danach ruft es die Funktion auf subscribeToUpdate(). Diese Funktion wird verwendet, um Statusänderungsereignisse von Hamoni Sync zu abonnieren.

Fügen Sie nach der mountedEigenschaft in Zeile 215 den folgenden Code hinzu :

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!

We’ve built a real-time editable data table in Vue.js. Hamoni Sync makes it easy to add real-time functionality. Both Vuetify and Hamoni Sync have npm packages if you’re working with a build system and using single file components. You can find the source code on GitHub.

Resources

  • Hamoni Sync (docs)
  • Vuetify
  • Vue CLI
  • Introduction to Vue.js essentials