Узнайте, как создать приложение Nuxt.


CRUD – создание, чтение, обновление, удаление

Я предполагаю, что вы уже знаете основы Vue JS и / или вы немного знакомы с фреймворком. Nuxt JS – это надежный фреймворк, построенный на Vue JS. По сути, это то же самое, что Vue JS. Тогда почему, Nuxt?

Для большинства людей решение использовать Nuxt JS обычно из-за его возможностей SSR.

Что такое ССР?

SSR – это сокращение для рендеринга на стороне сервера..

Обычно для большинства одностраничных приложений (SPA) визуализированные файлы автоматически внедряются в DOM после загрузки страницы. Следовательно, боты, поисковые роботы найдут пустую страницу при загрузке страницы. Тем не менее, для SSR, из-за его способности предварительно визуализировать приложения на сервере перед страницей, эта страница может быть легко проиндексирована поисковыми роботами. Кроме того, это делает приложение еще более эффективным, чем обычный SPA.

Nuxt JS дает разработчикам возможность создавать приложения SSR с легкостью. Обычные приложения Vue JS SPA также можно настроить на использование SSR, но этот процесс несколько обременителен, и Nuxt JS предоставляет оболочку для обработки всей этой конфигурации. Помимо SSR, Nuxt также предоставляет простой способ настроить ваш проект VueJS с большей эффективностью.

Хотя Nuxt JS по-прежнему Vue JS, он имеет некоторые принципиальные различия в том, как структурирована его архитектура папок..

В центре внимания этой статьи для вас, чтобы иметь возможность создать приложение с Nuxt; следовательно, мы не собираемся углубляться в архитектуру папок Nuxt, однако я быстро объясню некоторые из важных, которые могут нам понадобиться здесь.

страницы

Папка pages является одним из фундаментальных отличий от обычного Vue SPA. Он представляет папку Views в обычной архитектуре Vue, более того, в Nuxt файлы, созданные в папке Pages, автоматически предоставляются в качестве маршрута. Это означает, что когда вы создаете файл index.vue в папке страниц, он автоматически становится вашим корневым маршрутом, то есть localhost: 3000 /.

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

Вы также можете создать папку в папке Страницы. Если вы создаете папку с именем «contact» и в этой папке у вас есть email.vue, вы можете получить доступ к localhost: 3000 / contact / email. Это так просто. Таким образом, вам не нужно вручную создавать файл router.js, как вы это обычно делаете с Vue JS для создания ваших маршрутов..

Компоненты

Он по-прежнему почти такой же, как и в Vue JS, созданные компоненты не предоставляются автоматически как маршруты..

статический

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

Вы можете прочитать все об архитектуре и структуре на Страница документации Nuxt JS.

Теперь давайте построим что-нибудь интересное …

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

Мы будем создавать приложение для книжного магазина, в котором пользователь сможет добавлять прочитанные им книги в определенную категорию, которая ему нравится. Это будет выглядеть так.

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

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

Сначала мы устанавливаем Nuxt:

npm install create-nuxt-app

Во-вторых, после установки Nuxt вы можете создать проект командой,

создать-nuxt-приложение книжный магазин

Я решил назвать свое приложение «книжный магазин»; Вы можете назвать что-то круче ^ _ ^

Затем давайте пройдемся по оставшимся подсказкам, введите описание,

Имя автора, введите имя или нажмите ввод, чтобы сохранить значения по умолчанию

Выберите менеджер пакетов, в зависимости от того, что вам удобно, оба в порядке

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

Выберите пользовательский серверный фреймворк; нам ничего не нужно, я не выберу ни одного

Дополнительные модули, выберите то, что вы хотите, или выберите оба, мы не будем использовать их для этого приложения.

Линтинг важен. Пойдем с ESLint.

Хотя тестирование важно, мы не будем смотреть на это сегодня, поэтому никто

Режим рендеринга, да SSR это.

Примечание: выбор SSR не означает, что мы не получаем преимущества от SPA, приложение по-прежнему остается SPA, но с SSR. Другой вариант означает просто SPA и не SSR.

Хит войти и двигаться дальше,

И наш проект создает,

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

пряжа

если вы используете npm в качестве менеджера пакетов, используйте,

Npm Run Dev

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

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

Чтобы создать компонент, просто создайте новый файл в папке компонентов. Вот код для компонента моей карты.

// BookCard.vue

{{Заголовок книги}}
{{}} BookAuthor
{{}} BookDescription

экспорт по умолчанию {
реквизит: ["Заголовок книги", "bookAuthor", "bookDescription"]
};

Краткое объяснение того, что сделано выше. Изображение жестко закодировано; мы не будем беспокоиться об этом сейчас. Название книги, автор книги и описание книги передаются в этот компонент с родительской страницы как реквизиты. Если вы не знакомы с реквизитом, представьте его как точки входа, через которые этот компонент может быть заполнен данными.

Теперь к следующему компоненту, модальному.

//BookModal.vue

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

Добавить

Теперь это разметка для модального; нам нужно создать v-модели как свойства данных; поэтому мы добавим тег script ниже тега.

экспорт по умолчанию {
данные() {
возвращение {
категория: "",
заглавие: "",
автор: "",
описание: "",
};
},
}

Кроме того, есть раскрывающийся список «Выберите категорию», который ожидает данные «категорий». Мы добавим это к данным.

экспорт по умолчанию {
данные() {
возвращение {
открыть: ложь,
категория: "",
заглавие: "",
автор: "",
описание: "",
категории: ["Недавно прочитанные книги", "Любимые книги", "Лучший из лучших"]
};
},
}

Теперь нам нужен способ переключать наш модальный режим открытия и закрытия, а сейчас у нас просто будет свойство данных open, как указано выше. Мы будем внимательно смотреть на это следующее.

Давайте быстро создадим нашу страницу просмотра, где у нас будет три сетки / столбца, по одному для каждого раздела книги. Давайте назовем страницу index.vue, посмотрите код ниже.

//index.vue

Недавно прочитанные книги

Любимые книги

Лучший из лучших

Теперь, когда у нас есть сетки, нам нужно добавить наш компонент карты в каждую сетку для каждой добавленной книги. Поэтому мы импортируем наш компонент BookCard.vue.

Недавно прочитанные книги

редактировать
Удалить

Любимые книги

редактировать
Удалить

Лучший из лучших

редактировать
Удалить

Теперь мы импортировали компонент BookCard и привязали его реквизиты к результатам цикла; это гарантирует, что для каждой записи, добавленной в любой из разделов, для нее будет создана карта. Также на каждой карточке мы будем включать кнопки для редактирования или удаления карточки.

Теперь нам нужно импортировать карту из скрипта и определить массивы, в которых будут храниться записи для каждой из категорий..

импортировать BookCard из "@ / Компоненты / BookCard";

экспорт по умолчанию {
компоненты: {
BookCard,
},
данные() {
возвращение {
последние книги: [],
favouriteBooks: [],
лучший из лучших: []
};
},
};

Далее нам нужна кнопка в заголовке, которая будет открывать модальное окно всякий раз, когда нам нужно добавить книги. Мы сделаем это в файле «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. $ Emit ("открытая надстройку книга покадрово");
}
}

Далее мы вернемся к нашему компоненту BookModal и послушаем, когда eventBus издает «open-add-book-modal». Мы добавим это в раздел скриптов.

import {eventBus} из "@ / EventBus";

создал () {
eventBus. $ на ("открытая надстройку книга покадрово", this.open = true);
},

Теперь мы можем открывать и закрывать наш модал, но он пока не добавляет никаких книг. Давайте добавим метод в наш модал, чтобы он сохранил то, что добавлено в состояние (помните, что мы не используем какую-либо базу данных или локальное хранилище). Мы добавляем это рядом с ‘созданным ()’

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

Далее нам нужен способ перезаполнения модального режима при редактировании данных с любой из карт. Итак, давайте внесем некоторые коррективы в «create ()»

создал () {
eventBus. $ на ("открытая надстройку книга покадрово", данные => {
if (data) {
this.category = data.category;
this.title = data.title;
this.author = data.author;
this.description = data.description;
}
this.open = true;
});
},

Теперь BookModal выглядит так в целом,

//BookModal.vue

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

Добавить

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

Теперь мы можем вернуться на страницу index.vue, чтобы импортировать компонент BookModal. Мы добавим это в раздел скриптов.

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

экспорт по умолчанию {
компоненты: {
BookCard,
BookModal
},
данные() {
возвращение {
последние книги: [],
favouriteBooks: [],
лучший из лучших: []
};
},

Также в теле добавим,

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

Редактировать Удалить

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

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

Помните, BookModal излучает, и событие называется save-book, нам нужен слушатель для этого события здесь.

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

Теперь, в целом, наша страница index.vue выглядит следующим образом

Недавно прочитанные книги

Посмотреть

редактировать
Удалить

Любимые книги

редактировать
Удалить

Лучший из лучших

редактировать
Удалить

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

экспорт по умолчанию {
компоненты: {
BookCard,
BookModal
},
данные() {
возвращение {
последние книги: [],
favouriteBooks: [],
лучший из лучших: []
};
},
создал () {
eventBus. $ на ("копи-книга", cardData => {
if (cardData.category === "Недавно прочитанные книги") {
this.recentBooks.push (cardData);
this.recentBooks.sort ((a, b) => б – а);
}
if (cardData.category === "Любимые книги") {
this.favouriteBooks.push (cardData);
this.favouriteBooks.sort ((a, b) => б – а);
}
if (cardData.category === "Лучший из лучших") {
this.bestOfTheBest.push (cardData);
this.bestOfTheBest.sort ((a, b) => б – а);
}
});
},
методы: {
удалить (категория, индекс) {
если (категория === "Недавно прочитанные книги") {
this.recentBooks.splice (index, 1);
}
если (категория === "Любимые книги") {
this.favouriteBooks.splice (index, 1);
}
если (категория === "Лучший из лучших") {
this.bestOfTheBest.splice (index, 1);
}
},
редактировать (элемент, индекс) {
if (item.category === "Недавно прочитанные книги") {
eventBus. $ Emit ("открытая надстройку книга покадрово", вещь);
this.recentBooks.splice (index, 1);
}
if (item.category === "Любимые книги") {
eventBus. $ Emit ("открытая надстройку книга покадрово", вещь);
this.favouriteBooks.splice (index, 1);
}
if (item.category === "Лучший из лучших") {
eventBus. $ Emit ("открытая надстройку книга покадрово", вещь);
this.bestOfTheBest.splice (index, 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