de Peter Mbanugo

Cum se construiește un tabel de date editabil în timp real în Vue.js

Cum se construieste un tabel de date editabil in timp
Fotografie de Franki Chamaki pe Unsplash

În aplicațiile bazate pe date, un tabel de date este utilizat pentru a afișa datele într-un format tabelar cu posibilitatea de a edita și șterge înregistrări la locul lor. Când lucrezi cu Vue, Sunt diferite componente open-source care poate fi folosit pentru a adăuga cu ușurință un tabel de date aplicației dvs.

Multe aplicații de astăzi au funcții în timp real și vă puteți întreba cum puteți sincroniza editarea și ștergerea datelor în timp real. Există trei opțiuni pentru aceasta:

  1. Utilizare API WebSocket. Aceasta nu este o opțiune bună dacă unii utilizatori utilizează browsere care nu acceptă încă WebSocket.
  2. Utilizați o bibliotecă care abstracte aceste diferențe între browser-uri cu un mecanism alternativ, cum ar fi Socket.IO, SemnalR, și SockJS. Cu această opțiune, va trebui să gestionați serverul care gestionează un număr mare de conexiuni deschise și să se ocupe de scalare.
  3. Utilizați un serviciu care oferă o bibliotecă care face același lucru ca și opțiunea anterioară, dar gestionează serverul și scalează corespunzător. Aceasta este o opțiune preferabilă pentru companiile și echipele care adoptă (sau au adoptat) abordarea fără server.

Vă voi arăta cum să creați un tabel de date editabil în timp real în Vue.js folosind Hamoni Sync ca serviciu de sincronizare a stării în timp real. Imaginea de mai jos arată ce vom construi:

Cum se construieste un tabel de date editabil in timp

Pentru a continua, va trebui să aveți câteva cunoștințe de bază despre Vue. Dacă nu aveți cunoștințe despre Vue, puteți să le citiți postarea anterioară pentru a ajunge la viteză cu Vue.js. De asemenea, veți avea nevoie de următoarele instrumente:

ad-banner
  1. Node.js & npm (urmați linkul pentru a descărca un program de instalare pentru sistemul dvs. de operare)
  2. Vue CLI pentru a schela un nou proiect Vue. Dacă nu aveți acest lucru, alergați npm install -g vue-cli@2.9.6 din linia de comandă pentru instalare.

Configurați proiectul

Vom configura proiectul folosind Vue CLI și a șablon din Vuetify. Deschideți linia de comandă și executați comanda vue init vuetifyjs/simple realtime-datatable-vue. Vi se va solicita un nume și un autor, deci acceptați valoarea implicită apăsând Enter pentru fiecare solicitare. Acest lucru va schela un nou proiect Vue cu un singur index.html fişier.

Acest fișier conține referințe de script la Vue și Vuetify. Vuetify este un Proiectarea materialelor Componentă pentru Vue.js. Are o v-data-table componentă cu funcții de sortare, căutare, paginare, editare în linie, sfaturi pentru antet și selectarea rândurilor.

Adăugați componenta tabelului de date

Deschideți fișierul index.html cu editorul de text (sau IDE). Înlocuiți conținutul on-line 50 cu următoarele:

<div>    <v-dialog v-model="dialog" max-width="500px">    <v-btn slot="activator" color="primary" dark class="mb-2">New Item</v-btn>    <v-card>        <v-card-title>        <span class="headline">{{ formTitle }}</span>        </v-card-title>        <v-card-text>        <v-container grid-list-md>            <v-layout wrap>            <v-flex xs12 sm6 md4>                <v-text-field v-model="editedItem.name" label="Dessert name"></v-text-field>            </v-flex>            <v-flex xs12 sm6 md4>                <v-text-field v-model="editedItem.calories" label="Calories"></v-text-field>            </v-flex>            <v-flex xs12 sm6 md4>                <v-text-field v-model="editedItem.fat" label="Fat (g)"></v-text-field>            </v-flex>            <v-flex xs12 sm6 md4>                <v-text-field v-model="editedItem.carbs" label="Carbs (g)"></v-text-field>            </v-flex>            <v-flex xs12 sm6 md4>                <v-text-field v-model="editedItem.protein" label="Protein (g)"></v-text-field>            </v-flex>            </v-layout>        </v-container>        </v-card-text>        <v-card-actions>        <v-spacer></v-spacer>        <v-btn color="blue darken-1" flat @click.native="close">Cancel</v-btn>        <v-btn color="blue darken-1" flat @click.native="save">Save</v-btn>        </v-card-actions>    </v-card>    </v-dialog>    <v-data-table :headers="headers" :items="desserts" hide-actions class="elevation-1">    <template slot="items" slot-scope="props">        <td>{{ props.item.name }}</td>        <td class="text-xs-right">{{ props.item.calories }}</td>        <td class="text-xs-right">{{ props.item.fat }}</td>        <td class="text-xs-right">{{ props.item.carbs }}</td>        <td class="text-xs-right">{{ props.item.protein }}</td>        <td class="justify-center layout px-0">        <v-btn icon class="mx-0" @click="editItem(props.item)">            <v-icon color="teal">edit</v-icon>        </v-btn>        <v-btn icon class="mx-0" @click="deleteItem(props.item)">            <v-icon color="pink">delete</v-icon>        </v-btn>        </td>    </template>    </v-data-table></div>

Codul de mai sus adaugă un v-dialog componentă pentru afișarea unui dialog pentru colectarea datelor pentru înregistrări noi sau editarea unei înregistrări existente. De asemenea, adaugă v-data-table care redă masa. Trebuie să definim datele și metodele utilizate de aceste componente. După linie 126, adăugați următorul cod la proprietățile datelor:

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 proprietatea de date va păstra datele care vor fi afișate în tabel. editedItem proprietatea va păstra valori pentru înregistrarea care se editează și fișierul editedIndex va deține indexul înregistrării în curs de editare.

Adăugați următoarele proprietăți după data definirea proprietății, după linie 189:

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

Am adăugat un computed și watch proprietate. computed proprietatea definește formTitle care conferă componentei de dialog un titlu bazat pe valoarea lui editedIndex. watch ceasuri de proprietate dialog pentru când valoarea acestuia se schimbă. Dacă valoarea se schimbă în fals, apelează funcția close() care va fi definit ulterior.

Adăugați Hamoni Sync

La această joncțiune trebuie să adăugăm Hamoni Sync. Este folosit pentru a sincroniza starea aplicației și gestionează rezolvarea conflictelor pentru a evita ca un utilizator să suprascrie datele altui utilizator. Pentru a utiliza Hamoni Sync, va trebui să vă înscrieți pentru un cont și un ID de aplicație. Urmați acești pași pentru a crea o aplicație în Hamoni.

  1. Înregistrați-vă și conectați-vă la Hamoni bord.
  2. Introduceți numele aplicației preferate în câmpul de text și faceți clic pe butonul de creare. Aceasta ar trebui să creeze aplicația și să o afișeze în secțiunea listă de aplicații.
  3. Faceți clic pe butonul „Afișați ID-ul contului” pentru a vedea ID-ul contului dvs.
Cum se construieste un tabel de date editabil in timp

Sub referința scriptului la Vuetify on-line 139, adăugați o referință la Hamoni Sync:

<script src="https://unpkg.com/hamoni-sync@0.4.0/hamoni.dev.js"><;/script>

Apoi, trebuie să inițializăm Hamoni Sync odată ce componenta Vue este montată. Adauga o mounted proprietate sub watch proprietate:

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

Din codul de mai sus, inițializăm Hamoni Sync cu un cont și un ID de aplicație. Înlocuiți substituenții șirului cu contul și ID-ul aplicației din tabloul de bord. Apoi este conectat la serverul Hamoni apelând hamoni.connect() care returnează o promisiune.

Odată conectat, sunăm hamoni.get() cu numele statului stocat în Hamoni. Pentru a recupera un stat de la Hamoni, acesta trebuie să fi fost creat, altfel va returna o eroare. Ceea ce am făcut aici este să gestionez această eroare în blocul de captură, astfel încât să apeleze o altă funcție pentru a inițializa starea în Hamoni Sync.

Dacă apelul pentru a obține o stare a aplicației reușește, returnează un obiect care va fi utilizat pentru a modifica datele conținute în acea stare. Acest obiect este denumit o primitivă Sync. Există trei tipuri de primitive de sincronizare:

  1. Valoare Primitivă: Acest tip de stare conține informații simple reprezentate cu tipuri de date precum șir, boolean sau numere. Este cel mai potrivit pentru cazuri precum numărul de mesaje necitite, comutarea etc.
  2. Obiect Primitiv: Starea obiectului reprezintă stări care pot fi modelate ca obiect JavaScript. Un exemplu de utilizare ar putea fi stocarea scorului unui joc.
  3. Lista Primitive: Acesta conține o listă de obiecte de stare. Un obiect de stare este un obiect JavaScript. Puteți actualiza un element pe baza indexului acestuia din listă.

Am folosit o primitivă de listă pentru acest exemplu. Noi sunam primitive.getAll() pentru a obține statul și a-l transmite desserts. După aceea, apelează funcția subscribeToUpdate(). Această funcție va fi utilizată pentru a vă abona la evenimente de schimbare a stării din Hamoni Sync.

Adăugați următorul cod după mounted proprietate 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()  }}

Codul de mai sus definește funcțiile la care ne-am referit până acum.

initialise() funcția creează lista primitivă cu numele ca vue-table.

subscribeToUpdate() funcțiile conțin cod de gestionat atunci când un element este adăugat, actualizat sau șters din lista primitivă.

deleteItem()funcția elimină un element din lista primitivă prin apelare listPrimitive.delete(index) cu indexul articolului de șters.

save() apeluri funcționale listPrimitive.push(editedItem) pentru a adăuga un element nou la lista primitivă și apeluri listPrimitive.update(editedIndex, editedItem) pentru a actualiza înregistrarea la un anumit index.

Acesta este tot codul necesar pentru a ne atinge obiectivul de a crea un tabel de date editabil în timp real. Deschide index.html fișier în browserul dvs. și aplicația este gata de utilizare!

1611279726 161 Cum se construieste un tabel de date editabil in timp

Asta e un pachet!

Am creat un tabel de date editabil în timp real în Vue.js. Hamoni Sync facilitează adăugarea funcționalității în timp real. Ambii Vuetify și Hamoni Sync aveți pachete npm dacă lucrați cu un sistem de compilare și utilizați componente de fișier unic. Puteți găsi codul sursă pe GitHub.

Resurse