Како направити Вуе.јс табелу података која се може уређивати у реалном времену

У апликацијама на основу података табела података користи се за приказ података у табеларном формату са могућношћу уређивања и брисања записа на месту. Када радите са Вуе-ом, постоје различите компоненте отвореног кода које се могу користити за лако додавање табеле података у вашу апликацију.

Многе апликације данас имају функције у реалном времену и можда ћете се запитати како можете синхронизовати уређивање и брисање података у реалном времену. Постоје три могућности за ово:

  1. Користите ВебСоцкет АПИ. Ово није добра опција ако неки од ваших корисника користе прегледаче који још увек не подржавају ВебСоцкет.
  2. Користите библиотеку која апстрахује ове разлике у више прегледача помоћу резервног механизма, као што су Соцкет.ИО, СигналР и СоцкЈС. Помоћу ове опције морали бисте да управљате сервером који управља великим бројем отворених веза и бавите се скалирањем.
  3. Користите услугу која пружа библиотеку која ради исто што и претходна опција, али управља сервером и прикладно скалира. Ово је пожељнија опција за компаније и тимове који усвајају (или су усвојили) приступ без сервера.

Показаћу вам како да направите табелу података која се може уређивати у стварном времену у Вуе.јс-у користећи Хамони Синц као услугу синхронизације стања у реалном времену. Слика испод приказује шта ћемо градити:

Да бисте наставили даље, мораћете да имате основно знање о Вуе-у. Ако не знате Вуе, можете прочитати мој претходни пост да бисте убрзали Вуе.јс. Такође ће вам требати следећи алати:

  1. Ноде.јс & нпм (следите везу за преузимање инсталационог програма за ваш ОС)
  2. Вуе ЦЛИ поставља нову Вуе пројекат. Ако немате ово, покрените га npm install -g [email protected]из командне линије да бисте га инсталирали.

Поставите пројекат

Пројекат ћемо поставити користећи Вуе ЦЛИ и образац из Вуетифи-а. Отворите командну линију и покрените команду vue init vuetifyjs/simple realtime-datatable-vue. Упитаће вас за име и аутора, па прихватите подразумевану вредност притиском на тастер ентер за сваки упит. Ово ће скенирати нови Вуе пројекат са једном index.htmlдатотеком.

Ова датотека садржи референце на Вуе и Вуетифи. Вуетифи је компонента материјалног дизајна за Вуе.јс. Садржи v-data-tableкомпоненту са функцијама за сортирање, претраживање, пагинирање, уређивање у линији, описе алата за заглавље и одабир редова.

Додајте компоненту табеле података

Отворите датотеку index.htmlпомоћу уређивача текста (или ИДЕ). Садржај у реду 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када њена вредност се мења. Ако се вредност промени у фалсе, она позива функцију close()која ће бити касније дефинисана.

Додајте Хамони Синц

На овом споју морамо додати Хамони Синц. Користи се за синхронизацију стања апликације и рукује решавањем сукоба како би се избегло да један корисник замени податке другог корисника. Да бисте користили Хамони Синц, мораћете да се региструјете за налог и ИД апликације. Следите ове кораке да бисте креирали апликацију у Хамонију.

  1. Региструјте се и пријавите се на контролну таблу Хамони.
  2. Унесите жељено име апликације у поље за текст и кликните на дугме Креирај. Ово би требало да креира апликацију и прикаже је у одељку са списком апликација.
  3. Кликните на дугме „Прикажи ИД рачуна“ да бисте видели ИД свог рачуна.

Испод референце скрипте на Вуетифи на линији 139 , додајте референцу на Хамони Синц:

Затим треба да иницијализујемо Хамони Синц када је Вуе компонента монтирана. Додајте 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.connect()који враћа обећање.

Једном повезани, зовемо hamoni.get()са именом државе која се чува у Хамонију. Да би се држава преузела из Хамонија, она мора бити креирана, у супротном ће се вратити грешка. Оно што сам овде урадио је да рукујем овом грешком у оквиру блока цатцх, тако да позива другу функцију за иницијализацију стања у Хамони Синц.

Ако позив за добијање стања апликације успе, враћа објекат који ће се користити за модификовање података садржаних у том стању. Овај објекат се назива применом Синц. Постоје три врсте примитива за синхронизацију:

  1. Примитив вредности: Ова врста стања садржи једноставне информације представљене типовима података попут низа, логичких вредности или бројева. Најприкладнији је за случајеве као што су бројање непрочитаних порука, пребацивање итд.
  2. Примитив објекта: Стање објекта представља стања која се могу моделирати као ЈаваСцрипт објекат. Пример употребе може бити чување резултата игре.
  3. Листа примитивних: Садржи листу државних објеката. Објект стања је ЈаваСцрипт објекат. Ставку можете ажурирати на основу њеног индекса на листи.

За овај пример смо користили примитивну листу. Позивамо primitive.getAll()да узмемо државу и проследимо је desserts. Након тога позива функцију subscribeToUpdate(). Ова функција ће се користити за претплату на догађаје промене стања из услуге Хамони Синц.

Додајте следећи код након 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() }}

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!

Направили смо табелу података која се може уређивати у реалном времену у Вуе.јс. Хамони Синц олакшава додавање функционалности у реалном времену. И Вуетифи и Хамони Синц имају нпм пакете ако радите са системом градње и користите компоненте једне датотеке. Изворни код можете пронаћи на ГитХуб-у.

Ресурси

  • Хамони синхронизација (документи)
  • Вуетифи
  • Вуе ЦЛИ
  • Увод у основне ствари Вуе.јс-а