Kuinka luoda reaaliaikainen muokattava tietotaulukko Vue.js: ssä

Tietopohjaisissa sovelluksissa tietotaulukkoa käytetään tietojen esittämiseen taulukkomuodossa, jolloin kyky muokata ja poistaa tietueita paikallaan. Kun työskentelet Vuen kanssa, on olemassa erilaisia ​​avoimen lähdekoodin komponentteja, joiden avulla voidaan helposti lisätä tietotaulukko sovellukseesi.

Monissa sovelluksissa on nykyään reaaliaikaisia ​​ominaisuuksia, ja saatat miettiä, kuinka voit synkronoida tietojen muokkaamisen ja poistamisen reaaliajassa. Tähän on kolme vaihtoehtoa:

  1. Käytä WebSocket API: ta. Tämä ei ole hyvä vaihtoehto, jos jotkut käyttäjistäsi käyttävät selaimia, jotka eivät vielä tue WebSocketia.
  2. Käytä kirjastoa, joka tiivistää nämä selainten väliset erot varamekanismilla, kuten Socket.IO, SignalR ja SockJS. Tämän vaihtoehdon avulla sinun on hallittava palvelinta, joka käsittelee paljon avoimia yhteyksiä, ja käsiteltävä skaalausta.
  3. Käytä palvelua, joka tarjoaa kirjaston, joka tekee saman asian kuin edellinen vaihtoehto, mutta hallinnoi palvelinta ja skaalaa asianmukaisesti. Tämä on suositeltava vaihtoehto yrityksille ja ryhmille, jotka omaksuvat (tai ovat ottaneet käyttöön) palvelimettoman lähestymistavan.

Näytän sinulle, kuinka voit luoda reaaliaikaisen muokattavan tietotaulukon Vue.js: ssä käyttämällä Hamoni Synciä reaaliaikaisena valtion synkronointipalveluna. Alla olevassa kuvassa näkyy, mitä rakennamme:

Seurataksesi tarvitset joitain perustietoja Vue: sta. Jos sinulla ei ole tietoa Vue-palvelusta, voit lukea edellisen viestini saadaksesi vauhtia Vue.js: n avulla. Tarvitset myös seuraavat työkalut:

  1. Node.js & npm (lataa asennusohjelma käyttöjärjestelmääsi napsauttamalla linkkiä)
  2. Vue CLI uuden Vue-projektin telineeksi. Jos sinulla ei ole tätä, npm install -g [email protected]asenna se komentoriviltä.

Määritä projekti

Perustamme projektin Vue CLI: n ja Vuetifyn mallin avulla. Avaa komentorivi ja suorita komento vue init vuetifyjs/simple realtime-datatable-vue. Sinulta kysytään nimeä ja tekijää, joten hyväksy oletusarvo napsauttamalla Enter jokaiselle kehotteelle. Tämä rakentaa uuden Vue-projektin yhdellä index.htmltiedostolla.

Tämä tiedosto sisältää komentosarjaviittauksia Vue- ja Vuetify-tiedostoihin. Vuetify on Vue.js: n materiaalisuunnittelun komponentti. Siinä on v-data-tablekomponentti, jolla on ominaisuuksia lajittelua, hakua, sivutusta, sisäistä muokkausta, otsikkovihjeitä ja rivien valintaa varten.

Lisää tietotaulukon komponentti

Avaa tiedosto index.htmltekstieditorilla (tai IDE: llä). Korvaa rivin 50 sisältö seuraavalla:

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

Yllä oleva koodi lisää v-dialogkomponentin valintaikkunan näyttämiseen uusien tietueiden tietojen keräämiseksi tai olemassa olevan tietueen muokkaamiseksi. Lisäksi se lisää v-data-tabletaulukon renderöivän. Meidän on määriteltävä näiden komponenttien käyttämät tiedot ja menetelmät. Lisää rivin 126 jälkeen seuraava koodi dataominaisuuksiin:

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

dessertsTiedot ominaisuus pitää tiedot näytetään taulukossa. editedItemOmaisuus pitää arvoja ennätys muokattavan ja editedIndexpitää indeksi ennätyksen muokattu.

Lisää seuraavat ominaisuudet ominaisuusmäärityksen datajälkeen rivin 189 jälkeen :

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

Lisäsimme computedja watchomaisuuden. computedOminaisuus määrittää formTitle, joka antaa dialogin komponentti otsikko perustuu arvoon editedIndex. watchOminaisuus kellot dialog, kun sen arvo muuttuu. Jos arvo muuttuu epätosi-arvoksi, se kutsuu funktion, close()joka määritetään myöhemmin.

Lisää Hamoni Sync

Tässä risteyksessä meidän on lisättävä Hamoni Sync. Sitä käytetään sovellustilan synkronointiin, ja se käsittelee ristiriitojen ratkaisemisen välttääkseen yhden käyttäjän korvaamasta toisen käyttäjän tietoja. Jos haluat käyttää Hamoni Sync -ohjelmaa, sinun on kirjauduttava sisään tili ja sovellustunnus. Luo sovellus Hamoniin noudattamalla näitä ohjeita.

  1. Rekisteröidy ja kirjaudu sisään Hamonin kojelautaan.
  2. Kirjoita haluamasi sovelluksen nimi tekstikenttään ja napsauta Luo-painiketta. Tämän pitäisi luoda sovellus ja näyttää se sovellusluettelossa.
  3. Napsauta painiketta "Näytä tilin tunnus" nähdäksesi tilisi tunnuksen.

Lisää Vuetify-komentorivin alle riville 139 viittaus Hamoni Synciin:

Sitten meidän on alustettava Hamoni Sync, kun Vue-komponentti on asennettu. Lisää mountedominaisuus omaisuuden alle 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)},

Yllä olevasta koodista alustamme Hamoni Sync -tilin tilin ja sovelluksen tunnuksella. Korvaa merkkijonon paikkamerkit tilin ja sovelluksen tunnuksella hallintapaneelista. Sitten se kytketään Hamoni-palvelimeen soittamalla, hamoni.connect()mikä palauttaa lupauksen.

Kun yhteys hamoni.get()on muodostettu, soitamme Hamoniin tallennetun valtion nimellä. Tilan noutamiseksi Hamonista se on luotava, muuten se palauttaa virheen. Mitä olen tehnyt täällä, käsittelen tämän virheen salauslohkossa siten, että se kutsuu toisen toiminnon tilan alustamiseksi Hamoni Sync -ohjelmassa.

Jos kutsu sovellustilan saamiseksi onnistuu, se palauttaa objektin, jota käytetään kyseisessä tilassa olevien tietojen muokkaamiseen. Tätä kohdetta kutsutaan synkronointiprimitiiviksi. Sync-primitiivejä on kolme tyyppiä:

  1. Arvo Primitiivinen: Tämän tyyppinen tila sisältää yksinkertaista tietoa, jota edustavat tietotyypit, kuten merkkijono, looginen luku tai numerot. Se soveltuu parhaiten esimerkiksi lukemattomien viestien lukumäärään, vaihtamiseen jne.
  2. Object Primitive: Object-tila edustaa tiloja, jotka voidaan mallintaa JavaScript-objektina. Esimerkkinä käyttö voi olla pelin pisteiden tallentaminen.
  3. Lista primitiivinen: Tässä on luettelo tilaobjekteista. Tilaobjekti on JavaScript-objekti. Voit päivittää kohteen luettelossa olevan hakemiston perusteella.

Olemme käyttäneet tässä esimerkissä luetteloa primitiivisesti. Kutsumme primitive.getAll()saamaan valtion ja välittämään sen desserts. Sen jälkeen se kutsuu toimintoa subscribeToUpdate(). Tätä toimintoa käytetään tilamuutostapahtumien tilaamiseen Hamoni Sync -sovelluksesta.

Lisää seuraava koodi mountedrivillä 215 olevan ominaisuuden jälkeen :

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!

Olemme rakentaneet reaaliaikaisen muokattavan tietotaulukon Vue.js-tiedostoon. Hamoni Sync helpottaa reaaliaikaisen toiminnallisuuden lisäämistä. Sekä Vuetify että Hamoni Sync sisältävät npm-paketteja, jos työskentelet rakennusjärjestelmän kanssa ja käytät yksittäisiä tiedostokomponentteja. Löydät lähdekoodin GitHubista.

Resurssit

  • Hamoni Sync (asiakirjat)
  • Vuetify
  • Vue CLI
  • Johdatus Vue.js: n olennaiseen