Come creare una tabella di dati modificabili in tempo reale in Vue.js

Nelle applicazioni basate sui dati, una tabella dati viene utilizzata per visualizzare i dati in un formato tabulare con la possibilità di modificare ed eliminare i record sul posto. Quando lavori con Vue, ci sono diversi componenti open source che possono essere utilizzati per aggiungere facilmente una tabella dati alla tua applicazione.

Molte applicazioni oggi hanno funzionalità in tempo reale e potresti chiederti come sincronizzare la modifica e l'eliminazione dei dati in tempo reale. Ci sono tre opzioni per questo:

  1. Usa l'API WebSocket. Questa non è una buona opzione se alcuni dei tuoi utenti utilizzano browser che non supportano ancora WebSocket.
  2. Usa una libreria che astrae queste differenze tra browser con un meccanismo di fallback, come Socket.IO, SignalR e SockJS. Con questa opzione, dovresti gestire il server che gestisce un gran numero di connessioni aperte e occuparti del ridimensionamento.
  3. Utilizzare un servizio che fornisce una libreria che fa la stessa cosa dell'opzione precedente, ma gestisce il server e si ridimensiona in modo appropriato. Questa è un'opzione preferibile per le aziende ei team che stanno adottando (o hanno adottato) l'approccio serverless.

Ti mostrerò come creare una tabella di dati modificabili in tempo reale in Vue.js utilizzando Hamoni Sync come servizio di sincronizzazione dello stato in tempo reale. L'immagine sotto mostra cosa costruiremo:

Per seguire, dovrai avere una conoscenza di base di Vue. Se non hai conoscenza di Vue, puoi leggere il mio post precedente per metterti al corrente di Vue.js. Avrai anche bisogno dei seguenti strumenti:

  1. Node.js e npm (segui il link per scaricare un programma di installazione per il tuo sistema operativo)
  2. Vue CLI per impalcare un nuovo progetto Vue. Se non lo hai, esegui npm install -g [email protected]dalla riga di comando per installarlo.

Imposta il progetto

Configureremo il progetto utilizzando la Vue CLI e un modello di Vuetify. Apri la riga di comando ed esegui il comando vue init vuetifyjs/simple realtime-datatable-vue. Ti verrà chiesto un nome e un autore, quindi accetta il valore predefinito premendo Invio per ogni prompt. Questo impalcerà un nuovo progetto Vue con un singolo index.htmlfile.

Questo file contiene riferimenti di script a Vue e Vuetify. Vuetify è un componente di Material Design per Vue.js. Ha un v-data-tablecomponente con funzionalità per l'ordinamento, la ricerca, l'impaginazione, la modifica in linea, i suggerimenti di intestazione e la selezione delle righe.

Aggiungi il componente della tabella dati

Apri il file index.htmlcon il tuo editor di testo (o IDE). Sostituisci il contenuto della riga 50 con il seguente:

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

Il codice precedente aggiunge un v-dialogcomponente per la visualizzazione di una finestra di dialogo per raccogliere dati per nuovi record o modificare un record esistente. Inoltre, aggiunge il v-data-tablequale esegue il rendering della tabella. Dobbiamo definire i dati e i metodi utilizzati da questi componenti. Dopo la riga 126 , aggiungi il seguente codice alle proprietà dei dati:

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 dessertsproprietà data conterrà i dati da visualizzare nella tabella. La editedItemproprietà conserverà i valori per il record in fase di modifica e editedIndexconterrà l'indice del record in fase di modifica.

Aggiungere le seguenti proprietà dopo la datadefinizione della proprietà, dopo la riga 189 :

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

Abbiamo aggiunto una proprietà computede watch. La computedproprietà definisce formTitlequale attribuisce al componente di dialogo un titolo basato sul valore di editedIndex. La watchproprietà osserva dialogquando il suo valore cambia. Se il valore cambia in false, chiama la funzione close()che verrà definita in seguito.

Aggiungi Hamoni Sync

A questo incrocio dobbiamo aggiungere Hamoni Sync. Viene utilizzato per sincronizzare lo stato dell'applicazione e gestisce la risoluzione dei conflitti per evitare che un utente sovrascriva i dati di un altro utente. Per utilizzare Hamoni Sync, dovrai registrarti per un account e un ID applicazione. Segui questi passaggi per creare un'applicazione in Hamoni.

  1. Registrati e accedi alla dashboard di Hamoni.
  2. Immettere il nome dell'applicazione preferita nel campo di testo e fare clic sul pulsante Crea. Questo dovrebbe creare l'app e visualizzarla nella sezione dell'elenco delle applicazioni.
  3. Fare clic sul pulsante "Mostra ID account" per visualizzare l'ID account.

Sotto il riferimento allo script di Vuetify sulla riga 139 , aggiungi un riferimento a Hamoni Sync:

Quindi dobbiamo inizializzare Hamoni Sync una volta montato il componente Vue. Aggiungi una mountedproprietà sotto la watchproprietà:

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

Dal codice sopra, inizializziamo Hamoni Sync con un account e un ID applicazione. Sostituisci i segnaposto di stringa con l'account e l'ID applicazione dal dashboard. Quindi viene collegato al server Hamoni chiamando il hamoni.connect()che restituisce una promessa.

Una volta collegati, chiamiamo hamoni.get()con il nome dello stato immagazzinato in Hamoni. Per recuperare uno stato da Hamoni, è necessario che sia stato creato, altrimenti restituirà un errore. Quello che ho fatto qui è gestire questo errore all'interno del blocco catch, in modo tale da chiamare un'altra funzione per inizializzare lo stato in Hamoni Sync.

Se la chiamata per ottenere uno stato dell'applicazione ha esito positivo, restituisce un oggetto che verrà utilizzato per modificare i dati contenuti in quello stato. Questo oggetto viene definito primitivo di sincronizzazione. Esistono tre tipi di primitive di sincronizzazione:

  1. Valore Primitivo: questo tipo di stato contiene informazioni semplici rappresentate con tipi di dati come stringa, booleano o numeri. È più adatto per casi come conteggio messaggi non letti, interruttori, ecc.
  2. Oggetto primitivo: lo stato dell'oggetto rappresenta gli stati che possono essere modellati come un oggetto JavaScript. Un esempio di utilizzo potrebbe essere la memorizzazione del punteggio di una partita.
  3. List Primitive: contiene un elenco di oggetti di stato. Un oggetto di stato è un oggetto JavaScript. Puoi aggiornare un elemento in base al suo indice nell'elenco.

Abbiamo usato una primitiva di lista per questo esempio. Chiamiamo primitive.getAll()per ottenere lo stato e passarlo a desserts. Dopodiché, chiama la funzione subscribeToUpdate(). Questa funzione verrà utilizzata per iscriversi agli eventi di cambio di stato da Hamoni Sync.

Aggiungere il codice seguente dopo la mountedproprietà alla riga 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!

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