Ustvarjanje prve aplikacije Nuxt – Knjižnica CRUD

Preberite, kako ustvariti aplikacijo Nuxt.


CRUD – Ustvarjanje, branje, posodabljanje, brisanje

Predvidevam, da že poznate osnove Vue JS in / ali nekoliko poznate okvir. Nuxt JS je robusten okvir, zgrajen na Vue JS. V bistvu je enako kot Vue JS. Torej zakaj, Nuxt?

Pri večini ljudi je odločitev za uporabo Nuxt JS običajno odvisna od zmogljivosti SSR.

Kaj je SSR?

SSR je okrajšava za Server Side Rendering.

Običajno se pri večini aplikacij za posamezne strani (SPA) upodobljene datoteke samodejno vbrizgajo v DOM po nalaganju strani. Zato bodo roboti in pajki SEO našli prazno stran ob nalaganju strani. Vendar pa je za SSR zaradi svoje sposobnosti predhodnega upodabljanja aplikacij na strežniku pred stranjo ta stran zlahka indeksiran s SEO pajki. Aplikacija morda naredi aplikacijo še bolj učinkovito kot običajni SPA.

Nuxt JS razvijalcem omogoča enostavno ustvarjanje aplikacij SSR. Navadne aplikacije Vue JS SPA lahko konfigurirate tudi tako, da uporabljajo SSR, vendar je postopek nekoliko težaven, Nuxt JS pa nudi ovitek za upravljanje vse te konfiguracije. Poleg SSR-ja Nuxt omogoča tudi enostaven način za vzpostavitev vašega projekta VueJS z večjo učinkovitostjo.

Čeprav je Nuxt JS še vedno Vue JS, ima nekaj temeljnih razlik v strukturi strukture svojih map.

Ta članek je osredotočen na to, da boste lahko sestavite aplikacijo z Nuxt; od tod, ne bomo se poglabljali v arhitekturo mape Nuxt, vendar bom hitro razložil nekaj pomembnih, ki jih bomo morda potrebovali tukaj.

Strani

Mapa strani je ena temeljnih razlik od običajnega Vue SPA. Predstavlja mapo Views v običajni arhitekturi Vue, mores o, v Nuxt-u pa se datoteke, ustvarjene v mapi Pages, samodejno oblikujejo kot pot. Pomeni, ko ustvarite datoteko index.vue v mapi strani, ki samodejno postane vaša korenska pot, tj. Localhost: 3000 /.

Ko ustvarite katero koli drugo filename.vue, postane to pot – ustvarjanje about.vue vam omogoča dostop do localhost: 3000 / about.

Prav tako lahko ustvarite mapo v mapi Strani. Če ustvarite mapo z imenom “kontakt” in znotraj te mape imate email.vue, potem lahko dostopate do localhosta: 3000 / contact / email. Tako preprosto. Tako vam ni treba ročno ustvariti datoteke router.js, kot to običajno počnete z Vue JS za ustvarjanje poti.

Komponente

Še vedno je približno tako kot pri Vue JS, ustvarjene komponente niso samodejno predvidene kot poti.

Statični

Statična mapa nadomešča javno mapo v običajnih aplikacijah Vue JS, deluje skoraj enako. Datoteke se tukaj ne sestavijo; postrežemo jih na enak način, kot so shranjeni.

Vse o arhitekturi in strukturi si lahko preberete na naslovu Stran z dokumentacijo Nuxt JS.

Zdaj pa zgradimo nekaj zanimivega …

Izdelava aplikacije za knjigarno

Zgradili bomo aplikacijo za prodajalne knjig, kjer lahko uporabnik doda knjige, ki jih je prebral, v določeno kategorijo, ki jim je všeč. Izgledalo bo tako.

Tako bomo imeli preprosto postavitev kot zgoraj, samo 3 stolpce, ki vsebujejo različne odseke knjig. Pred kratkim prebrane knjige, najljubše knjige in ja, najboljše od najboljših knjig (priznam, nisem vedel, kako bi poklical ta odsek, ��)

Torej je cilj tukaj, da v kateri koli od razdelkov na kartico dodate naslov, avtorja in opis knjige, uredite že dodane knjige in odstranite obstoječo knjigo. Nobene baze podatkov ne bomo uporabljali, zato se vse dogaja v državi.

Najprej namestimo Nuxt:

npm namestite create-nuxt-app

Drugič, po namestitvi Nuxt lahko projekt zdaj ustvarite z ukazom,

create-nuxt-app bookStore

Svojo aplikacijo sem izbral po imenu “bookStore”; lahko poimenujete svoje nekaj hladnejšega ^ _ ^

Nato pojdimo skozi preostale pozive in vnesite opis,

Ime avtorja, vnesite ime ali pritisnite enter, da obdržite privzete vrednosti

Izberite upravitelja paketov, ne glede na to, kje ste zadovoljni, sta oba v redu

Izberite okvir uporabniškega vmesnika. Za ta projekt bom uporabil Vuetify, nato pa se bo vsak okvir UI, ki vam je všeč, naredil prav.

Izberite okvir strežnika po meri; ne potrebujemo nobenega, izbral bom nobenega

Dodatne module, izberite, kaj želite, ali pa izberite oba, ne bi jih uporabljali za to aplikacijo.

Obloga je pomembna. Pojdimo z ESLint.

Čeprav je testiranje pomembno, tega danes ne bomo obravnavali, zato nobenega

Način upodabljanja, ja, to je SSR.

Opomba: Izbira SSR še ne pomeni, da nimamo koristi, da imamo SPA, aplikacija še vedno ostaja SPA, vendar s SSR. Druga možnost pomeni preprosto SPA in brez SSR.

Pritisnite Enter in nadaljujte,

In naš projekt ustvarja,

Po ustvarjanju lahko zdaj gremo v imenik in zaženemo

preja dev

če kot upravitelj paketa uporabljate npm, uporabite,

npm teče dev

Aplikacija privzeto deluje na localhost: 3000. Obiščite povezavo v svojem brskalniku in videli boste privzeto stran Nuxt.

Zdaj pa začnimo z ustvarjanjem potrebnih komponent. Imeli bomo kartice s prikazom podatkov o vsaki knjigi, na voljo pa bomo tudi modal, ki vsebuje obrazec za vnos novih podatkov o knjigi ali za urejanje obstoječih.

Če želite ustvariti komponento, preprosto ustvarite novo datoteko v mapi s komponentami. Tu je koda za komponento moje kartice.

// BookCard.vue

{{bookTitle}}
{{bookAuthor}}
{{bookDescription}}

izvozno privzeto {
rekviziti: ["bookTitle", "bookAuthor", "bookDescription"]
};

Hitro pojasnilo, kaj se naredi zgoraj. Slika je trdo kodirana; s tem se za zdaj ne bomo trudili. Naslov knjige, avtor knjige in opis knjige se na nadrejeno stran prenesejo na nadrejeno stran kot rekviziti. Če rekvizite ne poznate, si predstavljajte, da se lahko vhodne točke s to komponento polnijo s podatki.

Zdaj do naslednje komponente, modal.

//BookModal.vue

Dodaj knjige

Dodaj

To je oznaka za modal; v-modele moramo ustvariti kot lastnosti podatkov; zato bomo pod oznako dodali oznako skripta.

izvozno privzeto {
podatki () {
vrnitev {
kategorija: "",
naslov: "",
avtor: "",
opis: "",
};
},
}

Obstaja tudi spustni meni “Izberi kategorijo”, ki pričakuje podatke “kategorije”. To bomo dodali podatkom.

izvozno privzeto {
podatki () {
vrnitev {
odprto: napačno,
kategorija: "",
naslov: "",
avtor: "",
opis: "",
kategorije: ["Pred kratkim prebrane knjige", "Najljubše knjige", "Najboljši od najboljših"]
};
},
}

Zdaj potrebujemo način za preklop našega načina odpiranja in zapiranja, za zdaj bomo imeli samo lastnost podatkov “odprto” kot zgoraj. Pobliže si bomo ogledali to.

Na hitro ustvarimo našo stran z ogledi, kjer bomo imeli tri mreže / stolpce, po enega za vsak del knjige. Pokličimo stran index.vue, glejte kodo spodaj.

//index.vue

Pred kratkim prebrane knjige

Najljubše knjige

Najboljši od najboljših

Zdaj, ko imamo svoje mreže, moramo za vsako dodano knjigo dodati svojo komponento kartice. Zato bomo uvozili našo komponento BookCard.vue.

Pred kratkim prebrane knjige

Uredi
Odstrani

Najljubše knjige

Uredi
Odstrani

Najboljši od najboljših

Uredi
Odstrani

Zdaj smo uvozili komponento BookCard in svoje rekvizite vezali na rezultate iz zanke; to zagotavlja, da je za vsak vnos, dodan kateremu koli oddelku, zanj izdelana kartica. Na vsaki kartici bomo vključili tudi gumbe za urejanje ali odstranjevanje kartice.

Zdaj moramo uvoziti kartico iz skripta in določiti matrike, ki bodo hranili zapise za vsako od kategorij.

uvozi BookCard iz "@ / komponente / BookCard";

izvozno privzeto {
sestavni deli: {
Knjižna kartica,
},
podatki () {
vrnitev {
nedavne knjige: [],
priljubljene knjige: [],
najboljši od najboljših: []
};
},
};

Nato moramo v zaglavju imeti gumb, ki bo odprl modal, kadar bomo morali dodati knjige. To bomo storili v datoteki ‘default.vue’. Gumb bomo dodali v privzeto glavo vrstice aplikacije.

Dodaj knjige

Nato moramo v odseku za skripte ustvariti metodo openModal. V običajnih aplikacijah Vue JS obstaja vodila dogodkov, ki omogoča komunikacijo z drugo komponento in celo pošiljanje podatkov po celotnem omrežju, v Nuxt JS je še vedno vodnik dogodkov in ga lahko še vedno ustvarite na enak način. Torej bomo uporabili vodilo dogodkov za prenos podatkov, ki bodo odprli modal na strani index.vue (ki ga še moramo uvažati) iz datoteke postavitve / default.vue.

Poglejmo, kako je to storjeno.

Če želite ustvariti globalno vodilo dogodkov, odprite datoteko v korenskem imeniku projekta, ga poimenujte eventBus.js in vanj prilepite kodo spodaj.

uvoz Vue iz ‘vue’

export const eventBus = nov Vue ()

Ja, to je vse. Zdaj ga lahko uporabljamo.

import {eventBus} od "@ / eventBus";
metode: {
openModal () {
$ emitirajo $"odprto-dodaj-knjigo-modal");
}
}

Nato se vrnemo na našo komponento BookModal in poslušamo, ko eventBus odda »modal z odprtimi dodatki-knjiga«. To bomo dodali v odsek skripta.

import {eventBus} od "@ / eventBus";

ustvaril () {
eventBus. $ on ("odprto-dodaj-knjigo-modal", to.open = resnično);
},

Zdaj lahko odpremo in zapremo naš modal, vendar še ne dodaja nobenih knjig. Dodajmo način v naš Modal, da shranimo tisto, kar je dodano v stanje (ne pozabite, da ne uporabljamo nobene baze podatkov ali lokalnega pomnilnika). To dodamo zraven ‘created ()’

metode: {
saveBook () {
naj karticaData = {
naslov: this.title,
avtor: this.author,
opis: this.description,
kategorija: ta.kategorija
};
$ emit (eventBus. $) ("shranjevanje", cardData);
to.open = napačno;
}
}

Nato potrebujemo način, kako ponovno napolniti modal, ko urejamo podatke s katere koli kartice. Torej, naredimo nekaj prilagoditev ‘created ()’

ustvaril () {
eventBus. $ on ("odprto-dodaj-knjigo-modal", podatki => {
če (podatki) {
this.category = data.category;
this.title = data.title;
this.author = podatki.author;
this.description = data.description;
}
to.open = res;
});
},

Zdaj BookModal izgleda kot celota,

//BookModal.vue

Dodaj knjige

Dodaj

import {eventBus} od "@ / eventBus";
izvozno privzeto {
podatki () {
vrnitev {
odprto: napačno,
kategorija: "",
naslov: "",
avtor: "",
opis: "",
kategorije: ["Pred kratkim prebrane knjige", "Najljubše knjige", "Najboljši od najboljših"]
};
},
ustvaril () {
eventBus. $ on ("odprto-dodaj-knjigo-modal", podatki => {
če (podatki) {
this.category = data.category;
this.title = data.title;
this.author = podatki.author;
this.description = data.description;
}
to.open = res;
});
},
metode: {
saveBook () {
naj karticaData = {
naslov: this.title,
avtor: this.author,
opis: this.description,
kategorija: ta.kategorija
};
$ emit (eventBus. $) ("shranjevanje", cardData);
to.open = napačno;
}
}
};

Nato se lahko vrnemo na stran index.vue za uvoz komponente BookModal. To bomo dodali v odsek skripta.

uvozi BookCard iz "@ / komponente / BookCard";
uvozi BookModal iz "@ / komponente / BookModal";
import {eventBus} od "@ / eventBus";

izvozno privzeto {
sestavni deli: {
Knjižna kartica,
BookModal
},
podatki () {
vrnitev {
nedavne knjige: [],
priljubljene knjige: [],
najboljši od najboljših: []
};
},

Tudi v telesu bomo dodali,

Potrebujemo metode za urejanje in odstranjevanje kartice. V predlogi sem že predal metode urejanja in odstranjevanja gumbov, kot je prikazano spodaj, prav tako sem posredoval argumente, potrebne za vsako metodo.

Uredi Odstrani

Ustvarimo metode.

metode: {
odstrani (kategorija, indeks) {
če (kategorija === "Pred kratkim prebrane knjige") {
this.recentBooks.splice (indeks, 1);
}
če (kategorija === "Najljubše knjige") {
this.favouriteBooks.splice (indeks, 1);
}
če (kategorija === "Najboljši od najboljših") {
this.bestOfTheBest.splice (indeks, 1);
}
},
uredi (element, kazalo) {
če (item.category === "Pred kratkim prebrane knjige") {
$ emit (eventBus. $) ("odprto-dodaj-knjigo-modal", artikel);
this.recentBooks.splice (indeks, 1);
}
če (item.category === "Najljubše knjige") {
$ emit (eventBus. $) ("odprto-dodaj-knjigo-modal", artikel);
this.favouriteBooks.splice (indeks, 1);
}
če (item.category === "Najboljši od najboljših") {
$ emit (eventBus. $) ("odprto-dodaj-knjigo-modal", artikel);
this.bestOfTheBest.splice (indeks, 1);
}
}
}

Ne pozabite, da BookModal oddaja in dogodek, imenovan shrani knjigo, za ta dogodek potrebujemo poslušalca.

ustvaril () {
eventBus. $ on ("shranjevanje", cardData => {
če (cardData.category === "Pred kratkim prebrane knjige") {
this.recentBooks.push (cardData);
}
če (cardData.category === "Najljubše knjige") {
this.favouriteBooks.push (cardData);
}
če (cardData.category === "Najboljši od najboljših") {
this.bestOfTheBest.push (cardData);
}
});
},

Zdaj je v celotnem pogledu naša index.vue stran videti tako

Pred kratkim prebrane knjige

Pogled

Uredi
Odstrani

Najljubše knjige

Uredi
Odstrani

Najboljši od najboljših

Uredi
Odstrani

uvozi BookCard iz "@ / komponente / BookCard";
uvozi BookModal iz "@ / komponente / BookModal";
import {eventBus} od "@ / eventBus";

izvozno privzeto {
sestavni deli: {
Knjižna kartica,
BookModal
},
podatki () {
vrnitev {
nedavne knjige: [],
priljubljene knjige: [],
najboljši od najboljših: []
};
},
ustvaril () {
eventBus. $ on ("shranjevanje", cardData => {
če (cardData.category === "Pred kratkim prebrane knjige") {
this.recentBooks.push (cardData);
this.recentBooks.sort ((a, b) => b – a);
}
če (cardData.category === "Najljubše knjige") {
this.favouriteBooks.push (cardData);
this.favouriteBooks.sort ((a, b) => b – a);
}
če (cardData.category === "Najboljši od najboljših") {
this.bestOfTheBest.push (cardData);
this.bestOfTheBest.sort ((a, b) => b – a);
}
});
},
metode: {
odstrani (kategorija, indeks) {
če (kategorija === "Pred kratkim prebrane knjige") {
this.recentBooks.splice (indeks, 1);
}
če (kategorija === "Najljubše knjige") {
this.favouriteBooks.splice (indeks, 1);
}
če (kategorija === "Najboljši od najboljših") {
this.bestOfTheBest.splice (indeks, 1);
}
},
uredi (element, kazalo) {
če (item.category === "Pred kratkim prebrane knjige") {
$ emit (eventBus. $) ("odprto-dodaj-knjigo-modal", artikel);
this.recentBooks.splice (indeks, 1);
}
če (item.category === "Najljubše knjige") {
$ emit (eventBus. $) ("odprto-dodaj-knjigo-modal", artikel);
this.favouriteBooks.splice (indeks, 1);
}
če (item.category === "Najboljši od najboljših") {
$ emit (eventBus. $) ("odprto-dodaj-knjigo-modal", artikel);
this.bestOfTheBest.splice (indeks, 1);
}
}
}
};

Če ste dobili tako daleč, Super Job !!! Ti si neverjeten!

Kot smo že omenili, se vsaka .vue datoteka, ustvarjena v mapi strani, samodejno pripravi kot pot, prav tako za vsako mapo, ustvarjeno v mapi s stranmi. To ne velja samo za statične strani in dinamične strani se lahko ustvarijo tudi na ta način!

Poglejmo, kako.

S svojim trenutnim projektom recimo, da želimo dodati dinamično stran za vse knjižne kartice z gumbom za ogled, če si želite ogledati več podrobnosti o knjigi.

Hitro dodamo gumb za ogled in uporabimo stran za obisk strani. Ja, nadomešča in deluje.

Pogled

Nato ustvarimo dinamično mapo s pripono imena s podčrtajem. t.j. _title in znotraj te mape bomo imeli datoteko index.vue, ki se obkaže, ko obiščemo to pot.

Samo za demonstracijo bomo dostopali le do lastnosti params v datoteki.

// _title / index.vue

{{$ route.params.title}}

Zdaj, ko kliknemo pogled, odpre drugo stran, na kateri vidimo naslov, ki smo ga prehodili skozi pot. To lahko razvijemo tako, da naredimo karkoli želimo, kar se tiče dinamičnih strani.

To je to za to lekcijo!

Celotno kodo za to najdete v tem odlagališče. Vabljeni, da prispevate k kodeksu. Če vas zanima obvladovanje ogrodja, bi to predlagal Seveda 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