Paglikha ng Iyong Unang Nuxt App – Isang CRUD Book Store

Alamin kung paano lumikha ng isang application ng Nuxt.


CRUD – Lumikha, Basahin, I-update, Tanggalin

Ipinapalagay ko na alam mo na ang mga batayan ng Vue JS at / o medyo pamilyar ka sa balangkas. Ang Nuxt JS ay isang matatag na balangkas, na itinayo sa Vue JS. Ito ay mahalagang katulad ng Vue JS. Kung gayon bakit, Nuxt?

Para sa karamihan ng mga tao, ang desisyon na gamitin ang Nuxt JS ay karaniwang para sa mga kakayahan ng SSR nito.

Ano ang SSR?

Ang SSR ay isang pagdadaglat para sa Server Side Rendering.

Karaniwan, para sa karamihan ng mga Aplikasyon ng Pahina (SPA), ang mga na-file na file ay awtomatikong na-injected sa DOM matapos na ma-load ang pahina. Samakatuwid, ang mga bot, ang mga crawler ng SEO ay makakahanap ng isang walang laman na pahina sa pag-load ng pahina. Gayunpaman, para sa SSR, dahil sa kakayahang mag-pre-render ng mga app sa server bago ang pahina, ang pahinang iyon ay madaling ma-index ng mga SEO crawler. Gayundin, posibleng gawin ang app kahit na mas performant kaysa sa isang regular na SPA.

Nuxt JS nagbibigay ng mga developer ng kakayahang lumikha ng mga aplikasyon ng SSR nang madali. Ang regular na Vue JS SPA apps ay maaari ring mai-configure upang magamit ang SSR, ngunit ang proseso ay medyo mahirap, at ang Nuxt JS ay nagbibigay ng isang pambalot upang hawakan ang lahat ng pagsasaayos na iyon. Asides ang SSR, nagbibigay din ang Nuxt ng isang madaling paraan upang mai-set up ang iyong VueJS proyekto na may higit na kahusayan.

Kahit na ang Nuxt JS ay pa rin Vue JS, mayroon itong ilang mga pangunahing pagkakaiba sa kung paano nakaayos ang arkitektura ng folder nito.

Ang pokus ng artikulong ito ay para sa iyo upang magawa bumuo ng isang app na may Nuxt; samakatuwid, hindi kami lalabas ng malalim sa arkitektura ng folder ng Nuxt, gayunpaman, mabilis kong ipapaliwanag ang ilan sa mga mahahalagang kailangan natin dito.

Mga pahina

Ang folder ng mga pahina ay isa sa mga pangunahing pagkakaiba-iba mula sa regular na Vue SPA. Kinakatawan nito ang folder ng Views sa regular na arkitektura ng Vue, mores o, sa Nuxt, ang mga file na nilikha sa folder ng Mga Pahina ay awtomatikong inilaan bilang isang ruta. Ibig sabihin, kapag lumikha ka ng isang index.vue file sa folder ng mga pahina, na awtomatikong nagiging iyong ruta ng ugat, i.e., localhost: 3000 /.

Gayundin, kapag lumikha ka ng anumang iba pang filename.vue, nagiging ruta ito – paglikha ng about.vue ay nagbibigay-daan sa iyo na ma-access ang localhost: 3000 / tungkol sa.

Maaari ka ring lumikha ng isang folder sa loob ng folder ng Mga Pahina. Kung lumikha ka ng isang folder na nagngangalang ‘contact’ at sa loob ng folder na iyon, mayroon kang email.vue, pagkatapos ay ma-access mo ang localhost: 3000 / contact / email. Ito ay simple. Sa ganitong paraan, hindi mo kailangang manu-manong lumikha ng isang file ng router.js tulad ng karaniwang gagawin mo sa Vue JS upang lumikha ng iyong mga ruta.

Mga Bahagi

Pareho rin ito sa katulad ng sa Vue JS, ang mga sangkap na nilikha ay hindi awtomatikong inilalaan bilang mga ruta.

Static

Pinalitan ng static folder ang pampublikong folder sa regular na Vue JS apps, gumagana ang parehong pareho. Ang mga file dito ay hindi nakakolekta; sila ay pinaglingkuran sa parehong paraan na naka-imbak.

Maaari mong basahin ang lahat tungkol sa arkitektura at istraktura sa Ang pahina ng dokumentong Nuxt JS.

Ngayon, magtayo tayo ng isang bagay na kawili-wili …

Pagbuo ng isang app sa tindahan ng libro

Kami ay magtatayo ng isang book store app, kung saan maaaring magdagdag ang isang gumagamit ng mga libro na kanilang nabasa sa isang partikular na kategorya na gusto nila. Mukhang ganito.

Kaya, magkakaroon kami ng isang simpleng layout tulad ng nasa itaas, 3 mga haligi na naglalaman ng iba’t ibang mga seksyon ng mga libro. Kamakailan ay nagbasa ng mga libro, mga paboritong libro, at oo, pinakamaganda sa mga pinakamahusay na mga libro (kukuha ako, hindi ko alam kung ano ang tatawag sa seksyong iyon, ��)

Kaya ang layunin dito, ay maaaring magdagdag ng pamagat, may-akda at paglalarawan ng isang libro sa isang kard sa alinman sa mga seksyon, i-edit ang mga naidagdag na mga libro at alisin ang isang umiiral na libro. Hindi namin ginagamit ang anumang database, kaya ang lahat ay nangyayari sa estado.

Una, mai-install namin ang Nuxt:

npm i-install ang gumawa-nuxt-app

Pangalawa, pagkatapos i-install ang Nuxt, maaari mo na ngayong lumikha ng proyekto gamit ang utos,

gumawa-nuxt-app bookStore

Pinili kong pangalanan ang aking app na ‘bookStore’; maaari mong pangalanan ang iyong bagay na mas cool ^ _ ^

Pagkatapos, lakarin ang natitirang mga senyas, magpasok ng isang paglalarawan,

Pangalan ng may-akda, mag-type ng isang pangalan o pindutin ang ipasok upang mapanatili ang mga default

Pumili ng isang tagapamahala ng pakete, alinman ikaw ay komportable, pareho ay maayos

Pumili ng isang balangkas ng UI. Para sa proyektong ito, gumagamit ako ng Vuetify, pagkatapos muli, ang anumang balangkas ng UI na komportable ka ay gagawa lamang ng maayos.

Pumili ng isang pasadyang balangkas ng server; hindi na namin kailangan, pipili ako ng wala

Karagdagang mga module, piliin kung ano ang gusto mo, o piliin ang pareho, hindi namin ito ginagamit para sa app na ito.

Mahalaga ang linting. Sumama tayo sa ESLint.

Bagaman mahalaga ang pagsubok, hindi tayo titingnan ngayon, kaya wala

Rendering mode, oo SSR ito.

Tandaan: Ang pagpili ng SSR ay hindi nangangahulugang hindi namin makuha ang pakinabang ng pagkakaroon ng SPA, ang app ay nananatiling isang SPA ngunit kasama ang SSR. Ang iba pang pagpipilian ay nangangahulugang simpleng SPA at walang SSR.

Pindutin ang ipasok at magpatuloy,

At ang aming proyekto ay lumilikha,

Pagkatapos ng paglikha, maaari na kaming pumunta sa direktoryo at tumakbo

sinulid dev

kung gumagamit ka ng npm bilang iyong manager ng package, gamitin,

npm tumakbo dev

Bilang default, tumatakbo ang app sa localhost: 3000. Bisitahin ang link sa iyong browser, at dapat mong makita ang isang default na pahina ngxt.

Magsimula na tayo sa paglikha ng mga sangkap na kailangan namin. Magkakaroon kami ng mga kard na nagpapakita ng bawat impormasyon sa libro, at magkakaroon kami ng isang modal na naglalaman ng isang form upang maipasok ang mga bagong impormasyon sa libro o i-edit ang mga umiiral na.

Upang lumikha ng isang sangkap, lumikha lamang ng isang bagong file sa folder ng mga sangkap. Narito ang code para sa aking bahagi ng card.

// BookCard.vue

{{pamagat ng Libro}}
{{bookAuthor}}
{{bookDescription}}

default default
props:"pamagat ng Libro", "libroAuthor", "aklatDeskripsyon"]
};

Isang mabilis na paliwanag tungkol sa kung ano ang tapos na sa itaas. Ang imahe ay hardcoded; hindi kami mag-aabala tungkol sa ngayon. Ang pamagat ng libro, may-akda ng libro, at paglalarawan ng libro ay ipinapasa sa sangkap na ito mula sa pahina ng magulang bilang mga prop. Kung hindi ka pamilyar sa mga props, isipin ang mga ito bilang mga punto ng pagpasok sa pamamagitan ng sangkap na ito ay maaaring mapuno ng data.

Ngayon sa susunod na sangkap, ang modal.

//BookModal.vue

Magdagdag ng Mga Libro

Idagdag

Ngayon, iyon ang markup para sa modal; kailangan naming lumikha ng mga v-modelo bilang mga katangian ng data; samakatuwid, magdagdag kami ng isang tag ng script sa ibaba ng tag.

default default
data () {
bumalik {
kategorya: "",
pamagat: "",
may-akda: "",
paglalarawan: "",
};
},
}

Gayundin, mayroong isang ‘Pumili ng isang kategorya’ na pagbagsak na inaasahan ang data ng ‘kategorya’. Idagdag namin iyon sa data.

default default
data () {
bumalik {
bukas: hindi totoo,
kategorya: "",
pamagat: "",
may-akda: "",
paglalarawan: "",
mga kategorya:"Kamakailan ay nagbasa ng mga libro", "Mga Paboritong libro", "Pinakamahusay sa pinakamahusay"]
};
},
}

Ngayon, kailangan namin ng isang paraan upang i-toggle ang aming modal na bukas at malapit, para sa ngayon, magkakaroon lamang kami ng isang ‘bukas’ na ari-arian ng data tulad ng nasa itaas. Kami ay tumingin nang malapit sa susunod na.

Mabilis na lumikha ng aming pahina ng view kung saan magkakaroon kami ng tatlong grids / haligi, isa para sa bawat seksyon ng libro. Tawagan ang index ng pahina.vue, tingnan ang code sa ibaba.

//index.vue

Kamakailan Basahin ang Mga Libro

Mga Paboritong Libro

Pinakamaganda sa Pinakamahusay

Ngayon na mayroon kaming mga grids, kailangan naming idagdag ang aming bahagi ng card sa bawat grid, para sa bawat idinagdag na libro. Samakatuwid, i-import namin ang aming bahagi ng BookCard.vue.

Kamakailan Basahin ang Mga Libro

I-edit
Alisin

Mga Paboritong Libro

I-edit
Alisin

Pinakamaganda sa Pinakamahusay

I-edit
Alisin

Ngayon, na-import namin ang sangkap ng BookCard at naisaayos ang mga props nito sa mga resulta mula sa loop; tinitiyak nito na para sa bawat entry na idinagdag sa alinman sa mga seksyon, mayroong isang kard na nilikha para dito. Gayundin, sa bawat kard, isasama namin ang mga pindutan upang mai-edit o alisin ang isang kard.

Ngayon, kailangan nating i-import ang card mula sa script at tukuyin ang mga oras na may hawak na mga tala para sa bawat isa sa mga kategorya.

i-import ang BookCard mula sa "@ / sangkap / BookCard";

default default
mga sangkap: {
BookCard,
},
data () {
bumalik {
kamakailan-lamang na mga libro: [],
favouriteBooks: [],
bestOfTheBest: []
};
},
};

Susunod, kailangan nating magkaroon ng isang pindutan sa header na magbubukas ng modal tuwing kailangan nating magdagdag ng mga libro. Gagawin namin ito sa file na ‘default.vue’. Idadagdag namin ang pindutan sa header ng default na app bar.

Magdagdag ng Mga Libro

Susunod, kailangan namin ng isang lumikha ng openModal na pamamaraan sa seksyon ng script. Sa regular na apps ng Vue JS, mayroong isang event bus na nagbibigay-daan sa iyo na makipag-usap sa isa pang sangkap at kahit na ipasa ang data, sa Nuxt JS, mayroon pa ring isang bus ng kaganapan at maaari mo pa ring likhain ito sa parehong paraan. Kaya, gagamitin namin ang isang bus ng kaganapan upang maipasa ang data na magbukas ng isang modal sa pahina ng index.vue (na na-import pa namin) mula sa layout / default.vue file.

Tingnan natin kung paano ito nagawa.

Upang lumikha ng isang pandaigdigang bus ng kaganapan, buksan ang isang file sa direktoryo ng ugat ng proyekto, pangalanan ito eventBus.js at i-paste ang code sa ibaba nito.

import Vue mula sa ‘vue’

export const eventBus = bagong Vue ()

Oo, lahat iyon. Ngayon magagamit natin ito.

import {eventBus} mula sa "@ / eventBus";
paraan: {
openModal () {
eventBus. $ emit ("open-add-book-modal");
}
}

Susunod, babalik tayo sa aming bahagi ng BookModal, at makinig sa kapag ang eventBus ay naglabas ng ‘open-add-book-modal’. Idagdag namin ito sa seksyon ng script.

import {eventBus} mula sa "@ / eventBus";

nilikha () {
eventBus. $ sa ("open-add-book-modal", ito.open = totoo);
},

Ngayon, maaari nating buksan at isara ang ating modal, ngunit hindi pa ito magdagdag ng anumang mga libro. Magdagdag tayo ng isang pamamaraan sa aming Modal upang mai-save ang idinagdag sa estado (tandaan na hindi namin ginagamit ang anumang database o lokal na imbakan). Idagdag namin ito sa tabi ng ‘nilikha ()’

paraan: {
saveBook () {
hayaan ang cardData = {
pamagat: ito.title,
may-akda: ito.author,
paglalarawan: ito.description,
kategorya: ito.category
};
eventBus. $ emit ("save-book", cardData);
ito.open = maling;
}
}

Susunod, kailangan namin ng isang paraan upang muling pamayanan ang modal kapag nag-edit kami ng data mula sa alinman sa mga kard. Kaya gumawa ng ilang mga pagsasaayos sa ‘nilikha ()’

nilikha () {
eventBus. $ sa ("open-add-book-modal", data => {
kung (data) {
this.category = data.category;
ito.title = data.title;
ito.author = data.author;
this.description = data.description;
}
ito.open = totoo;
});
},

Ngayon, ganito ang hitsura ng BookModal,

//BookModal.vue

Magdagdag ng Mga Libro

Idagdag

import {eventBus} mula sa "@ / eventBus";
default default
data () {
bumalik {
bukas: hindi totoo,
kategorya: "",
pamagat: "",
may-akda: "",
paglalarawan: "",
mga kategorya:"Kamakailan ay nagbasa ng mga libro", "Mga Paboritong libro", "Pinakamahusay sa pinakamahusay"]
};
},
nilikha () {
eventBus. $ sa ("open-add-book-modal", data => {
kung (data) {
this.category = data.category;
ito.title = data.title;
ito.author = data.author;
this.description = data.description;
}
ito.open = totoo;
});
},
paraan: {
saveBook () {
hayaan ang cardData = {
pamagat: ito.title,
may-akda: ito.author,
paglalarawan: ito.description,
kategorya: ito.category
};
eventBus. $ emit ("save-book", cardData);
ito.open = maling;
}
}
};

Susunod, maaari na nating bumalik sa pahina ng index.vue upang mai-import ang bahagi ng BookModal. Idagdag namin ito sa seksyon ng script.

i-import ang BookCard mula sa "@ / sangkap / BookCard";
i-import ang BookModal mula sa "@ / sangkap / BookModal";
import {eventBus} mula sa "@ / eventBus";

default default
mga sangkap: {
BookCard,
BookModal
},
data () {
bumalik {
kamakailan-lamang na mga libro: [],
favouriteBooks: [],
bestOfTheBest: []
};
},

Gayundin, sa katawan, magdagdag kami,

Kailangan namin ng mga pamamaraan para sa pag-edit at alisin ang isang kard. Sa template na mas maaga, naipasa ko na ang pag-edit at tinanggal ang mga pamamaraan sa mga pindutan tulad ng ipinakita sa ibaba, gayon din, ipinasa ko sa mga argumento na kinakailangan para sa bawat pamamaraan.

I-edit ang Alisin

Lumikha tayo ng mga pamamaraan.

paraan: {
alisin (kategorya, index) {
kung (kategorya === "Kamakailan ay nagbasa ng mga libro")
this.recentBooks.splice (index, 1);
}
kung (kategorya === "Mga Paboritong libro")
this.favouriteBooks.splice (index, 1);
}
kung (kategorya === "Pinakamahusay sa pinakamahusay")
ito.bestOfTheBest.splice (index, 1);
}
},
i-edit (item, index) {
kung (item.category === "Kamakailan ay nagbasa ng mga libro")
eventBus. $ emit ("open-add-book-modal", item);
this.recentBooks.splice (index, 1);
}
kung (item.category === "Mga Paboritong libro")
eventBus. $ emit ("open-add-book-modal", item);
this.favouriteBooks.splice (index, 1);
}
kung (item.category === "Pinakamahusay sa pinakamahusay")
eventBus. $ emit ("open-add-book-modal", item);
ito.bestOfTheBest.splice (index, 1);
}
}
}

Tandaan, ang BookModal ay naglalabas, at isang kaganapan na tinatawag na save-book, kailangan namin ng isang tagapakinig para sa kaganapang iyon.

nilikha () {
eventBus. $ sa ("save-book", cardData => {
kung (cardData.category === "Kamakailan ay nagbasa ng mga libro")
ito.recentBooks.push (cardData);
}
kung (cardData.category === "Mga Paboritong libro")
this.favouriteBooks.push (cardData);
}
kung (cardData.category === "Pinakamahusay sa pinakamahusay")
ito.bestOfTheBest.push (cardData);
}
});
},

Ngayon, sa isang buong hitsura, ganito ang hitsura ng aming index.vue page

Kamakailan Basahin ang Mga Libro

Tingnan

I-edit
Alisin

Mga Paboritong Libro

I-edit
Alisin

Pinakamaganda sa Pinakamahusay

I-edit
Alisin

i-import ang BookCard mula sa "@ / sangkap / BookCard";
i-import ang BookModal mula sa "@ / sangkap / BookModal";
import {eventBus} mula sa "@ / eventBus";

default default
mga sangkap: {
BookCard,
BookModal
},
data () {
bumalik {
kamakailan-lamang na mga libro: [],
favouriteBooks: [],
bestOfTheBest: []
};
},
nilikha () {
eventBus. $ sa ("save-book", cardData => {
kung (cardData.category === "Kamakailan ay nagbasa ng mga libro")
ito.recentBooks.push (cardData);
ito.recentBooks.sort ((a, b) => b – a);
}
kung (cardData.category === "Mga Paboritong libro")
this.favouriteBooks.push (cardData);
this.favouriteBooks.sort ((a, b) => b – a);
}
kung (cardData.category === "Pinakamahusay sa pinakamahusay")
ito.bestOfTheBest.push (cardData);
ito.bestOfTheBest.sort ((a, b) => b – a);
}
});
},
paraan: {
alisin (kategorya, index) {
kung (kategorya === "Kamakailan ay nagbasa ng mga libro")
this.recentBooks.splice (index, 1);
}
kung (kategorya === "Mga Paboritong libro")
this.favouriteBooks.splice (index, 1);
}
kung (kategorya === "Pinakamahusay sa pinakamahusay")
ito.bestOfTheBest.splice (index, 1);
}
},
i-edit (item, index) {
kung (item.category === "Kamakailan ay nagbasa ng mga libro")
eventBus. $ emit ("open-add-book-modal", item);
this.recentBooks.splice (index, 1);
}
kung (item.category === "Mga Paboritong libro")
eventBus. $ emit ("open-add-book-modal", item);
this.favouriteBooks.splice (index, 1);
}
kung (item.category === "Pinakamahusay sa pinakamahusay")
eventBus. $ emit ("open-add-book-modal", item);
ito.bestOfTheBest.splice (index, 1);
}
}
}
};

Kung nakuha mo ito sa malayo, Mahusay na Trabaho !!! Ang galing mo!

Tulad ng naunang nabanggit, ang bawat .vue file na nilikha sa folder ng mga pahina ay awtomatikong inilalaan bilang isang ruta, sa gayon, para sa bawat folder na nilikha sa loob ng folder ng mga pahina. Hindi lamang ito humahawak para sa mga static na pahina, at ang mga dinamikong pahina ay maaaring malikha din sa ganitong paraan!

Tingnan natin kung paano.

Gamit ang aming kasalukuyang proyekto, sabihin natin na nais naming magdagdag ng isang pabago-bagong pahina para sa lahat ng mga book card na may pindutan ng view upang tingnan ang higit pang mga detalye tungkol sa isang libro.

Mabilis na magdagdag ng isang pindutan ng view, at gumamit ng isang upang bisitahin ang pahina. Oo, pinapalitan at gumagana ito.

Tingnan

Susunod, lumikha kami ng isang dynamic na folder sa pamamagitan ng prefixing ang pangalan na may isang salungguhit. i.e., _title at sa loob ng folder na iyon, magkakaroon kami ng isang index.vue file na makakakuha ng render kapag binisita namin ang ruta na.

Para lamang sa pagpapakita, mai-access lamang namin ang mga ari-arian ng mga params sa loob ng file.

// _title / index.vue

{{$ ruta.params.title}}

Ngayon, kapag nag-click kami ng view, magbubukas ito ng isa pang pahina kung saan makikita natin ang pamagat na naipasa namin sa ruta. Maaari itong mabuo upang gawin ang anumang nais namin hangga’t nababahala ang mga dynamic na pahina.

Ito ay para sa araling ito!

Ang kumpletong code para sa ito ay matatagpuan sa ito imbakan. Inaanyayahan kang mag-ambag sa code. Kung interesado ka sa mastering ang balangkas, pagkatapos ay iminumungkahi ko ito Kurso ng 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