Sukurkite savo pirmąją „Nuxt“ programą – CRUD knygų parduotuvė

Sužinokite, kaip sukurti „Nuxt“ programą.


CRUD – kurkite, skaitykite, atnaujinkite, trinkite

Manau, kad jūs jau žinote „Vue JS“ pagrindus ir (arba) esate šiek tiek susipažinęs su sistema. „Nuxt JS“ yra tvirta sistema, sukurta remiantis „Vue JS“. Iš esmės jis sutampa su „Vue JS“. Tada kodėl, „Nuxt“?

Daugeliui žmonių sprendimas naudoti „Nuxt JS“ paprastai yra dėl jo SSR galimybių.

Kas yra SSR?

SSR yra „Server Side Rendering“ santrumpa.

Paprastai daugumai vieno puslapio programų (SPA) pateikiami failai automatiškai įšvirkščiami į DOM, kai puslapis įkeliamas. Taigi robotai, SEO tikrinimo įrenginiai ras tuščią puslapį įkeldami puslapį. Tačiau dėl SSR dėl galimybės iš anksto pateikti programas serveryje prieš puslapį, SEO puslapį gali lengvai indeksuoti SEO. Be to, tai gali padaryti programą dar veiksmingesnę nei įprasta SPA.

„Nuxt JS“ suteikia kūrėjams galimybę lengvai kurti SSR programas. Įprastas „Vue JS SPA“ programas taip pat galima sukonfigūruoti naudoti SSR, tačiau procesas yra šiek tiek sudėtingas, o „Nuxt JS“ suteikia įvyniojimą, kad būtų galima valdyti visą tą konfigūraciją. Be „SSR“, „Nuxt“ taip pat suteikia lengvą būdą, kaip efektyviau nustatyti „VueJS“ projektą.

Nors „Nuxt JS“ vis dar yra „Vue JS“, ji turi keletą esminių skirtumų, kaip struktūra jos aplanko architektūrą.

Šis straipsnis yra skirtas jums sukurti programą su „Nuxt“; vadinasi, mes nesigilinsime į „Nuxt“ katalogų architektūrą, tačiau greitai paaiškinsiu keletą svarbių, kurių mums gali prireikti.

Puslapiai

Puslapių aplankas yra vienas esminių skirtumų nuo įprastos „Vue SPA“. Tai reiškia „Views“ aplanką įprastoje „Vue“ architektūroje, taip pat „Nuxt“ aplanke „Puslapiai“ sukurti failai automatiškai pateikiami kaip maršrutas. Reiškia, kai kuriate „index.vue“ failą puslapių aplanke, jis automatiškai tampa jūsų pagrindiniu maršrutu, t. Y. „Localhost“: 3000 /.

Taip pat, kai kuriate bet kurią kitą failo pavadinimą.vue, jis tampa maršrutu – sukurdami „about.vue“ galite pasiekti vietinį „host “: 3000 / apie.

Taip pat aplanką Puslapiai galite sukurti aplanke. Jei kuriate aplanką pavadinimu „kontaktas“ ir tame aplanke turite „email.vue“, tada galite pasiekti „localhost“: 3000 / kontaktas / el. Tai taip paprasta. Tokiu būdu jums nereikia rankiniu būdu kurti „router.js“ failo, kaip paprastai darytumėte su „Vue JS“ kurdami savo maršrutus.

Komponentai

Tai vis tiek beveik nesiskiria nuo „Vue JS“, sukurti komponentai nėra automatiškai pateikiami kaip maršrutai.

Statinis

Statinis aplankas pakeičia įprastą „Vue JS“ programų viešąjį aplanką, veikia beveik tas pats. Čia failai nėra kaupiami; jie patiekiami taip pat, kaip ir laikomi.

Galite perskaityti viską apie architektūrą ir struktūrą „Nuxt JS“ dokumentacijos puslapis.

Sukurkime ką nors įdomaus …

Knygų parduotuvės programos sukūrimas

Sukursime knygynų programą, kurioje vartotojas galės įtraukti skaitytas knygas į tam tikrą kategoriją, kuri jiems patinka. Tai atrodys taip.

Taigi, mes turėsime paprastą išdėstymą, kaip aprašyta aukščiau, tik 3 stulpelius, kuriuose yra skirtingi knygų skyriai. Neseniai perskaitytos knygos, mėgstamos knygos ir taip, geriausios knygos (prisipažinsiu, nežinojau, ką vadinti ta dalimi, section)

Taigi tikslas yra sugebėti pridėti knygos pavadinimą, autorių ir aprašą prie bet kurios skilties kortelės, redaguoti jau pridėtas knygas ir pašalinti esamą knygą. Mes nenaudosime jokios duomenų bazės, todėl viskas vyksta valstybėje.

Pirmiausia mes įdiegiame „Nuxt“:

npm įdiegti sukurti „nuxt-app“ programą

Antra, įdiegę „Nuxt“, dabar galite sukurti projektą naudodami komandą,

sukurti „nuxt-app“ knygyną

Aš pasirenku savo programos pavadinimą „bookStore“; galite pavadinti savo ką nors šaunesnio ^ _ ^

Tada eikime per likusius raginimus ir įveskite aprašą,

Autoriaus vardas, įveskite vardą arba paspauskite Enter, kad išsaugotumėte numatytuosius nustatymus

Pasirinkite pakuotės tvarkyklę, atsižvelgiant į tai, kas jums patinka, abiem yra gerai

Pasirinkite vartotojo sąsajos sąranką. Šiam projektui naudosiu „Vuetify“, tada vėlgi bet kokia jūsų UI sistema, kuri jums patogi, bus puiki.

Pasirinkite pasirinktinį serverio pagrindą; mums nieko nereikia, aš neišsirinksiu nė vieno

Papildomi moduliai, pasirinkite tai, ko norite, arba abu, mes nenaudotume jų šiai programai.

Užkalbėjimas yra svarbus. Eime su ESLint.

Nors bandymai yra svarbūs, mes to nenagrinėsime šiandien, taigi, nė vieno

Pateikimo būdas, taip, SSR jis yra.

Pastaba: Pasirinkę SSR nereiškia, kad neturime naudos iš SPA, programa vis tiek lieka SPA, bet su SSR. Kita galimybė reiškia tiesiog SPA ir be SSR.

Paspauskite „Enter“ ir judėkite toliau,

O mūsų projektas kuria,

Sukūrę, dabar galime pereiti į katalogą ir paleisti

verpalų dev

jei naudojate npm kaip savo paketo tvarkyklę, naudokite,

npm paleisti dev

Pagal numatytuosius nustatymus programa veikia „localhost“: 3000. Apsilankykite nuorodoje naršyklėje ir turėtumėte pamatyti numatytąjį „Nuxt“ puslapį.

Pradėkime nuo reikalingų komponentų kūrimo. Turėsime korteles, kuriose bus rodoma kiekvienos knygos informacija, ir mes turėsime modalą, kuriame bus forma naujai knygos informacijai įvesti ar esamoms redaguoti..

Norėdami sukurti komponentą, tiesiog sukurkite naują failą komponentų aplanke. Čia yra mano kortelės komponento kodas.

// „BookCard.vue“

{{Knygos pavadinimas}}
{{bookAuthor}}
{{bookDescription}}

eksportuoti numatytąjį {
rekvizitai: ["Knygos pavadinimas", "knygaAutorius", "knyga Aprašymas"]
};

Trumpas paaiškinimas, kas daroma aukščiau. Vaizdas užkoduotas; kol kas dėl to nesigėdysime. Knygos pavadinimas, knygos autorius ir knygos aprašymas perduodami šiam komponentui iš pagrindinio puslapio kaip rekvizitai. Jei nesate susipažinę su rekvizitais, įsivaizduokite juos, kaip šio komponento įėjimo taškus galima užpildyti duomenimis.

Dabar prie kito komponento, modalinio.

// „BookModal.vue“

Pridėti knygų

Papildyti

Tai yra modalo žymėjimas; turime sukurti „v“ modelius kaip duomenų savybes; todėl po žyma pridėsime scenarijaus žymą.

eksportuoti numatytąjį {
duomenys () {
grįžti {
Kategorija: "",
pavadinimas: "",
autorius: "",
apibūdinimas: "",
};
},
}

Taip pat yra išskleidžiamasis meniu „Pasirinkite kategoriją“, kuriame tikimasi „kategorijų“ duomenų. Mes pridėsime tai prie duomenų.

eksportuoti numatytąjį {
duomenys () {
grįžti {
atviras: klaidingas,
Kategorija: "",
pavadinimas: "",
autorius: "",
apibūdinimas: "",
kategorijos: ["Neseniai skaitytos knygos", "Mėgstamos knygos", "Geriausias iš geriausių"]
};
},
}

Dabar mums reikia būdo, kaip įjungti ir uždaryti transporto rūšis, nes dabar turėsime „atvirų“ duomenų nuosavybę, kaip aprašyta aukščiau. Atidžiau panagrinėsime tai.

Greitai sukurkime peržiūros puslapį, kuriame turėsime tris tinklelius / stulpelius, po vieną kiekvienai knygos daliai. Paskambinkime puslapiui index.vue, žiūrėkite žemiau esantį kodą.

//index.vue

Neseniai skaitytos knygos

Mėgstamiausios knygos

Geriausias iš geriausių

Dabar, kai turime savo tinklelius, turime pridėti savo kortelės komponentą prie kiekvienos tinklelio, prie kiekvienos pridėtos knygos. Todėl mes importuosime savo „BookCard.vue“ komponentą.

Neseniai skaitytos knygos

Redaguoti
Pašalinti

Mėgstamiausios knygos

Redaguoti
Pašalinti

Geriausias iš geriausių

Redaguoti
Pašalinti

Dabar mes importavome „BookCard“ komponentą ir jo rekvizitus susiejame su rezultatais iš kilpos; tai užtikrina, kad kiekvienam įrašui, pridėtam prie bet kurio skyriaus, būtų sukurta jam skirta kortelė. Be to, kiekvienoje kortelėje bus mygtukai, kuriais galite redaguoti arba išimti kortelę.

Dabar turime importuoti kortelę iš scenarijaus ir apibrėžti masyvus, kuriuose bus kiekvienos kategorijos įrašai.

importuoti „BookCard“ iš "@ / komponentai / „BookCard“";

eksportuoti numatytąjį {
komponentai: {
„BookCard“,
},
duomenys () {
grįžti {
RecentBooks: [],
favouriteKnygos: [],
Geriausias iš geriausių: []
};
},
};

Be to, antraštėje turime mygtuką, kuris atvers modalą, kai tik reikės pridėti knygų. Tai padarysime faile „default.vue“. Mygtuką pridėsime prie numatytosios programų juostos antraštės.

Pridėti knygų

Tada scenarijų skiltyje reikia sukurti „openModal“ metodą. Įprastose „Vue JS“ programose yra įvykių magistralė, leidžianti susisiekti su kitu komponentu ir netgi perduoti duomenis per „Nuxt JS“, vis dar turinti įvykių magistralę, kurią vis tiek galite sukurti tokiu pačiu būdu. Taigi, mes naudosime įvykių magistralę, kad perduotume duomenis į index.vue puslapį (kurį mes dar neturime importuoti) iš išdėstymo / numatytojo failo failo..

Pažiūrėkime, kaip tai daroma.

Norėdami sukurti visuotinį įvykių autobusą, atidarykite failą šakniniame projekto kataloge, pavadinkite jį įvykiuBus.js ir įklijuokite žemiau esantį kodą.

importuoti „Vue“ iš „vue“

„export const eventBus“ = nauja Vue ()

Taip, viskas. Dabar galime ja naudotis.

importuoti {eventBus} iš "@ / eventBus";
metodai: {
„openModal“ () {
eventBus. $ emit ("atidaryti papildomą knygą-modalą");
}
}

Toliau grįšime prie „BookModal“ komponento ir klausysimės, kada „eventBus“ skleidžia „atviro papildymo knygą“. Mes pridėsime tai prie scenarijaus skyriaus.

importuoti {eventBus} iš "@ / eventBus";

sukurta () {
„eventBus. $“ ("atidaryti papildomą knygą-modalą", tai.atverti = tiesa);
},

Dabar galime atidaryti ir uždaryti savo transporto rūšį, tačiau ji dar neprideda jokių knygų. Pridėkime metodą prie mūsų modulio, kad jis išsaugotų tai, kas pridedama prie valstybės (atminkite, kad mes nenaudojame jokios duomenų bazės ar vietinės saugyklos). Pridedame tai šalia „sukurta ()“

metodai: {
išsaugoti knygą () {
tegul cardData = {
pavadinimas: this.title,
autorius: šis.autorius,
aprašymas: šis aprašymas,
kategorija: ši.kategorija
};
eventBus. $ emit ("išsaugoti knygą", cardData);
this.open = klaidingas;
}
}

Tada mums reikia būdo, kaip iš naujo užpildyti modalą, kai taisome duomenis iš bet kurios kortelės. Taigi, šiek tiek pakoreguokime „sukurtą ()“

sukurta () {
„eventBus. $“ ("atidaryti papildomą knygą-modalą", duomenys => {
if (duomenys) {
this.category = data.category;
this.title = data.title;
this.author = data.author;
this.description = data.description;
}
this.open = tiesa;
});
},

Dabar „BookModal“ atrodo visa tai,

// „BookModal.vue“

Pridėti knygų

Papildyti

importuoti {eventBus} iš "@ / eventBus";
eksportuoti numatytąjį {
duomenys () {
grįžti {
atviras: klaidingas,
Kategorija: "",
pavadinimas: "",
autorius: "",
apibūdinimas: "",
kategorijos: ["Neseniai skaitytos knygos", "Mėgstamos knygos", "Geriausias iš geriausių"]
};
},
sukurta () {
„eventBus. $“ ("atidaryti papildomą knygą-modalą", duomenys => {
if (duomenys) {
this.category = data.category;
this.title = data.title;
this.author = data.author;
this.description = data.description;
}
this.open = tiesa;
});
},
metodai: {
išsaugoti knygą () {
tegul cardData = {
pavadinimas: this.title,
autorius: šis.autorius,
aprašymas: šis aprašymas,
kategorija: ši.kategorija
};
eventBus. $ emit ("išsaugoti knygą", cardData);
this.open = klaidingas;
}
}
};

Tada mes galime grįžti į „index.vue“ puslapį ir importuoti „BookModal“ komponentą. Mes pridėsime tai prie scenarijaus skyriaus.

importuoti „BookCard“ iš "@ / komponentai / „BookCard“";
importuoti „BookModal“ iš "@ / komponentai / „BookModal“";
importuoti {eventBus} iš "@ / eventBus";

eksportuoti numatytąjį {
komponentai: {
„BookCard“,
„BookModal“
},
duomenys () {
grįžti {
RecentBooks: [],
favouriteKnygos: [],
Geriausias iš geriausių: []
};
},

Taip pat kūne mes pridėsime,

Mums reikia kortelės redagavimo ir išėmimo būdų. Anksčiau pateiktame šablone aš jau išlaikiau mygtukų redagavimo ir pašalinimo metodus, kaip parodyta žemiau, taip pat perėjau argumentus, kurių reikia kiekvienam metodui..

Redaguoti Pašalinti

Kurkime metodus.

metodai: {
pašalinti (kategorija, rodyklė) {
if (kategorija === "Neseniai skaitytos knygos") {
this.recentBooks.splice (rodyklė, 1);
}
if (kategorija === "Mėgstamos knygos") {
this.favouriteBooks.splice (rodyklė, 1);
}
if (kategorija === "Geriausias iš geriausių") {
this.bestOfTheBest.splice (rodyklė, 1);
}
},
taisyti (elementas, rodyklė) {
if (elementas.kategorija === "Neseniai skaitytos knygos") {
eventBus. $ emit ("atidaryti papildomą knygą-modalą", daiktas);
this.recentBooks.splice (rodyklė, 1);
}
if (elementas.kategorija === "Mėgstamos knygos") {
eventBus. $ emit ("atidaryti papildomą knygą-modalą", daiktas);
this.favouriteBooks.splice (rodyklė, 1);
}
if (elementas.kategorija === "Geriausias iš geriausių") {
eventBus. $ emit ("atidaryti papildomą knygą-modalą", daiktas);
this.bestOfTheBest.splice (rodyklė, 1);
}
}
}

Atminkite, kad „BookModal“ skleidžia ir įvykis, vadinamas išsaugojimo knyga, mums čia reikia šio įvykio klausytojo.

sukurta () {
„eventBus. $“ ("išsaugoti knygą", cardData => {
if (cardData.category === "Neseniai skaitytos knygos") {
this.recentBooks.push (cardData);
}
if (cardData.category === "Mėgstamos knygos") {
this.favouriteBooks.push (cardData);
}
if (cardData.category === "Geriausias iš geriausių") {
this.bestOfTheBest.push (cardData);
}
});
},

Dabar vienu žvilgsniu mūsų puslapis index.vue atrodo taip

Neseniai skaitytos knygos

Vaizdas

Redaguoti
Pašalinti

Mėgstamiausios knygos

Redaguoti
Pašalinti

Geriausias iš geriausių

Redaguoti
Pašalinti

importuoti „BookCard“ iš "@ / komponentai / „BookCard“";
importuoti „BookModal“ iš "@ / komponentai / „BookModal“";
importuoti {eventBus} iš "@ / eventBus";

eksportuoti numatytąjį {
komponentai: {
„BookCard“,
„BookModal“
},
duomenys () {
grįžti {
RecentBooks: [],
favouriteKnygos: [],
Geriausias iš geriausių: []
};
},
sukurta () {
„eventBus. $“ ("išsaugoti knygą", cardData => {
if (cardData.category === "Neseniai skaitytos knygos") {
this.recentBooks.push (cardData);
this.recentBooks.sort ((a, b) => b – a);
}
if (cardData.category === "Mėgstamos knygos") {
this.favouriteBooks.push (cardData);
this.favouriteBooks.sort ((a, b) => b – a);
}
if (cardData.category === "Geriausias iš geriausių") {
this.bestOfTheBest.push (cardData);
this.bestOfTheBest.sort ((a, b) => b – a);
}
});
},
metodai: {
pašalinti (kategorija, rodyklė) {
if (kategorija === "Neseniai skaitytos knygos") {
this.recentBooks.splice (rodyklė, 1);
}
if (kategorija === "Mėgstamos knygos") {
this.favouriteBooks.splice (rodyklė, 1);
}
if (kategorija === "Geriausias iš geriausių") {
this.bestOfTheBest.splice (rodyklė, 1);
}
},
taisyti (elementas, rodyklė) {
if (elementas.kategorija === "Neseniai skaitytos knygos") {
eventBus. $ emit ("atidaryti papildomą knygą-modalą", daiktas);
this.recentBooks.splice (rodyklė, 1);
}
if (elementas.kategorija === "Mėgstamos knygos") {
eventBus. $ emit ("atidaryti papildomą knygą-modalą", daiktas);
this.favouriteBooks.splice (rodyklė, 1);
}
if (elementas.kategorija === "Geriausias iš geriausių") {
eventBus. $ emit ("atidaryti papildomą knygą-modalą", daiktas);
this.bestOfTheBest.splice (rodyklė, 1);
}
}
}
};

Jei nukeliavai taip toli, puikus darbas !!! Jūs esate nuostabus!

Kaip minėta anksčiau, kiekvienas .vue failas, sukurtas puslapių aplanke, automatiškai įtraukiamas kaip maršrutas, taip pat ir į kiekvieną aplanką, sukurtą puslapių aplanke. Tai taikoma ne tik statiniams puslapiams, o dinaminius puslapius taip pat galima sukurti!

Pažiūrėkime kaip.

Tarkime, kad, naudodamiesi dabartiniu projektu, norime pridėti dinaminį visų knygų kortelių puslapį su peržiūros mygtuku, kad galėtumėte peržiūrėti daugiau informacijos apie knygą.

Greitai pridėkime peržiūros mygtuką ir apsilankykite puslapyje naudodami mygtuką. Taip, pakeičia ir veikia.

Vaizdas

Toliau mes sukuriame dinaminį aplanką, pridedant pavadinimą su pabraukimu. y., „_title“ ir tame aplanke turėsime „index.vue“ failą, kuris bus pateiktas, kai lankysimės tame maršrute.

Tiesiog norėdami parodyti, prieisime tik prie byloje esančių „params“ ypatybių.

// _pavadinimas / rodyklė

{{$ route.params.title}}

Dabar, kai spustelėjame rodinį, jis atidaro kitą puslapį, kuriame galime pamatyti pavadinimą, kurį praėjome per maršrutą. Tai gali būti išplėtota padaryti bet ką, ko norime, kalbant apie dinaminius puslapius.

Štai ir šiai pamokai!

Išsamų kodą galite rasti čia saugykla. Maloniai kviečiame prisidėti prie kodo kūrimo. Jei jus domina pagrindų įsisavinimas, tada siūlyčiau tai padaryti Udemy kursas.

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