Erstellen Ihrer ersten Nuxt-App – Ein CRUD-Buchladen

Erfahren Sie, wie Sie eine Nuxt-Anwendung erstellen.


CRUD – Erstellen, Lesen, Aktualisieren, Löschen

Ich gehe davon aus, dass Sie die Grundlagen von Vue JS bereits kennen und / oder mit dem Framework ein wenig vertraut sind. Nuxt JS ist ein robustes Framework, das auf Vue JS basiert. Es ist im Wesentlichen dasselbe wie Vue JS. Warum dann, Nuxt??

Für die meisten Menschen liegt die Entscheidung für Nuxt JS normalerweise in den SSR-Funktionen.

Was ist SSR??

SSR ist eine Abkürzung für Server Side Rendering.

Normalerweise werden bei den meisten Single Page Applications (SPA) gerenderte Dateien nach dem Laden der Seite automatisch in das DOM eingefügt. Daher finden Bots und SEO-Crawler beim Laden der Seite eine leere Seite. Für SSR kann diese Seite jedoch aufgrund ihrer Fähigkeit, Apps auf dem Server vor der Seite vorab zu rendern, von SEO-Crawlern problemlos indiziert werden. Außerdem ist die App möglicherweise noch leistungsfähiger als ein normales SPA.

Nuxt JS bietet Entwicklern die Möglichkeit, problemlos SSR-Anwendungen zu erstellen. Normale Vue JS SPA-Apps können auch für die Verwendung von SSR konfiguriert werden, der Vorgang ist jedoch etwas umständlich, und Nuxt JS bietet einen Wrapper für die gesamte Konfiguration. Neben der SSR bietet Nuxt auch eine einfache Möglichkeit, Ihr VueJS-Projekt effizienter einzurichten.

Obwohl Nuxt JS immer noch Vue JS ist, gibt es einige grundlegende Unterschiede in der Struktur der Ordnerarchitektur.

Der Schwerpunkt dieses Artikels liegt darauf, dass Sie dies können Erstellen Sie eine App mit Nuxt. daher, Wir werden nicht tief in die Ordnerarchitektur von Nuxt eintauchen, aber ich werde schnell einige der wichtigen erklären, die wir hier benötigen könnten.

Seiten

Der Seitenordner ist einer der grundlegenden Unterschiede zum regulären Vue SPA. Es stellt den Ordner “Ansichten” in der regulären Vue-Architektur dar. In Nuxt werden Dateien, die im Ordner “Seiten” erstellt wurden, automatisch als Route bereitgestellt. Das heißt, wenn Sie eine index.vue-Datei im Seitenordner erstellen, wird diese automatisch zu Ihrer Stammroute, d. H. Localhost: 3000 /.

Wenn Sie einen anderen Dateinamen.vue erstellen, wird dies zu einer Route. Wenn Sie about.vue erstellen, können Sie auf localhost: 3000 / about zugreifen.

Sie können auch einen Ordner im Ordner “Seiten” erstellen. Wenn Sie einen Ordner mit dem Namen “Kontakt” erstellen und in diesem Ordner “email.vue” haben, können Sie auf localhost zugreifen: 3000 / contact / email. So einfach ist das. Auf diese Weise müssen Sie keine router.js-Datei manuell erstellen, wie Sie es normalerweise mit Vue JS tun würden, um Ihre Routen zu erstellen.

Komponenten

Es ist immer noch fast dasselbe wie bei Vue JS. Die erstellten Komponenten werden nicht automatisch als Routen bereitgestellt.

Statisch

Der statische Ordner ersetzt den öffentlichen Ordner in regulären Vue JS-Apps und funktioniert fast gleich. Dateien hier werden nicht kompiliert. Sie werden genauso serviert, wie sie gelagert werden.

Sie können alles über die Architektur und Struktur auf der lesen Nuxt JS-Dokumentationsseite.

Lassen Sie uns jetzt etwas Interessantes bauen …

Erstellen einer Buchladen-App

Wir werden eine Buchladen-App erstellen, in der ein Benutzer Bücher, die er gelesen hat, zu einer bestimmten Kategorie hinzufügen kann, die er mag. Es wird so aussehen.

Wir haben also ein einfaches Layout wie oben, nur 3 Spalten, die die verschiedenen Abschnitte von Büchern enthalten. Lesen Sie kürzlich Bücher, Lieblingsbücher und ja, die besten der besten Bücher (ich muss gestehen, ich wusste nicht, wie ich diesen Abschnitt nennen soll, ��)

Das Ziel hier ist es also, einer Karte in einem der Abschnitte den Titel, den Autor und die Beschreibung eines Buches hinzuzufügen, bereits hinzugefügte Bücher zu bearbeiten und ein vorhandenes Buch zu entfernen. Wir werden keine Datenbank verwenden, also passiert alles im Staat.

Zuerst installieren wir Nuxt:

npm installiere create-nuxt-app

Zweitens können Sie nach der Installation von Nuxt das Projekt jetzt mit dem Befehl erstellen,

create-nuxt-app bookStore

Ich nenne meine App “bookStore”. Sie können Ihre etwas coolere ^ _ ^ nennen

Lassen Sie uns dann die verbleibenden Eingabeaufforderungen durchgehen und eine Beschreibung eingeben,

Autorenname, geben Sie einen Namen ein oder drücken Sie die Eingabetaste, um die Standardeinstellungen beizubehalten

Wählen Sie einen Paketmanager aus, mit dem Sie vertraut sind. Beide sind in Ordnung

Wählen Sie ein UI-Framework aus. Für dieses Projekt werde ich Vuetify verwenden. Andererseits funktioniert jedes UI-Framework, mit dem Sie vertraut sind, einwandfrei.

Wählen Sie ein benutzerdefiniertes Server-Framework aus. Wir brauchen keine, ich werde keine auswählen

Zusätzliche Module, wählen Sie aus, was Sie möchten, oder wählen Sie beide aus. Wir würden sie für diese App nicht verwenden.

Flusen ist wichtig. Gehen wir mit ESLint.

Während das Testen wichtig ist, werden wir uns das heute nicht ansehen, also keine

Rendering-Modus, ja, SSR ist es.

Hinweis: Die Auswahl von SSR bedeutet nicht, dass wir nicht den Vorteil eines SPA erhalten. Die App bleibt weiterhin ein SPA, jedoch mit SSR. Die andere Option bedeutet einfach SPA und keine SSR.

Drücken Sie die Eingabetaste und fahren Sie fort,

Und unser Projekt schafft,

Nach der Erstellung können wir nun in das Verzeichnis gehen und ausführen

Garn dev

Wenn Sie npm als Paketmanager verwenden, verwenden Sie,

npm run dev

Standardmäßig läuft die App auf localhost: 3000. Besuchen Sie den Link in Ihrem Browser, und Sie sollten eine Standard-Nuxt-Seite sehen.

Beginnen wir nun mit der Erstellung der benötigten Komponenten. Wir werden Karten haben, auf denen jede Buchinformation angezeigt wird, und wir werden ein Modal haben, das ein Formular enthält, um neue Buchinformationen einzugeben oder vorhandene zu bearbeiten.

Um eine Komponente zu erstellen, erstellen Sie einfach eine neue Datei im Komponentenordner. Hier ist der Code für meine Kartenkomponente.

// BookCard.vue

{{Buchtitel}}
{{bookAuthor}}
{{Buchbeschreibung}}

Standard exportieren {
Requisiten: ["Buchtitel", "bookAuthor", "Buchbeschreibung"]]
};

Eine kurze Erklärung dessen, was oben gemacht wurde. Das Bild ist fest codiert. Wir werden uns vorerst nicht darum kümmern. Der Buchtitel, der Buchautor und die Buchbeschreibung werden von der übergeordneten Seite als Requisiten an diese Komponente weitergegeben. Wenn Sie mit Requisiten nicht vertraut sind, stellen Sie sich diese vor, da Einstiegspunkte mit dieser Komponente mit Daten gefüllt werden können.

Nun zur nächsten Komponente, dem Modal.

//BookModal.vue

Bücher hinzufügen

Hinzufügen

Das ist das Markup für das Modal. Wir müssen die V-Modelle als Dateneigenschaften erstellen. Daher fügen wir unter dem Tag ein Skript-Tag hinzu.

Standard exportieren {
Daten() {
Rückkehr {
Kategorie: "",
Titel: "",
Autor: "",
Beschreibung: "",
};
}},
}}

Außerdem gibt es eine Dropdown-Liste “Kategorie auswählen”, in der “Kategoriedaten” erwartet werden. Wir werden das zu den Daten hinzufügen.

Standard exportieren {
Daten() {
Rückkehr {
offen: falsch,
Kategorie: "",
Titel: "",
Autor: "",
Beschreibung: "",
Kategorien: ["Kürzlich Bücher gelesen", "Lieblingsbücher", "Die Besten der Besten"]]
};
}},
}}

Jetzt brauchen wir eine Möglichkeit, unser modales Öffnen und Schließen umzuschalten. Im Moment haben wir nur eine “offene” Dateneigenschaft wie oben. Wir werden uns das als nächstes genau ansehen.

Lassen Sie uns schnell unsere Ansichtsseite erstellen, auf der wir drei Raster / Spalten haben, eine für jeden Abschnitt des Buches. Rufen wir die Seite index.vue auf, siehe den folgenden Code.

//index.vue

Kürzlich gelesene Bücher

Lieblingsbücher

Die Besten der Besten

Nachdem wir unsere Raster haben, müssen wir unsere Kartenkomponente für jedes hinzugefügte Buch zu jedem Raster hinzufügen. Daher werden wir unsere BookCard.vue-Komponente importieren.

Kürzlich gelesene Bücher

Bearbeiten
Entfernen

Lieblingsbücher

Bearbeiten
Entfernen

Die Besten der Besten

Bearbeiten
Entfernen

Jetzt haben wir die BookCard-Komponente importiert und ihre Requisiten an die Ergebnisse der Schleife gebunden. Dies stellt sicher, dass für jeden Eintrag, der zu einem der Abschnitte hinzugefügt wird, eine Karte dafür erstellt wird. Außerdem enthalten wir auf jeder Karte Schaltflächen zum Bearbeiten oder Entfernen einer Karte.

Jetzt müssen wir die Karte aus dem Skript importieren und die Arrays definieren, die Datensätze für jede der Kategorien enthalten.

BookCard aus importieren "@ / components / BookCard";;

Standard exportieren {
Komponenten: {
BookCard,
}},
Daten() {
Rückkehr {
RecentBooks: [],
Lieblingsbücher: [],
die Besten der Besten: []
};
}},
};

Als nächstes benötigen wir eine Schaltfläche in der Kopfzeile, die das Modal öffnet, wenn wir Bücher hinzufügen müssen. Wir werden dies in der Datei “default.vue” tun. Wir werden die Schaltfläche zum Standard-Header der App-Leiste hinzufügen.

Bücher hinzufügen

Als nächstes müssen wir die openModal-Methode im Skriptabschnitt erstellen. In regulären Vue JS-Apps gibt es einen Ereignisbus, mit dem Sie mit einer anderen Komponente kommunizieren und sogar Daten weitergeben können. In Nuxt JS gibt es noch einen Ereignisbus, den Sie auf dieselbe Weise erstellen können. Wir werden also einen Ereignisbus verwenden, um Daten zu übergeben, die ein Modal auf der Seite index.vue (die wir noch importieren müssen) aus der Datei layout / default.vue öffnen.

Mal sehen, wie es geht.

Um einen globalen Ereignisbus zu erstellen, öffnen Sie eine Datei im Stammverzeichnis des Projekts, nennen Sie sie eventBus.js und fügen Sie den folgenden Code ein.

importiere Vue von ‘vue’

export const eventBus = new Vue ()

Ja, das alles. Jetzt können wir es benutzen.

{eventBus} aus importieren "@ / eventBus";;
Methoden: {
openModal () {
eventBus. $ emit ("open-add-book-modal");
}}
}}

Als nächstes kehren wir zu unserer BookModal-Komponente zurück und hören zu, wann der eventBus “open-add-book-modal” ausgibt. Wir werden dies dem Skriptabschnitt hinzufügen.

{eventBus} aus importieren "@ / eventBus";;

created () {
eventBus. $ on ("open-add-book-modal", this.open = true);
}},

Jetzt können wir unser Modal öffnen und schließen, aber es werden noch keine Bücher hinzugefügt. Fügen wir unserem Modal eine Methode hinzu, um zu speichern, was dem Status hinzugefügt wird (denken Sie daran, dass wir keine Datenbank oder lokalen Speicher verwenden). Wir fügen dies neben “created ()” hinzu.

Methoden: {
saveBook () {
let cardData = {
Titel: this.title,
Autor: this.author,
Beschreibung: this.description,
Kategorie: this.category
};
eventBus. $ emit ("Buch speichern", cardData);
this.open = false;
}}
}}

Als nächstes brauchen wir eine Möglichkeit, das Modal neu zu füllen, wenn wir Daten von einer der Karten bearbeiten. Nehmen wir also einige Anpassungen an “created ()” vor.

created () {
eventBus. $ on ("open-add-book-modal", Daten => {
if (Daten) {
this.category = data.category;
this.title = data.title;
this.author = data.author;
this.description = data.description;
}}
this.open = true;
});
}},

Jetzt sieht das BookModal insgesamt so aus,

//BookModal.vue

Bücher hinzufügen

Hinzufügen

{eventBus} aus importieren "@ / eventBus";;
Standard exportieren {
Daten() {
Rückkehr {
offen: falsch,
Kategorie: "",
Titel: "",
Autor: "",
Beschreibung: "",
Kategorien: ["Kürzlich Bücher gelesen", "Lieblingsbücher", "Die Besten der Besten"]]
};
}},
created () {
eventBus. $ on ("open-add-book-modal", Daten => {
if (Daten) {
this.category = data.category;
this.title = data.title;
this.author = data.author;
this.description = data.description;
}}
this.open = true;
});
}},
Methoden: {
saveBook () {
let cardData = {
Titel: this.title,
Autor: this.author,
Beschreibung: this.description,
Kategorie: this.category
};
eventBus. $ emit ("Buch speichern", cardData);
this.open = false;
}}
}}
};

Als Nächstes können wir jetzt zur Seite index.vue zurückkehren, um die BookModal-Komponente zu importieren. Wir werden dies dem Skriptabschnitt hinzufügen.

BookCard aus importieren "@ / components / BookCard";;
BookModal aus importieren "@ / components / BookModal";;
{eventBus} aus importieren "@ / eventBus";;

Standard exportieren {
Komponenten: {
BookCard,
BookModal
}},
Daten() {
Rückkehr {
RecentBooks: [],
Lieblingsbücher: [],
die Besten der Besten: []
};
}},

Auch im Körper werden wir hinzufügen,

Wir brauchen Methoden zum Bearbeiten und Entfernen einer Karte. In der vorherigen Vorlage habe ich die Bearbeitungs- und Entfernungsmethoden bereits wie unten gezeigt an die Schaltflächen übergeben. Ebenso habe ich die für jede Methode erforderlichen Argumente übergeben.

Bearbeiten Entfernen

Lassen Sie uns die Methoden erstellen.

Methoden: {
entfernen (Kategorie, Index) {
if (Kategorie === "Kürzlich Bücher gelesen") {
this.recentBooks.splice (Index, 1);
}}
if (Kategorie === "Lieblingsbücher") {
this.favouriteBooks.splice (Index, 1);
}}
if (Kategorie === "Die Besten der Besten") {
this.bestOfTheBest.splice (Index, 1);
}}
}},
bearbeiten (Element, Index) {
if (item.category === "Kürzlich Bücher gelesen") {
eventBus. $ emit ("open-add-book-modal", Artikel);
this.recentBooks.splice (Index, 1);
}}
if (item.category === "Lieblingsbücher") {
eventBus. $ emit ("open-add-book-modal", Artikel);
this.favouriteBooks.splice (Index, 1);
}}
if (item.category === "Die Besten der Besten") {
eventBus. $ emit ("open-add-book-modal", Artikel);
this.bestOfTheBest.splice (Index, 1);
}}
}}
}}

Denken Sie daran, dass das BookModal sendet und ein Ereignis namens “Save-Book”. Wir benötigen hier einen Listener für dieses Ereignis.

created () {
eventBus. $ on ("Buch speichern", cardData => {
if (cardData.category === "Kürzlich Bücher gelesen") {
this.recentBooks.push (cardData);
}}
if (cardData.category === "Lieblingsbücher") {
this.favouriteBooks.push (cardData);
}}
if (cardData.category === "Die Besten der Besten") {
this.bestOfTheBest.push (cardData);
}}
});
}},

Auf einen Blick sieht unsere index.vue-Seite so aus

Kürzlich gelesene Bücher

Aussicht

Bearbeiten
Entfernen

Lieblingsbücher

Bearbeiten
Entfernen

Die Besten der Besten

Bearbeiten
Entfernen

BookCard aus importieren "@ / components / BookCard";;
BookModal aus importieren "@ / components / BookModal";;
{eventBus} aus importieren "@ / eventBus";;

Standard exportieren {
Komponenten: {
BookCard,
BookModal
}},
Daten() {
Rückkehr {
RecentBooks: [],
Lieblingsbücher: [],
die Besten der Besten: []
};
}},
created () {
eventBus. $ on ("Buch speichern", cardData => {
if (cardData.category === "Kürzlich Bücher gelesen") {
this.recentBooks.push (cardData);
this.recentBooks.sort ((a, b) => b – a);
}}
if (cardData.category === "Lieblingsbücher") {
this.favouriteBooks.push (cardData);
this.favouriteBooks.sort ((a, b) => b – a);
}}
if (cardData.category === "Die Besten der Besten") {
this.bestOfTheBest.push (cardData);
this.bestOfTheBest.sort ((a, b) => b – a);
}}
});
}},
Methoden: {
entfernen (Kategorie, Index) {
if (Kategorie === "Kürzlich Bücher gelesen") {
this.recentBooks.splice (Index, 1);
}}
if (Kategorie === "Lieblingsbücher") {
this.favouriteBooks.splice (Index, 1);
}}
if (Kategorie === "Die Besten der Besten") {
this.bestOfTheBest.splice (Index, 1);
}}
}},
bearbeiten (Element, Index) {
if (item.category === "Kürzlich Bücher gelesen") {
eventBus. $ emit ("open-add-book-modal", Artikel);
this.recentBooks.splice (Index, 1);
}}
if (item.category === "Lieblingsbücher") {
eventBus. $ emit ("open-add-book-modal", Artikel);
this.favouriteBooks.splice (Index, 1);
}}
if (item.category === "Die Besten der Besten") {
eventBus. $ emit ("open-add-book-modal", Artikel);
this.bestOfTheBest.splice (Index, 1);
}}
}}
}}
};

Wenn Sie so weit gekommen sind, tolle Arbeit !!! Du bist toll!

Wie bereits erwähnt, wird jede im Seitenordner erstellte .vue-Datei automatisch als Route für jeden im Seitenordner erstellten Ordner bereitgestellt. Dies gilt nicht nur für statische Seiten, sondern auch für dynamische Seiten!

Mal sehen, wie.

Angenommen, wir möchten mit unserem aktuellen Projekt eine dynamische Seite für alle Buchkarten mit einer Schaltfläche zum Anzeigen hinzufügen, um weitere Details zu einem Buch anzuzeigen.

Fügen Sie schnell eine Ansichtsschaltfläche hinzu und verwenden Sie eine, um die Seite zu besuchen. Ja, ersetzt und es funktioniert.

Aussicht

Als Nächstes erstellen wir einen dynamischen Ordner, indem wir dem Namen einen Unterstrich voranstellen. d.h. _title und in diesem Ordner befindet sich eine index.vue-Datei, die beim Besuch dieser Route gerendert wird.

Nur zur Demonstration greifen wir nur auf die Eigenschaft params in der Datei zu.

// _title / index.vue

{{$ route.params.title}}

Wenn wir jetzt auf Ansicht klicken, wird eine weitere Seite geöffnet, auf der wir den Titel sehen können, den wir durch die Route geführt haben. Dies kann entwickelt werden, um alles zu tun, was wir für dynamische Seiten wollen.

Das war’s für diese Lektion!

Den vollständigen Code dazu finden Sie hier Repository. Sie können gerne zum Code beitragen. Wenn Sie daran interessiert sind, das Framework zu beherrschen, würde ich dies vorschlagen Udemy natürlich.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map