Πώς να δημιουργήσετε έναν πίνακα επεξεργασίας δεδομένων σε πραγματικό χρόνο στο Vue.js

Σε εφαρμογές βάσει δεδομένων, ένας πίνακας δεδομένων χρησιμοποιείται για την προβολή δεδομένων σε μορφή πίνακα με δυνατότητα επεξεργασίας και διαγραφής εγγραφών στη θέση του. Όταν εργάζεστε με το Vue, υπάρχουν διαφορετικά συστατικά ανοιχτού κώδικα που μπορούν να χρησιμοποιηθούν για την εύκολη προσθήκη πίνακα δεδομένων στην εφαρμογή σας.

Πολλές εφαρμογές σήμερα διαθέτουν δυνατότητες σε πραγματικό χρόνο και ίσως αναρωτιέστε πώς μπορείτε να συγχρονίσετε την επεξεργασία και τη διαγραφή δεδομένων σε πραγματικό χρόνο. Υπάρχουν τρεις επιλογές για αυτό:

  1. Χρησιμοποιήστε το WebSocket API. Αυτή δεν είναι καλή επιλογή εάν ορισμένοι από τους χρήστες σας χρησιμοποιούν προγράμματα περιήγησης που δεν υποστηρίζουν ακόμη το WebSocket.
  2. Χρησιμοποιήστε μια βιβλιοθήκη που αφαιρεί αυτές τις διαφορές μεταξύ προγραμμάτων περιήγησης με έναν εναλλακτικό μηχανισμό, όπως Socket.IO, SignalR και SockJS. Με αυτήν την επιλογή, θα πρέπει να διαχειριστείτε το διακομιστή που χειρίζεται μεγάλο αριθμό ανοιχτών συνδέσεων και να αντιμετωπίζει την κλιμάκωση.
  3. Χρησιμοποιήστε μια υπηρεσία που παρέχει μια βιβλιοθήκη που κάνει το ίδιο πράγμα με την προηγούμενη επιλογή, αλλά διαχειρίζεται τον διακομιστή και τις κλίμακες κατάλληλα. Αυτή είναι μια προτιμώμενη επιλογή για εταιρείες και ομάδες που υιοθετούν (ή έχουν υιοθετήσει) την προσέγγιση χωρίς διακομιστές.

Θα σας δείξω πώς να δημιουργήσετε έναν πραγματικό χρόνο επεξεργάσιμο πίνακα δεδομένων στο Vue.js χρησιμοποιώντας το Hamoni Sync ως υπηρεσία συγχρονισμού κατάστασης σε πραγματικό χρόνο. Η παρακάτω εικόνα δείχνει τι θα χτίσουμε:

Για να ακολουθήσετε, θα πρέπει να έχετε βασικές γνώσεις για το Vue. Εάν δεν έχετε γνώση του Vue, μπορείτε να διαβάσετε την προηγούμενη ανάρτησή μου για να φτάσετε στην ταχύτητα με το Vue.js. Θα χρειαστείτε επίσης τα ακόλουθα εργαλεία:

  1. Node.js & npm (ακολουθήστε τον σύνδεσμο για να κατεβάσετε ένα πρόγραμμα εγκατάστασης για το λειτουργικό σας σύστημα)
  2. Vue CLI για να σκαλωσιάσει ένα νέο έργο Vue. Εάν δεν το έχετε, τρέξτε npm install -g [email protected]από τη γραμμή εντολών για να το εγκαταστήσετε.

Ρυθμίστε το έργο

Θα ρυθμίσουμε το έργο χρησιμοποιώντας το Vue CLI και ένα πρότυπο από το Vuetify. Ανοίξτε τη γραμμή εντολών και εκτελέστε την εντολή vue init vuetifyjs/simple realtime-datatable-vue. Θα σας ζητηθεί ένα όνομα και ένας συντάκτης, γι 'αυτό αποδεχτείτε την προεπιλεγμένη τιμή πατώντας enter για κάθε προτροπή. Αυτό θα σκαλωσιά ένα νέο έργο Vue με ένα μόνο index.htmlαρχείο.

Αυτό το αρχείο περιέχει αναφορές σεναρίων για Vue και Vuetify. Το Vuetify είναι ένα στοιχείο σχεδιασμού υλικών για το Vue.js. Διαθέτει ένα v-data-tableστοιχείο με χαρακτηριστικά για ταξινόμηση, αναζήτηση, σελιδοποίηση, ενσωματωμένη επεξεργασία, συμβουλές κεφαλίδας και επιλογή σειράς.

Προσθέστε το στοιχείο πίνακα δεδομένων

Ανοίξτε το αρχείο index.htmlμε το πρόγραμμα επεξεργασίας κειμένου (ή το IDE). Αντικαταστήστε το περιεχόμενο στη γραμμή 50 με τα εξής:

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

Ο παραπάνω κώδικας προσθέτει ένα v-dialogστοιχείο για την εμφάνιση ενός διαλόγου για τη συλλογή δεδομένων για νέες εγγραφές ή την επεξεργασία μιας υπάρχουσας εγγραφής. Επίσης, προσθέτει αυτό v-data-tableπου αποδίδει τον πίνακα. Πρέπει να καθορίσουμε τα δεδομένα και τις μεθόδους που χρησιμοποιούνται από αυτά τα στοιχεία. Μετά τη γραμμή 126 , προσθέστε τον ακόλουθο κώδικα στις ιδιότητες δεδομένων:

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

Η dessertsιδιότητα δεδομένων θα κρατήσει τα δεδομένα που θα εμφανίζονται στον πίνακα. Η editedItemιδιότητα θα διατηρεί τιμές για την εγγραφή που θα επεξεργαστεί και editedIndexθα διατηρήσει το ευρετήριο της εγγραφής που θα επεξεργαστεί.

Προσθέστε τις ακόλουθες ιδιότητες μετά τον dataορισμό της ιδιότητας, μετά τη γραμμή 189 :

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

Προσθέσαμε ένα computedκαι watchιδιοκτησία. Η computedιδιότητα καθορίζει το formTitleοποίο δίνει στον τίτλο το στοιχείο διαλόγου με βάση την τιμή του editedIndex. Η watchιδιότητα παρακολουθεί dialogπότε αλλάζει η τιμή της. Εάν η τιμή αλλάξει σε false, καλεί τη συνάρτηση close()που θα καθοριστεί αργότερα.

Προσθήκη συγχρονισμού Hamoni

Σε αυτήν τη διασταύρωση πρέπει να προσθέσουμε το Hamoni Sync. Χρησιμοποιείται για τον συγχρονισμό της κατάστασης της εφαρμογής και χειρίζεται την επίλυση διενέξεων για να αποφευχθεί η παράκαμψη ενός χρήστη από τα δεδομένα ενός άλλου χρήστη. Για να χρησιμοποιήσετε τον συγχρονισμό Hamoni, θα πρέπει να εγγραφείτε για λογαριασμό και αναγνωριστικό εφαρμογής. Ακολουθήστε αυτά τα βήματα για να δημιουργήσετε μια εφαρμογή στο Hamoni.

  1. Εγγραφείτε και συνδεθείτε στον πίνακα ελέγχου Hamoni.
  2. Εισαγάγετε το όνομα εφαρμογής που προτιμάτε στο πεδίο κειμένου και κάντε κλικ στο κουμπί δημιουργίας. Αυτό θα πρέπει να δημιουργήσει την εφαρμογή και να την εμφανίσει στην ενότητα της λίστας εφαρμογών.
  3. Κάντε κλικ στο κουμπί "Εμφάνιση αναγνωριστικού λογαριασμού" για να δείτε το αναγνωριστικό λογαριασμού σας.

Κάτω από την αναφορά σεναρίου στο Vuetify στη γραμμή 139 , προσθέστε μια αναφορά στο Hamoni Sync:

Τότε πρέπει να αρχικοποιήσουμε το Hamoni Sync μόλις τοποθετηθεί το στοιχείο Vue. Προσθέστε μια mountedιδιότητα κάτω από την watchιδιότητα:

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

Από τον παραπάνω κωδικό, αρχικοποιούμε το Hamoni Sync με λογαριασμό και αναγνωριστικό εφαρμογής. Αντικαταστήστε τα σύμβολα κράτησης θέσης συμβολοσειράς με τον λογαριασμό και το αναγνωριστικό εφαρμογής από τον πίνακα ελέγχου. Στη συνέχεια, συνδέεται με τον διακομιστή Hamoni με κλήση hamoni.connect()που επιστρέφει μια υπόσχεση.

Μόλις συνδεθεί, καλούμε hamoni.get()με το όνομα του κράτους που είναι αποθηκευμένο στο Hamoni. Για να ανακτήσετε μια κατάσταση από το Hamoni, πρέπει να έχει δημιουργηθεί, διαφορετικά θα επιστρέψει ένα σφάλμα. Αυτό που έχω κάνει εδώ είναι να χειριστώ αυτό το σφάλμα στο μπλοκ catch, έτσι ώστε να καλεί άλλη συνάρτηση για την αρχικοποίηση της κατάστασης στο Hamoni Sync.

Εάν η κλήση για λήψη μιας κατάστασης εφαρμογής επιτύχει, επιστρέφει ένα αντικείμενο που θα χρησιμοποιηθεί για την τροποποίηση δεδομένων που περιέχονται σε αυτήν την κατάσταση. Αυτό το αντικείμενο αναφέρεται ως πρωτόγονος συγχρονισμού. Υπάρχουν τρεις τύποι πρωτόγονων Sync:

  1. Value Primitive: Αυτό το είδος κατάστασης περιέχει απλές πληροφορίες που αντιπροσωπεύονται με τύπους δεδομένων όπως συμβολοσειρά, boolean ή αριθμούς. Ταιριάζει καλύτερα σε περιπτώσεις όπως αδιάβαστο πλήθος μηνυμάτων, εναλλαγές κ.λπ.
  2. Object Primitive: Η κατάσταση αντικειμένου αντιπροσωπεύει καταστάσεις που μπορούν να μοντελοποιηθούν ως αντικείμενο JavaScript. Ένα παράδειγμα χρήσης θα μπορούσε να είναι η αποθήκευση του σκορ ενός παιχνιδιού.
  3. Λίστα πρωτόγονων: Περιλαμβάνει μια λίστα αντικειμένων κατάστασης. Ένα αντικείμενο κατάστασης είναι ένα αντικείμενο JavaScript. Μπορείτε να ενημερώσετε ένα στοιχείο βάσει του ευρετηρίου του στη λίστα.

Χρησιμοποιήσαμε μια πρωτόγονη λίστα για αυτό το παράδειγμα. Καλούμε primitive.getAll()να πάρουμε το κράτος και να το μεταβιβάσουμε desserts. Μετά από αυτό, καλεί τη συνάρτηση subscribeToUpdate(). Αυτή η συνάρτηση θα χρησιμοποιηθεί για εγγραφή σε συμβάντα αλλαγής κατάστασης από το Hamoni Sync.

Προσθέστε τον ακόλουθο κωδικό μετά την mountedιδιότητα στη γραμμή 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!

Έχουμε δημιουργήσει έναν πίνακα επεξεργασίας δεδομένων σε πραγματικό χρόνο στο Vue.js. Το Hamoni Sync διευκολύνει την προσθήκη λειτουργικότητας σε πραγματικό χρόνο. Τόσο το Vuetify όσο και το Hamoni Sync έχουν πακέτα npm εάν εργάζεστε με ένα σύστημα build και χρησιμοποιείτε στοιχεία ενός αρχείου. Μπορείτε να βρείτε τον πηγαίο κώδικα στο GitHub.

Πόροι

  • Συγχρονισμός Hamoni (έγγραφα)
  • Vuetify
  • Vue CLI
  • Εισαγωγή στα βασικά στοιχεία του Vue.js