Створення першого додатка Nuxt – Книжковий магазин CRUD

Дізнайтеся, як створити додаток Nuxt.


CRUD – Створення, читання, оновлення, видалення

Я припускаю, що ви вже знаєте основи Vue JS та / або ви трохи знайомі з основою. Nuxt JS – це надійний каркас, побудований на Vue JS. Він по суті такий же, як Vue JS. Тоді чому, Nuxt?

Для більшості людей рішення про використання Nuxt JS зазвичай належить до його можливостей 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 у папці сторінок, який автоматично стає вашим кореневим маршрутом, тобто localhost: 3000 /.

Крім того, коли ви створюєте будь-який інший filename.vue, він стає маршрутом – створення about.vue дозволяє отримати доступ до localhost: 3000 / about.

Ви також можете створити папку в папці Pages. Якщо ви створили папку з назвою “contact” і всередині цієї папки у вас є email.vue, ви можете отримати доступ до localhost: 3000 / contact / email. Це так просто. Таким чином, вам не потрібно вручну створювати файл router.js, як зазвичай це робиться з Vue JS для створення маршрутів.

Компоненти

Це все ще майже так само, як і у Vue JS, створені компоненти не розглядаються автоматично як маршрути.

Статичний

Статична папка замінює загальнодоступну папку у звичайних додатках Vue JS, функціонує майже однаково. Файли тут не збираються; їх подають так само, як вони зберігаються.

Ви можете прочитати все про архітектуру та структуру на сайті Сторінка документації Nuxt JS.

Тепер давайте створимо щось цікаве …

Побудова програми для книгарні

Ми будемо будувати додаток для книгарні, де користувач може додавати прочитані книги до певної категорії, яка їм подобається. Це буде виглядати приблизно так.

Отже, у нас буде простий макет, як вище, всього 3 стовпчики, що містять різні розділи книг. Нещодавно читали книги, улюблені книги та так, найкращі з найкращих книг (зізнаюся, я не знала, як називати цей розділ, ��)

Тому метою є можливість додати назву, автора та опис книги до картки в будь-якому з розділів, відредагувати вже додані книги та видалити існуючу книгу. Ми не будемо використовувати жодну базу даних, тому все відбувається в державі.

Спочатку встановлюємо Nuxt:

npm встановити додаток create-nuxt-app

По-друге, після установки Nuxt тепер ви можете створити проект за допомогою команди,

create-nuxt-app bookStore

Я вирішу назвати свою програму “bookStore”; ви можете назвати своє щось крутіше ^ _ ^

Потім переглянемо підказки, що залишилися, введіть опис,

Ім’я автора, введіть ім’я або натисніть клавішу Enter, щоб зберегти значення за замовчуванням

Виберіть менеджера пакунків, що б вам не подобалося, і те, і інше

Виберіть рамку інтерфейсу користувача. Для цього проекту я буду використовувати Vuetify, тоді знову-таки будь-який інтерфейс користувача, який вам подобається, буде добре.

Виберіть користувацьку структуру сервера; нам не потрібно, я виберу жодного

Додаткові модулі, виберіть те, що ви хочете, або обидва, ми б не використовували їх для цього додатка.

Вагонка важлива. Походимо з ESLint.

Хоча тестування важливе, ми сьогодні цього не будемо розглядати, тому жодне

Режим візуалізації, так, це SSR.

Примітка. Вибір SSR не означає, що ми не отримуємо переваги SPA, додаток як і раніше залишається SPA, але з SSR. Інший варіант означає просто SPA та відсутність SSR.

Натисніть Enter і рухайтеся далі,

І наш проект творить,

Після створення ми тепер можемо зайти в каталог і запустити

пряжа дев

якщо ви використовуєте npm як менеджер пакунків, використовуйте,

npm run dev

За замовчуванням додаток працює на localhost: 3000. Перейдіть за посиланням у своєму браузері, і ви побачите сторінку Nuxt за замовчуванням.

Тепер почнемо зі створення потрібних нам компонентів. У нас з’являться картки, на яких відображатиметься кожна інформація про книгу, і у нас буде модаль, що містить форму для введення нової інформації про книгу або редагування існуючої.

Щоб створити компонент, просто створіть новий файл у папці компонентів. Ось код компонента моєї картки.

// BookCard.vue

{{bookTitle}}
{{bookAuthor}}
{{bookDescription}}

експорт за замовчуванням {
реквізит: ["bookTitle", "bookAuthor", "Опис книги"]
};

Швидке пояснення того, що робиться вище. Зображення є жорстким кодом; ми не будемо цим заважати. Назва книги, автор книги та опис книги передаються до цього компонента з батьківської сторінки як реквізити. Якщо ви не знайомі з реквізитом, уявіть, як точки входу через цей компонент можуть бути заповнені даними.

Тепер до наступного компонента – модальному.

//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 = новий Vue ()

Так, це все. Тепер ми можемо ним скористатися.

імпортувати {eventBus} з "@ / eventBus";
методи: {
openModal () {
eventBus. $ emit ("відкрити-додати-книга-модальний");
}
}

Далі ми повернемося до нашого компонента BookModal і послухаємо, коли eventBus видає “відкрити-додай-книгу-модаль”. Ми додамо це до розділу сценарію.

імпортувати {eventBus} з "@ / eventBus";

створено () {
eventBus. $ on ("відкрити-додати-книга-модальний", this.open = вірно);
},

Тепер ми можемо відкривати та закривати наш модал, але він ще не додає жодної книги. Додамо метод до нашого Модалу, щоб зберегти те, що додано у стан (пам’ятайте, що ми не використовуємо жодної бази даних чи локального сховища). Додаємо це поруч із “created ()”

методи: {
saveBook () {
нехай cardData = {
назва: this.title,
автор: this.author,
опис: this.description,
категорія: ця.категорія
};
eventBus. $ emit ("заощаджувальна книга", cardData);
this.open = хибно;
}
}

Далі нам потрібен спосіб повторного заповнення модалів, коли ми редагуємо дані з будь-якої з карток. Тож давайте внесемо деякі корективи у “created ()”

створено () {
eventBus. $ on ("відкрити-додати-книга-модальний", дані => {
if (дані) {
this.category = data.category;
this.title = data.title;
this.author = data.author;
this.description = data.description;
}
this.open = вірно;
});
},

Тепер BookModal виглядає приблизно так,

//BookModal.vue

Додати книги

Додайте

імпортувати {eventBus} з "@ / eventBus";
експорт за замовчуванням {
дані () {
повернути {
відкритий: хибний,
категорія: "",
назва: "",
автор: "",
опис: "",
категорії: ["Нещодавно прочитані книги", "Улюблені книги", "Кращі з кращих"]
};
},
створено () {
eventBus. $ on ("відкрити-додати-книга-модальний", дані => {
if (дані) {
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. $ emit ("заощаджувальна книга", cardData);
this.open = хибно;
}
}
};

Далі ми можемо повернутися на сторінку index.vue, щоб імпортувати компонент BookModal. Ми додамо це до розділу сценарію.

імпорт BookCard з "@ / компоненти / BookCard";
імпорт BookModal з "@ / компоненти / BookModal";
імпортувати {eventBus} з "@ / eventBus";

експорт за замовчуванням {
компоненти: {
BookCard,
BookModal
},
дані () {
повернути {
нещодавні книги: [],
Вибрані книги: [],
Кращі з кращих: []
};
},

Також в організм ми додамо,

Нам потрібні методи редагування та видалення картки. У шаблоні раніше я вже передав методи редагування та видалення кнопкам, як показано нижче, також передав аргументи, необхідні для кожного методу.

Редагувати Видалити

Давайте створимо методи.

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

Пам’ятайте, що BookModal випромінює, і подія під назвою зберегти книгу нам потрібен слухач для цієї події тут.

створено () {
eventBus. $ on ("заощаджувальна книга", 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";
імпортувати {eventBus} з "@ / eventBus";

експорт за замовчуванням {
компоненти: {
BookCard,
BookModal
},
дані () {
повернути {
нещодавні книги: [],
Вибрані книги: [],
Кращі з кращих: []
};
},
створено () {
eventBus. $ on ("заощаджувальна книга", 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) => б – а);
}
});
},
методи: {
видалити (категорія, індекс) {
if (категорія === "Нещодавно прочитані книги") {
this.recentBooks.splice (індекс, 1);
}
if (категорія === "Улюблені книги") {
this.favouriteBooks.splice (індекс, 1);
}
if (категорія === "Кращі з кращих") {
this.bestOfTheBest.splice (індекс, 1);
}
},
редагувати (елемент, покажчик) {
якщо (item.category === "Нещодавно прочитані книги") {
eventBus. $ emit ("відкрити-додати-книга-модальний", пункт);
this.recentBooks.splice (індекс, 1);
}
якщо (item.category === "Улюблені книги") {
eventBus. $ emit ("відкрити-додати-книга-модальний", пункт);
this.favouriteBooks.splice (індекс, 1);
}
якщо (item.category === "Кращі з кращих") {
eventBus. $ emit ("відкрити-додати-книга-модальний", пункт);
this.bestOfTheBest.splice (індекс, 1);
}
}
}
};

Якщо у вас так далеко, Велика робота !!! Ви чудові!

Як було сказано раніше, кожен файл .vue, створений у папці сторінок, автоматично надається у вигляді маршруту, як і для кожної папки, створеної в папці сторінок. Це не стосується лише статичних сторінок, і динамічні сторінки також можна створити таким чином!

Подивимося, як.

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

Давайте швидко додамо кнопку перегляду та скористаємося для відвідування сторінки. Так, замінює, і це працює.

Вид

Далі ми створюємо динамічну папку, префіксуючи ім’я підкресленням. тобто _title і всередині цієї папки у нас буде файл index.vue, який буде виданий під час відвідування цього маршруту.

Тільки для демонстрації ми матимемо доступ лише до властивостей params у файлі.

// _title / index.vue

{{$ route.params.title}}

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

Це все для цього уроку!

Повний код для цього можна знайти в цьому сховище. Ви можете внести свій внесок у код. Якщо ви зацікавлені в оволодінні рамкою, я б запропонував це Курс Удемі.

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