Stvaranje prve aplikacije Nuxt – Trgovina knjigama s CRUD-om

Saznajte kako stvoriti Nuxt aplikaciju.


CRUD – Stvaranje, čitanje, ažuriranje, brisanje

Pretpostavljam da već poznajete osnove Vue JS-a i / ili ste malo upoznati s okvirom. Nuxt JS robustan je okvir izgrađen na Vue JS-u. U osnovi je isti kao Vue JS. Pa zašto, Nuxt?

Za većinu ljudi odluka o korištenju Nuxt JS-a obično je zbog njegovih SSR mogućnosti.

Što je SSR?

SSR je kratica za Server Side Rendering.

Obično se za većinu aplikacija za jednu stranicu (SPA) dovedene datoteke automatski ubrizgavaju u DOM nakon učitavanja stranice. Stoga će roboti, SEO indeksi pronaći praznu stranicu pri učitavanju stranice. No, za SSR, zbog sposobnosti da unaprijed prikazuju aplikacije na poslužitelju prije stranice, SEO indeksi mogu lako indeksirati tu stranicu. Nadalje, aplikacija možda čini još uspješnijom od uobičajenog SPA-a.

Nuxt JS pruža programerima mogućnost stvaranja SSR aplikacija s lakoćom. Redovne Vue JS SPA aplikacije također se mogu konfigurirati za korištenje SSR-a, ali postupak je pomalo glomazan, a Nuxt JS nudi omot za obradu sve te konfiguracije. Osim SSR-a, Nuxt također nudi jednostavan način za postavljanje vašeg VueJS projekta s većom učinkovitošću.

Iako je Nuxt JS još uvijek Vue JS, to ima neke temeljne razlike u strukturi strukture njegove mape.

Fokus ovog članka je da to možete napravi aplikaciju s Nuxt-om; stoga, nećemo zaroniti duboko u Nuxt arhitekturu mapa, međutim, brzo ću objasniti neke od važnih onih koje bismo mogli zahtijevati ovdje.

stranice

Mapa stranica jedna je od temeljnih razlika od uobičajene Vue SPA. Predstavlja mapu Views u regularnoj Vue arhitekturi, mores o, u Nuxt-u, datoteke stvorene u mapi Pages automatski se postavljaju kao ruta. Znači, kada stvorite datoteku index.vue u mapi stranica, to automatski postaje vaša korijenska ruta, tj. Localhost: 3000 /.

Također, kada stvorite bilo koji drugi naziv datoteke.vue, to postaje ruta – stvaranje about.vue omogućuje vam pristup localhost: 3000 / about.

Također možete stvoriti mapu unutar mape Pages. Ako stvorite mapu pod nazivom “kontakt”, a unutar te mape imate e-adresu email.vue, tada možete pristupiti localhost: 3000 / contact / email. To je tako jednostavno. Na ovaj način, ne morate ručno stvarati router.js datoteku kao što to obično radite s Vue JS za izradu ruta.

komponente

I dalje je približno isto kao i kod Vue JS-a, stvorene komponente se ne predviđaju automatski kao rute.

Statički

Statička mapa zamjenjuje javnu mapu u uobičajenim Vue JS aplikacijama, a funkcije su približno iste. Ovdje se datoteke ne sastavljaju; poslužuju se na isti način na koji su pohranjeni.

Sve o arhitekturi i strukturi možete pročitati na adresi Nuxt stranica dokumentacije JS.

A sad, napravimo nešto zanimljivo …

Izgradnja aplikacije za knjižare

Izgradit ćemo aplikaciju za knjižare gdje korisnik može dodati pročitane knjige u određenu kategoriju koju voli. Izgledat će ovako.

Dakle, imat ćemo jednostavan izgled kao gore, samo 3 stupca koji sadrže različite odjeljke knjiga. Nedavno pročitane knjige, omiljene knjige i da, najbolje od najboljih knjiga (priznajem, priznao sam, nisam znao kako nazvati taj odjeljak, ��)

Dakle, cilj je ovdje biti u bilo kojem odjeljku mogućnost naslova, autora i opisa knjige dodati kartici, urediti već dodane knjige i ukloniti postojeću knjigu. Nećemo koristiti nijednu bazu podataka, pa se sve događa u državi.

Prvo instaliramo Nuxt:

npm instalirajte create-nuxt-app

Drugo, nakon što instalirate Nuxt, sada možete stvoriti projekt naredbom,

create-nuxt-app bookStore

Odlučim svoju aplikaciju imenovati “bookStore”; možete imenovati svoje nešto hladnije ^ _ ^

Zatim prođite kroz preostale upute, unesite opis,

Ime autora, utipkajte ime ili pritisnite enter da zadržite zadane vrijednosti

Odaberite upravitelja paketa, bez obzira što vam je ugodno, i jedno i drugo u redu

Odaberite okvir korisničkog sučelja. Za ovaj projekt koristit ću Vuetify, a opet, svaki UI okvir koji vam je ugodan učinit će se sasvim u redu.

Odaberite prilagođeni okvir poslužitelja; ne trebaju nam, izabrati ću nijednog

Dodatni moduli, odaberite što želite ili odaberite oba, ne bismo ih koristili za ovu aplikaciju.

Oblaganje je važno. Idemo s ESLintom.

Iako je testiranje važno, to danas nećemo gledati, pa ni jedno

Način prikazivanja, da, SSR je.

Napomena: Odabir SSR-a ne znači da ne koristimo SPA uslugu, aplikacija je i dalje SPA, ali sa SSR-om. Druga opcija znači jednostavno SPA i bez SSR-a.

Pritisnite tipku Enter i krenite dalje,

A naš projekt stvara,

Nakon izrade, sada možemo ući u direktorij i pokrenuti se

pređa dev

Ako kao voditelj paketa koristite npm, upotrijebite,

npm trčanje dev

Aplikacija prema zadanim postavkama radi na localhostu: 3000. Posjetite vezu u pregledniku i trebali biste vidjeti zadanu stranicu Nuxt.

Krenimo sada od stvaranja potrebnih komponenti. Imat ćemo kartice s prikazom svake informacije o knjizi, a imat ćemo modal koji sadrži obrazac za unos novih podataka o knjizi ili za uređivanje postojećih.

Da biste stvorili komponentu, jednostavno stvorite novu datoteku u mapi komponenata. Evo koda za komponentu moje kartice.

// BookCard.vue

{{Naslov knjige}}
{{BOOKAUTHOR}}
{{BookDescription}}

izvoz zadani {
rekviziti: ["Naslov knjige", "BOOKAUTHOR", "bookDescription"]
};

Brzo objašnjenje onoga što se radi gore. Slika je tvrdo kodirana; nećemo se zasad mučiti oko toga. Naslov knjige, autor knjige i opis knjige prosljeđuju se na ovu komponentu s roditeljske stranice kao rekviziti. Ako niste upoznati sa rekvizitima, zamislite ih kako se ulazne točke putem ove komponente mogu popuniti podacima.

Sada do sljedeće komponente, modal.

//BookModal.vue

Dodajte knjige

Dodati

To je oznaka za modal; moramo stvoriti v-modele kao svojstva podataka; stoga ćemo ispod oznake dodati skriptu.

izvoz zadani {
podaci () {
povratak {
kategorija: "",
titula: "",
Autor: "",
opis: "",
};
},
}

Tu je i padajući izbornik “Kategorija” koji očekuje podatke “kategorija”. To ćemo dodati u podatke.

izvoz zadani {
podaci () {
povratak {
otvoreno: lažno,
kategorija: "",
titula: "",
Autor: "",
opis: "",
kategorije: ["Nedavno pročitane knjige", "Omiljene knjige", "Najbolji od najboljih"]
};
},
}

E sad, potreban nam je način da prebacimo svoj modal na otvaranje i zatvaranje, za sada ćemo samo imati svojstvo podataka ‘otvoren’ kao gore. Pomno ćemo pogledati sljedeći.

Brzo napravimo našu stranicu pogleda na kojoj ćemo imati tri rešetke / stupaca, po jedan za svaki odjeljak knjige. Nazovimo stranicu index.vue, pogledajte kôd u nastavku.

//index.vue

Nedavno pročitane knjige

Omiljene knjige

Najbolji od najboljih

Sada kada imamo svoje rešetke, moramo dodati našu komponentu kartice svakoj rešetki, za svaku dodanu knjigu. Stoga ćemo uvesti našu BookCard.vue komponentu.

Nedavno pročitane knjige

Uredi
Ukloniti

Omiljene knjige

Uredi
Ukloniti

Najbolji od najboljih

Uredi
Ukloniti

Sada smo uvezli komponentu BookCard-a i vezali njene rekvizite za rezultate iz petlje; ovo osigurava da za svaki unos dodan u bilo koji odjeljak postoji kartica za njega. Također, na svaku ćemo karticu uključiti gumbe za uređivanje ili uklanjanje kartice.

Sada moramo uvesti karticu iz skripte i definirati nizove koji će sadržavati zapise za svaku od kategorija.

uvesti BookCard s "’/ Komponente / BookCard";

izvoz zadani {
komponente: {
BookCard,
},
podaci () {
povratak {
nedavne knjige: [],
omiljene knjige: [],
Najbolji od najboljih: []
};
},
};

Dalje, trebamo imati gumb u zaglavlju koji će otvoriti modal kad god trebamo dodati knjige. To ćemo učiniti u datoteci ‘default.vue’. Gumb ćemo dodati zadanom zaglavlju trake aplikacije.

Dodajte knjige

Zatim treba stvoriti metodu openModal u odjeljku skripta. U redovnim Vue JS aplikacijama postoji sabirnica događaja koja vam omogućuje komunikaciju s drugom komponentom, pa čak i prosljeđivanje podataka, u Nuxt JS-u još uvijek postoji sabirnica događaja i još uvijek ga možete stvoriti na isti način. Dakle, upotrijebit ćemo magistralu događaja da bismo proslijedili podatke otvorili modal na stranici index.vue (koju tek moramo uvesti) iz datoteke layout / default.vue datoteke.

Da vidimo kako se to radi.

Da biste stvorili globalnu magistralu događaja, otvorite datoteku u korijenskom direktoriju projekta, imenovajte je eventBus.js i u nju zalijepite donji kôd.

import Vue iz ‘vue’

export const eventBus = novi Vue ()

Da, to je sve. Sada to možemo koristiti.

import {eventBus} iz "@ / EventBus";
metode: {
openModal () {
eventBus. emitiraju $ ("otvorenog dodatak knjiga-modalne");
}
}

Zatim ćemo se vratiti na našu komponentu BookModal i osluškivati ​​kad eventBus emitira ‘open-add-book-modal’. To ćemo dodati u odjeljak skripte.

import {eventBus} iz "@ / EventBus";

stvoreno () {
eventBus. $ na ("otvorenog dodatak knjiga-modalne", ovo.open = istina);
},

Sada možemo otvoriti i zatvoriti naš modal, ali još ne dodaje knjige. Dodajmo metodu u naš Modal da bismo sačuvali ono što je dodano u stanje (imajte na umu da ne koristimo nijednu bazu podataka ili lokalnu pohranu). Dodajmo ovo pored „created ()“

metode: {
saveBook () {
neka karticaData = {
naslov: this.title,
autor: this.author,
opis: this.description,
kategorija: ova.kategorija
};
eventBus. emitiraju $ ("štedite-knjiga", cardData);
ovo.open = lažno;
}
}

Zatim nam treba način da se popuni modal tijekom uređivanja podataka s bilo koje kartice. Dakle, napravimo neka prilagođavanja ‘created ()’

stvoreno () {
eventBus. $ na ("otvorenog dodatak knjiga-modalne", podataka => {
ako (podaci) {
this.category = data.category;
this.title = data.title;
this.author = podaci.author;
this.description = data.description;
}
ovo.open = istina;
});
},

Sada BookModal izgleda kao cjelina,

//BookModal.vue

Dodajte knjige

Dodati

import {eventBus} iz "@ / EventBus";
izvoz zadani {
podaci () {
povratak {
otvoreno: lažno,
kategorija: "",
titula: "",
Autor: "",
opis: "",
kategorije: ["Nedavno pročitane knjige", "Omiljene knjige", "Najbolji od najboljih"]
};
},
stvoreno () {
eventBus. $ na ("otvorenog dodatak knjiga-modalne", podataka => {
ako (podaci) {
this.category = data.category;
this.title = data.title;
this.author = podaci.author;
this.description = data.description;
}
ovo.open = istina;
});
},
metode: {
saveBook () {
neka karticaData = {
naslov: this.title,
autor: this.author,
opis: this.description,
kategorija: ova.kategorija
};
eventBus. emitiraju $ ("štedite-knjiga", cardData);
ovo.open = lažno;
}
}
};

Zatim se sada možemo vratiti na stranicu index.vue za uvoz komponente BookModal. To ćemo dodati u odjeljak skripte.

uvesti BookCard s "’/ Komponente / BookCard";
uvesti BookModal iz "’/ Komponente / BookModal";
import {eventBus} iz "@ / EventBus";

izvoz zadani {
komponente: {
BookCard,
BookModal
},
podaci () {
povratak {
nedavne knjige: [],
omiljene knjige: [],
Najbolji od najboljih: []
};
},

Također, u tijelu ćemo dodati,

Potrebne su nam metode za uređivanje i uklanjanje kartice. U predlošku sam već prenio metode uređivanja i uklanjanja na gumbe kao što je prikazano u nastavku. Isto tako, proslijedio sam argumente potrebne za svaku metodu.

Uredi Ukloni

Stvorimo metode.

metode: {
ukloni (kategorija, indeks) {
ako (kategorija === "Nedavno pročitane knjige") {
this.recentBooks.splice (indeks, 1);
}
ako (kategorija === "Omiljene knjige") {
this.favouriteBooks.splice (indeks, 1);
}
ako (kategorija === "Najbolji od najboljih") {
this.bestOfTheBest.splice (indeks, 1);
}
},
uredi (stavka, indeks) {
ako (item.category === "Nedavno pročitane knjige") {
eventBus. emitiraju $ ("otvorenog dodatak knjiga-modalne", artikal);
this.recentBooks.splice (indeks, 1);
}
ako (item.category === "Omiljene knjige") {
eventBus. emitiraju $ ("otvorenog dodatak knjiga-modalne", artikal);
this.favouriteBooks.splice (indeks, 1);
}
ako (item.category === "Najbolji od najboljih") {
eventBus. emitiraju $ ("otvorenog dodatak knjiga-modalne", artikal);
this.bestOfTheBest.splice (indeks, 1);
}
}
}

Zapamtite, BookModal emitira, a događaj zvan save-book, ovdje nam treba slušatelj.

stvoreno () {
eventBus. $ na ("štedite-knjiga", cardData => {
ako (cardData.category === "Nedavno pročitane knjige") {
this.recentBooks.push (cardData);
}
ako (cardData.category === "Omiljene knjige") {
this.favouriteBooks.push (cardData);
}
ako (cardData.category === "Najbolji od najboljih") {
this.bestOfTheBest.push (cardData);
}
});
},

Sada, u cjelokupnom pogledu, naša index.vue stranica izgleda ovako

Nedavno pročitane knjige

Pogled

Uredi
Ukloniti

Omiljene knjige

Uredi
Ukloniti

Najbolji od najboljih

Uredi
Ukloniti

uvesti BookCard s "’/ Komponente / BookCard";
uvesti BookModal iz "’/ Komponente / BookModal";
import {eventBus} iz "@ / EventBus";

izvoz zadani {
komponente: {
BookCard,
BookModal
},
podaci () {
povratak {
nedavne knjige: [],
omiljene knjige: [],
Najbolji od najboljih: []
};
},
stvoreno () {
eventBus. $ na ("štedite-knjiga", cardData => {
ako (cardData.category === "Nedavno pročitane knjige") {
this.recentBooks.push (cardData);
ovo.recentBooks.sort ((a, b) => b – a);
}
ako (cardData.category === "Omiljene knjige") {
this.favouriteBooks.push (cardData);
this.favouriteBooks.sort ((a, b) => b – a);
}
ako (cardData.category === "Najbolji od najboljih") {
this.bestOfTheBest.push (cardData);
this.bestOfTheBest.sort ((a, b) => b – a);
}
});
},
metode: {
ukloni (kategorija, indeks) {
ako (kategorija === "Nedavno pročitane knjige") {
this.recentBooks.splice (indeks, 1);
}
ako (kategorija === "Omiljene knjige") {
this.favouriteBooks.splice (indeks, 1);
}
ako (kategorija === "Najbolji od najboljih") {
this.bestOfTheBest.splice (indeks, 1);
}
},
uredi (stavka, indeks) {
ako (item.category === "Nedavno pročitane knjige") {
eventBus. emitiraju $ ("otvorenog dodatak knjiga-modalne", artikal);
this.recentBooks.splice (indeks, 1);
}
ako (item.category === "Omiljene knjige") {
eventBus. emitiraju $ ("otvorenog dodatak knjiga-modalne", artikal);
this.favouriteBooks.splice (indeks, 1);
}
ako (item.category === "Najbolji od najboljih") {
eventBus. emitiraju $ ("otvorenog dodatak knjiga-modalne", artikal);
this.bestOfTheBest.splice (indeks, 1);
}
}
}
};

Ako ste stigli ovako daleko, Veliki posao !!! Ti si strašan!

Kao što je ranije spomenuto, svaka .vue datoteka stvorena u mapi stranica automatski se predviđa kao ruta, za svaku mapu stvorenu u mapi sa stranicama. To ne vrijedi samo za statičke stranice, a dinamičke se stranice mogu stvoriti i na ovaj način!

Da vidimo kako.

Uz pomoć našeg trenutačnog projekta, recimo da želimo dodati dinamičnu stranicu za sve kartice knjiga s gumbom za prikaz da bismo vidjeli više detalja o knjizi.

Brzo dodamo gumb pregleda i upotrijebite a da posjetite stranicu. Da, zamjenjuje i djeluje.

Pogled

Zatim stvaramo dinamičku mapu, prefiksajući naziv s podvlakom. tj. _title i unutar te mape imat ćemo datoteku index.vue koja se prikazuje kad posjetimo tu rutu.

Samo za demonstraciju, pristupat ćemo samo parametru parama unutar datoteke.

// _title / index.vue

{{$}} Route.params.title

Kada kliknemo pregled, otvara se druga stranica na kojoj možemo vidjeti naslov koji smo prošli putem. To se može razviti u svrhu postizanja bilo čega što se tiče dinamičnih stranica.

To je to za ovu lekciju!

Kompletan kod za to može se naći u ovome skladište. Možete dodati doprinos kodeksu. Ako vas zanima svladavanje okvira, ja bih vam ovo predložio Udemy tečaj.

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