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

In datengesteuerten Anwendungen wird eine Datentabelle verwendet, um Daten in einem tabellarischen Format anzuzeigen und Datensätze an Ort und Stelle zu bearbeiten und zu löschen. Arbeiten mit Sehen es gibt verschiedene Open-Source-Komponenten das verwendet werden kann, um Ihrer Anwendung einfach eine Datentabelle hinzuzufügen. Viele Anwendungen verfügen heute über Echtzeitfunktionen, und Sie fragen sich vielleicht, wie ich das Bearbeiten und Löschen von Daten in Echtzeit synchronisieren kann? Es gibt 3 Optionen, die Sie dafür übernehmen können. Sie sind:

  1. Verwenden 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 abstrahiert. Bibliotheken wie z Socket.IO, SignalRund SockeJS. Bei 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 tut wie die vorherige Option, aber den Server verwaltet und entsprechend skaliert. Dies ist eine bevorzugte Option für Unternehmen und Teams, die den serverlosen Ansatz übernehmen (oder übernommen haben).

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

realtime-datatable-vue.gif

Um mitzumachen, benötigen Sie einige Grundkenntnisse in Vue. Wenn Sie keine Ahnung von Vue haben, können Sie meine lesen vorherigen Post um sich mit Vue.js vertraut zu machen. Sie benötigen außerdem die folgenden Werkzeuge:

  1. Node.js und npm (folgen Sie dem Link, um ein Installationsprogramm für Ihr Betriebssystem herunterzuladen)

  2. CLI anzeigen ein neues Vue-Projekt zu rüsten. Wenn Sie dies nicht haben, laufen Sie npm install -g vue-cli@2.9.6 von der Befehlszeile aus, um es zu installieren.

Wir richten das Projekt mit Vue CLI und a Schablone aus Vuetify. Ö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 den Standardwert, indem Sie bei jeder Eingabeaufforderung die Eingabetaste drücken. Dies wird ein neues Vue-Projekt mit einer Single rüsten index.html Datei. Diese Datei enthält Skriptverweise auf Vue und Vuetify. Vuetify ist ein Material Design Komponente für Vue.js. Es hat ein v-data-table Komponente mit Funktionen zum Sortieren, Suchen, Paginieren, Inline-Bearbeiten, Kopfzeilen-QuickInfos und Zeilenauswahl.

Öffne die Datei index.html mit Ihrem Texteditor (oder IDE). Ersetzen Sie den Inhalt online 50 mit den folgenden:

<div>
    <v-dialog v-model="dialog" max-width="500px">
    <v-btn slot="activator" color="primary" dark class="mb-2">New Item</v-btn>
    <v-card>
        <v-card-title>
        <span class="headline">{{ formTitle }}</span>
        </v-card-title>
        <v-card-text>
        <v-container grid-list-md>
            <v-layout wrap>
            <v-flex xs12 sm6 md4>
                <v-text-field v-model="editedItem.name" label="Dessert name"></v-text-field>
            </v-flex>
            <v-flex xs12 sm6 md4>
                <v-text-field v-model="editedItem.calories" label="Calories"></v-text-field>
            </v-flex>
            <v-flex xs12 sm6 md4>
                <v-text-field v-model="editedItem.fat" label="Fat (g)"></v-text-field>
            </v-flex>
            <v-flex xs12 sm6 md4>
                <v-text-field v-model="editedItem.carbs" label="Carbs (g)"></v-text-field>
            </v-flex>
            <v-flex xs12 sm6 md4>
                <v-text-field v-model="editedItem.protein" label="Protein (g)"></v-text-field>
            </v-flex>
            </v-layout>
        </v-container>
        </v-card-text>
        <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="blue darken-1" flat @click.native="close">Cancel</v-btn>
        <v-btn color="blue darken-1" flat @click.native="save">Save</v-btn>
        </v-card-actions>
    </v-card>
    </v-dialog>
    <v-data-table :headers="headers" :items="desserts" hide-actions class="elevation-1">
    <template slot="items" slot-scope="props">
        <td>{{ props.item.name }}</td>
        <td class="text-xs-right">{{ props.item.calories }}</td>
        <td class="text-xs-right">{{ props.item.fat }}</td>
        <td class="text-xs-right">{{ props.item.carbs }}</td>
        <td class="text-xs-right">{{ props.item.protein }}</td>
        <td class="justify-center layout px-0">
        <v-btn icon class="mx-0" @click="editItem(props.item)">
            <v-icon color="teal">edit</v-icon>
        </v-btn>
        <v-btn icon class="mx-0" @click="deleteItem(props.item)">
            <v-icon color="pink">delete</v-icon>
        </v-btn>
        </td>
    </template>
    </v-data-table>
</div>

Der obige Code fügt a hinzu v-dialog Komponente zum Anzeigen eines Dialogfelds zum Sammeln von Daten für neue Datensätze oder zum Bearbeiten eines vorhandenen Datensatzes. Auch die v-data-table die die Tabelle rendert. Wir müssen die Daten und Methoden definieren, die von diesen Komponenten verwendet werden. Nach Zeile 126fügen Sie 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

Das desserts Die Eigenschaft data enthält die Daten, die in der Tabelle angezeigt werden sollen. Das editedItem -Eigenschaft enthält Werte für den bearbeiteten Datensatz und die editedIndex enthält den Index des bearbeiteten Datensatzes.

Fügen Sie die folgenden Eigenschaften nach dem hinzu data Eigenschaftsdefinition, nach Zeile 189:

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

watch: {
    dialog(val) {
        val || this.close()
    }
},

Wir haben ein hinzugefügt computed und watch Eigentum. Das computed Eigentum definiert formTitle was der Dialogkomponente einen Titel gibt, der auf dem Wert von basiert editedIndex. Das watch Eigentum Uhren dialog denn wenn sich sein Wert ändert. Wenn sich der Wert auf false ändert, wird die Funktion aufgerufen close() die später definiert werden.

An dieser Kreuzung müssen wir Hamoni Sync hinzufügen. Es wird verwendet, um den Anwendungsstatus zu synchronisieren, 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 bei Hamoni an Armaturenbrett.
  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 Anwendungsliste angezeigt werden.
  3. Erweitere das Konto-ID Karte, um Ihre Konto-ID zu erhalten

Hamoni-Dashboard

Unter dem Skriptverweis auf Vuetify online 139fügen Sie einen Verweis auf Hamoni Sync hinzu

<script src="

Dann müssen wir Hamoni Sync initialisieren, sobald die Vue-Komponente gemountet ist. Füge hinzu ein mounted Eigentum unter dem watch Eigentum

mounted: function () {
  const accountId = "YOUR_ACCOUNT_ID";
  const appId = "YOUR_APP_ID";
  let hamoni;

  fetch("https://api.sync.hamoni.tech/v1/token", {
    method: "POST",
    headers: {
    "Content-Type": "application/json; charset=utf-8"
    },
    body: JSON.stringify({ accountId, appId })
  }).then(token => {
    hamoni = new Hamoni(token);

    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 Token aus der Token-API von Sync. Sie benötigen ein Konto und eine Anwendungs-ID, um ein Authentifizierungstoken von der API zu erhalten. Ersetzen Sie die Zeichenfolgenplatzhalter durch die Konto- und Anwendungs-ID aus dem Dashboard. Es wird empfohlen, den Synchronisierungstokenserver von Ihrem Back-End aus aufzurufen und das Antworttoken an die Clientanwendung zu senden. Für dieses Beispiel habe ich sie alle an einem Ort aufbewahrt.

Dann wird es per Anruf mit dem Hamoni-Server verbunden hamoni.connect() die ein Versprechen zurückgibt. Einmal verbunden, rufen wir an hamoni.get() mit dem in Hamoni gespeicherten Namen des Staates. Um einen Status von Hamoni abzurufen, muss er erstellt worden sein, andernfalls wird ein Fehler zurückgegeben. Was ich hier getan habe, ist diesen Fehler innerhalb des catch-Blocks zu behandeln, sodass er eine andere Funktion aufruft, um den Status in Hamoni Sync zu initialisieren. Wenn der Aufruf zum Abrufen eines Anwendungsstatus erfolgreich ist, gibt er ein Objekt zurück, das verwendet wird, um Daten zu ändern, die in diesem Status enthalten sind. Dieses Objekt wird als Sync-Grundelement bezeichnet. Es gibt 3 Arten von Sync-Primitiven:

  1. Wert primitiv: Diese Art von Status enthält einfache Informationen, die durch Datentypen wie String, Boolean oder Zahlen dargestellt werden. Es eignet sich am besten für Fälle wie die Anzahl ungelesener Nachrichten, Umschalten usw.

  2. Objekt primitiv: Der Objektstatus stellt Zustände dar, die als JavaScript-Objekt modelliert werden können. Eine beispielhafte Verwendung könnte das Speichern des Punktestands eines Spiels sein.

  3. Primitiv auflisten: Enthält eine Liste von Zustandsobjekten. Ein Zustandsobjekt ist ein JavaScript-Objekt. Sie können ein Element basierend auf seinem Index in der Liste aktualisieren.

Wir haben für dieses Beispiel ein Listenelement verwendet. Wir nennen primitive.getAll() um den Staat zu bekommen und 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 den folgenden Code nach dem hinzu mounted Eigentum online 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 => {
      
      this.desserts.splice(item.index, 1, item.value);
    })

    this.listPrimitive.onItemRemoved(item => {
      
      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.remove(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.add(this.editedItem)
    }

    this.close()
  }
}

Der obige Code definiert die Funktionen, auf die wir bisher verwiesen haben. Das initialise() Die Funktion erstellt das Listenelement mit dem Namen as vue-table. Das subscribeToUpdate() Funktionen enthalten Code, der verarbeitet wird, wenn ein Element hinzugefügt, aktualisiert oder aus dem Listenelement gelöscht wird. Das deleteItem() Funktion entfernt ein Element aus dem Listenelement durch Aufrufen listPrimitive.remove(index) mit dem Index des zu entfernenden Elements. Das save() Funktionsaufrufe listPrimitive.add(editedItem) um ein neues Element zum Listenelement hinzuzufügen, und listPrimitive.update(editedIndex, editedItem) um den Datensatz an einem bestimmten Index zu aktualisieren.

Dies ist der gesamte Code, der benötigt wird, um unser Ziel einer in Echtzeit bearbeitbaren Datentabelle zu erreichen. Öffne das index.html Datei in Ihrem Browser und die Anwendung ist einsatzbereit!

realtime-datatable-vue.gif

Wir haben in Vue.js eine in Echtzeit bearbeitbare Datentabelle erstellt. Hamoni Sync macht es einfach, Echtzeitfunktionen hinzuzufügen. Beide Vuetify und Harmony-Sync Haben Sie npm-Pakete, wenn Sie mit einem Build-System arbeiten und einzelne Dateikomponenten verwenden. Den Quellcode finden Sie unter GitHub.

Similar Posts

Leave a Reply

Your email address will not be published.