Az első Nuxt alkalmazás létrehozása – egy CRUD könyvesbolt

Tudja meg, hogyan hozhat létre Nuxt alkalmazást.


CRUD – Létrehozás, olvasás, frissítés, törlés

Feltételezem, hogy már ismeri a Vue JS alapjait és / vagy kissé ismeri a keretet. A Nuxt JS egy robusztus keret, amelyet a Vue JS-re építettek. Alapvetően megegyezik a Vue JS-rel. Akkor miért, Nuxt?

A legtöbb ember számára a Nuxt JS használatát általában az SSR képességei határozzák meg.

Mi az SSR??

Az SSR a Server Side Rendering rövidítése.

Általában a legtöbb egyoldalas alkalmazás (SPA) esetében a megjelenített fájlokat az oldal betöltése után automatikusan befecskendezik a DOM-ba. Ezért a robotok, a SEO robotok üres oldalt találnak az oldal betöltésekor. Azonban az SSR esetében, mivel képes előzetesen megjeleníteni alkalmazásokat a kiszolgálón az oldal előtti oldalra, az SEO weboldalak bejárók könnyen indexálhatják az oldalt. Ezenkívül ez az alkalmazást még jobban teljesítővá teszi, mint egy szokásos SPA.

Nuxt JS lehetőséget ad a fejlesztőknek SSR alkalmazások könnyű létrehozására. A szokásos Vue JS SPA alkalmazások is konfigurálhatók SSR használatára, de a folyamat kissé nehézkes, és a Nuxt JS csomagolóeszközt biztosít az összes ilyen konfiguráció kezelésére. Az SSR mellett a Nuxt egyszerű módot kínál a VueJS-projekt nagyobb hatékonyságú beállítására.

Noha a Nuxt JS továbbra is Vue JS, van néhány alapvető különbsége a mappa architektúrájának felépítésében.

Ez a cikk arra összpontosít, hogy képes legyen Önre épít egy alkalmazást a Nuxt segítségével; ennélfogva, nem fogunk mélyen belemerülni a Nuxt mappa-architektúrájába, de gyorsan elmagyarázom néhány fontosat, amelyekre itt lehet szükségünk.

Oldalak

Az oldalak mappa az egyik alapvető különbség a szokásos Vue SPA-hoz képest. Ez a Nézetek mappát reprezentálja a normál Vue architektúrában, továbbá a Nuxtban az Oldalak mappában létrehozott fájlok automatikusan útvonalként kerülnek kiszolgálásra. Azaz, amikor az index.vue fájlt hoz létre az oldalak mappában, ez automatikusan a gyökér útvonalavá válik, azaz a localhost: 3000 /.

Ezenkívül, ha bármilyen más fájlnevet.vue hoz létre, útvonala lesz – a about.vue létrehozása lehetővé teszi a localhost elérését: 3000 / about.

A Mappák mappában is létrehozhat egy mappát. Ha létrehoz egy „névjegy” nevű mappát, és abban a mappában van az email.vue, akkor hozzáférhet a localhosthoz: 3000 / névjegy / e-mail. Ez ilyen egyszerű. Ilyen módon nem kell manuálisan létrehoznia a router.js fájlt, mint általában a Vue JS-rel tenné az útvonalak létrehozásához..

Alkatrészek

Ez továbbra is nagyjából ugyanaz, mint a Vue JS esetében, a létrehozott összetevőket nem automatikusan biztosítják útvonalakként.

Statikus

A statikus mappa helyettesíti a normál Vue JS alkalmazások nyilvános mappáját, ezek nagyjából ugyanazok a funkciók. Az itt található fájlok nem fordulnak elő; ugyanúgy szolgálják fel, mint tárolják.

Mindent elolvashat az oldal architektúrájáról és szerkezetéről A Nuxt JS dokumentációs oldala.

Építsünk valami érdekeset …

Könyvesbolt alkalmazás építése

Építünk egy könyvesbolt alkalmazást, ahol a felhasználó az olvasott könyveket hozzáadhatja egy adott kategóriához. Így fog kinézni.

Tehát egy egyszerű elrendezés lesz a fentiek szerint, mindössze 3 oszlop, amelyek a könyvek különféle részeit tartalmazzák. Nemrégiben olvasott könyvek, kedvenc könyvek és igen, a legjobb könyvek közül (Bevallom, nem tudtam, hogy hívjam ezt a szekciót, ��)

Tehát itt a cél az, hogy képes legyen a könyv címét, szerzőjét és leírását hozzáadni a kártyához bármely szakaszban, szerkeszteni a már hozzáadott könyveket és eltávolítani egy meglévő könyvet. Nem fogunk semmilyen adatbázist használni, tehát minden államban történik.

Először telepítjük a Nuxtot:

npm telepítés a create-nuxt-app

Másodszor, a Nuxt telepítése után létrehozhatja a projektet a paranccsal,

create-nuxt-app könyvtár

Úgy döntöttem, hogy az alkalmazásomat „bookStore” -nak nevezem; megnevezhetsz valami hűvösebb dolgot ^ _ ^

Ezután járjuk át a fennmaradó utasításokat, írjuk be a leírást,

A szerző neve, írjon be egy nevet, vagy nyomja meg az enter billentyűt az alapértelmezések megtartásához

Válasszon egy csomagkezelőt, amelyik kényelmesebb, mindkettő rendben van

Válasszon felhasználói felületet. Ehhez a projekthez a Vuetify-t fogom használni, majd ismét minden olyan felhasználói felület, amelyben kényelmesen működik, nagyon jól fog működni.

Válasszon egy egyedi kiszolgálói keretet; nincs rá szükségünk, egyiket sem választom

Extra modulok, válassza ki a kívánt elemet, vagy válasszon mindkettőt, nem használnánk őket ehhez az alkalmazáshoz.

A kivilágítás fontos. Menjünk az ESLinthez.

Noha a tesztelés fontos, ma erre nem fogunk figyelni, tehát egyik sem

Megjelenítési mód, igen, SSR.

Megjegyzés: Az SSR kiválasztása nem azt jelenti, hogy nem élvezhetjük a SPA használatának előnyeit, az alkalmazás továbbra is SPA, de SSR-vel rendelkezik. A másik lehetőség egyszerűen SPA-t és nem SSR-t jelent.

Nyomja meg az Enter billentyűt, és továbblép,

És a projektünk teremt,

A létrehozás után bemehetünk a könyvtárba, és futhatunk

fonal dev

Ha npm-et használsz csomagkezelõként, akkor használja,

npm run dev

Alapértelmezés szerint az alkalmazás a localhoston fut: 3000. Látogasson el a böngészőben található linkre, és látnia kell egy alapértelmezett Nuxt oldalt.

Most kezdjük el a szükséges összetevők létrehozásával. Minden könyvinformációt megjelenítő kártyákkal rendelkezünk, és lesz egy mód, amely tartalmaz egy űrlapot az új könyvinformációk beviteléhez vagy a meglévők szerkesztéséhez.

Komponens létrehozásához egyszerűen hozzon létre egy új fájlt az összetevők mappában. Itt található a kártyakomponens kódja.

// BookCard.vue

{{könyvcím}}
{{BookAuthor}}
{{BookDescription}}

alapértelmezett exportálás {
kellékek:"könyvcím", "bookAuthor", "bookDescription"]
};

A fentiek rövid ismertetése. A kép merev kódolású; ezt most nem fogjuk zavarni. A könyv címe, a könyv szerzője és a könyv leírása továbbadódik erre az összetevőre a szülő oldalról kellékekként. Ha nem ismeri a kellékeket, akkor képzelje el őket, mivel ezen a komponensen keresztül belépési pontok tölthetők fel adatokkal.

Most a következő elemhez, a modálhoz.

//BookModal.vue

Add Books

hozzáad

Ez tehát a modál jelölése; létre kell hoznunk a v-modelleket mint adattulajdonságokat; ezért hozzáadunk egy szkriptcímkét a címke alá.

alapértelmezett exportálás {
adatok () {
Visszatérés {
kategória: "",
cím: "",
szerző: "",
leírás: "",
};
},
}

Ezenkívül megjelenik a „Válasszon egy kategóriát” legördülő menü, amely a „kategóriák” adatait várja. Ezt hozzáfűzzük az adatokhoz.

alapértelmezett exportálás {
adatok () {
Visszatérés {
nyitva: hamis,
kategória: "",
cím: "",
szerző: "",
leírás: "",
kategóriák: ["Nemrégiben olvasott könyvek", "Kedvenc könyvek", "A legjobbak legjobbja"]
};
},
}

Most szükségünk van arra, hogy átválthassuk modálunkat, egyelőre csak a fentiek szerint lesz egy “nyitott” adattulajdonság. Következő pillantást vetünk erre.

Készítsük el gyorsan a nézet oldalunkat, ahol három rács / oszlop lesz, egy a könyv minden szakaszára. Hívjuk az index.vue oldalt, lásd az alábbi kódot.

//index.vue

Nemrégiben olvasott könyvek

Kedvenc könyvek

A legjobbak legjobbja

Most, hogy megvan a rácsunk, minden egyes hozzáadott könyvhez hozzá kell adnunk a kártya alkotóelemét minden rácshoz. Ezért importáljuk a BookCard.vue összetevőt.

Nemrégiben olvasott könyvek

szerkesztése
Vegye ki

Kedvenc könyvek

szerkesztése
Vegye ki

A legjobbak legjobbja

szerkesztése
Vegye ki

Most importáltuk a BookCard összetevőt, és a kellékeit a hurok eredményeihez kötöttük; ez biztosítja, hogy minden szekcióhoz hozzáadott bejegyzéshez hozzon létre egy kártyát. Ezenkívül mindegyik kártyán található gombok a kártya szerkesztéséhez vagy eltávolításához.

Most importálnunk kell a kártyát a szkriptről, és meg kell határoznunk azokat a tömböket, amelyek minden kategóriában rekordot fognak tárolni.

importálja a BookCard-t a "@ / Komponenseket / BookCard";

alapértelmezett exportálás {
alkatrészek: {
BookCard,
},
adatok () {
Visszatérés {
RecentBooks: [],
favouriteKönyvek: [],
a legjobbak legjobbja: []
};
},
};

Ezután szükségünk van egy gombra a fejlécben, amely megnyitja a modult, amikor csak könyveket kell hozzáadnunk. Ezt az ‘default.vue’ fájlban fogjuk megtenni. A gombot hozzáadjuk az alapértelmezett alkalmazássáv fejlécéhez.

Add Books

Ezután létre kell hoznunk az openModal módszert a szkript szakaszban. A szokásos Vue JS alkalmazásokban van egy eseménybusz, amely lehetővé teszi a kommunikációt egy másik elemmel, és akár az adatok továbbítását is, a Nuxt JS-ben még mindig van egy eseménybusz, és ugyanúgy létrehozhatja. Tehát egy eseménybusz segítségével továbbítjuk az adatokat, és nyissunk meg modult az index.vue oldalon (amelyet még nem importálunk) az layout / default.vue fájlból.

Lássuk, hogyan történik ez.

Globális eseménybusz létrehozásához nyisson meg egy fájlt a projekt gyökérkönyvtárában, nevezze el eseményBus.js névre, és illessze be az alábbi kódot.

importáljon vue-t ‘vue-ból’

export const eventBus = új Vue ()

Igen, ez mind. Most már használhatjuk.

{eventBus} importálása innen "@ / EventBus";
módszerek: {
openModal () {
eventBus. $ kibocsát ("nyílt add-book-modális");
}
}

Ezután visszatérünk a BookModal összetevőhöz, és meghallgatjuk, amikor az eventBus kiadja a „open-add-book-modal” -t. Ezt hozzáadjuk a szkript szakaszhoz.

{eventBus} importálása innen "@ / EventBus";

létrehozta () {
eventBus. $ on ("nyílt add-book-modális", this.open = true);
},

Most már kinyithatjuk és bezárhatjuk modálunkat, de még nem ad hozzá könyvet. Adjunk hozzá egy módszert a modálunkhoz, hogy megmentsük azt, amit hozzáadunk az államhoz (ne feledje, hogy nem használunk semmilyen adatbázist vagy helyi tárolót). Ezt hozzáadjuk a „létrehozott ()” elemhez

módszerek: {
saveBook () {
hadd cardData = {
cím: this.title,
szerző: this.author,
leírás: ez a leírás,
kategória: ez.kategória
};
eventBus. $ kibocsát ("save-book", cardData);
this.open = hamis;
}
}

Ezután szükségünk van egy módra a modál feltöltésére, amikor bármelyik kártyáról szerkesztjük az adatokat. Tehát végezzünk néhány módosítást a ‘létrehozott ()’

létrehozta () {
eventBus. $ on ("nyílt add-book-modális", adatok => {
if (adatok) {
this.category = data.category;
this.title = data.title;
this.author = data.author;
this.description = data.description;
}
this.open = igaz;
});
},

A BookModal egészének így néz ki,

//BookModal.vue

Add Books

hozzáad

{eventBus} importálása innen "@ / EventBus";
alapértelmezett exportálás {
adatok () {
Visszatérés {
nyitva: hamis,
kategória: "",
cím: "",
szerző: "",
leírás: "",
kategóriák: ["Nemrégiben olvasott könyvek", "Kedvenc könyvek", "A legjobbak legjobbja"]
};
},
létrehozta () {
eventBus. $ on ("nyílt add-book-modális", adatok => {
if (adatok) {
this.category = data.category;
this.title = data.title;
this.author = data.author;
this.description = data.description;
}
this.open = igaz;
});
},
módszerek: {
saveBook () {
hadd cardData = {
cím: this.title,
szerző: this.author,
leírás: ez a leírás,
kategória: ez.kategória
};
eventBus. $ kibocsát ("save-book", cardData);
this.open = hamis;
}
}
};

Ezután visszatérhetünk az index.vue oldalra a BookModal összetevő importálásához. Ezt hozzáadjuk a szkript szakaszhoz.

importálja a BookCard-t a "@ / Komponenseket / BookCard";
importálja a BookModal-t a "@ / Komponenseket / BookModal";
{eventBus} importálása innen "@ / EventBus";

alapértelmezett exportálás {
alkatrészek: {
BookCard,
BookModal
},
adatok () {
Visszatérés {
RecentBooks: [],
favouriteKönyvek: [],
a legjobbak legjobbja: []
};
},

A testben is hozzátesszük,

Módszerekre van szükség a kártya szerkesztéséhez és eltávolításához. A sablonban korábban már átadtam a szerkesztés és az eltávolítás módszereit a gomboknak, az alább látható módon, szintén átadtam az egyes módszerekhez szükséges argumentumokat..

Szerkesztés Eltávolítás

Hozzuk létre a módszereket.

módszerek: {
eltávolítás (kategória, index) {
if (kategória === "Nemrégiben olvasott könyvek") {
this.recentBooks.splice (index, 1);
}
if (kategória === "Kedvenc könyvek") {
this.favouriteBooks.splice (index, 1);
}
if (kategória === "A legjobbak legjobbja") {
this.bestOfTheBest.splice (index, 1);
}
},
szerkesztés (elem, index) {
if (item.category === "Nemrégiben olvasott könyvek") {
eventBus. $ kibocsát ("nyílt add-book-modális", tétel);
this.recentBooks.splice (index, 1);
}
if (item.category === "Kedvenc könyvek") {
eventBus. $ kibocsát ("nyílt add-book-modális", tétel);
this.favouriteBooks.splice (index, 1);
}
if (item.category === "A legjobbak legjobbja") {
eventBus. $ kibocsát ("nyílt add-book-modális", tétel);
this.bestOfTheBest.splice (index, 1);
}
}
}

Ne feledje, hogy a BookModal sugárzik, és egy mentési könyvnek nevezett esemény, itt szükségünk van egy hallgatóra az eseményre.

létrehozta () {
eventBus. $ on ("save-book", cardData => {
if (cardData.category === "Nemrégiben olvasott könyvek") {
this.recentBooks.push (cardData);
}
if (cardData.category === "Kedvenc könyvek") {
this.favouriteBooks.push (cardData);
}
if (cardData.category === "A legjobbak legjobbja") {
this.bestOfTheBest.push (cardData);
}
});
},

Most, egy teljes nézetben, az index.vue oldalunk így néz ki

Nemrégiben olvasott könyvek

Kilátás

szerkesztése
Vegye ki

Kedvenc könyvek

szerkesztése
Vegye ki

A legjobbak legjobbja

szerkesztése
Vegye ki

importálja a BookCard-t a "@ / Komponenseket / BookCard";
importálja a BookModal-t a "@ / Komponenseket / BookModal";
{eventBus} importálása innen "@ / EventBus";

alapértelmezett exportálás {
alkatrészek: {
BookCard,
BookModal
},
adatok () {
Visszatérés {
RecentBooks: [],
favouriteKönyvek: [],
a legjobbak legjobbja: []
};
},
létrehozta () {
eventBus. $ on ("save-book", cardData => {
if (cardData.category === "Nemrégiben olvasott könyvek") {
this.recentBooks.push (cardData);
this.recentBooks.sort ((a, b) => b – a);
}
if (cardData.category === "Kedvenc könyvek") {
this.favouriteBooks.push (cardData);
this.favouriteBooks.sort ((a, b) => b – a);
}
if (cardData.category === "A legjobbak legjobbja") {
this.bestOfTheBest.push (cardData);
this.bestOfTheBest.sort ((a, b) => b – a);
}
});
},
módszerek: {
eltávolítás (kategória, index) {
if (kategória === "Nemrégiben olvasott könyvek") {
this.recentBooks.splice (index, 1);
}
if (kategória === "Kedvenc könyvek") {
this.favouriteBooks.splice (index, 1);
}
if (kategória === "A legjobbak legjobbja") {
this.bestOfTheBest.splice (index, 1);
}
},
szerkesztés (elem, index) {
if (item.category === "Nemrégiben olvasott könyvek") {
eventBus. $ kibocsát ("nyílt add-book-modális", tétel);
this.recentBooks.splice (index, 1);
}
if (item.category === "Kedvenc könyvek") {
eventBus. $ kibocsát ("nyílt add-book-modális", tétel);
this.favouriteBooks.splice (index, 1);
}
if (item.category === "A legjobbak legjobbja") {
eventBus. $ kibocsát ("nyílt add-book-modális", tétel);
this.bestOfTheBest.splice (index, 1);
}
}
}
};

Ha ilyen messzire jutottál, nagyszerű munka !!! Király vagy!

Mint korábban említettük, az oldalak mappában létrehozott minden .vue fájl automatikusan útvonalként kerül kiépítésre, ugyanúgy, mint az oldalak mappában létrehozott minden mappához. Ez nem csak statikus oldalak esetében érvényes, és a dinamikus oldalak így is létrehozhatók!

Lássuk, hogyan.

Tegyük fel, hogy a jelenlegi projektünkkel dinamikus oldalt szeretnénk hozzáadni az összes könyvkártyához egy nézetgombbal, hogy a könyvről további részleteket lehessen megtekinteni.

Adjunk hozzá gyorsan egy nézetgombot, és használjuk a gombot az oldal felkereséséhez. Igen, helyettesíti és működik.

Kilátás

Ezután létrehozunk egy dinamikus mappát úgy, hogy a nevet aláhúzzuk. azaz _cím, és abban a mappában egy index.vue fájl lesz, amelyet megjelenítünk, amikor meglátogatjuk ezt az útvonalat.

Csak demonstráció céljából csak a fájlban található params tulajdonsághoz férünk hozzá.

// _cím / index.vue

{{$ Route.params.title}}

Most, amikor rákattintunk a nézetre, megnyílik egy másik oldal, ahol láthatjuk a címet, amelyet átjutottunk az útvonalon. Ezt úgy lehet kifejleszteni, hogy bármit megtehessen, a dinamikus oldalak vonatkozásában.

Erről van ez a lecke!

Ennek teljes kódja itt található raktár. Szeretettel várjuk, hogy hozzájáruljon a kódexhez. Ha érdekli a keret elsajátítása, akkor ezt javaslom Udemy tanfolyam.

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