Vytvorenie prvej aplikácie Nuxt – kníhkupectvo CRUD

Naučte sa, ako vytvoriť aplikáciu Nuxt.


CRUD – Vytváranie, čítanie, aktualizácia, mazanie

Predpokladám, že už poznáte základy Vue JS a / alebo ste s rámcom trochu oboznámení. Nuxt JS je robustný framework postavený na Vue JS. V podstate je to rovnaké ako Vue JS. Tak prečo, Nuxt?

Pre väčšinu ľudí je rozhodnutie používať Nuxt JS zvyčajne pre jeho schopnosti SSR.

Čo je to SSR?

SSR je skratka pre Server Side Rendering.

Zvyčajne sa pre väčšinu aplikácií s jednou stránkou (SPA) vykreslené súbory automaticky vložia do DOM po načítaní stránky. Preto roboti v prehliadači SEO nájdu pri načítaní stránky prázdnu stránku. Avšak pre SSR, kvôli jeho schopnosti predbežného renderovania aplikácií na serveri pred stránkou, môže byť táto stránka ľahko indexovaná prehľadávačmi SEO. Tiež to pravdepodobne robí aplikáciu ešte výkonnejšou ako bežné SPA.

Nuxt JS umožňuje vývojárom ľahko vytvárať aplikácie SSR. Pravidelné aplikácie Vue JS SPA možno nakonfigurovať aj na používanie SSR, ale tento proces je trochu ťažkopádny a Nuxt JS poskytuje obal, ktorý zvládne celú túto konfiguráciu. Okrem SSR poskytuje Nuxt tiež ľahký spôsob, ako nastaviť svoj projekt VueJS efektívnejšie.

Aj keď je Nuxt JS stále Vue JS, má niekoľko základných rozdielov v štruktúre štruktúry priečinkov.

Cieľom tohto článku je, aby ste boli schopní zostavenie aplikácie s Nuxt; preto, nebudeme sa ponoriť hlboko do architektúry priečinkov Nuxtu, ale rýchlo vysvetlím niektoré z tých dôležitých, ktoré by sme tu mohli potrebovať..

stránky

Zložka stránok je jednou zo základných rozdielov oproti bežnej Vue SPA. Predstavuje priečinok Views v bežnej architektúre Vue, v systéme Nuxt sú súbory vytvorené v priečinku Pages automaticky poskytované ako trasa. To znamená, že keď vytvoríte súbor index.vue v priečinku stránok, automaticky sa stane koreňovou cestou, t. J. Localhost: 3000 /.

Tiež, keď vytvoríte akýkoľvek iný názov súboru.vue, stane sa to cestou – vytvorenie about.vue vám umožní prístup localhost: 3000 / about.

Priečinok môžete vytvoriť aj v priečinku Stránky. Ak vytvoríte priečinok s názvom „kontakt“ a v rámci tohto priečinka máte e-mail.vue, získate prístup k localhost: 3000 / contact / email. Je to také jednoduché. Týmto spôsobom nemusíte manuálne vytvárať súbor router.js, ako by ste zvyčajne robili s Vue JS pri vytváraní trás..

súčasti

Je to stále takmer také isté ako vo Vue JS, vytvorené komponenty nie sú automaticky poskytované ako trasy.

statický

Statický priečinok nahrádza verejný priečinok v bežných aplikáciách Vue JS, funguje takmer rovnako. Súbory tu nie sú zostavené; sú podávané rovnakým spôsobom ako sú uložené.

Môžete si prečítať všetko o architektúre a štruktúre na Stránka dokumentácie Nuxt JS.

Teraz postavme niečo zaujímavé …

Vytvorenie aplikácie kníhkupectva

Budujeme aplikáciu kníhkupectva, v ktorej môže používateľ pridať knihy, ktoré prečítal, do konkrétnej kategórie, ktorá sa mu páči. Bude to vyzerať takto.

Takže budeme mať jednoduché rozloženie, ako je uvedené vyššie, iba 3 stĺpce obsahujúce rôzne sekcie kníh. Nedávno prečítané knihy, obľúbené knihy a áno, najlepšie z najlepších kníh (priznávam, že som nevedel, čo mám nazývať túto časť, ��)

Cieľom je, aby v každej sekcii bolo možné na kartu pridať názov, autora a popis knihy, upraviť už pridané knihy a odstrániť existujúcu knihu. Nebudeme využívať žiadnu databázu, takže všetko sa deje v štáte.

Najprv nainštalujeme Nuxt:

npm nainštalujte create-nuxt-app

Po druhé, po inštalácii Nuxtu môžete teraz projekt vytvoriť pomocou príkazu,

create-nuxt-app bookStore

Rozhodol som sa pomenovať svoju aplikáciu „bookStore“; môžete pomenovať niečo chladnejšie ^ _ ^

Potom si prečítajte zostávajúce výzvy a zadajte popis,

Meno autora, napíšte meno alebo stlačte Enter, aby ste zachovali predvolené hodnoty

Vyberte správcu balíkov, podľa toho, čo vám vyhovuje, obidve sú v poriadku

Vyberte rámec používateľského rozhrania. Pre tento projekt budem používať Vuetify, potom sa bude opäť hodiť akýkoľvek rámec používateľského rozhrania, ktorý vám vyhovuje, v poriadku.

Vyberte vlastnú štruktúru servera; nepotrebujeme žiadne, nevyberiem žiadne

Extra moduly, vyberte, čo chcete, alebo vyberte oba, ktoré by sme pre túto aplikáciu nepoužívali.

Podšívka je dôležitá. Poďme s ESLint.

Aj keď je testovanie dôležité, nebudeme sa na to dnes pozerať, takže žiadne

Režim vykreslenia, áno, je to SSR.

Poznámka: Výber SSR neznamená, že nevyužívame výhody SPA, aplikácia stále zostáva SPA, ale so SSR. Druhá možnosť znamená jednoducho SPA a žiadne SSR.

Stlačte Enter a choďte ďalej,

A náš projekt sa vytvára,

Po vytvorení môžeme teraz ísť do adresára a spustiť

priadza dev

Ak ako správcu balíkov používate npm, použite,

npm run dev

V predvolenom nastavení je aplikácia spustená na localhost: 3000. Prejdite vo svojom prehliadači na odkaz a mala by sa zobraziť predvolená stránka Nuxt.

Teraz začnime s vytváraním komponentov, ktoré potrebujeme. Budeme mať karty zobrazujúce informácie o každej knihe a budeme mať spôsob, ktorý obsahuje formulár na zadanie nových informácií o knihe alebo úpravu už existujúcich..

Ak chcete vytvoriť komponent, jednoducho vytvorte nový súbor v priečinku komponentov. Tu je kód pre moju kartu.

// BookCard.vue

{{názov knihy}}
{{BookAuthor}}
{{BookDescription}}

exportovať predvolené nastavenie {
rekvizity: ["názov knihy", "bookAuthor", "bookDescription"]
};

Stručné vysvetlenie vyššie uvedeného. Obrázok je pevne zakódovaný; nebudeme sa tým teraz obťažovať. Názov knihy, autor knihy a popis knihy sa do nadradenej stránky odovzdávajú ako rekvizity. Ak nie ste oboznámení s rekvizitami, predstavte si ich ako vstupné body, pomocou ktorých je možné touto komponentou naplniť údaje.

Teraz k ďalšej zložke, modálnej.

//BookModal.vue

Pridať knihy

pridať

Teraz je to označenie pre modálne spôsoby; musíme vytvoriť v-modely ako vlastnosti údajov; Preto pod značku pridáme značku skriptu.

exportovať predvolené nastavenie {
data () {
návrat {
kategória: "",
názov: "",
autor: "",
popis: "",
};
},
}

K dispozícii je tiež rozbaľovacia ponuka „Vybrať kategóriu“, ktorá očakáva údaje „kategórie“. K údajom ich pridáme.

exportovať predvolené nastavenie {
data () {
návrat {
otvorené: nepravdivé,
kategória: "",
názov: "",
autor: "",
popis: "",
Kategórie: ["Nedávno prečítané knihy", "Obľúbené knihy", "Najlepší z najlepších"]
};
},
}

Teraz potrebujeme spôsob, ako prepínať naše otvorené a zatvorené spôsoby dopravy, zatiaľ budeme mať iba „otvorené“ vlastníctvo údajov, ako je uvedené vyššie. Budeme sa na to ďalej pozerať.

Poďme rýchlo vytvoriť našu stránku prezerania, na ktorej budeme mať tri mriežky / stĺpce, jednu pre každú časť knihy. Zavolajme stránku index.vue, pozri kód uvedený nižšie.

//index.vue

Nedávno prečítané knihy

Obľúbené knihy

Najlepší z najlepších

Teraz, keď máme svoje siete, musíme do každej mriežky pridať každú kartu, a to pre každú pridanú knihu. Preto importujeme našu súčasť BookCard.vue.

Nedávno prečítané knihy

editovať
Remove

Obľúbené knihy

editovať
Remove

Najlepší z najlepších

editovať
Remove

Teraz sme importovali komponent BookCard a viazali sme jeho rekvizity na výsledky zo slučky; to zaisťuje, že pre každú položku pridanú do ktorejkoľvek sekcie je pre ňu vytvorená karta. Na každú kartu tiež umiestnime tlačidlá na úpravu alebo odstránenie karty.

Teraz musíme importovať kartu zo skriptu a definovať polia, ktoré budú uchovávať záznamy pre každú z kategórií.

importovať BookCard z "@ / Zložky / BookCard";

exportovať predvolené nastavenie {
komponenty: {
BookCard,
},
data () {
návrat {
posledné knihy: [],
obľúbené knihy: [],
najlepší z najlepších: []
};
},
};

Ďalej musíme mať v záhlaví tlačidlo, ktoré otvorí modálny spôsob vždy, keď potrebujeme pridať knihy. Urobíme to v súbore „default.vue“. Tlačidlo pridáme do predvolenej hlavičky panela aplikácií.

Pridať knihy

Ďalej potrebujeme vytvoriť metódu openModal v sekcii skriptu. V bežných aplikáciách Vue JS existuje zbernica udalostí, ktorá umožňuje komunikáciu s iným komponentom a dokonca umožňuje prenos údajov naprieč, v Nuxt JS stále existuje zbernica udalostí a stále ju môžete vytvoriť rovnakým spôsobom. Použijeme teda zbernicu udalostí na odovzdanie údajov otvorených modálnym na stránke index.vue (ktorú ešte musíme importovať) zo súboru layout / default.vue..

Pozrime sa, ako sa to robí.

Ak chcete vytvoriť globálnu zbernicu udalostí, otvorte súbor v koreňovom adresári projektu, pomenujte ho eventBus.js a vložte doň nasledujúci kód..

importovať Vue z ‘vue’

export const eventBus = new Vue ()

Áno, to všetko. Teraz to môžeme použiť.

importovať {eventBus} z "@ / EventBus";
metódy: {
openModal () {
eventBus. $ emitovať ("open-add-book-modálne");
}
}

Ďalej sa vrátime k nášmu komponentu BookModal a budeme počúvať, keď bude udalosť Bus vysielať „open-add-book-modal“. Toto pridáme do časti skriptu.

importovať {eventBus} z "@ / EventBus";

created () {
eventBus. $ o ("open-add-book-modálne", this.open = true);
},

Teraz môžeme otvoriť a zavrieť náš spôsob dopravy, ale zatiaľ nepridáva žiadne knihy. Pridajme do nášho Modalu metódu, aby sme uložili to, čo sa pridá do stavu (pamätajte, že nevyužívame žiadnu databázu ani lokálne úložisko). Pridáme to vedľa položky „created ()“

metódy: {
saveBook () {
let cardData = {
title: this.title,
autor: tento autor,
description: this.description,
kategória: this.category
};
eventBus. $ emitovať ("save-book", cardData);
this.open = false;
}
}

Keď budeme upravovať údaje z ktorejkoľvek karty, budeme potrebovať spôsob, ako znovu vyplniť modálne údaje. Urobme teda nejaké úpravy pre „created ()“ “

created () {
eventBus. $ o ("open-add-book-modálne", dáta => {
if (data) {
this.category = data.category;
this.title = data.title;
this.author = data.author;
this.description = data.description;
}
this.open = true;
});
},

Teraz BookModal vyzerá takto ako celok,

//BookModal.vue

Pridať knihy

pridať

importovať {eventBus} z "@ / EventBus";
exportovať predvolené nastavenie {
data () {
návrat {
otvorené: nepravdivé,
kategória: "",
názov: "",
autor: "",
popis: "",
Kategórie: ["Nedávno prečítané knihy", "Obľúbené knihy", "Najlepší z najlepších"]
};
},
created () {
eventBus. $ o ("open-add-book-modálne", dáta => {
if (data) {
this.category = data.category;
this.title = data.title;
this.author = data.author;
this.description = data.description;
}
this.open = true;
});
},
metódy: {
saveBook () {
let cardData = {
title: this.title,
autor: tento autor,
description: this.description,
kategória: this.category
};
eventBus. $ emitovať ("save-book", cardData);
this.open = false;
}
}
};

Ďalej sa teraz môžeme vrátiť na stránku index.vue a naimportovať komponent BookModal. Toto pridáme do časti skriptu.

importovať BookCard z "@ / Zložky / BookCard";
importovať BookModal z "@ / Zložky / BookModal";
importovať {eventBus} z "@ / EventBus";

exportovať predvolené nastavenie {
komponenty: {
BookCard,
BookModal
},
data () {
návrat {
posledné knihy: [],
obľúbené knihy: [],
najlepší z najlepších: []
};
},

Tiež v tele pridáme,

Potrebujeme metódy na úpravu a odstránenie karty. V predošlej šablóne som už odovzdal metódy úprav a odstránenia tlačidlám, ako je to znázornené nižšie, podobne som odovzdal argumenty potrebné pre každú metódu.

Upraviť Odstrániť

Vytvorme metódy.

metódy: {
remove (kategória, index) {
ak (kategória === "Nedávno prečítané knihy") {
this.recentBooks.splice (index, 1);
}
ak (kategória === "Obľúbené knihy") {
this.favouriteBooks.splice (index, 1);
}
ak (kategória === "Najlepší z najlepších") {
this.bestOfTheBest.splice (index, 1);
}
},
upraviť (položka, index) {
if (item.category === "Nedávno prečítané knihy") {
eventBus. $ emitovať ("open-add-book-modálne", položka);
this.recentBooks.splice (index, 1);
}
if (item.category === "Obľúbené knihy") {
eventBus. $ emitovať ("open-add-book-modálne", položka);
this.favouriteBooks.splice (index, 1);
}
if (item.category === "Najlepší z najlepších") {
eventBus. $ emitovať ("open-add-book-modálne", položka);
this.bestOfTheBest.splice (index, 1);
}
}
}

Pamätajte, že BookModal vysiela a udalosť s názvom save-book, tu potrebujeme poslucháča.

created () {
eventBus. $ o ("save-book", cardData => {
if (cardData.category === "Nedávno prečítané knihy") {
this.recentBooks.push (cardData);
}
if (cardData.category === "Obľúbené knihy") {
this.favouriteBooks.push (cardData);
}
if (cardData.category === "Najlepší z najlepších") {
this.bestOfTheBest.push (cardData);
}
});
},

Teraz, v jednom celku, vyzerá naša stránka index.vue takto

Nedávno prečítané knihy

vyhliadka

editovať
Remove

Obľúbené knihy

editovať
Remove

Najlepší z najlepších

editovať
Remove

importovať BookCard z "@ / Zložky / BookCard";
importovať BookModal z "@ / Zložky / BookModal";
importovať {eventBus} z "@ / EventBus";

exportovať predvolené nastavenie {
komponenty: {
BookCard,
BookModal
},
data () {
návrat {
posledné knihy: [],
obľúbené knihy: [],
najlepší z najlepších: []
};
},
created () {
eventBus. $ o ("save-book", cardData => {
if (cardData.category === "Nedávno prečítané knihy") {
this.recentBooks.push (cardData);
this.recentBooks.sort ((a, b) => b – a);
}
if (cardData.category === "Obľúbené knihy") {
this.favouriteBooks.push (cardData);
this.favouriteBooks.sort ((a, b) => b – a);
}
if (cardData.category === "Najlepší z najlepších") {
this.bestOfTheBest.push (cardData);
this.bestOfTheBest.sort ((a, b) => b – a);
}
});
},
metódy: {
remove (kategória, index) {
ak (kategória === "Nedávno prečítané knihy") {
this.recentBooks.splice (index, 1);
}
ak (kategória === "Obľúbené knihy") {
this.favouriteBooks.splice (index, 1);
}
ak (kategória === "Najlepší z najlepších") {
this.bestOfTheBest.splice (index, 1);
}
},
upraviť (položka, index) {
if (item.category === "Nedávno prečítané knihy") {
eventBus. $ emitovať ("open-add-book-modálne", položka);
this.recentBooks.splice (index, 1);
}
if (item.category === "Obľúbené knihy") {
eventBus. $ emitovať ("open-add-book-modálne", položka);
this.favouriteBooks.splice (index, 1);
}
if (item.category === "Najlepší z najlepších") {
eventBus. $ emitovať ("open-add-book-modálne", položka);
this.bestOfTheBest.splice (index, 1);
}
}
}
};

Ak ste sa dostali tak ďaleko, skvelá práca !!! Si úžasný!

Ako už bolo spomenuté, každý súbor .vue vytvorený v priečinku Pages sa automaticky vytvorí ako trasa pre každý priečinok vytvorený v priečinku Pages. To neplatí iba pre statické stránky a dynamické stránky sa dajú vytvoriť aj týmto spôsobom!

Pozrime sa ako.

Podľa nášho aktuálneho projektu povedzme, že chceme pridať dynamickú stránku pre všetky karty kníh pomocou tlačidla zobrazenia, aby sa zobrazili ďalšie podrobnosti o knihe..

Pridajme rýchlo tlačidlo zobrazenia a pomocou stránky prejdeme na stránku. Áno, nahrádza a funguje to.

vyhliadka

Ďalej vytvoríme dynamický priečinok predponou názvu s podčiarknutím. t.j. _title a vnútri tohto priečinka, budeme mať súbor index.vue, ktorý sa vykreslí, keď navštívime túto trasu.

Pre demonštráciu budeme mať prístup iba k parametrom params v rámci súboru.

// _title / index.vue

{{$ Route.params.title}}

Keď klikneme na zobrazenie, otvorí sa ďalšia stránka, kde uvidíme názov, ktorý sme prešli touto cestou. To môže byť vyvinuté tak, aby urobilo všetko, čo chceme, pokiaľ ide o dynamické stránky.

To je pre túto lekciu!

Celý kód nájdete v tejto časti Úložisko. Môžete prispieť do tohto kódu. Ak máte záujem o zvládnutie rámca, navrhol by som to Kurz 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