Die skep van u eerste Nuxt-app – ‘n CRUD-boekwinkel

Leer hoe om ‘n Nuxt-toepassing te skep.


CRUD – Skep, lees, werk op, verwyder

Ek aanvaar dat u reeds die grondbeginsels van Vue JS ken en / of u ‘n bietjie vertroud is met die raamwerk. Nuxt JS is ‘n robuuste raamwerk, gebou op Vue JS. Dit is in wese dieselfde as Vue JS. Dan waarom, Nuxt?

Vir die meeste mense is die besluit om Nuxt JS te gebruik meestal vir sy SSR-vermoëns.

Wat is SSR?

SSR is ‘n afkorting vir Server Side Rendering.

Gewoonlik, vir die meeste enkele bladsy-toepassings (SPA), word weergegee lêers outomaties in die DOM ingespuit nadat die bladsy gelaai is. Bots, SEO-crawlers vind dus ‘n leë bladsy op bladsylading. Vanweë die vermoë om programme vooraf op die bediener voor bladsy weer te gee, kan die bladsy maklik deur SEO-kruipers geïndekseer word. Dit maak die app moontlik ook meer performant as ‘n gewone SPA.

Nuxt JS bied ontwikkelaars die vermoë om SSR-toepassings met gemak te skep. Gewone Vue JS SPA-programme kan ook opgestel word om SSR te gebruik, maar die proses is ietwat omslagtig, en Nuxt JS bied ‘n wikkel om al die konfigurasies te hanteer. Afgesien van die SSR, bied Nuxt ook ‘n maklike manier om u VueJS-projek met meer doeltreffendheid op te stel.

Alhoewel Nuxt JS steeds Vue JS is, het dit ‘n paar fundamentele verskille in die struktuur van die vouer-argitektuur.

Die fokus van hierdie artikel is dat u dit kan doen bou ‘n app met Nuxt; vandaar, ons gaan nie diep in die gids-argitektuur van Nuxt ingaan nie, maar ek sal vinnig enkele van die belangrikste wat ons hier benodig, verduidelik.

bladsye

Die bladsye is een van die belangrikste verskille van gewone Vue SPA. Dit stel die Views-lêergids in die gewone Vue-argitektuur voor, en in Nuxt word lêers wat in die Pages-map geskep is, outomaties as ‘n roete voorsien. Dit beteken dat as u ‘n index.vue-lêer in die bladsye-map skep, dit outomaties u wortelroete word, d.w.s. localhost: 3000 /.

As u enige ander lêernaam.vue skep, word dit ‘n roete – deur ongeveer.vue te skep, kry u toegang tot localhost: 3000 / ongeveer.

U kan ook ‘n vouer in die bladsye-map skep. As u ‘n gids met die naam ‘kontak’ skep en binne die gids ‘n e-pos.vue het, kan u toegang tot localhost kry: 3000 / kontak / e-pos. Dit is so eenvoudig. Op hierdie manier hoef u nie ‘n router.js-lêer met die hand te skep nie, soos u gewoonlik met Vue JS sou doen om u roetes te skep..

komponente

Dit is nog steeds dieselfde as by Vue JS, komponente wat geskep word, word nie outomaties as roetes voorsien nie.

statiese

Statiese lêergids vervang die openbare lêergids in gewone Vue JS-apps, funksioneer amper dieselfde. Lêers hier word nie saamgestel nie; dit word op dieselfde manier bedien as wat dit geberg word.

U kan alles lees oor die argitektuur en struktuur by die Nuxt JS dokumentasie bladsy.

Laat ons nou iets interessants bou …

Bou ‘n boekwinkel-app

Ons sal ‘n boekwinkel-app bou, waar ‘n gebruiker boeke wat hy gelees het, kan byvoeg tot ‘n spesifieke kategorie wat hy wil. Dit sal so lyk.

Dus, ons het ‘n eenvoudige uitleg soos hierbo, net drie kolomme wat die verskillende boeke bevat. Ek het onlangs boeke, gunsteling boeke gelees, en ja, die beste van die beste boeke (ek sal erken, ek het nie geweet wat om daardie afdeling te noem nie, ��)

Die doel hier is dus om ‘n titel, outeur en beskrywing van ‘n boek op een van die afdelings by te voeg, boeke wat reeds bygevoeg is, te wysig en ‘n bestaande boek te verwyder. Ons gebruik geen databasis nie, so alles gebeur in die staat.

Eerstens installeer ons Nuxt:

npm installeer create-nuxt-app

Tweedens, nadat u Nuxt geïnstalleer het, kan u nou die projek met die opdrag skep,

create-nuxt-app boekwinkel

Ek kies om my app ‘bookStore’ te noem; jy kan jou iets koeler noem ^ _ ^

Kom ons blaai deur die oorblywende aanwysings en voer ‘n beskrywing in,

Skrywer se naam, tik ‘n naam in of druk enter om die standaardbepaling te behou

Kies ‘n pakketbestuurder, dit gaan goed met u, alhoewel u gemaklik is

Kies ‘n UI-raamwerk. Vir hierdie projek gebruik ek Vuetify, dan sal enige UI-raamwerk waarmee u gemaklik is goed gaan.

Kies ‘n pasgemaakte bedienerraamwerk; ons het nie nodig nie; ek sal nie een kies nie

Ekstra modules, kies wat u wil hê, of kies albei; ons gebruik hulle nie vir hierdie program nie.

Voering is belangrik. Kom ons gaan saam met ESLint.

Alhoewel toetsing belangrik is, sal ons dit nie vandag ondersoek nie, en dus nie

Lewer modus, ja SSR dit is.

Opmerking: die keuse van SSR beteken nie dat ons nie die voordeel trek om ‘n SPA te hê nie, die app bly steeds ‘n SPA maar met SSR. Die ander opsie beteken eenvoudig SPA en geen SSR nie.

Klik op Enter en gaan aan,

En ons projek is besig om te skep,

Na die skepping kan ons nou na die gids gaan en hardloop

garing dev

gebruik u npm as u pakketbestuurder,

npm hardloop dev

Die app word standaard by localhost aangebied: 3000. Besoek die skakel in u blaaier, en u moet ‘n standaard Nuxt-bladsy sien.

Laat ons begin met die skep van komponente wat ons benodig. Ons sal kaarte hê met elke boekinligting, en ons het ‘n modaal met ‘n vorm om nuwe boekinligting in te voer of bestaande te wysig.

Om ‘n komponent te skep, skep u eenvoudig ‘n nuwe lêer in die komponente-lêergids. Hier is die kode vir my kaartkomponent.

// BookCard.vue

{{BOOKTITLE}}
{{BookAuthor}}
{{BookDescription}}

uitvoer verstek {
rekwisiete: ["BOOKTITLE", "bookAuthor", "bookDescription"]
};

‘N Vinnige uiteensetting van wat hierbo gedoen word. Die beeld is hardkodeerd; daaroor sal ons nie nou pla nie. Die boektitel, die outeur van die boek en die boekbeskrywing word vanaf rekords na hierdie komponent oorgedra. As u nie vertroud is met rekwisiete nie, verbeel u hulle dan dat ingangspunte deur hierdie komponent met data gevul kan word.

Nou na die volgende komponent, die modale.

//BookModal.vue

Voeg boeke by

Voeg

Nou, dit is die opsomming van die modaal; ons moet die v-modelle as data-eienskappe skep; daarom sal ons ‘n skripmerk byvoeg onder die etiket.

uitvoer verstek {
data () {
keer terug {
kategorie: "",
titel: "",
skrywer: "",
beskrywing: "",
};
},
}

Daar is ook ‘n kieslys ‘Kies ‘n kategorie’ wat ‘kategorieë’-data verwag. Ons sal dit by die gegewens voeg.

uitvoer verstek {
data () {
keer terug {
oop: onwaar,
kategorie: "",
titel: "",
skrywer: "",
beskrywing: "",
kategorieë: ["Lees onlangs boeke", "Gunsteling boeke", "Beste van die beste"]
};
},
}

Nou moet ons ‘n manier hê om ons modale oop en toe te skakel, want nou sal ons net ‘n ‘oop’ eienskap hê soos hierbo. Ons sal daarna kyk.

Kom ons skep vinnig ons bladsy waar ons drie ruiten / kolomme het, een vir elke afdeling van die boek. Laat ons die bladsyindeks bel. Kyk na die kode hieronder.

//index.vue

Lees onlangs boeke

Gunsteling boeke

Beste van die beste

Noudat ons ons roosters het, moet ons ons kaartkomponent byvoeg vir elke boek wat bygevoeg word. Daarom sal ons ons BookCard.vue-komponent invoer.

Lees onlangs boeke

wysig
Verwyder

Gunsteling boeke

wysig
Verwyder

Beste van die beste

wysig
Verwyder

Nou het ons die BookCard-komponent ingevoer en ons rekwisiete aan die resultate van die lus gebind; dit verseker dat daar vir elke inskrywing wat by een van die afdelings gevoeg word, ‘n kaart daarvoor geskep is. Op elke kaart bevat ons ook knoppies om ‘n kaart te wysig of te verwyder.

Nou moet ons die kaart vanaf die skrif invoer en die skikkings definieer wat rekords vir elk van die kategorieë sal hou.

invoer BookCard vanaf "@ / Komponente / BookCard";

uitvoer verstek {
komponente: {
BookCard,
},
data () {
keer terug {
onlangse boeke: [],
gunstelingboeke: [],
beste van die beste: []
};
},
};

Vervolgens moet ons ‘n knoppie in die kop hê wat die modal sal oopmaak wanneer ons boeke moet byvoeg. Ons sal dit doen in die ‘default.vue’-lêer. Ons sal die knoppie by die standaard-balkbalkop voeg.

Voeg boeke by

Vervolgens moet ons die openModal-metode in die skripafdeling skep. In gewone Vue JS-apps is daar ‘n gebeurtenisbus waarmee u met ‘n ander komponent kan kommunikeer en selfs data deurgee, in Nuxt JS is daar nog steeds ‘n gebeurtenisbus en u kan dit steeds op dieselfde manier skep. Dus, ons sal ‘n gebeurtenisbus gebruik om data deur te gee wat ‘n modaal oopmaak op die index.vue-bladsy (wat ons nog moet invoer) vanaf die uitleg / default.vue-lêer.

Kom ons kyk hoe dit gedoen word.

Om ‘n wêreldwye gebeurtenisbus te skep, maak u ‘n lêer oop in die grondgids van die projek, noem dit eventBus.js en plak die onderstaande kode daarin.

voer Vue vanaf ‘vue’ in

export const eventBus = new Vue ()

Ja, dit alles. Nou kan ons dit gebruik.

voer {eventBus} in vanaf "@ / EventBus";
metodes: {
openModal () {
eventBus. $ stoot ("oop-byvoeging boek-modale");
}
}

Vervolgens gaan ons terug na die BookModal-komponent en luister wanneer die gebeurtenisBus ‘open-add-book-modal’ uitstraal. Ons sal dit by die skrifgedeelte voeg.

voer {eventBus} in vanaf "@ / EventBus";

geskep() {
eventBus. $ op ("oop-byvoeging boek-modale", dit.open = waar);
},

Nou kan ons ons modal oopmaak en toemaak, maar dit voeg nog geen boeke by nie. Laat ons ‘n metode by ons Modal voeg om dit te red wat by die staat gevoeg word (onthou dat ons geen databasis of plaaslike berging gebruik nie). Ons voeg dit by ‘geskep ()’

metodes: {
saveBook () {
laat kaartData = {
titel: hierdie.titel,
outeur: hierdie. outeur,
beskrywing: hierdie. beskrywing,
kategorie: hierdie.kategorie
};
eventBus. $ stoot ("Save-boek", cardData);
dit.open = onwaar;
}
}

Vervolgens het ons ‘n manier nodig om die modaal weer in te vul wanneer ons data vanaf een van die kaarte redigeer. Laat ons dus ‘n paar aanpassings aanbring by die ‘geskep ()’

geskep() {
eventBus. $ op ("oop-byvoeging boek-modale", data => {
indien (data) {
this.category = data.category;
this.title = data.title;
this.author = data.author;
this.description = data.description;
}
dit.open = waar;
});
},

Nou lyk die BookModal soos ‘n geheel,

//BookModal.vue

Voeg boeke by

Voeg

voer {eventBus} in vanaf "@ / EventBus";
uitvoer verstek {
data () {
keer terug {
oop: onwaar,
kategorie: "",
titel: "",
skrywer: "",
beskrywing: "",
kategorieë: ["Lees onlangs boeke", "Gunsteling boeke", "Beste van die beste"]
};
},
geskep() {
eventBus. $ op ("oop-byvoeging boek-modale", data => {
indien (data) {
this.category = data.category;
this.title = data.title;
this.author = data.author;
this.description = data.description;
}
dit.open = waar;
});
},
metodes: {
saveBook () {
laat kaartData = {
titel: hierdie.titel,
outeur: hierdie. outeur,
beskrywing: hierdie. beskrywing,
kategorie: hierdie.kategorie
};
eventBus. $ stoot ("Save-boek", cardData);
dit.open = onwaar;
}
}
};

Vervolgens kan ons teruggaan na die index.vue-bladsy om die BookModal-komponent in te voer. Ons sal dit by die skrifgedeelte voeg.

invoer BookCard vanaf "@ / Komponente / BookCard";
voer BookModal in vanaf "@ / Komponente / BookModal";
voer {eventBus} in vanaf "@ / EventBus";

uitvoer verstek {
komponente: {
BookCard,
BookModal
},
data () {
keer terug {
onlangse boeke: [],
gunstelingboeke: [],
beste van die beste: []
};
},

In die liggaam voeg ons ook by,

Ons benodig metodes om ‘n kaart te redigeer en te verwyder. In die sjabloon vroeër het ek reeds die bewerkings- en verwydermetodes deurgegee op die knoppies soos hieronder getoon. Ek het ook die argumente benodig vir elke metode.

Wysig Verwyder

Laat ons die metodes skep.

metodes: {
verwyder (kategorie, indeks) {
if (kategorie === "Lees onlangs boeke") {
this.recentBooks.splice (indeks, 1);
}
if (kategorie === "Gunsteling boeke") {
this.favouriteBooks.splice (indeks, 1);
}
if (kategorie === "Beste van die beste") {
this.bestOfTheBest.splice (indeks, 1);
}
},
wysig (item, indeks) {
if (item.category === "Lees onlangs boeke") {
eventBus. $ stoot ("oop-byvoeging boek-modale", item);
this.recentBooks.splice (indeks, 1);
}
if (item.category === "Gunsteling boeke") {
eventBus. $ stoot ("oop-byvoeging boek-modale", item);
this.favouriteBooks.splice (indeks, 1);
}
if (item.category === "Beste van die beste") {
eventBus. $ stoot ("oop-byvoeging boek-modale", item);
this.bestOfTheBest.splice (indeks, 1);
}
}
}

Onthou dat die BookModal uitstuur, en ‘n geleentheid genaamd save-book, ons het hier ‘n luisteraar nodig.

geskep() {
eventBus. $ op ("Save-boek", kaartData => {
if (cardData.category === "Lees onlangs boeke") {
this.recentBooks.push (cardData);
}
if (cardData.category === "Gunsteling boeke") {
this.favouriteBooks.push (cardData);
}
if (cardData.category === "Beste van die beste") {
this.bestOfTheBest.push (cardData);
}
});
},

Op een geheel kyk lyk ons ​​index.vue-bladsy só

Lees onlangs boeke

Beskou

wysig
Verwyder

Gunsteling boeke

wysig
Verwyder

Beste van die beste

wysig
Verwyder

invoer BookCard vanaf "@ / Komponente / BookCard";
voer BookModal in vanaf "@ / Komponente / BookModal";
voer {eventBus} in vanaf "@ / EventBus";

uitvoer verstek {
komponente: {
BookCard,
BookModal
},
data () {
keer terug {
onlangse boeke: [],
gunstelingboeke: [],
beste van die beste: []
};
},
geskep() {
eventBus. $ op ("Save-boek", kaartData => {
if (cardData.category === "Lees onlangs boeke") {
this.recentBooks.push (cardData);
this.recentBooks.sort ((a, b) => BA);
}
if (cardData.category === "Gunsteling boeke") {
this.favouriteBooks.push (cardData);
this.favouriteBooks.sort ((a, b) => BA);
}
if (cardData.category === "Beste van die beste") {
this.bestOfTheBest.push (cardData);
this.bestOfTheBest.sort ((a, b) => BA);
}
});
},
metodes: {
verwyder (kategorie, indeks) {
if (kategorie === "Lees onlangs boeke") {
this.recentBooks.splice (indeks, 1);
}
if (kategorie === "Gunsteling boeke") {
this.favouriteBooks.splice (indeks, 1);
}
if (kategorie === "Beste van die beste") {
this.bestOfTheBest.splice (indeks, 1);
}
},
wysig (item, indeks) {
if (item.category === "Lees onlangs boeke") {
eventBus. $ stoot ("oop-byvoeging boek-modale", item);
this.recentBooks.splice (indeks, 1);
}
if (item.category === "Gunsteling boeke") {
eventBus. $ stoot ("oop-byvoeging boek-modale", item);
this.favouriteBooks.splice (indeks, 1);
}
if (item.category === "Beste van die beste") {
eventBus. $ stoot ("oop-byvoeging boek-modale", item);
this.bestOfTheBest.splice (indeks, 1);
}
}
}
};

As u so ver kom, Great Job !!! Jy is wonderlik!

Soos vroeër genoem, word elke .vue-lêer wat in die bladsye-gids gemaak word, outomaties voorsien as ‘n roete, ook vir elke vouer wat binne die bladsye-lêergids geskep word. Dit geld nie net vir statiese bladsye nie, en dinamiese bladsye kan ook op hierdie manier geskep word!

Kom ons kyk hoe.

Met behulp van ons huidige projek, kom ons sê ons wil ‘n dinamiese bladsy byvoeg vir al die boekekaarte met ‘n aansigknoppie om meer besonderhede oor ‘n boek te sien.

Laat ons vinnig ‘n aansigknoppie byvoeg en gebruik a om die bladsy te besoek. Ja, vervang dit en dit werk.

Beskou

Vervolgens skep ons ‘n dinamiese gids deur die naam met ‘n onderstreepte voorvoegsel te vorm. dit wil sê, _titel en binne die lêergids het ons ‘n index.vue-lêer wat gelewer word wanneer ons daardie roete besoek.

Net vir demonstrasie, sal ons slegs toegang tot die params-eiendom in die lêer kry.

// _title / index.vue

{{$ Route.params.title}}

As ons nou op ‘View’ klik, word dit weer ‘n bladsy oopgemaak waar ons die titel wat ons deur die roete deurgemaak het, kan sien. Dit kan ontwikkel word om alles wat ons wil te doen wat dinamiese bladsye betref.

Dit is dit vir hierdie les!

Die volledige kode hiervoor kan hierin gevind word repository. U is welkom om tot die kode by te dra. As u belangstel om die raamwerk te bemeester, sal ek dit voorstel Udemy-kursus.

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