Kā izveidot reāllaika rediģējamu datu tabulu vietnē Vue.js

Datu lietojumprogrammās datu tabula tiek izmantota, lai parādītu datus tabulas formātā ar iespēju rediģēt un dzēst ierakstus vietā. Kad strādājat ar Vue, ir dažādi atvērtā koda komponenti, kurus var izmantot, lai viegli pievienotu datu tabulu savai lietojumprogrammai.

Mūsdienās daudzām lietojumprogrammām ir reāllaika funkcijas, un jūs varētu domāt, kā jūs varat sinhronizēt datu rediģēšanu un dzēšanu reāllaikā. Tam ir trīs iespējas:

  1. Izmantojiet WebSocket API. Šī nav laba iespēja, ja daži no jūsu lietotājiem izmanto pārlūkprogrammas, kas vēl neatbalsta WebSocket.
  2. Izmantojiet bibliotēku, kas abpusēji novērš šīs pārlūkprogrammas atšķirības, ar rezerves mehānismu, piemēram, Socket.IO, SignalR un SockJS. Izmantojot šo opciju, jums jāpārvalda serveris, kas apstrādā lielu skaitu atvērto savienojumu, un jārisina mērogošana.
  3. Izmantojiet pakalpojumu, kas nodrošina bibliotēku, kas veic to pašu, ko iepriekšējā opcija, bet pārvalda serveri un atbilstoši mērogo. Šī ir vēlama iespēja uzņēmumiem un komandām, kas izmanto pieeju bez serveriem.

Es jums parādīšu, kā izveidot reāllaika rediģējamu datu tabulu vietnē Vue.js, izmantojot Hamoni Sync kā reālā laika stāvokļa sinhronizācijas pakalpojumu. Zemāk redzamajā attēlā parādīts, ko mēs veidosim:

Lai sekotu līdzi, jums būs nepieciešamas dažas pamatzināšanas par Vue. Ja jums nav zināšanu par Vue, varat izlasīt manu iepriekšējo ziņu, lai paātrinātu ātrumu ar Vue.js. Jums būs nepieciešami arī šādi rīki:

  1. Node.js & npm (sekojiet saitei, lai lejupielādētu instalēšanas programmu savai OS)
  2. Vue CLI, lai sastatītu jaunu Vue projektu. Ja jums to nav, palaidiet npm install -g [email protected]no komandrindas, lai to instalētu.

Izveidojiet projektu

Mēs izveidosim projektu, izmantojot Vue CLI un veidni no Vuetify. Atveriet komandrindu un palaidiet komandu vue init vuetifyjs/simple realtime-datatable-vue. Jums tiks lūgts norādīt vārdu un autoru, tāpēc pieņemiet noklusējuma vērtību, nospiežot Enter katrā uzvednē. Tas sastatīs jaunu Vue projektu ar vienu index.htmlfailu.

Šis fails satur skriptu atsauces uz Vue un Vuetify. Vuetify ir Vue.js materiāla dizaina komponents. Tam ir v-data-tablekomponents ar šķirošanas, meklēšanas, lapošanas, rediģēšanas, galvenes rīku un rindu izvēles funkcijām.

Pievienojiet datu tabulas komponentu

Atveriet failu, index.htmlizmantojot teksta redaktoru (vai IDE). Aizstājiet 50. rindas saturu ar šādu tekstu:

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

Iepriekš minētais kods pievieno v-dialogkomponentu dialoga parādīšanai, lai vāktu datus jauniem ierakstiem vai rediģētu esošu ierakstu. Turklāt tas pievieno v-data-tabletabulu atveidojošo. Mums jādefinē dati un metodes, ko izmanto šie komponenti. Pēc 126. rindiņas datu īpašībām pievienojiet šādu kodu:

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

dessertsDatu īpašums rīkos dati tiks parādīti tabulā. editedItemĪpašums rīkos vērtības ierakstu tiek rediģēts, un editedIndexrīkos indekss ieraksta tiek rediģēts.

Pēc rekvizīta datadefinīcijas pēc 189. rindas pievienojiet šādus rekvizītus :

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

Mēs pievienojām computedun watchīpašumu. Par computedīpašuma definē formTitle, kas dod Dialog komponenta nosaukumu, pamatojoties uz vērtību editedIndex. watchĪpašums pulksteņi dialog, kad tā vērtība mainās. Ja vērtība mainās uz false, tas izsauc funkciju, close()kas tiks definēta vēlāk.

Pievienojiet Hamoni Sync

Šajā krustojumā mums jāpievieno Hamoni Sync. To izmanto, lai sinhronizētu lietojumprogrammas stāvokli, un tas risina konfliktu risināšanu, lai izvairītos no tā, ka viens lietotājs ignorē cita lietotāja datus. Lai izmantotu Hamoni Sync, jums jāreģistrējas konta un lietojumprogrammas ID iegūšanai. Veiciet šīs darbības, lai izveidotu lietojumprogrammu Hamoni.

  1. Reģistrējieties un piesakieties Hamoni informācijas panelī.
  2. Teksta laukā ievadiet vēlamo lietojumprogrammas nosaukumu un noklikšķiniet uz pogas Izveidot. Tam vajadzētu izveidot lietotni un parādīt to lietojumprogrammu saraksta sadaļā.
  3. Noklikšķiniet uz pogas “Rādīt konta ID”, lai redzētu sava konta ID.

Zem skripta atsauces uz Vuetify 139. rindiņā pievienojiet atsauci uz Hamoni Sync:

Pēc tam, kad Vue komponents ir uzstādīts, mums ir jāinicializē Hamoni Sync. Pievienojiet mountedīpašumu zem watchīpašuma:

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

No iepriekš minētā koda mēs inicializējam Hamoni Sync ar kontu un lietojumprogrammas ID. Informācijas panelī aizstājiet virknes vietturus ar kontu un lietojumprogrammas ID. Tad tas ir savienots ar Hamoni serveri, zvanot, hamoni.connect()kas atgriež solījumu.

Kad savienojums ir izveidots, mēs hamoni.get()piezvanām ar Hamoni glabātās valsts nosaukumu. Lai no Hamoni izgūtu stāvokli, tas ir jāizveido, pretējā gadījumā tas atgriezīs kļūdu. Es šeit esmu rīkojies ar šo kļūdu ķeršanas blokā, lai izsauktu citu funkciju, lai inicializētu stāvokli Hamoni Sync.

Ja zvans, lai iegūtu lietojumprogrammas stāvokli, izdodas, tas atgriež objektu, kas tiks izmantots, lai modificētu šajā stāvoklī esošos datus. Šis objekts tiek dēvēts par primitīvu Sync. Ir trīs sinhronizācijas primitīvu veidi:

  1. Vērtība primitīva: šāda veida stāvoklī ir vienkārša informācija, kas attēlota ar datu tipiem, piemēram, virkni, loģisko vērtību vai skaitļiem. Tas ir vispiemērotākais tādos gadījumos kā nelasītu ziņojumu skaits, pārslēgšanās utt.
  2. Object Primitive: Object state apzīmē stāvokļus, kurus var modelēt kā JavaScript objektu. Lietojuma piemērs varētu būt spēles rezultātu saglabāšana.
  3. Saraksts Primitīvs: tur ir objektu saraksts. Valsts objekts ir JavaScript objekts. Vienumu var atjaunināt, pamatojoties uz tā indeksu sarakstā.

Šajā piemērā mēs izmantojām primitīvu sarakstu. Mēs aicinām primitive.getAll()iegūt valsti un nodot to desserts. Pēc tam tā izsauc funkciju subscribeToUpdate(). Šī funkcija tiks izmantota, lai abonētu stāvokļa maiņas notikumus no Hamoni Sync.

Pēc mountedrekvizīta 215. rindā pievienojiet šādu kodu :

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!

Vietnē Vue.js esam izveidojuši reāllaika rediģējamu datu tabulu. Hamoni Sync ļauj ērti pievienot reāllaika funkcionalitāti. Gan Vuetify, gan Hamoni Sync ir npm pakotnes, ja strādājat ar būvēšanas sistēmu un izmantojat viena faila komponentus. Avota kodu varat atrast vietnē GitHub.

Resursi

  • Hamoni sinhronizācija (dokumenti)
  • Vuetify
  • Vue CLI
  • Iepazīšanās ar Vue.js būtiskajiem jautājumiem