Научете как да създадете Nuxt приложение.

CRUD – Създаване, четене, актуализиране, изтриване

Предполагам, че вече знаете основите на Vue JS и / или сте малко запознати с рамката. Nuxt JS е здрава рамка, изградена на Vue JS. По същество е същото като Vue JS. Тогава защо, Nuxt?

За повечето хора решението да се използва Nuxt JS обикновено е за неговите SSR възможности.

Какво е SSR?

SSR е съкращение за сървър на странично изобразяване.

Обикновено за повечето приложения за единични страници (SPA) визуализираните файлове се инжектират автоматично в DOM, след като страницата се зареди. Следователно, ботове и SEO сканери ще намерят празна страница при зареждане на страницата. Въпреки това, за SSR, поради способността си да изобразява предварително приложения на сървъра преди страница, тази страница може лесно да се индексира от SEO сканери. Освен това, това може да направи приложението дори по-ефективно в сравнение с обикновен SPA.

Nuxt JS дава възможност на разработчиците да създават SSR приложения с лекота. Редовните Vue JS SPA приложения също могат да бъдат конфигурирани да използват SSR, но процесът е малко тромав и Nuxt JS осигурява обвивка, за да се справи с цялата тази конфигурация. Освен SSR, Nuxt също така осигурява лесен начин да настроите вашия проект VueJS с по-голяма ефективност.

Въпреки че Nuxt JS все още е Vue JS, той има някои основни различия в структурата на архитектурата на папките му.

Фокусът на тази статия е да можете да го направите изградете приложение с Nuxt; следователно, няма да се гмурнем дълбоко в архитектурата на папките на Nuxt, но бързо ще обясня някои от важните, които може да се наложи тук.

Страници

Папката със страници е една от основните разлики от обикновените Vue SPA. Той представлява папката Views в обикновената архитектура Vue, mores o, в Nuxt, файловете, създадени в папката Pages, автоматично се предоставят като маршрут. Значение, когато създадете файл index.vue в папката със страници, който автоматично се превръща в вашият root маршрут, т.е. localhost: 3000 /.

Също така, когато създадете друго файлово име.vue, това се превръща в маршрут – създаването на about.vue ви позволява да получите достъп до localhost: 3000 / about.

Можете също да създадете папка в папката Страници. Ако създадете папка с име „контакт“ и в тази папка имате email.vue, тогава можете да получите достъп до localhost: 3000 / contact / имейл. Това е толкова просто. По този начин не е необходимо да създавате ръчно файл router.js, както обикновено правите с Vue JS, за да създадете маршрутите си.

елементи

Все още е почти същото като при Vue JS, създадените компоненти не се предлагат автоматично като маршрути.

статичен

Статичната папка заменя публичната папка в обикновените приложения Vue JS, функционира почти еднакво. Файловете тук не се компилират; те се сервират по същия начин, по който се съхраняват.

Можете да прочетете всичко за архитектурата и структурата в Страница с документация Nuxt JS.

Сега, нека изградим нещо интересно …

Изграждане на приложение за магазин за книги

Ще изградим приложение за магазин за книги, където потребителят може да добави книги, които е чел, в определена категория, която харесва. Ще изглежда така.

Така че ще имаме просто оформление, както по-горе, само 3 колони, съдържащи различните секции от книги. Наскоро прочетени книги, любими книги и да, най-добрите от най-добрите книги (признавам си, не знаех как да нарека този раздел, ��)

Така че целта тук е да можете да добавите заглавие, автор и описание на книга към някоя от секциите, да редактирате вече добавени книги и да премахнете съществуваща книга. Няма да използваме никаква база данни, така че всичко се случва в държавата.

Първо инсталираме Nuxt:

npm инсталирайте create-nuxt-app

Второ, след като инсталирате Nuxt, вече можете да създадете проекта с командата,

create-nuxt-app bookStore

Решавам да назовам приложението си „bookStore“; можете да назовете вашето нещо по-готино ^ _ ^

След това нека преминем през останалите подкани, въведете описание,

Име на автора, въведете име или натиснете Enter, за да запазите по подразбиране

Изберете мениджър на пакети, който и да ви е удобен, и двете са добре

Изберете рамка на потребителския интерфейс. За този проект ще използвам Vuetify, след което отново всяка UI рамка, която ви е удобна, ще се справи добре.

Изберете персонализирана сървърна рамка; не ни трябват, ще избера нито едно

Допълнителни модули, изберете какво искате или изберете и двете, не бихме ги използвали за това приложение.

Обшивката е важна. Да вървим с ESLint.

Макар че тестването е важно, днес няма да разглеждаме това, така че нито едно

Режим на изобразяване, да, SSR е.

Забележка: Изборът на SSR не означава, че нямаме полза от СПА, приложението все още остава SPA, но със SSR. Другият вариант означава просто SPA и без SSR.

Натиснете Enter и продължете напред,

И проектът ни създава,

След създаването вече можем да влезем в директорията и да стартираме

прежда dev

ако използвате npm като мениджър на пакети, използвайте,

npm run dev

По подразбиране приложението работи на localhost: 3000. Посетете връзката във вашия браузър и трябва да видите страница по подразбиране Nuxt.

Сега да започнем със създаването на необходими компоненти. Ще имаме карти, показващи всяка информация за книги, и ще разполагаме с модал, съдържащ форма за въвеждане на нова информация за книги или за редактиране на съществуваща.

За да създадете компонент, просто създайте нов файл в папката с компоненти. Ето кода за компонента на моята карта.

// BookCard.vue

{{заглавие на книга}}
{{BookAuthor}}
{{BookDescription}}

експортиране по подразбиране {
подпори: ["заглавие на книга", "bookAuthor", "bookDescription"]
};

Бързо обяснение на това, което се прави по-горе. Изображението е твърдо кодирано; засега няма да се занимаваме с това. Заглавието на книгата, авторът на книгата и описанието на книгата се прехвърлят към този компонент от родителската страница като реквизит. Ако не сте запознати с реквизитите, представете си, че входните точки чрез този компонент могат да бъдат напълнени с данни.

Сега към следващия компонент – модалният.

//BookModal.vue

Добавете книги

Добави

Това е маркировката за модала; трябва да създадем v-моделите като свойства на данните; следователно, ние ще добавим скрипт маркер под маркера.

експортиране по подразбиране {
данни() {
връщане {
категория: "",
заглавие: "",
автор: "",
описание: "",
};
},
}

Освен това има падащо меню „Избор на категория“, което очаква данни за „категории“. Ще добавим това към данните.

експортиране по подразбиране {
данни() {
връщане {
отворен: невярно,
категория: "",
заглавие: "",
автор: "",
описание: "",
категории: ["Наскоро прочетени книги", "Любими книги", "Най-доброто от най-доброто"]
};
},
}

Сега се нуждаем от начин да включим нашия модал отворен и затворен, засега просто ще имаме собственост на „отворени“ данни, както по-горе. Ще разгледаме внимателно това следващо.

Да създадем бързо нашата страница с изглед, където ще имаме три решетки / колони, по една за всеки раздел от книгата. Нека да се обадим на страницата index.vue, вижте кода по-долу.

//index.vue

Наскоро прочетени книги

Любими книги

Най-доброто от най-доброто

Сега, когато имаме нашите решетки, трябва да добавим нашия компонент на карта към всяка решетка, за всяка добавена книга. Затова ще импортираме нашия компонент BookCard.vue.

Наскоро прочетени книги

редактиране
Премахване

Любими книги

редактиране
Премахване

Най-доброто от най-доброто

редактиране
Премахване

Сега ние импортирахме компонента BookCard и свързахме неговите реквизити към резултатите от цикъла; това гарантира, че за всеки запис, добавен към който и да е от секциите, има карта, създадена за него. Също така, на всяка карта ще включим бутони за редактиране или премахване на карта.

Сега трябва да импортираме картата от скрипта и да определим масивите, които ще съхраняват записи за всяка от категориите.

импортирайте BookCard от "@ / Компоненти / BookCard";

експортиране по подразбиране {
компоненти: {
BookCard,
},
данни() {
връщане {
скорошни книги: [],
Избрани книги: [],
Най-доброто от най-доброто: []
};
},
};

След това трябва да имаме бутон в заглавката, който ще отваря модала всеки път, когато трябва да добавим книги. Ще направим това във файла „default.vue“. Ще добавим бутона към заглавката на лентата на приложението по подразбиране.

Добавете книги

След това трябва да създадем метода openModal в секцията за скриптове. В обикновените приложения на Vue JS има шина за събития, която ви позволява да комуникирате с друг компонент и дори да предавате данни в, в Nuxt JS, все още има автобус за събития и все още можете да го създадете по същия начин. Така че ще използваме шина на събитията, за да предадем данни, отворени модално в страницата index.vue (която тепърва ще импортираме) от файла layout / default.vue.

Нека да видим как се прави.

За да създадете глобална шина за събития, отворете файл в главната директория на проекта, назовете го eventBus.js и поставете кода по-долу в него.

импортиране Vue от ‘vue’

export const eventBus = new Vue ()

Да, всичко това. Сега можем да го използваме.

import {eventBus} от "@ / EventBus";
методи: {
openModal () {
eventBus. $ емитират ("отворен добавка книга-модален");
}
}

След това ще се върнем към нашия компонент BookModal и ще слушаме, когато eventBus излъчва „отворена добавка-книга-модал“. Ще добавим това към секцията за скриптове.

import {eventBus} от "@ / EventBus";

създаден () {
eventBus. $ на ("отворен добавка книга-модален", this.open = вярно);
},

Сега можем да отворим и затворим нашия модал, но все още не добавя книги. Нека добавим метод към нашия Modal, за да го запазим добавеното в държавата (не забравяйте, че не използваме база данни или локално съхранение). Добавяме това до „created ()“

методи: {
saveBook () {
нека cardData = {
заглавие: this.title,
автор: this.author,
описание: this.description,
категория: тази.категория
};
eventBus. $ емитират ("спасяване книга", cardData);
this.open = невярно;
}
}

След това се нуждаем от начин за повторно попълване на модала, когато редактираме данни от някоя от картите. Затова нека направим някои корекции на „created ()“

създаден () {
eventBus. $ на ("отворен добавка книга-модален", данни => {
ако (данни) {
this.category = data.category;
this.title = data.title;
this.author = data.author;
this.description = data.description;
}
this.open = вярно;
});
},

Сега BookModal изглежда така като цяло,

//BookModal.vue

Добавете книги

Добави

import {eventBus} от "@ / EventBus";
експортиране по подразбиране {
данни() {
връщане {
отворен: невярно,
категория: "",
заглавие: "",
автор: "",
описание: "",
категории: ["Наскоро прочетени книги", "Любими книги", "Най-доброто от най-доброто"]
};
},
създаден () {
eventBus. $ на ("отворен добавка книга-модален", данни => {
ако (данни) {
this.category = data.category;
this.title = data.title;
this.author = data.author;
this.description = data.description;
}
this.open = вярно;
});
},
методи: {
saveBook () {
нека cardData = {
заглавие: this.title,
автор: this.author,
описание: this.description,
категория: тази.категория
};
eventBus. $ емитират ("спасяване книга", cardData);
this.open = невярно;
}
}
};

След това вече можем да се върнем към страницата index.vue, за да импортираме компонента BookModal. Ще добавим това към секцията за скриптове.

импортирайте BookCard от "@ / Компоненти / BookCard";
импортирайте BookModal от "@ / Компоненти / BookModal";
import {eventBus} от "@ / EventBus";

експортиране по подразбиране {
компоненти: {
BookCard,
BookModal
},
данни() {
връщане {
скорошни книги: [],
Избрани книги: [],
Най-доброто от най-доброто: []
};
},

Също така в тялото, ще добавим,

Нуждаем се от методи за редактиране и премахване на карта. В шаблона по-рано вече предадох методите за редактиране и премахване на бутоните, както е показано по-долу, също така предадох аргументите, необходими за всеки метод.

Редактиране Премахване

Нека създадем методите.

методи: {
премахване (категория, индекс) {
ако (категория === "Наскоро прочетени книги") {
this.recentBooks.splice (индекс, 1);
}
ако (категория === "Любими книги") {
this.favouriteBooks.splice (индекс, 1);
}
ако (категория === "Най-доброто от най-доброто") {
this.bestOfTheBest.splice (индекс, 1);
}
},
редактиране (елемент, индекс) {
ако (item.category === "Наскоро прочетени книги") {
eventBus. $ емитират ("отворен добавка книга-модален", вещ);
this.recentBooks.splice (индекс, 1);
}
ако (item.category === "Любими книги") {
eventBus. $ емитират ("отворен добавка книга-модален", вещ);
this.favouriteBooks.splice (индекс, 1);
}
ако (item.category === "Най-доброто от най-доброто") {
eventBus. $ емитират ("отворен добавка книга-модален", вещ);
this.bestOfTheBest.splice (индекс, 1);
}
}
}

Не забравяйте, че BookModal излъчва и за събитие, наречено save-book, имаме нужда от слушател за това събитие тук.

създаден () {
eventBus. $ на ("спасяване книга", cardData => {
ако (cardData.category === "Наскоро прочетени книги") {
this.recentBooks.push (cardData);
}
ако (cardData.category === "Любими книги") {
this.favouriteBooks.push (cardData);
}
ако (cardData.category === "Най-доброто от най-доброто") {
this.bestOfTheBest.push (cardData);
}
});
},

Сега, с един цялостен поглед, нашата страница index.vue изглежда така

Наскоро прочетени книги

изглед

редактиране
Премахване

Любими книги

редактиране
Премахване

Най-доброто от най-доброто

редактиране
Премахване

импортирайте BookCard от "@ / Компоненти / BookCard";
импортирайте BookModal от "@ / Компоненти / BookModal";
import {eventBus} от "@ / EventBus";

експортиране по подразбиране {
компоненти: {
BookCard,
BookModal
},
данни() {
връщане {
скорошни книги: [],
Избрани книги: [],
Най-доброто от най-доброто: []
};
},
създаден () {
eventBus. $ на ("спасяване книга", cardData => {
ако (cardData.category === "Наскоро прочетени книги") {
this.recentBooks.push (cardData);
this.recentBooks.sort ((a, b) => б – а);
}
ако (cardData.category === "Любими книги") {
this.favouriteBooks.push (cardData);
this.favouriteBooks.sort ((a, b) => б – а);
}
ако (cardData.category === "Най-доброто от най-доброто") {
this.bestOfTheBest.push (cardData);
this.bestOfTheBest.sort ((a, b) => б – а);
}
});
},
методи: {
премахване (категория, индекс) {
ако (категория === "Наскоро прочетени книги") {
this.recentBooks.splice (индекс, 1);
}
ако (категория === "Любими книги") {
this.favouriteBooks.splice (индекс, 1);
}
ако (категория === "Най-доброто от най-доброто") {
this.bestOfTheBest.splice (индекс, 1);
}
},
редактиране (елемент, индекс) {
ако (item.category === "Наскоро прочетени книги") {
eventBus. $ емитират ("отворен добавка книга-модален", вещ);
this.recentBooks.splice (индекс, 1);
}
ако (item.category === "Любими книги") {
eventBus. $ емитират ("отворен добавка книга-модален", вещ);
this.favouriteBooks.splice (индекс, 1);
}
ако (item.category === "Най-доброто от най-доброто") {
eventBus. $ емитират ("отворен добавка книга-модален", вещ);
this.bestOfTheBest.splice (индекс, 1);
}
}
}
};

Ако сте стигнали дотук, страхотна работа !!! Ти си страхотен!

Както беше споменато по-рано, всеки .vue файл, създаден в папката със страници, автоматично се предоставя като маршрут, също така за всяка папка, създадена в папката със страници. Това не се отнася само за статични страници и динамичните страници могат да бъдат създадени и по този начин!

Нека да видим как.

Използвайки настоящия ни проект, нека кажем, че искаме да добавим динамична страница за всички книжни карти с бутон за преглед, за да видите повече подробности за книга.

Нека бързо добавим бутон за изглед и използваме a, за да посетите страницата. Да, заменя и работи.

изглед

След това създаваме динамична папка, като префиксираме името с подчертаване. т.е. _title и вътре в тази папка ще имаме файл index.vue, който се визуализира, когато посетим този маршрут.

Само за демонстрация ще имаме достъп само до свойствата params във файла.

// _title / index.vue

{{$ Route.params.title}}

Сега, когато щракнете върху изглед, той отваря друга страница, където можем да видим заглавието, което сме минали през маршрута. Това може да бъде разработено, за да правим всичко, което искаме, що се отнася до динамичните страници.

Това е това за този урок!

Пълният код за това можете да намерите в това хранилище. Заповядайте да допринесете за кода. Ако се интересувате от овладяване на рамката, тогава бих предложил това Удеми курс.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me