Як створити редаговану таблицю даних у режимі реального часу у Vue.js

У додатках, керованих даними, таблиця даних використовується для відображення даних у табличному форматі з можливістю редагування та видалення записів на місці. Коли ви працюєте з Vue, існують різні компоненти з відкритим кодом, які можна використовувати для простого додавання таблиці даних до вашої програми.

Багато програм сьогодні мають функції реального часу, і ви можете задатися питанням, як можна синхронізувати редагування та видалення даних у режимі реального часу. Для цього є три варіанти:

  1. Використовуйте API WebSocket. Це невдалий варіант, якщо деякі з ваших користувачів використовують браузери, які ще не підтримують 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 Sync

На цьому перехресті нам потрібно додати Hamoni Sync. Він використовується для синхронізації стану програми та обробляє вирішення конфліктів, щоб уникнути перевизначення одним користувачем даних іншого користувача. Щоб використовувати Hamoni Sync, вам доведеться зареєструвати обліковий запис та ідентифікатор програми. Виконайте ці кроки, щоб створити програму в 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()ім’я держави, що зберігається в Хамоні. Для того, щоб отримати стан із Хамоні, його потрібно створити, інакше він поверне помилку. Те, що я зробив тут, - це обробка цієї помилки в блоці catch, така що вона викликає іншу функцію для ініціалізації стану в Hamoni Sync.

Якщо виклик для отримання стану програми успішний, він повертає об'єкт, який буде використовуватися для модифікації даних, що містяться в цьому стані. Цей об'єкт називається примітивом синхронізації. Існує три типи примітивів синхронізації:

  1. Примітив значення: Цей тип стану містить просту інформацію, представлену такими типами даних, як рядок, булеве значення або числа. Найкраще підходить для таких випадків, як кількість непрочитаних повідомлень, перемикання тощо.
  2. Примітив об’єкта: стан об’єкта представляє стани, які можна змоделювати як об’єкт 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() }}

Наведений вище код визначає функції, на які ми посилалися до цього часу.

initialise()Функція створює список примітив з ім'ям vue-table.

У subscribeToUpdate()функції містять код для обробки , коли додається елемент, оновлені або видалені зі списку примітиву.

deleteItem()Опцію, щоб видалити елемент зі списку примітивного шляхом виклику listPrimitive.delete(index)з індексом елемента для видалення.

save()Виклики функцій , listPrimitive.push(editedItem)щоб додати новий елемент до списку примітиву, і закликає listPrimitive.update(editedIndex, editedItem)оновити запис в певний індекс.

Це весь код, який необхідний для досягнення нашої мети - редагування таблиці даних у режимі реального часу. Відкрийте index.htmlфайл у своєму браузері, і програма готова до використання!

Це обгортання!

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