Comment créer une table de données modifiable en temps réel dans Vue.js

Dans les applications basées sur les données, une table de données est utilisée pour afficher les données dans un format tabulaire avec la possibilité de modifier et de supprimer des enregistrements sur place. Lorsque vous travaillez avec Vue, il existe différents composants open-source qui peuvent être utilisés pour ajouter facilement une table de données à votre application.

De nombreuses applications ont aujourd'hui des fonctionnalités en temps réel et vous vous demandez peut-être comment synchroniser l'édition et la suppression de données en temps réel. Il existe trois options pour cela:

  1. Utilisez l'API WebSocket. Ce n'est pas une bonne option si certains de vos utilisateurs utilisent des navigateurs qui ne prennent pas encore en charge WebSocket.
  2. Utilisez une bibliothèque qui résume ces différences entre navigateurs avec un mécanisme de secours, tel que Socket.IO, SignalR et SockJS. Avec cette option, vous devrez gérer le serveur qui gère un grand nombre de connexions ouvertes et gérer la mise à l'échelle.
  3. Utilisez un service qui fournit une bibliothèque qui fait la même chose que l'option précédente, mais gère le serveur et évolue de manière appropriée. C'est une option préférable pour les entreprises et les équipes qui adoptent (ou ont adopté) l'approche sans serveur.

Je vais vous montrer comment créer une table de données modifiable en temps réel dans Vue.js en utilisant Hamoni Sync comme service de synchronisation d'état en temps réel. L'image ci-dessous montre ce que nous allons construire:

Pour suivre, vous devrez avoir des connaissances de base sur Vue. Si vous n'avez aucune connaissance de Vue, vous pouvez lire mon article précédent pour vous familiariser avec Vue.js. Vous aurez également besoin des outils suivants:

  1. Node.js & npm (suivez le lien pour télécharger un programme d'installation pour votre système d'exploitation)
  2. Vue CLI pour échafauder un nouveau projet Vue. Si vous ne l'avez pas, exécutez à npm install -g [email protected]partir de la ligne de commande pour l'installer.

Mettre en place le projet

Nous allons configurer le projet à l'aide de la CLI Vue et d'un modèle de Vuetify. Ouvrez la ligne de commande et exécutez la commande vue init vuetifyjs/simple realtime-datatable-vue. On vous demandera un nom et un auteur, alors acceptez la valeur par défaut en appuyant sur Entrée pour chaque invite. Cela échafaudera un nouveau projet Vue avec un seul index.htmlfichier.

Ce fichier contient des références de script à Vue et Vuetify. Vuetify est un composant de conception de matériaux pour Vue.js. Il dispose d'un v-data-tablecomposant avec des fonctionnalités de tri, de recherche, de pagination, d'édition en ligne, d'infobulles d'en-tête et de sélection de lignes.

Ajouter le composant de table de données

Ouvrez le fichier index.htmlavec votre éditeur de texte (ou IDE). Remplacez le contenu de la ligne 50 par ce qui suit:

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

Le code ci-dessus ajoute un v-dialogcomposant pour afficher une boîte de dialogue pour collecter des données pour de nouveaux enregistrements ou modifier un enregistrement existant. En outre, il ajoute le v-data-tablequi rend la table. Nous devons définir les données et les méthodes utilisées par ces composants. Après la ligne 126 , ajoutez le code suivant aux propriétés des données:

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

La dessertspropriété data contiendra les données à afficher dans le tableau. La editedItempropriété contiendra les valeurs de l'enregistrement en cours d'édition et le editedIndexcontiendra l'index de l'enregistrement en cours d'édition.

Ajoutez les propriétés suivantes après la datadéfinition de propriété, après la ligne 189 :

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

Nous avons ajouté une propriété computedet watch. La computedpropriété définit formTitlequi donne au composant de dialogue un titre basé sur la valeur de editedIndex. La watchpropriété surveille le dialogchangement de sa valeur. Si la valeur passe à false, il appelle la fonction close()qui sera définie ultérieurement.

Ajouter Hamoni Sync

À cette jonction, nous devons ajouter Hamoni Sync. Il est utilisé pour synchroniser l'état de l'application et gère la résolution des conflits pour éviter qu'un utilisateur ne remplace les données d'un autre utilisateur. Pour utiliser Hamoni Sync, vous devrez vous inscrire pour un compte et un identifiant d'application. Suivez ces étapes pour créer une application dans Hamoni.

  1. Inscrivez-vous et connectez-vous au tableau de bord Hamoni.
  2. Entrez le nom de votre application préférée dans le champ de texte et cliquez sur le bouton Créer. Cela devrait créer l'application et l'afficher dans la section de la liste des applications.
  3. Cliquez sur le bouton «Afficher l'ID de compte» pour voir votre ID de compte.

Sous la référence de script à Vuetify à la ligne 139 , ajoutez une référence à Hamoni Sync:

Ensuite, nous devons initialiser Hamoni Sync une fois que le composant Vue est monté. Ajoutez une mountedpropriété sous la watchpropriété:

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

À partir du code ci-dessus, nous initialisons Hamoni Sync avec un compte et un ID d'application. Remplacez les espaces réservés de chaîne par le compte et l'ID d'application du tableau de bord. Ensuite, il est connecté au serveur Hamoni en appelant hamoni.connect()ce qui renvoie une promesse.

Une fois connecté, nous appelons hamoni.get()avec le nom de l'état stocké dans Hamoni. Afin de récupérer un état de Hamoni, il doit avoir été créé, sinon il renverra une erreur. Ce que j'ai fait ici, c'est gérer cette erreur dans le bloc catch, de sorte qu'il appelle une autre fonction pour initialiser l'état dans Hamoni Sync.

Si l'appel pour obtenir un état d'application réussit, il retourne un objet qui sera utilisé pour modifier les données contenues dans cet état. Cet objet est appelé primitive Sync. Il existe trois types de primitives de synchronisation:

  1. Valeur primitive: ce type d'état contient des informations simples représentées avec des types de données tels que chaîne, booléen ou nombres. Il convient mieux aux cas tels que le nombre de messages non lus, les basculements, etc.
  2. Object Primitive: l'état de l'objet représente les états qui peuvent être modélisés en tant qu'objet JavaScript. Un exemple d'utilisation pourrait être le stockage du score d'un jeu.
  3. List Primitive: contient une liste d'objets d'état. Un objet d'état est un objet JavaScript. Vous pouvez mettre à jour un élément en fonction de son index dans la liste.

Nous avons utilisé une primitive de liste pour cet exemple. Nous appelons primitive.getAll()pour obtenir l'état et le transmettre desserts. Après cela, il appelle la fonction subscribeToUpdate(). Cette fonction sera utilisée pour s'abonner aux événements de changement d'état de Hamoni Sync.

Ajoutez le code suivant après la mountedpropriété à la ligne 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() }}

Le code ci-dessus définit les fonctions que nous avons référencées jusqu'à présent.

La initialise()fonction crée la primitive de liste avec le nom comme vue-table.

Les subscribeToUpdate()fonctions contiennent du code à gérer lorsqu'un élément est ajouté, mis à jour ou supprimé de la primitive de liste.

La deleteItem()fonction supprime un élément de la primitive de liste en appelant listPrimitive.delete(index)avec l'index de l'élément à supprimer.

La save()fonction appelle listPrimitive.push(editedItem)pour ajouter un nouvel élément à la primitive de liste et listPrimitive.update(editedIndex, editedItem)pour mettre à jour l'enregistrement à un certain index.

C'est tout le code nécessaire pour atteindre notre objectif d'une table de données modifiable en temps réel. Ouvrez le index.htmlfichier dans votre navigateur et l'application est prête à être utilisée!

C'est une enveloppe!

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