Búðu til þitt fyrsta Nuxt forrit – CRUD bókabúð

Lærðu hvernig á að búa til Nuxt forrit.


CRUD – Búa til, lesa, uppfæra, eyða

Ég geri ráð fyrir að þú vitir nú þegar grundvallaratriði Vue JS og / eða þú þekkir dálítið umgjörðina. Nuxt JS er öflugur ramma, byggður á Vue JS. Það er í meginatriðum það sama og Vue JS. Þá hvers vegna, Nuxt?

Fyrir flesta er ákvörðunin um að nota Nuxt JS venjulega fyrir SSR getu sína.

Hvað er SSR?

SSR er skammstöfun fyrir Server Side Rendering.

Venjulega, fyrir flestar stakar síðuforrit (SPA), eru skráðar skrár sjálfkrafa sprautaðar inn í DOM eftir að síða hefur hlaðið sig inn. Þess vegna munu vélmenni, SEO skriðarar finna tóma síðu á síðuhleðslu. Hins vegar, fyrir SSR, vegna getu þess til að endurútgefa forrit á netþjóninum fyrir síðu, þá er hægt að skrá þessa síðu auðveldlega með SEO skrið. Einnig gerir það appið mögulega enn virkara en venjulegt SPA.

Nuxt JS veitir verktaki getu til að búa til SSR forrit auðveldlega. Venjulegt Vue JS SPA forrit er einnig hægt að stilla til að nota SSR, en ferlið er nokkuð fyrirferðarmikið, og Nuxt JS veitir umbúðir til að takast á við alla þessa uppstillingu. Fyrir utan SSR veitir Nuxt einnig auðvelda leið til að setja upp VueJS verkefni með meiri skilvirkni.

Þrátt fyrir að Nuxt JS sé ennþá Vue JS, þá hefur það nokkur grundvallarmunur á því hvernig möppu arkitektúr er uppbyggður.

Í brennidepli þessarar greinar er að þú getir það smíða forrit með Nuxt; þess vegna, við ætlum ekki að kafa djúpt í möppuarkitektúr Nuxt, ég mun hins vegar fljótt útskýra nokkrar af þeim mikilvægu sem við gætum þurft hér.

Síður

Mappa síðanna er einn af grundvallarmismunum frá venjulegu Vue SPA. Það táknar Views möppuna í venjulegri Vue arkitektúr, í oxti, í Nuxt eru skrár sem eru búnar til í Pages möppunni sjálfkrafa settar upp sem leið. Sem þýðir að þegar þú býrð til index.vue skrá í möppunni síðna verður hún sjálfkrafa að rótarleið þinni, þ.e.a.s. localhost: 3000 /.

Þegar þú býrð til önnur skráarheiti.vue verður það leið – að búa til.vue gerir þér kleift að nálgast localhost: 3000 / u.þ.b..

Þú getur líka búið til möppu í Pages möppunni. Ef þú býrð til möppu sem heitir ‘tengiliður’ og innan þeirrar möppu ertu með email.vue, þá geturðu fengið aðgang að localhost: 3000 / contact / email. Það er svo einfalt. Þannig þarftu ekki að búa til router.js skrá handvirkt eins og venjulega með Vue JS til að búa til leiðir þínar.

Íhlutir

Það er samt nokkurn veginn það sama og með Vue JS, íhlutir sem búnir eru til eru ekki sjálfkrafa útvegaðir sem leiðir.

Static

Static mappa kemur í stað almennings möppunnar í venjulegum Vue JS forritum, virka nokkurn veginn eins. Skrár hér verða ekki teknar saman; þeir eru bornir fram á sama hátt og þeir eru geymdir.

Þú getur lesið allt um arkitektúr og uppbyggingu á Nuxt JS skjalasíða.

Við skulum byggja eitthvað áhugavert …

Búðu til bókaverslunarforrit

Við munum byggja bókaverslunarforrit þar sem notandi getur bætt bókum sem þeir hafa lesið í ákveðinn flokk sem honum líkar. Það mun líta svona út.

Þannig að við verðum með einfalt skipulag eins og hér að ofan, bara 3 dálkar sem innihalda mismunandi hluta bókanna. Nýlega lesnar bækur, uppáhaldsbækur og já, bestu bestu bækurnar (ég verð að játa, ég vissi ekki hvað ég ætti að kalla þann hluta, ��)

Svo markmiðið hér er að geta bætt titli, höfund og lýsingu bókar við kort á einhvern hluta, breytt bókum sem þegar hefur verið bætt við og fjarlægt bók sem fyrir er. Við munum ekki nota neinn gagnagrunn, svo allt gerist í ríkinu.

Í fyrsta lagi setjum við upp Nuxt:

npm settu upp create-nuxt-app

Í öðru lagi, eftir að þú hefur sett upp Nuxt, getur þú nú búið til verkefnið með skipuninni,

skapa-nuxt-app bókabúð

Ég kýs að nefna forritið mitt „bókabúð“; þú getur nefnt eitthvað svalara ^ _ ^

Síðan skulum við ganga í gegnum þær leiðbeiningar sem eftir eru og sláðu inn lýsingu,

Nafn höfundar, sláðu inn nafn eða ýttu á Enter til að halda við vanskilum

Veldu pakkastjóra, hvort sem þú ert sátt / ur við hvort tveggja er það í lagi

Veldu umgjörð HÍ. Fyrir þetta verkefni mun ég nota Vuetify, og aftur, allir ramma HÍ sem þú ert ánægð / ur með mun standa sig ágætlega.

Veldu sérsniðna umgjörð netþjóns; við þurfum ekki neitt, ég mun ekki velja neinn

Auka einingar, veldu það sem þú vilt, eða veldu báðar, við myndum ekki nota þær fyrir þetta forrit.

Fóðring er mikilvæg. Förum með ESLint.

Þó prófun sé mikilvæg, munum við ekki skoða það í dag, svo engin

Útgáfustilling, já SSR það er það.

Athugið: Að velja SSR þýðir ekki að við fáum ekki hag af því að hafa SPA, appið er samt SPA en með SSR. Hinn kosturinn þýðir einfaldlega SPA og enginn SSR.

Sláðu inn og haltu áfram,

Og verkefnið okkar er að skapa,

Eftir sköpun getum við nú farið í möppuna og keyrt

garn dev

ef þú notar npm sem pakkastjóra skaltu nota,

npm hlaupa dev

Sjálfgefið er að appið gangi á staðnum: 3000. Farðu á hlekkinn í vafranum þínum og þú ættir að sjá sjálfgefna Nuxt síðu.

Byrjum núna með að búa til íhluti sem við þurfum. Við verðum með kort sem sýna hverja bókupplýsingar og við munum hafa formi sem inniheldur eyðublað til að færa inn nýjar upplýsingar um bókina eða breyta þeim sem fyrir eru.

Til að búa til íhlut skaltu einfaldlega búa til nýja skrá í möppunni íhluti. Hérna er kóðinn fyrir kortahlutann minn.

// BookCard.vue

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

flytja út sjálfgefið {
leikmunir: ["bókartitill", "bókAuthor", "bókalýsing"]
};

Skjót skýring á því sem gert er hér að ofan. Myndin er harðkóðuð; við munum ekki nenna um það í bili. Bókartitillinn, bókahöfundur og bókalýsingin eru færð niður í þennan þátt frá móðursíðunni sem leikmunir. Ef þú þekkir ekki leikmunina skaltu ímynda þér þá sem aðgangsstaði með þessum þætti er hægt að byggja með gögnum.

Nú í næsta þætti, mótaldið.

//BookModal.vue

Bættu við bókum

Bæta við

Nú er það álagning fyrir formgerðina; við verðum að búa til v-líkönin sem eiginleika gagna; þess vegna munum við bæta við handritamerki fyrir neðan merkið.

flytja út sjálfgefið {
gögn () {
snúa aftur {
flokkur: "",
titill: "",
höfundur: "",
lýsing: "",
};
},
}

Einnig er fellilistinn „Veldu flokk“ sem býst við gögnum „flokka“. Við munum bæta því við gögnin.

flytja út sjálfgefið {
gögn () {
snúa aftur {
opið: ósatt,
flokkur: "",
titill: "",
höfundur: "",
lýsing: "",
flokkar: ["Nýlega lesnar bækur", "Uppáhalds bækur", "Bestur af þeim bestu"]
};
},
}

Nú þurfum við leið til að skipta um form og opna og loka, í bili verðum við bara með „opna“ gagnaeign eins og hér að ofan. Við munum skoða það næst.

Við skulum búa til fljótlega útsýnisíðuna okkar þar sem við verðum með þrjú töflur / dálka, einn fyrir hvern hluta bókarinnar. Við skulum hringja á síðu index.vue, sjá kóðann hér að neðan.

//index.vue

Nýlega lesið bækur

Uppáhalds bækur

Bestur af þeim bestu

Nú þegar við erum með ristina okkar verðum við að bæta kortaþátt okkar í hvert töflu fyrir hverja bók sem er bætt við. Þess vegna munum við flytja inn BookCard.vue hluti okkar.

Nýlega lesið bækur

Breyta
Fjarlægðu

Uppáhalds bækur

Breyta
Fjarlægðu

Bestur af þeim bestu

Breyta
Fjarlægðu

Nú höfum við flutt inn BookCard hluti og bundið leikmunir hans við niðurstöður úr lykkjunni; þetta tryggir að fyrir hverja færslu sem bætt er við einhvern kafla er kort búið til fyrir það. Einnig, á hverju korti, munum við fylgja hnappar til að breyta eða fjarlægja kort.

Nú verðum við að flytja inn kortið úr handritinu og skilgreina fylki sem verða með skrár fyrir hvern flokk.

flytja inn BookCard frá "@ / íhlutir / BookCard";

flytja út sjálfgefið {
íhlutir: {
BookCard,
},
gögn () {
snúa aftur {
recentBooks: [],
favouriteBooks: [],
Bestur af þeim bestu: []
};
},
};

Næst verðum við að hafa hnapp í hausnum sem opnar fyrirsætuna þegar við þurfum að bæta við bókum. Við munum gera þetta í ‘default.vue’ skránni. Við munum bæta hnappinum við sjálfgefna haus forritastikunnar.

Bættu við bókum

Næst þurfum við að búa til openModal aðferðina í handritshlutanum. Í venjulegum Vue JS forritum er til atburðarstrætó sem gerir þér kleift að hafa samskipti við annan íhlut og jafnvel skila gögnum yfir, í Nuxt JS er ennþá viðburðarrúta og þú getur samt búið þau til á sama hátt. Svo munum við nota atburðarstrætó til að fara framhjá gögnum sem opna formgerð á síðunni index.vue (sem við erum enn að flytja inn) úr skipulaginu / default.vue skránni.

Við skulum sjá hvernig það er gert.

Til að búa til alþjóðaviðburðarrútu, opnaðu skrá í rótaskrá verkefnisins, nefndu hana eventBus.js og límdu kóðann hér að neðan í það.

flytja Vue frá ‘vue’

export const eventBus = new Vue ()

Já, það allt. Nú getum við notað það.

flytja {eventBus} frá "@ / eventBus";
aðferðir: {
openModal () {
atburðurBus. $ senda frá sér ("open-add-book-modal");
}
}

Næst förum við aftur til BookModal íhlutans og hlustum á þegar atburðurinn Bus gefur frá sér „opinn-bæta við-bók-modal“. Við munum bæta þessu við handritshlutann.

flytja {eventBus} frá "@ / eventBus";

búið til () {
atburðurBus. $ á ("open-add-book-modal", this.open = satt);
},

Nú getum við opnað og lokað fyrirsætunni okkar, en það bætir ekki við bækur ennþá. Við skulum bæta aðferð við Modal okkar til að bjarga því sem er bætt við ríkið (mundu að við erum ekki að nýta neinn gagnagrunn eða geymslu á staðnum). Við bætum þessu við hliðina á ‘búið ()’

aðferðir: {
saveBook () {
láta kortData = {
titill: this.title,
höfundur: þetta. heimild,
lýsing: þetta. lýsing,
flokkur: þessi.flokkur
};
atburðurBus. $ senda frá sér ("vista-bók", kortData);
this.open = ósatt;
}
}

Næst þurfum við leið til að endurbyggja formgerðina þegar við erum að breyta gögnum af einhverju kortanna. Svo skulum gera nokkrar breytingar á „búið ()“

búið til () {
atburðurBus. $ á ("open-add-book-modal", gögn => {
ef (gögn) {
this.category = data.category;
this.title = data.title;
this.author = data.author;
this.description = data.description;
}
this.open = satt;
});
},

Nú lítur BookModal út eins og þetta í heild sinni,

//BookModal.vue

Bættu við bókum

Bæta við

flytja {eventBus} frá "@ / eventBus";
flytja út sjálfgefið {
gögn () {
snúa aftur {
opið: ósatt,
flokkur: "",
titill: "",
höfundur: "",
lýsing: "",
flokkar: ["Nýlega lesnar bækur", "Uppáhalds bækur", "Bestur af þeim bestu"]
};
},
búið til () {
atburðurBus. $ á ("open-add-book-modal", gögn => {
ef (gögn) {
this.category = data.category;
this.title = data.title;
this.author = data.author;
this.description = data.description;
}
this.open = satt;
});
},
aðferðir: {
saveBook () {
láta kortData = {
titill: this.title,
höfundur: þetta. heimild,
lýsing: þetta. lýsing,
flokkur: þessi.flokkur
};
atburðurBus. $ senda frá sér ("vista-bók", kortData);
this.open = ósatt;
}
}
};

Næst getum við nú farið aftur á síðuna index.vue til að flytja inn BookModal hluti. Við munum bæta þessu við handritshlutann.

flytja inn BookCard frá "@ / íhlutir / BookCard";
flytja BookModal frá "@ / íhlutir / BookModal";
flytja {eventBus} frá "@ / eventBus";

flytja út sjálfgefið {
íhlutir: {
BookCard,
BookModal
},
gögn () {
snúa aftur {
recentBooks: [],
favouriteBooks: [],
Bestur af þeim bestu: []
};
},

Einnig í líkamanum munum við bæta við,

Við þurfum aðferðir til að breyta og fjarlægja kort. Í sniðmátinu áðan fór ég nú þegar að breyta og fjarlægja aðferðir á hnappana eins og sýnt er hér að neðan, sömuleiðis fór ég í þau rök sem þarf fyrir hverja aðferð.

Breyta Fjarlægja

Við skulum búa til aðferðirnar.

aðferðir: {
fjarlægja (flokkur, vísitala) {
ef (flokkur === "Nýlega lesnar bækur") {
this.recentBooks.splice (vísitala, 1);
}
ef (flokkur === "Uppáhalds bækur") {
this.favouriteBooks.splice (vísitala, 1);
}
ef (flokkur === "Bestur af þeim bestu") {
this.bestOfTheBest.splice (vísitala, 1);
}
},
breyta (hlut, vísitölu) {
if (item.category === "Nýlega lesnar bækur") {
atburðurBus. $ senda frá sér ("open-add-book-modal", hlutur);
this.recentBooks.splice (vísitala, 1);
}
if (item.category === "Uppáhalds bækur") {
atburðurBus. $ senda frá sér ("open-add-book-modal", hlutur);
this.favouriteBooks.splice (vísitala, 1);
}
if (item.category === "Bestur af þeim bestu") {
atburðurBus. $ senda frá sér ("open-add-book-modal", hlutur);
this.bestOfTheBest.splice (vísitala, 1);
}
}
}

Mundu að BookModal er að senda frá sér og atburði sem kallast save-book, við þurfum hlustanda fyrir þann atburð hér.

búið til () {
atburðurBus. $ á ("vista-bók", cardData => {
if (cardData.category === "Nýlega lesnar bækur") {
this.recentBooks.push (kortData);
}
if (cardData.category === "Uppáhalds bækur") {
this.favouriteBooks.push (cardData);
}
if (cardData.category === "Bestur af þeim bestu") {
this.bestOfTheBest.push (cardData);
}
});
},

Nú, í einni heildarútlitinu, lítur index.vue síðan okkar svona út

Nýlega lesið bækur

Útsýni

Breyta
Fjarlægðu

Uppáhalds bækur

Breyta
Fjarlægðu

Bestur af þeim bestu

Breyta
Fjarlægðu

flytja inn BookCard frá "@ / íhlutir / BookCard";
flytja BookModal frá "@ / íhlutir / BookModal";
flytja {eventBus} frá "@ / eventBus";

flytja út sjálfgefið {
íhlutir: {
BookCard,
BookModal
},
gögn () {
snúa aftur {
recentBooks: [],
favouriteBooks: [],
Bestur af þeim bestu: []
};
},
búið til () {
atburðurBus. $ á ("vista-bók", cardData => {
if (cardData.category === "Nýlega lesnar bækur") {
this.recentBooks.push (kortData);
this.recentBooks.sort ((a, b) => b – a);
}
if (cardData.category === "Uppáhalds bækur") {
this.favouriteBooks.push (cardData);
this.favouriteBooks.sort ((a, b) => b – a);
}
if (cardData.category === "Bestur af þeim bestu") {
this.bestOfTheBest.push (cardData);
this.bestOfTheBest.sort ((a, b) => b – a);
}
});
},
aðferðir: {
fjarlægja (flokkur, vísitala) {
ef (flokkur === "Nýlega lesnar bækur") {
this.recentBooks.splice (vísitala, 1);
}
ef (flokkur === "Uppáhalds bækur") {
this.favouriteBooks.splice (vísitala, 1);
}
ef (flokkur === "Bestur af þeim bestu") {
this.bestOfTheBest.splice (vísitala, 1);
}
},
breyta (hlut, vísitölu) {
if (item.category === "Nýlega lesnar bækur") {
atburðurBus. $ senda frá sér ("open-add-book-modal", hlutur);
this.recentBooks.splice (vísitala, 1);
}
if (item.category === "Uppáhalds bækur") {
atburðurBus. $ senda frá sér ("open-add-book-modal", hlutur);
this.favouriteBooks.splice (vísitala, 1);
}
if (item.category === "Bestur af þeim bestu") {
atburðurBus. $ senda frá sér ("open-add-book-modal", hlutur);
this.bestOfTheBest.splice (vísitala, 1);
}
}
}
};

Ef þú komst svona langt, frábært starf !!! Þú ert frábær!

Eins og áður hefur komið fram er hver .vue-skrá, sem búin er til í síðumöppunni, sjálfkrafa lögð sem leið, sömuleiðis fyrir hverja möppu sem er búin til í síðumöppunni. Þetta gildir ekki aðeins fyrir truflanir og einnig er hægt að búa til kraftmiklar síður á þennan hátt!

Við skulum sjá hvernig.

Notum núverandi verkefni okkar, við skulum segja að við viljum bæta við kvikri síðu fyrir öll bókaspjöldin með útsýnishnappi til að sjá frekari upplýsingar um bók.

Við skulum bæta fljótt við skoðunarhnappi og notaðu a til að heimsækja síðuna. Já, kemur í staðinn og það virkar.

Útsýni

Næst búum við til kraftmikla möppu með því að forskeyma nafnið með undirstriki. þ.e.a.s. _title og inni í möppunni verðum við með index.vue skrá sem verður gefin upp þegar við heimsækjum þá leið.

Bara til sýnis, munum við aðeins fá aðgang að eiginleikum params innan skjalsins.

// _title / index.vue

{{$ route.params.title}}

Þegar við smellum á útsýni opnar það aðra síðu þar sem við getum séð titilinn sem við höfum komist í gegnum leiðina. Hægt er að þróa þetta til að gera allt sem við viljum hvað varðar kvika síður.

Það er það fyrir þessa lexíu!

Heill kóða fyrir þetta er að finna í þessu geymsla. Þér er velkomið að leggja til kóðann. Ef þú hefur áhuga á að ná tökum á umgjörðinni, þá myndi ég stinga upp á þessu Udemy námskeið.

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