Fügen Sie Ihren Daten mit Vue und der Cosmic JS Rest API ganz einfach dynamische Filter hinzu

TL;DR

Einleitung

Das Filtern von Daten ist eines der häufigsten Features jeder datenorientierten Anwendung, egal ob es sich um eine Front-End-Anwendung oder eine Back-End-Anwendung handelt. Die Filterfunktion wird verwendet, um Datensätze in einer Tabelle oder einem Datensatz zu finden, die bestimmte Kriterien erfüllen. Wenn Sie beispielsweise eine Liste mit dem Namen „Bücher“ auf einer Webseite haben und nur Bücher anzeigen möchten, die derzeit zum Verkauf stehen. Dies können Sie mit der Filterfunktion erreichen.

Was bauen wir genau?

In diesem kurzen Tutorial erstellen wir eine Single-Page-Web-App mit zwei Teilen. Der erste Teil wird eine Liste der Studenten sein. Die Liste wird in einer tabellenartigen Struktur mit mehreren Spalten für jeden Schüler angezeigt. Jede Spalte entspricht einem Datenattribut des Schülerdatensatzes. Die Liste hat am Ende auch eine Zusammenfassungszeile, die Ihnen die Anzahl der Datensätze mitteilt. Dies ist die Studentendatenstruktur:

student: {
    id: unique identifier,
    firstName: string,
    lastName: string,
    dob: date (date of birth),
    gpa: number,
    address: string,
    city: string,
    county: string,
    state: string,
    zip: number
}

Der zweite Teil sind die Filter, mit denen der Benutzer die Daten filtern kann. Nehmen wir an, dass der Benutzer nach jedem in der Liste angezeigten Feld filtern kann. Um also generische Filterfunktionen zu erstellen, die mit mehreren Feldern verwendet werden können, müssen wir diese Filter nach Datentyp gruppieren. Und jeder Datentyp erlaubt bestimmte Vergleichsoperatoren. Die folgende Tabelle veranschaulicht diese Logik.

    string: [contains, startWith]
    date: [equal, greaterThan, lessThan, between]
    number: [equal, greaterThan, lessThan, between]
    lookup: [is, isNot]

Im Grunde können wir also 12 Vergleichsfunktionen erstellen, die wir mit all unseren Feldern oder allen Feldern, die wir in Zukunft hinzufügen können, verwenden können. Beginnen wir also mit unserer App und sehen uns an, wie wir diese Funktionen erstellen können.

Starten Sie Ihre Vue-App

Um eine neue App zu starten, müssen Sie sie installieren Sehen und öffnen Sie ein neues Terminalfenster und geben Sie Folgendes ein:

# initiating new Vue app
vue create col-admin

Vue CLI v3.0.0-rc.9
┌───────────────────────────┐
│  Update available: 3.5.1  │
└───────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Pick a linter / formatter config: Standard
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

# adding other js libraries
vue add vue-cli-plugin-vuetify
? Choose a preset: Default (recommended)
✔  Successfully invoked generator for plugin: vue-cli-plugin-vuetify

# adding the backend library
npm install --save cosmicjs

Danach sollten wir unsere Starteranwendung bereit haben, angepasst zu werden. Wenn Sie die App ausführen möchten, öffnen Sie einfach das Terminalfenster und geben Sie ein npm run serve und öffnen Sie dann die Anwendung in Ihrem Browser von dieser App-Standard-URL und Sie können mit dem nächsten Schritt fortfahren.

Richten Sie Ihre Rest-API mit Cosmic JS ein

Wie bereits erwähnt, ist das Ziel dieser App, eine Liste von Schülern anzuzeigen und dann die Filterfunktion zu verwenden, um die Liste einzugrenzen. Für dieses Projekt verwenden wir Cosmic JS zum Speichern unserer Daten und auch zum Servern der Daten mithilfe der integrierten Rest-API, die mit Cosmic JS geliefert wird.

  • Melden Sie sich kostenlos an Kosmisches JS Konto.
  • Neuen Bucket aus hinzufügen Entwicklungs-Dashboard
  • Neue hinzufügen Object Type aus dem Armaturenbrett. und geben Sie die folgenden Attribute für diesen Objekttyp an

cosmic-js-students-table.png

  • Fügen Sie auf der Registerkarte Objekttyp-Metafelder die folgenden Felder hinzu:
    SID: text field,
    firstName: text field,
    lastName: text field,
    DOB: text field,
    GPA: text field,
    Address: text field,
    City: text field,
    County: text field,
    State: text field,
    Zip: text field
  • Fügen Sie der Tabelle „Students“ einige Daten hinzu. Wenn Sie möchten, können Sie meine Datentabelle aus Cosmic JS kopieren, indem Sie my col-admin-bucket unter Ihrem Konto. Ich habe ungefähr 300 Datensätze eingefügt, sodass Sie nicht alle diese Informationen manuell eingeben müssen.
  • Greifen Sie über diese URL über die integrierte Rest-API auf Ihre Cosmic JS-Daten zu:
  • Werfen Sie einen Blick auf die Cosmic JS API-Dokumentationen für eine detaillierte Liste aller für Sie verfügbaren APIs.

Danach sollten Sie über die Rest-API auf Ihre Backend-Daten zugreifen können.

Datenspeicher mit Vuex hinzufügen

Unter unserem Projektstammordner können Sie einen neuen Ordner hinzufügen ./src/store/ und bewegen ./src/store.js unter dem Store-Ordner. Wir müssen auch eine neue Datei unter erstellen ./src/api/cosmic.js

const Cosmic = require('cosmicjs')

const config = {
    bucket: {
        slug: process.env.COSMIC_BUCKET || 'col-admin',
        read_key: process.env.COSMIC_READ_KEY,
        write_key: process.env.COSMIC_WRITE_KEY
    }
}

module.exports = Cosmic().bucket(config.bucket)

Dieses kleine Skript wird als Cosmic JS-Verbindungsobjekt verwendet.

Wir müssen auch eine neue Datei unter erstellen ./src/store/modules/cosmic.js für alle datenbezogenen Funktionen von Cosmic JS.

import Cosmic from '../../api/cosmic' // used for Rest API

const actions = {
    async fetchStudents ({commit, dispatch}) {
        const recordLimit = 25
        let skipPos = 0
        let fetchMore = true

        while (fetchMore) {
            try {
                const params = {
                    type: 'students',
                    limit: recordLimit,
                    skip: skipPos
                }
                let res = await Cosmic.getObjects(params)
                if (res.objects && res.objects.length) {
                    let data = res.objects.map((item) => {
                        return {...item.metadata, id: item.metadata.sid,
                            firstName: item.metadata.firstname,
                            lastName: item.metadata.lastname }
                    })
                    commit('ADD_STUDENTS', data)
                    commit('SET_IS_DATA_READY', true)
                    // if fetched recodrs lenght is less than 25 then we have end of list
                    if (res.objects.length < recordLimit) fetchMore = false
                } else {
                    fetchMore = false
                }
                skipPos += recordLimit
            }
            catch (error) {
                console.log(error)
                fetchMore = false
            }
        }
        dispatch('fetchStates')
    }
}

export default {
    actions
}

Bisher haben wir nur eine Funktion fetchStudents. Diese Funktion ruft das Cosmic JS auf getObjects 25 Datensätze gleichzeitig ziehen. Und es wird dies innerhalb einer While-Schleife tun, bis wir das Ende erreichen oder keine Datensätze mehr gefunden werden können. Wir können feststellen, dass das Datenende der Datenzeilenanzahl weniger als 25 Datensätze beträgt. Nachdem wir alle Daten von der Rest-API abgerufen haben, rufen wir die auf ADD_STUDENTS Mutation, um diese Datensätze in der Vuex-Zustandsvariablen zu speichern. Weitere Informationen zum Vuex Store finden Sie im Dokumentation.

Am Ende dieser Funktion steht ein weiterer Aufruf von to fetchStates. Diese Funktion durchläuft einfach alle Schülerdatensätze und ruft den eindeutigen Statuscode ab und speichert ihn states Variable. Dies kann später in der Dropdown-Komponente „Filtern nach Status“ verwendet werden.

Dies ist der Rest des Vuex-Shops.

import Vue from 'vue'
import Vuex from 'vuex'
import _ from 'underscore'
import cosmicStore from './modules/cosmic'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        isDataReady: false,
        students: [],
        states: []
    },
    getters: {
        students (state) {
            return state.students
        },
        isDataReady (state) {
            return state.isDataReady
        },
        states (state) {
            return state.states
        }
    },
    mutations: {
        SET_STUDENTS (state, value) {
            state.students = value
        },
        SET_IS_DATA_READY (state, value) {
            state.isDataReady = value
        },
        ADD_STUDENTS (state, value) {
            state.students.push(...value)
        },
        SET_STATES (state, value) {
            state.states = value
        }
    },
    actions: {
        fetchStates ({commit, state}) {
            let states = []
            states = _.chain(state.students).pluck('state').uniq().sortBy((value) => value).value()
            commit('SET_STATES', states)
        }
    },
    modules: {
        cosmicStore
    }
})

Bewerbungsstyling mit Vuetify

Für dieses Projekt werden wir verwenden Vuetify als unsere Front-End-Komponentenbibliothek. Dies ist sehr hilfreich, besonders wenn Sie es gerne verwenden Google-Materialdesign ohne viel Overhead in Ihr Projekt. Außerdem ist Vuetify großartig, weil es unzählige integrierte UI-Komponenten hat, die vollständig geladen sind. Nach dem Hinzufügen von Vuetify zu Ihrem Projekt mit dem Vue-CLI-Add-Befehl können Sie einfach auf Vuetify-Komponenten aus Ihren Seitenvorlagen verweisen.
Werfen wir einen Blick auf die App.vue Hauptlayout.

<template>
    <v-app>
        <v-toolbar app color="green accent-4">
            <v-icon>school</v-icon>
            <v-toolbar-title v-text="title"></v-toolbar-title>
            <v-spacer></v-spacer>
        </v-toolbar>

        <v-content>
            <router-view/>
        </v-content>

        <v-footer :fixed="fixed" app color="green accent-4">
            <span>&copy; 2017</span>
        </v-footer>
    </v-app>
</template>

<script>

export default {
  name: 'App',
  data () {
    return {
      fixed: false,
      title: 'College Query'
    }
  }
}
</script>

In der obigen Vorlage sehen Sie, dass unser Bewerbungsseitenlayout drei Abschnitte hat:

  • v-toolbar: Dies ist die oberste Toolbar-Komponente
  • v-content: enthält den inneren Inhalt jeder Seite
  • v-Fußzeile: die das App-Urheberrecht und die Kontaktinformationen enthält

Anwendungsansicht und Komponenten hinzufügen

Möglicherweise stellen Sie fest, dass sich unter dem Ordner „./src“ zwei Ordner befinden:

  • ./src/components: In diesem Ordner werden alle Webkomponenten gespeichert, die auf jeder Seite verwendet werden können. Aktuell verwenden wir noch keine Komponenten! aber wenn unsere App komplexer wird, könnten wir jede Seite leicht in kleine Komponenten aufteilen.
  • ./src/views: Dieser Ordner wird zum Speichern von Ansichten verwendet. Eine Ansicht ist das Äquivalent zu einer Webseite. Aktuell haben wir die Home.vue das ist die Hauptseite, und die About.vue

Hinzufügen eines Datenrasters zur Hauptseite

In dem Home.vue Seite haben wir zwei Hauptabschnitte:

  • Datenfilter: Enthält alle Filter, die der Benutzer auswählen kann.
  • Datengrid: Dies ist die Studentenliste, die als Datengrid-Komponente angezeigt wird. Für unseren Zweck verwenden wir Vuetify data-table Komponente.

Werfen wir also einen Blick auf die Homepage-Vorlage:

<template>
    <v-container grid-list-lg>
        <v-layout row wrap>
            <v-flex xs2>
                <v-select
                    :items="filterFields"
                    v-model="filterField"
                    label="Filter by">
                </v-select>
            </v-flex>
            <v-flex xs2>
                <v-select
                    :items="filterOperators"
                    v-model="filterOperator"
                    label="Operator">
                </v-select>
            </v-flex>
            <v-flex xs2 v-show="filterOperator && filterType !== 'lookup'">
                <v-text-field
                    name="filterTerm"
                    :label="filterTermLabel"
                    :mask="filterTermMask"
                    :rules="filterTermRules"
                    return-masked-value
                    v-model="filterTerm"
                ></v-text-field>
            </v-flex>
            <v-flex xs2 v-show="filterOperator === 'between'">
                <v-text-field
                    name="filterTerm2"
                    :label="filterTermLabel"
                    :mask="filterTermMask"
                    :rules="filterTermRules"
                    return-masked-value
                    v-model="filterTerm2"
                ></v-text-field>
            </v-flex>
            <v-flex xs2 v-show="filterType === 'lookup'">
                <v-autocomplete
                  :items="filterLookupItems"
                  :label="filterLookupLabel"
                  v-model="filterLookupValue"
                ></v-autocomplete>
            </v-flex>
            <v-flex xs2>
                <v-btn color="warning" @click="onClearAllFilters">Clear All</v-btn>
            </v-flex>
            <v-flex xs12>

                <v-data-table
                    :headers="headers"
                    :items="filteredStudents"
                    xhide-actions
                    :pagination.sync="pagination"
                    :loading="!isDataReady"
                    class="elevation-1">
                    <template slot="items" slot-scope="props">
                        <td>{{ props.item.id }}</td>
                        <td>{{ props.item.firstName }}</td>
                        <td>{{ props.item.lastName }}</td>
                        <td>{{ props.item.dob | shortDate(dateFilterFormat) }}</td>
                        <td>{{ props.item.gpa | gpaFloat }}</td>
                        <td>{{ props.item.address }}</td>
                        <td>{{ props.item.city }}</td>
                        <td>{{ props.item.county }}</td>
                        <td>{{ props.item.state }}</td>
                        <td>{{ props.item.zip }}</td>
                    </template>

                    <template slot="pageText" slot-scope="props">
                        Total rows: {{ props.itemsLength }}
                    </template>

                </v-data-table>

            </v-flex>
        </v-layout>
    </v-container>
</template>

Wie Sie anhand des obigen Codes sehen können. das v-data-table Komponente verwendet filteredStudents Variable als Datenquelle. Im Vuex Store haben wir zwei Zustandsvariablen:

  • students: ein Array, das alle Studenten enthält, die aus der Datenbank geholt werden.
  • filterdStudents: ein Array, das nur die Schüler enthält, die den Filterkriterien entsprechen. Wenn kein Filter ausgewählt ist, hat diese Variable anfänglich genau denselben Wert wie die students Variable.

Das data-table Komponente hat auch drei Abschnitte:

  • Header: Derzeit speichern wir den Header in einer Datenvariablen namens Header
  • items: Dies ist der Datenabschnitt, der gefüttert wird filteredStudents Variable
  • Fußzeile: Zeigt die Paginierungssteuerelemente und die Informationen zur Anzahl der Datensätze an

Hinzufügen von Datenfilter-UI-Komponenten

Wie in der Seitenvorlage Home.vue zu sehen, bestehen die Filterkomponenten aus den folgenden Komponenten:

  • Filtern nach: Derzeit müssen wir eines der verfügbaren Felder wie Vorname, Nachname, Geburtsdatum auswählen.
  • Filteroperator: Dies wird so etwas wie sein Contains‘Beginnen mit’, ‘Größer als’… Die Operatoren ändern sich je nach Feldtyp
  • Filterbegriff: Dies ist die Benutzereingabe für den ausgewählten Filter. Derzeit haben wir zwei Filterbegriffe für den Fall, dass wir einen Bereich auswählen müssen. Wenn der Benutzer beispielsweise das Geburtsdatum zwischen auswählt, benötigen wir zwei Datumseingabefelder.
  • Filtersuche: ist ein Dropdown-Menü für den Fall, dass die Filterkriterien aus einer bestimmten Liste ausgewählt werden müssen. Wenn wir in unserer App nach Staat filtern müssen, müssen wir einen Wert aus einem Dropdown-Feld auswählen.

Filterfunktion hinzufügen

Wir können die Filterfunktionalität durch diese Variablen zusammenfassen:

    headers: [
        { text: 'ID', align: 'left', sortable: false, value: 'id' },
        { text: 'First', value: 'firstName' },
        { text: 'Last', value: 'lastName' },
        { text: 'DOB', value: 'dob', dataType: 'Date' },
        { text: 'GPA', value: 'gpa' },
        { text: 'Address', value: 'address' },
        { text: 'City', value: 'city' },
        { text: 'County', value: 'county' },
        { text: 'State', value: 'state' },
        { text: 'Zip', value: 'zip' }
    ],

Dies sind die Kopfzeilen der Datentabelle.

    filterFields: [
        {text: 'First Name', value: 'firstName', type: 'text'},
        {text: 'Last Name', value: 'lastName', type: 'text'},
        {text: 'DOB', value: 'dob', type: 'date'},
        {text: 'GPA', value: 'gpa', type: 'number'},
        {text: 'Address', value: 'address', type: 'text'},
        {text: 'City', value: 'city', type: 'text'},
        {text: 'County', value: 'county', type: 'text'},
        {text: 'Zip', value: 'zip', type: 'number'},
        {text: 'State', value: 'state', type: 'lookup'}
    ],

Dies ist die Liste der Filterfelder, die der Benutzer auswählen kann. Sie können auch sehen, dass ich für jedes Filterfeld einen Typ hinzugefügt habe. Der Filtertyp wird verwendet, um zu entscheiden, welche Funktion aufgerufen wird, um die Filteroperationen auszuführen. Viele Felder haben die gleichen Datentypen, daher müssen wir keine separate Funktion aufrufen, um nach diesem Feld zu filtern. Wir rufen dieselbe Funktion für alle Felder auf, die denselben Datentyp haben.

    filterDefs: {
        text: {contains: {display: 'Contains', function: this.filterByTextContains},
               startsWith: {display: 'Starts with', function: this.filterByTextStartsWith}},
        number: {equal: {display: 'Equal', function: this.filterByNumberEqual, decimalPoint: 1},
                 greater: {display: 'Greater than', function: this.filterByNumberGreater, decimalPoint: 1},
                 less: {display: 'Less than', function: this.filterByNumberLess, decimalPoint: 1},
                 between: {display: 'Between', function: this.filterByNumberBetween, decimalPoint: 1}},
        date: {equal: {display: 'Equal', function: this.filterByDateEqual, format: 'MM/DD/YYYY'},
                 greater: {display: 'Greater than', function: this.filterByDateGreater, format: 'MM/DD/YYYY'},
                 less: {display: 'Less than', function: this.filterByDateLess, format: 'MM/DD/YYYY'},
                 between: {display: 'Between', function: this.filterByDateBetween, format: 'MM/DD/YYYY'}},
        lookup: {is: {display: 'Is', function: this.filterByLookupIs},
                 isNot: {display: 'Is not', function: this.filterByLookupIsNot}}
    },

Die Variable filterDefs speichert Informationen, die unserer Benutzeroberfläche mitteilen, welcher Operator für jeden Feldtyp verwendet werden soll. Wir geben in dieser Konfigurationsvariablen auch an, welche Javascript-Funktion aufgerufen werden soll, wenn wir nach dem ausgewählten Feld filtern müssen. Diese Variable ist meine eigene Interpretation, wie die Filterfunktion konfiguriert und gestaltet werden sollte, jedoch kann man darauf durchaus verzichten und viel Javascript-Code verwenden if Aussagen.

Das letzte Stück sind die eigentlichen Javascript-Funktionen, die wir für jeden Filtertyp aufrufen werden. Ich werde nicht alle auflisten, aber sehen wir uns einige Beispiele aus dem an Home.vue Seite

    ...
    methods: {
        filterByTextContains (list, fieldName, fieldValue) {
            const re = new RegExp(fieldValue, 'i')
            return this.filterByRegExp(list, fieldName, fieldValue, re)
        },
        filterByTextStartsWith (list, fieldName, fieldValue) {
            const re = new RegExp('^' + fieldValue, 'i')
            return this.filterByRegExp(list, fieldName, fieldValue, re)
        },
        filterByRegExp(list, fieldName, fieldValue, regExp) {
            return list.filter(item => {
                if(item[fieldName] !== undefined) {
                    return regExp.test(item[fieldName])
                } else {
                    return true
                }
            })
        },
    ...
    }

Der obige Code hat zwei Funktionen filterByTextContains und filterByTextStartsWith die jedes Mal aufgerufen wird, wenn der Benutzer die Textfeldfilterfunktion verwendet. Und hinter diesen beiden Funktionen rufen wir auf filterByRegExp Dies ist im Grunde eine Funktion, die die reguläre Javascript-Ausdrucksfunktion verwendet. Auf ähnliche Weise habe ich Filterfunktionen für numerische Felder, für Datumsfelder und für Nachschlagefelder geschrieben. Ich habe einfache Logik wie Datumsvergleich oder Array-Suche oder eine einfache alte JS-if-Anweisung verwendet. Der wichtigste Teil ist, dass diese Funktion generisch genug sein sollte, um mit jedem Feld zu arbeiten, und wenige Parameter wie die zu filternde Datenliste, den Feldnamen und den Feldwert erwartet. Ich ermutige Sie, einen Blick auf den Code für zu werfen Zuhause.vue für die vollständigen Details.

Verwenden von Vue-berechneten Eigenschaften, Beobachtern und Filtern

Sie können auch in ‚./src/views/Home.vue‘ ein paar Methoden unter „computed“, „watch“ und „filters“ finden. Hier ist, wie und warum ich jeden Typ verwende.

  • Berechnet: Ich habe diese berechneten Eigenschaften für verwendet students, filteredStudents, isDataReady, states. Diese Eigenschaften werden automatisch aktualisiert, wenn sich die zugrunde liegenden Variablen aus dem Vuex-Speicher ändern. Dies ist besonders nützlich, wenn Sie die berechneten Eigenschaften an die UI-Elemente binden und UI-Änderungen vornehmen oder zwischen UI-Abschnitten wechseln, wenn die Daten in den berechneten Eigenschaften aktualisiert wurden. Zum Beispiel isDataReady wird in der Datentabelle immer dann verwendet, wenn dies der Fall ist false dann spielt die Benutzeroberfläche eine wartende Fortschrittsleiste ab, die dem Benutzer mitteilt, dass die Daten geladen werden. Einmal die idDataReady wird aktualisiert truedann verschwindet der Ladefortschrittsbalken und die Tabelle zeigt die aktuellen Daten.

  • Beobachter: Ich habe diese beobachteten Eigenschaften verwendet filterFieldund filterOperator. Der Unterschied besteht darin, dass die überwachten Eigenschaften den Wert nicht zwischenspeichern und jedes Mal, wenn sich die zugrunde liegenden Daten ändern, die Funktion aufgerufen wird. Ich habe dies verwendet, um die Filter-UI-Elemente auf der Startseite zu aktualisieren.

  • Filter: Verwechseln Sie Vue-Filter nicht mit Datenfiltern. Filter sind Funktionen, die Sie in der Logik definieren und dann innerhalb der HTML-Vorlage verwenden, um einen Feldwert zu formatieren. Ich habe zum Beispiel shortDateund gpaFloat Funktionen, die verwendet werden, um Datums- und Float-Werte in das gewünschte Anzeigeformat zu formatieren. Mit dieser Syntax können Sie die Filterfunktion aus der HTML-Vorlage aufrufen <td>{{ props.item.gpa | gpaFloat }}</td>.

Ich möchte auch erwähnen, dass ich Vue-Lebenszyklus-Ereignis-Hooks verwendet habe, um den Datenabruf vom Backend zu initiieren, wenn die Anwendung gestartet wird. Ich mache das von der ./main.js Datei

...
new Vue({
  store,
  router,
  render: h => h(App),
  created () {
    this.$store.dispatch('fetchStudents')
  }
}).$mount('#app')

Wie Sie sehen können, rufen wir bei einem von der App erstellten Ereignis die Vuex-Aktion auf, indem wir die Versandmethoden aufrufen. Dies ist sehr nützlich, wenn Sie Aktionen automatisch auslösen möchten, ohne auf Benutzeraktionen zu warten.
Und das ist das Endergebnis. Bitte werfen Sie einen Blick auf die Anwendungsdemo für eine Probefahrt.

330e50f0-5641-11e9-9183-0b7edebb0cbb-home-filter-action.gif

Fazit

Am Ende möchte ich erwähnen, dass das Erstellen einer einfachen Anwendung wie dieser einfach klingt, das Erstellen einer erweiterbaren App jedoch einige Überlegungen und ein wenig Planung erfordern kann, um sicherzustellen, dass Ihr Code zukünftige Erweiterungen und Änderungen problemlos zulassen kann, ohne dass die App neu geschrieben werden muss .
Erwähnenswert ist auch, dass uns die Verwendung eines API-fähigen Backends sicherlich viel Zeit gespart hat. Abschließend möchte ich hinzufügen, dass ich nach Fertigstellung der App feststelle, dass die Home.vue-Seite sicherlich in kleine Komponenten aufgeteilt werden könnte, um sie lesbarer und wartbarer zu machen. Das wäre also wahrscheinlich der nächste Schritt, wenn Sie jemals Vue-Komponenten verwenden möchten.

Probieren Sie die Anwendung also aus Demowerfen Sie einen Blick auf die Quellcode und lassen Sie mich wissen, was Sie denken.

Similar Posts

Leave a Reply

Your email address will not be published.