Kako izraditi tablicu podataka koja se može uređivati ​​u stvarnom vremenu u Vue.js-u

Programiranje

U aplikacijama koje se upravljaju podacima, tablica podataka koristi se za prikaz podataka u tabličnom obliku s mogućnošću uređivanja i brisanja zapisa na mjestu. Kada radite s Vueom, postoje različite komponente otvorenog koda koje se mogu koristiti za jednostavno dodavanje tablice podataka u vašu aplikaciju.

Mnoge aplikacije danas imaju značajke u stvarnom vremenu i možda ćete se zapitati kako možete sinkronizirati uređivanje i brisanje podataka u stvarnom vremenu. Postoje tri mogućnosti za to:

  1. Koristite WebSocket API. Ovo nije dobra opcija ako neki od vaših korisnika koriste preglednike koji još ne podržavaju WebSocket.
  2. Upotrijebite knjižnicu koja apstrahira ove razlike u različitim preglednicima pomoću zamjenskog mehanizma, poput Socket.IO, SignalR i SockJS. Pomoću ove opcije morali biste upravljati poslužiteljem koji obrađuje velik broj otvorenih veza i baviti se skaliranjem.
  3. Upotrijebite uslugu koja nudi knjižnicu koja radi isto što i prethodna opcija, ali upravlja poslužiteljem i prikladno skalira. Ovo je poželjnija opcija za tvrtke i timove koji usvajaju (ili su usvojili) pristup bez poslužitelja.

Pokazat ću vam kako izraditi tablicu podataka koja se može uređivati ​​u stvarnom vremenu u Vue.js koristeći Hamoni Sync kao uslugu sinkronizacije stanja u stvarnom vremenu. Slika ispod prikazuje što ćemo graditi:

Da biste nastavili dalje, morat ćete imati neko osnovno znanje o Vueu. Ako nemate znanja o Vueu, možete pročitati moj prethodni post da biste ubrzali s Vue.js. Također će vam trebati sljedeći alati:

  1. Node.js & npm (slijedite vezu za preuzimanje instalacijskog programa za vaš OS)
  2. Vue CLI za postavljanje novog Vue projekta. Ako ga nemate, pokrenite ga npm install -g [email protected]iz naredbenog retka da biste ga instalirali.

Postavite projekt

Projekt ćemo postaviti pomoću Vue CLI-a i predloška iz Vuetify-a. Otvorite naredbeni redak i pokrenite naredbu vue init vuetifyjs/simple realtime-datatable-vue. Upitat ćete za ime i autora, pa prihvatite zadanu vrijednost pritiskom na tipku Enter za svaki upit. Ovo će skenirati novi Vue projekt s jednom index.htmldatotekom.

Ova datoteka sadrži reference skripte na Vue i Vuetify. Vuetify je komponenta materijalnog dizajna za Vue.js. Ima v-data-tablekomponentu sa značajkama za sortiranje, pretraživanje, paginiranje, uređivanje u retku, opise alata za zaglavlje i odabir redaka.

Dodajte komponentu tablice podataka

Otvorite datoteku index.htmlpomoću uređivača teksta (ili IDE). Sadržaj u retku 50 zamijenite sljedećim:

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

Gornji kod dodaje v-dialogkomponentu za prikaz dijaloškog okvira za prikupljanje podataka za nove zapise ili uređivanje postojećeg zapisa. Također, dodaje ono v-data-tablešto prikazuje tablicu. Moramo definirati podatke i metode koje koriste ove komponente. Nakon retka 126 , dodajte sljedeći kod svojstvima podataka:

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

dessertsImovine Podaci održat će se podaci koji će biti prikazani u tablici. editedItemNekretnina održat će se vrijednosti za zapisnik koji se uređuje, a editedIndexodržat će indeks zapisnik koji se uređuje.

Dodajte sljedeća svojstva nakon datadefinicije svojstva, nakon retka 189 :

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

Dodali smo a computedi watchsvojstvo. U computedvlasništva definira formTitlešto daje dijaloškom Komponenta A naslov se temelji na vrijednosti editedIndex. watchNekretnina gleda dialogkada se mijenja njegova vrijednost. Ako se vrijednost promijeni u false, poziva funkciju close()koja će biti definirana kasnije.

Dodajte Hamoni Sync

Na ovom spoju moramo dodati Hamoni Sync. Koristi se za sinkronizaciju stanja aplikacije i rukuje rješavanjem sukoba kako bi se izbjeglo da jedan korisnik nadjača podatke drugog korisnika. Da biste koristili Hamoni Sync, morat ćete se prijaviti za račun i ID aplikacije. Slijedite ove korake za stvaranje aplikacije u Hamoniju.

  1. Registrirajte se i prijavite se na nadzornu ploču Hamoni.
  2. Unesite željeno ime aplikacije u tekstualno polje i kliknite gumb Stvori. To bi trebalo stvoriti aplikaciju i prikazati je u odjeljku s popisom aplikacija.
  3. Kliknite gumb "Prikaži ID računa" da biste vidjeli ID svog računa.

Ispod reference skripte na Vuetify na retku 139 , dodajte referencu na Hamoni Sync:

Zatim moramo inicijalizirati Hamoni Sync nakon što se Vue komponenta montira. Dodajte mountedsvojstvo ispod watchnekretnine:

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

Iz gornjeg koda inicijaliziramo Hamoni Sync pomoću računa i ID-a aplikacije. Zamijenite rezervirana mjesta niza s računom i ID-om aplikacije na nadzornoj ploči. Tada se povezuje s poslužiteljem Hamoni pozivom hamoni.connect()koji vraća obećanje.

Jednom kad se povežemo, zovemo hamoni.get()s imenom države pohranjene u Hamoniju. Da bi se država dohvatila iz Hamonija, mora biti stvorena, u suprotnom će se vratiti pogreška. Ono što sam ovdje učinio je rukovanje ovom pogreškom unutar bloka catch, tako da poziva drugu funkciju za inicijalizaciju stanja u Hamoni Sync.

Ako poziv za dobivanje stanja aplikacije uspije, vraća objekt koji će se koristiti za izmjenu podataka sadržanih u tom stanju. Ovaj se objekt naziva primitivom Sync. Postoje tri vrste primitiva Sync:

  1. Primitiv vrijednosti: Ova vrsta stanja sadrži jednostavne informacije predstavljene s tipovima podataka poput niza, logičkih vrijednosti ili brojeva. Najprikladniji je za slučajeve kao što su broj nepročitanih poruka, prebacivanje itd.
  2. Primitiv objekta: Stanje objekta predstavlja stanja koja se mogu modelirati kao JavaScript objekt. Primjer upotrebe može biti spremanje rezultata igre.
  3. Primitivni popis: Sadrži popis državnih objekata. Objekt stanja je JavaScript objekt. Stavku možete ažurirati na temelju indeksa na popisu.

Za ovaj smo primjer upotrijebili primitiv popisa. Pozivamo primitive.getAll()da dobijemo državu i proslijedimo je desserts. Nakon toga poziva funkciju subscribeToUpdate(). Ova će se funkcija koristiti za pretplatu na događaje promjene stanja iz usluge Hamoni Sync.

Dodajte sljedeći kod nakon mountedsvojstva u retku 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