Valós idejű szerkeszthető adattábla létrehozása a Vue.js fájlban

Adatvezérelt alkalmazásokban egy adattáblázatot használnak az adatok táblázatos formátumban történő megjelenítésére, a rekordok helyben történő szerkesztésére és törlésére. Amikor a Vue-val dolgozik, különféle nyílt forráskódú komponensek használhatók arra, hogy egyszerűen adattáblát adhassanak alkalmazásához.

Manapság sok alkalmazás rendelkezik valós idejű funkciókkal, és felmerülhet a kérdés, hogyan szinkronizálhatja az adatok szerkesztését és törlését valós időben. Három lehetőség van erre:

  1. Használja a WebSocket API-t. Ez nem jó lehetőség, ha néhány felhasználó olyan böngészőt használ, amely még nem támogatja a WebSocket alkalmazást.
  2. Használjon olyan könyvtárat, amely ezeket a böngészők közötti különbségeket elvonja egy tartalék mechanizmussal, például a Socket.IO, a SignalR és a SockJS. Ezzel az opcióval kezelnie kell azt a kiszolgálót, amely sok nyitott kapcsolatot kezel, és foglalkoznia kell a méretezéssel.
  3. Használjon olyan szolgáltatást, amely olyan könyvtárat biztosít, amely ugyanazt csinálja, mint az előző opció, de megfelelően kezeli a szervert és méretez. Ez egy előnyös megoldás azoknak a vállalatoknak és csapatoknak, amelyek a szerver nélküli megközelítést alkalmazzák (vagy átvették).

Megmutatom, hogyan készíthet valós idejű szerkeszthető adattáblát a Vue.js-ben a Hamoni Sync használatával, valós idejű állapot-szinkronizálási szolgáltatásként. Az alábbi képen látható, hogy mit építünk:

A követéshez alapismeretekkel kell rendelkeznie a Vue-ról. Ha nincs ismerete a Vue-ról, elolvashatja előző bejegyzésemet, hogy felgyorsuljon a Vue.js segítségével. Szüksége lesz a következő eszközökre is:

  1. Node.js & npm (a telepítő letöltéséhez kövesse a linket az operációs rendszeréhez)
  2. Vue CLI egy új Vue projekt állványozására. Ha nincs ilyen, futtassa npm install -g [email protected]a parancssorból a telepítéshez.

Állítsa be a projektet

A projektet a Vue CLI és a Vuetify sablonja segítségével állítjuk be. Nyissa meg a parancssort, és futtassa a parancsot vue init vuetifyjs/simple realtime-datatable-vue. Kérni fog egy nevet és egy szerzőt, ezért fogadja el az alapértelmezett értéket az egyes parancssorok enter gombjával. Ez egy új index.htmlfájlt állít össze egy Vue-projekttel .

Ez a fájl a Vue és a Vuetify parancsfájl-hivatkozásait tartalmazza. A Vuetify a Vue.js anyagtervezési alkotóeleme. Rendelkezésre v-data-table, keresésre, lapozásra, beépített szerkesztésre, fejléctippekre és sorválasztásra szolgáló komponenssel rendelkezik.

Adja hozzá az adattábla-összetevőt

Nyissa meg a fájlt index.htmla szövegszerkesztőjével (vagy IDE-jével). Cserélje le az 50. sor tartalmát a következőre:

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

A fenti kód hozzáad egy v-dialogösszetevőt egy párbeszédpanel megjelenítéséhez, amely új rekordok adatainak gyűjtését vagy egy meglévő rekord szerkesztését teszi lehetővé. Ezenkívül hozzáadja v-data-tablea táblázatot megjelenítőt. Meg kell határoznunk az ezen összetevők által használt adatokat és módszereket. A 126. sor után adja hozzá a következő kódot az adat tulajdonságaihoz:

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

Az dessertsadat tulajdonság fogja tárolni a táblázatban megjelenítendő adatokat. A editedItemtulajdonság tartalmazza a szerkesztendő rekord értékeit, és a editedIndexszerkesztett rekord indexét.

Adja hozzá a következő tulajdonságokat a tulajdonságmeghatározás után, a 189.data sor után :

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

Hozzáadtunk egy computedés watchtulajdonságot. A computedtulajdonság meghatározza, formTitlehogy a párbeszéd komponensnek mely címet adjon a értéke alapján editedIndex. Az watchingatlan figyeli dialog, mikor változik az értéke. Ha az érték hamisra változik, meghívja a close()később definiálandó függvényt .

Adja hozzá a Hamoni Sync alkalmazást

Ebben a csomópontban hozzá kell adnunk a Hamoni Sync-et. Az alkalmazás állapotának szinkronizálására szolgál, és kezeli a konfliktusmegoldást annak elkerülése érdekében, hogy az egyik felhasználó felülírja a másik felhasználó adatait. A Hamoni Sync használatához regisztrálnia kell fiókját és alkalmazásazonosítóját. Kövesse ezeket a lépéseket alkalmazás létrehozásához Hamoni alkalmazásban.

  1. Regisztráljon és jelentkezzen be a Hamoni műszerfalon.
  2. Írja be a kívánt alkalmazás nevét a szövegmezőbe, és kattintson a létrehozás gombra. Ezzel létre kell hoznia az alkalmazást, és meg kell jelenítenie az alkalmazáslista részben.
  3. Kattintson a „Fiókazonosító megjelenítése” gombra a fiókazonosító megtekintéséhez.

A Vuetify szkript hivatkozása alatt a 139. soron adjon meg egy hivatkozást a Hamoni Sync-re:

Ezután inicializálnunk kell a Hamoni Sync-et, miután a Vue komponens fel van szerelve. Adjon hozzá egy mountedingatlant az watchingatlan alatt:

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

From the code above, we initialize Hamoni Sync with an account and application ID. Replace the string placeholders with the account and application ID from the dashboard. Then it is connected to the Hamoni server by calling hamoni.connect() which returns a promise.

Once connected, we call hamoni.get() with the name of the state stored in Hamoni. In order to retrieve a state from Hamoni, it needs to have been created, otherwise it'll return an error. What I've done here is handle this error within the catch block, such that it calls another function to initialize the state in Hamoni Sync.

If the call to get an application state succeeds, it returns an object which will be used to modify data contained in that state. This object is referred to as a Sync primitive. There are three types of Sync primitives:

  1. Value Primitive: This kind of state holds simple information represented with datatypes like string, boolean or numbers. It is best suited for cases such as unread message count, toggles, etc.
  2. Object Primitive: Object state represents states that can be modelled as a JavaScript object. An example usage could be storing the score of a game.
  3. List Primitive: This holds a list of state objects. A state object is a JavaScript object. You can update an item based on its index in the list.

We’ve used a list primitive for this example. We call primitive.getAll() to get the state and pass it to desserts. After that, it calls the function subscribeToUpdate(). This function will be used to subscribe to state change events from Hamoni Sync.

Add the following code after the mounted property on line 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