Crearea primei dvs. aplicații Nuxt – Un magazin de cărți CRUD

Aflați cum puteți crea o aplicație Nuxt.


CRUD – Creare, citire, actualizare, ștergere

Presupun că știți deja elementele fundamentale ale Vue JS și / sau sunteți puțin familiarizați cu cadrul. Nuxt JS este un cadru robust, construit pe Vue JS. În esență este la fel ca Vue JS. Atunci de ce, Nuxt?

Pentru majoritatea oamenilor, decizia de a utiliza Nuxt JS este de obicei pentru capabilitățile sale SSR.

Ce este SSR?

SSR este o prescurtare pentru Rendering Side Server.

De obicei, pentru majoritatea aplicațiilor cu o singură pagină (SPA), fișierele redate sunt injectate automat în DOM după încărcarea paginii. Prin urmare, roboți, crawlere SEO vor găsi o pagină goală la încărcarea paginii. Cu toate acestea, pentru SSR, datorită capacității sale de a pre-reda aplicații pe server înainte de pagină, pagina respectivă poate fi ușor indexată de crawler-urile SEO. De asemenea, posibil ca aplicația să fie și mai performantă decât un SPA obișnuit.

Nuxt JS oferă dezvoltatorilor posibilitatea de a crea aplicații SSR cu ușurință. Aplicațiile Vue JS SPA obișnuite pot fi, de asemenea, configurate pentru a utiliza SSR, dar procesul este oarecum greoi, iar Nuxt JS oferă un înveliș pentru a gestiona toată configurația respectivă. Pe lângă SSR, Nuxt oferă, de asemenea, un mod ușor de a configura proiectul VueJS cu mai multă eficiență.

Deși Nuxt JS este încă Vue JS, are unele diferențe fundamentale în modul în care este structurată arhitectura folderului.

Obiectivul principal al acestui articol este acela de a putea fi capabil construiți o aplicație cu Nuxt; prin urmare, nu vom merge să ne adâncim în arhitectura folderului Nuxt, cu toate acestea, voi explica rapid unele dintre cele importante pe care le-am putea cere aici.

Pagini

Dosarul de pagini este una dintre diferențele fundamentale față de Vue SPA obișnuit. Reprezintă folderul Vizualizări în arhitectura obișnuită Vue, Mores o, în Nuxt, fișierele create în folderul Pagini sunt furnizate automat ca o rută. Adică, atunci când creați un fișier index.vue în folderul de pagini, acesta devine automat ruta rutieră, adică localhost: 3000 /.

De asemenea, atunci când creați orice alt nume de fișier.vue, acesta devine un traseu – crearea about.vue vă permite să accesați localhost: 3000 / about.

De asemenea, puteți crea un folder în folderul Pagini. Dacă creați un folder numit „contact” și în acel folder, aveți email.vue, atunci puteți accesa localhost: 3000 / contact / email. Este atât de simplu. În acest fel, nu este necesar să creați manual un fișier router.js, așa cum faceți de obicei cu Vue JS pentru a crea rutele dvs..

Componente

Este în continuare cam la fel ca în cazul Vue JS, componentele create nu sunt furnizate automat ca rute.

Static

Dosarul static înlocuiește folderul public în aplicațiile Vue JS obișnuite, funcționează cam la fel. Fișierele de aici nu sunt compilate; acestea sunt servite la fel cum sunt depozitate.

Puteți citi totul despre arhitectura și structura de la Pagina de documentare Nuxt JS.

Acum, să construim ceva interesant …

Construirea unei aplicații pentru magazine de carte

Vom construi o aplicație de magazin de cărți, unde un utilizator poate adăuga cărți pe care le-a citit la o anumită categorie pe care o place. Va arăta așa.

Deci, vom avea un aspect simplu ca mai sus, doar 3 coloane care conțin diferite secțiuni de cărți. Citiți recent cărți, cărți preferate și da, cea mai bună dintre cele mai bune cărți (mărturisesc, nu știam cum să numesc acea secțiune, ��)

Așadar, obiectivul de aici este să puteți adăuga titlul, autorul și descrierea unei cărți pe un card de pe oricare dintre secțiuni, să editați cărți adăugate deja și să eliminați o carte existentă. Nu vom folosi nicio bază de date, deci totul se întâmplă în stat.

În primul rând, instalăm Nuxt:

npm instalează aplicația create-nuxt

În al doilea rând, după instalarea Nuxt, puteți acum să creați proiectul cu comanda,

create-nuxt-app bookStore

Aleg să numesc aplicația mea „bookStore”; puteți să vă numiți ceva mai cool ^ _ ^

Apoi, să parcurgem prompturile rămase, introduceți o descriere,

Numele autorului, tastați un nume sau apăsați Enter pentru a păstra valorile prestabilite

Selectați un manager de pachete, indiferent de care sunteți confortabil, ambele sunt în regulă

Selectați un cadru UI. Pentru acest proiect, voi folosi Vuetify, apoi, din nou, orice cadru UI cu care sunteți confortabil se va descurca bine.

Selectați un cadru de server personalizat; nu avem nevoie de nimic, nu voi selecta niciuna

Module suplimentare, selectați ceea ce doriți sau selectați ambele, nu le-am folosi pentru această aplicație.

Lintingul este important. Să mergem cu ESLint.

În timp ce testarea este importantă, nu vom privi asta astăzi, deci niciuna

Modul de redare, da, SSR este.

Notă: alegerea SSR nu înseamnă că nu vom avea beneficiul de a avea un SPA, aplicația rămâne în continuare un SPA, dar cu SSR. Cealaltă opțiune înseamnă pur și simplu SPA și fără SSR.

Apăsați introduceți și mergeți mai departe,

Și proiectul nostru creează,

După creare, acum putem intra în director și a rula

fire dev

dacă utilizați npm ca manager de pachete, utilizați,

npm alerga dev

În mod implicit, aplicația rulează la localhost: 3000. Accesați linkul din browserul dvs. și ar trebui să vedeți o pagină implicită Nuxt.

Acum să începem cu crearea componentelor de care avem nevoie. Vom avea carduri care afișează fiecare informație despre carte și vom avea o modalitate care conține un formular pentru a introduce informații despre cărți noi sau pentru a le edita pe cele existente.

Pentru a crea o componentă, pur și simplu creați un fișier nou în folderul componente. Iată codul componentei cardului meu.

// BookCard.vue

{{titlul cartii}}
{{BookAuthor}}
{{descrierea cărții}}

export implicit {
recuzită: ["titlul cartii", "bookAuthor", "descrierea cărții"]
};

O explicație rapidă a ceea ce se face mai sus. Imaginea este codată tare; nu ne vom deranja de asta deocamdată. Titlul cărții, autorul cărții și descrierea cărții sunt transmise acestei componente din pagina părinte sub formă de recuzită. Dacă nu sunteți familiarizați cu recuzitele, imaginați-le ca punctele de intrare cu această componentă pot fi populate cu date.

Acum la următoarea componentă, modalul.

//BookModal.vue

Adăugați cărți

Adăuga

Acum, acesta este marcajul pentru modal; trebuie să creăm modelele v ca proprietăți de date; prin urmare, vom adăuga o etichetă script sub etichetă.

export implicit {
date() {
întoarcere {
categorie: "",
titlu: "",
autor: "",
Descriere: "",
};
},
}

De asemenea, există un meniu derulant „Selectați o categorie” care așteaptă datele „categoriilor”. Vom adăuga asta la date.

export implicit {
date() {
întoarcere {
deschis: fals,
categorie: "",
titlu: "",
autor: "",
Descriere: "",
categorii: ["Citiți recent cărți", "Cărți preferate", "Cel mai bun"]
};
},
}

Acum, avem nevoie de o modalitate de a comuta modul nostru de a deschide și de a închide, deocamdată, vom avea doar o proprietate de date „deschise” ca mai sus. Vom analiza cu atenție acest lucru în continuare.

Să creăm rapid pagina noastră de vizualizare, unde vom avea trei grile / coloane, una pentru fiecare secțiune a cărții. Să numim pagina index.vue, consultați codul de mai jos.

//index.vue

Citiți recent cărți

Cărți preferate

Cel mai bun

Acum că avem rețelele noastre, trebuie să adăugăm componenta cardului pentru fiecare grilă, pentru fiecare carte adăugată. Prin urmare, vom importa componenta BookCard.vue.

Citiți recent cărți

Editați | ×
Elimina

Cărți preferate

Editați | ×
Elimina

Cel mai bun

Editați | ×
Elimina

Acum, am importat componenta BookCard și i-am legat recuzita la rezultate din buclă; acest lucru asigură că pentru fiecare intrare adăugată la oricare dintre secțiuni, există o carte creată pentru aceasta. De asemenea, pe fiecare card, vom include butoane pentru a edita sau elimina o carte.

Acum, trebuie să importăm cardul din script și să definim tablourile care vor ține înregistrări pentru fiecare dintre categorii.

importă din BookCard "@ / Componente / BookCard";

export implicit {
componente: {
BookCard,
},
date() {
întoarcere {
cărți recente: [],
Carte favorită: [],
cel mai bun: []
};
},
};

În continuare, trebuie să avem un buton în antet care să deschidă modalitatea ori de câte ori trebuie să adăugăm cărți. Vom face acest lucru în fișierul „default.vue”. Vom adăuga butonul la antetul barei de aplicații implicite.

Adăugați cărți

În continuare, avem nevoie de o metodă de creare a openModal în secțiunea script. În aplicațiile Vue JS obișnuite, există un bus de evenimente care vă permite să comunicați cu o altă componentă și chiar să transmiteți date peste, în Nuxt JS, există încă un bus de evenimente și puteți să-l creați în același mod. Deci, vom folosi un bus de evenimente pentru a trece datele deschise o modalitate în pagina index.vue (pe care încă trebuie să o importăm) din fișierul layout / default.vue.

Să vedem cum se face.

Pentru a crea un bus de evenimente global, deschideți un fișier în directorul rădăcină al proiectului, denumiți-l eventBus.js și lipiți codul de mai jos în el.

import Vue din „vue”

export const eventBus = new Vue ()

Da, toate acestea. Acum îl putem folosi.

importați {eventBus} din "@ / EventBus";
metode: {
openModal () {
eventBus. $ EMIT ("open-add-carte-modal");
}
}

În continuare, vom reveni la componenta noastră BookModal și vom asculta când evenimentBus emite „open-add-book-modal”. Vom adăuga acest lucru la secțiunea script.

importați {eventBus} din "@ / EventBus";

creată() {
eventBus. $ pe ("open-add-carte-modal", this.open = true);
},

Acum, putem deschide și închide modalitatea noastră, dar încă nu adăugăm cărți. Să adăugăm o metodă la Modalul nostru pentru a face să economisim ceea ce este adăugat la stat (nu uitați că nu folosim nicio bază de date sau spațiu de stocare local). Adăugăm acest lucru lângă „create ()”

metode: {
saveBook () {
let cardData = {
title: this.title,
autor: acest.autor,
descriere: this.description,
categorie: aceasta.categorie
};
eventBus. $ EMIT ("Salvați-carte", carddata);
this.open = fals;
}
}

În continuare, avem nevoie de o modalitate de re-populare a modului atunci când edităm date de pe oricare dintre carduri. Așadar, să facem unele ajustări la „creat ()”

creată() {
eventBus. $ pe ("open-add-carte-modal", date => {
if (date) {
this.category = data.category;
this.title = data.title;
this.author = data.author;
this.description = data.description;
}
this.open = true;
});
},

Acum, BookModal arată ca un întreg,

//BookModal.vue

Adăugați cărți

Adăuga

importați {eventBus} din "@ / EventBus";
export implicit {
date() {
întoarcere {
deschis: fals,
categorie: "",
titlu: "",
autor: "",
Descriere: "",
categorii: ["Citiți recent cărți", "Cărți preferate", "Cel mai bun"]
};
},
creată() {
eventBus. $ pe ("open-add-carte-modal", date => {
if (date) {
this.category = data.category;
this.title = data.title;
this.author = data.author;
this.description = data.description;
}
this.open = true;
});
},
metode: {
saveBook () {
let cardData = {
title: this.title,
autor: acest.autor,
descriere: this.description,
categorie: aceasta.categorie
};
eventBus. $ EMIT ("Salvați-carte", carddata);
this.open = fals;
}
}
};

În continuare, putem să revenim acum la pagina index.vue pentru a importa componenta BookModal. Vom adăuga acest lucru la secțiunea script.

importă din BookCard "@ / Componente / BookCard";
importă BookModal din "@ / Componente / BookModal";
importați {eventBus} din "@ / EventBus";

export implicit {
componente: {
BookCard,
BookModal
},
date() {
întoarcere {
cărți recente: [],
Carte favorită: [],
cel mai bun: []
};
},

De asemenea, în corp, vom adăuga,

Avem nevoie de metode pentru editarea și eliminarea unui card. În șablonul anterior, am trecut deja metodele de editare și eliminare la butoanele așa cum se arată mai jos, de asemenea, am trecut în argumentele necesare pentru fiecare metodă.

Editați Șterge

Să creăm metodele.

metode: {
elimina (categorie, index) {
if (categorie === "Citiți recent cărți") {
this.recentBooks.splice (index, 1);
}
if (categorie === "Cărți preferate") {
this.favouriteBooks.splice (index, 1);
}
if (categorie === "Cel mai bun") {
this.bestOfTheBest.splice (index, 1);
}
},
edit (articol, index) {
if (item.category === "Citiți recent cărți") {
eventBus. $ EMIT ("open-add-carte-modal", articol);
this.recentBooks.splice (index, 1);
}
if (item.category === "Cărți preferate") {
eventBus. $ EMIT ("open-add-carte-modal", articol);
this.favouriteBooks.splice (index, 1);
}
if (item.category === "Cel mai bun") {
eventBus. $ EMIT ("open-add-carte-modal", articol);
this.bestOfTheBest.splice (index, 1);
}
}
}

Nu uitați, BookModal emite, iar un eveniment numit salvare-carte, avem nevoie de un ascultător pentru acel eveniment aici.

creată() {
eventBus. $ pe ("Salvați-carte", cardData => {
if (cardData.category === "Citiți recent cărți") {
this.recentBooks.push (carddata);
}
if (cardData.category === "Cărți preferate") {
this.favouriteBooks.push (carddata);
}
if (cardData.category === "Cel mai bun") {
this.bestOfTheBest.push (carddata);
}
});
},

Acum, într-un aspect întreg, pagina noastră index.vue arată așa

Citiți recent cărți

Vedere

Editați | ×
Elimina

Cărți preferate

Editați | ×
Elimina

Cel mai bun

Editați | ×
Elimina

importă din BookCard "@ / Componente / BookCard";
importă BookModal din "@ / Componente / BookModal";
importați {eventBus} din "@ / EventBus";

export implicit {
componente: {
BookCard,
BookModal
},
date() {
întoarcere {
cărți recente: [],
Carte favorită: [],
cel mai bun: []
};
},
creată() {
eventBus. $ pe ("Salvați-carte", cardData => {
if (cardData.category === "Citiți recent cărți") {
this.recentBooks.push (carddata);
this.recentBooks.sort ((a, b) => b – a);
}
if (cardData.category === "Cărți preferate") {
this.favouriteBooks.push (carddata);
this.favouriteBooks.sort ((a, b) => b – a);
}
if (cardData.category === "Cel mai bun") {
this.bestOfTheBest.push (carddata);
this.bestOfTheBest.sort ((a, b) => b – a);
}
});
},
metode: {
elimina (categorie, index) {
if (categorie === "Citiți recent cărți") {
this.recentBooks.splice (index, 1);
}
if (categorie === "Cărți preferate") {
this.favouriteBooks.splice (index, 1);
}
if (categorie === "Cel mai bun") {
this.bestOfTheBest.splice (index, 1);
}
},
edit (articol, index) {
if (item.category === "Citiți recent cărți") {
eventBus. $ EMIT ("open-add-carte-modal", articol);
this.recentBooks.splice (index, 1);
}
if (item.category === "Cărți preferate") {
eventBus. $ EMIT ("open-add-carte-modal", articol);
this.favouriteBooks.splice (index, 1);
}
if (item.category === "Cel mai bun") {
eventBus. $ EMIT ("open-add-carte-modal", articol);
this.bestOfTheBest.splice (index, 1);
}
}
}
};

Dacă ai ajuns atât de departe, Loc de muncă grozav !!! Ești minunat!

După cum am menționat anterior, fiecare fișier .vue creat în folderul de pagini este furnizat automat ca o rută, de asemenea, pentru fiecare folder creat în folderul de pagini. Acest lucru nu este valabil doar pentru paginile statice, iar paginile dinamice pot fi create în acest fel!

Să vedem cum.

Folosind proiectul nostru actual, să spunem că vrem să adăugăm o pagină dinamică pentru toate cărțile de carte cu un buton de vizualizare pentru a vizualiza mai multe detalii despre o carte.

Adăugăm rapid un buton de vizualizare și utilizăm o pentru a vizita pagina. Da, înlocuiește și funcționează.

Vedere

În continuare, creăm un folder dinamic prin prefixarea numelui cu o notă subliniată. adică, _titlu și în interiorul acelui folder, vom avea un fișier index.vue care va fi redat atunci când vizităm ruta.

Doar pentru demonstrație, vom accesa doar proprietatea params din fișier.

// _title / index.vue

{{$ Route.params.title}}

Acum, când facem clic pe vizualizare, se deschide o altă pagină unde putem vedea titlul pe care l-am trecut prin traseu. Acest lucru poate fi dezvoltat pentru a face orice dorim în ceea ce privește paginile dinamice.

Aceasta este pentru această lecție!

Codul complet pentru acest lucru poate fi găsit în acest lucru repertoriu. Sunteți bineveniți să contribuiți la cod. Dacă sunteți interesat să stăpâniți cadrul, atunci aș sugera acest lucru Curs Udemy.

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