Фреймворк Nuxt.js. Руководство по Full-Stack разработке

Из каких уроков состоит курс

Блок 1. Введение

Урок 1. О чем этот курс

Урок 2. Что потребуется

Хронометраж: 2 минуты 4 секунды

Блок 2. Nuxt.js. Теория

Урок 1. Что такое Nuxt.js

Урок 2. Обзор приложения

Урок 3. Создание разметки приложения

Урок 4. Статические роуты

Урок 5. Динамические роуты и валидация

Урок 6. Ссылки и обработка ошибок

Урок 7. Как работают Layouts

Урок 8. Что такое модули

Урок 9. Async Data

Урок 10. Async Data на практике

Урок 11. Работа с Vuex

Урок 12. Метод Fetch

Урок 13. Middleware и защита роутов

Урок 14. NuxtServerInit

Хронометраж: 1 час 37 минут 47 секунд

Блок 3. Front-End. Создание блога

Урок 1. Создание проекта

Урок 2. Настройка проекта

Урок 3. Создание Layout

Урок 4. Главная страница

Урок 5. Компонент пост

Урок 6. Страница детального отображения

Урок 7. Обработка ошибки роутов

Урок 8. Список комментариев

Урок 9. Форма добавления комментариев

Урок 10. Валидация и логика для добавления комментария

Урок 11. Анимация при изменении страниц

Хронометраж: 2 часа 48 минут 14 секунд

Блок 4. Front-End. Панель администратора

Урок 1. Создание структуры страниц

Урок 2. Меню навигации

Урок 3. Страница логина

Урок 4. Создание авторизации с Vuex

Урок 5. Защита роутов с Middleware

Урок 6. Завершение сессии

Урок 7. Обработка ошибок

Урок 8. Добавление пользователей

Урок 9. Список постов. Часть 1

Урок 10. Список постов. Часть 2

Урок 11. Редактирование поста

Урок 12. Создание поста

Урок 13. Предпросмотр текста в MD и HTML

Урок 14. Загрузка файла

Хронометраж: 2 часа 40 минут 23 секунды

Блок 5. Back-End

Урок 1. Декомпозиция файлов

Урок 2. Создание объекта конфигурации

Урок 3. Подключение MongoDB

Урок 4. Роуты, контроллеры, модели

Урок 5. Авторизация пользователя

Урок 6. Создание пользователя

Урок 7. Настройка Passport

Урок 8. Функционал постов

Урок 9. Роуты постов

Урок 10. Загрузка картинки

Урок 11. Контроллер постов

Урок 12. Функционал комментариев

Урок 13. Исправление ошибки

Хронометраж: 2 часа 50 минут 31 секунда

Блок 6. Интеграция

Урок 1. Создание пользователя

Урок 2. Логин и обработка ошибок

Урок 3. Обработка 401 ошибки

Урок 4. Добавление токена к запросам

Урок 5. Поддержание сессии с токеном

Урок 6. Создание поста

Урок 7. Загрузка, редактирование и удаление постов

Урок 8. Вывод постов в блоге

Урок 9. Добавление комментариев

Хронометраж: 1 час 33 минуты 52 секунды

Блок 7. Аналитика и графики

Урок 1. Настройка и установка графиков

Урок 2. Формирование данных на сервере

Урок 3. Создание компонента графика

Хронометраж: 48 минут 5 секунд

Блок 8. Последние штрихи

Урок 1. Исправление Warning в консоли

Урок 2. Фильтр отображения даты

Урок 3. Название страниц

Урок 4. Создание PWA из приложения

Хронометраж: 23 минуты 20 секунд

Блок 9. Деплой приложения

Урок 1. Защита ключей

Урок 2. Настройка и установка Heroku

Урок 3. Настройка приложения

Урок 4. Деплой приложения

Хронометраж: 20 минут 48 секунд

ПОДРОБНОЕ СОДЕРЖАНИЕ КУРСА

(наведите курсор мыши на урок, чтобы смотреть детально)

Блок 1. Введение

Количество уроков: 2
Продолжительность: 0:02:54

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

Урок 1. О чем этот курс

Урок 1. Введение

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

Урок 2. Что потребуется

В ролике вы узнаете про те инструменты, которые потребуются для наиболее эффективного и комфортного прохождения курса.

Блок 2. Nuxt.js. Теория

Количество уроков: 14
Продолжительность: 1:37:47

Данный блок посвящен теории фреймворка Nuxt.js. В нем вы познакомитесь с Nuxt.js и узнаете про то, что такое Server Side Rendering с JavaScript-фреймворками.

В блоке вы узнаете про все основные возможности в Nuxt.js, которые расширяют Vue.js новым, более удобным функционалом.

Урок 1. Что такое Nuxt.js

SSR (Server Side Rendering) - основная «фишка» Nuxt.js, про которую вы узнаете в этом видео.

Урок 2. Обзор приложения

С помощью инструмента Create-nuxt-app вы увидите генерацию нового проекта, где далее будет разобраны все файлы и папки, за что они отвечают.

Урок 3. Создание разметки приложения

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

Урок 4. Статические роуты

В ролике вы увидите, как создаются статические роуты.

Урок 5. Динамические роуты и валидация

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

Урок 6. Ссылки и обработка ошибок

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

Урок 7. Как работают Layouts

В ролике вы увидите, как добавлять новый Layout и использовать его на любой странице

Урок 8. Что такое модули

Модули – это дополняющие функционалом сущности в Nuxt.js. На примере модуля Axios вы увидите, как они работают.

Урок 9. Async Data

Технология SSR усложняет разработку, так как необходимо рендерить контент и на сервере, и на клиенте. Метод AsyncData, возвращающий Promise позволяет крайне удобно загружать контент на сервере.

Урок 10. Async Data на практике

Вы увидите, как сделать реальный запрос к серверу и вывести реальные данные.

Урок 11. Работа с Vuex

Nuxt.js по умолчанию включает в себя модуль Vuex и работает с ним особым образом, который и показан в ролике.

Урок 12. Метод Fetch

Помимо методов AsyncData есть метод Fetch, с помощью которого на серверной стороне можно заполнять стейт еще до загрузки клиента.

Урок 13. Middleware и защита роутов

Вы увидите, как с помощью Middleware реализовывать защиту роутов, например от неавторизованных пользователей.

Урок 14. NuxtServerInit

Nuxt добавляет удобный функционал в Vuex: новый Action, который вызывается один раз и только на сервере, который позволяет инициализировать приложение.

Блок 3. Front-End. Создание блога

Количество уроков: 11
Продолжительность: 2:48:14

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

В блоке будет создана только основная часть блога, без панели администратора и с использованием UI-фреймворка Element-UI.

Урок 1. Создание проекта

Вы увидите, как создается проект.

Урок 2. Настройка проекта

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

Урок 3. Создание Layout

В этом видео показано как создавать и настраивать общую структуру страницы.

Урок 4. Главная страница

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

Урок 5. Компонент пост

В этом видео показано как создается компонент отдельного поста.

Урок 6. Страница детального отображения

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

Урок 7. Обработка ошибки роутов

В Nuxt есть возможность валидации страницы перед тем, как на нее зайти, что и будет реализовано в данном уроке.

Урок 8. Список комментариев

Вы увидите, как формируются компоненты комментария и выводится список, состоящий из тестовых данных.

Урок 9. Форма добавления комментариев

В уроке будет реализована форма, с помощью которой будут добавляться комментарии.

Урок 10. Валидация и логика для добавления комментария

Вы увидите, как настроить валидацию для формы с помощью Element-UI.

Урок 11. Анимация при изменении страниц

В видео показано, как добавлять анимацию на переход роутов.

Блок 4. Front-End. Панель администратора

Количество уроков: 14
Продолжительность: 2:40:23

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

В блоке будут реализованы такие элементы, как: загрузка картинок, валидация форм, защита роутов и создание контента постов в формате HTML и MD.

Урок 1. Создание структуры страниц

Вы увидите, как задать Layout для админки, который существенно отличается от основной разметки блога.

Урок 2. Меню навигации

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

Урок 3. Страница логина

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

Урок 4. Создание авторизации с Vuex

Вся авторизация в приложении будет работать через Vuex и в этом видео будет создана база, для последующей интеграции.

Урок 5. Завершение сессии

В уроке будет создан Middleware, который будет защищать страницы админки от неавторизованных пользователей.

Урок 6. Страница детального отображения

Для того чтобы завершить сессию в уроке будет создана страница, выполняющая данную логику.

Урок 7. Обработка ошибок

Вы увидите, как создать общую шину для обработки всех ошибок приложения через Vuex и последующий вывод ошибок в UI через плагины Element-UI.

Урок 8. Добавление пользователей

В этом видео будет создана страница, которая позволит добавлять пользователей для панели администратора.

Урок 9. Список постов. Часть 1

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

Урок 10. Список постов. Часть 2

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

Урок 11. Редактирование поста

В ролике будет реализована форма, с помощью которой можно будет редактировать уже существующий пост.

Урок 12. Создание поста

Вы увидите, как создать страницу, которая в дальнейшем позволит создавать новые посты, включая полную валидацию.

Урок 13. Предпросмотр текста в MD и HTML

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

Урок 14. Загрузка файла

Вы увидите, как подключить и настроить компонент загрузки файлов из Element-UI.

Блок 5. Back-End

Количество уроков: 13
Продолжительность: 2:50:31

В этом блоке будет показана реализация серверной части для приложения.

Вы увидите, как создается масштабируемая, гибкая архитектура бекенда для будущего блога.

Будут разобраны такие элементы, как: работа с базами данных, защита ключей, разделенные роуты от публичного API и закрытого API, авторизация через JWT-токен, загрузка файлов и многое другое.

Урок 1. Декомпозиция файлов

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

Урок 2. Создание объекта конфигурации

Любое приложение требует конфигурации и в этом видео вы увидите, как создается такой объект для Node.js и как подключать разный тип конфига в зависимости от типа сборки: продакш или девелопмент.

Урок 3. Подключение MongoDB

В уроке вы увидите, как подключить и настроить MongoDB к приложению.

Урок 4. Роуты, контроллеры, модели

В ролике будет созданы основные сущности приложения и структура папок, где они хранятся.

Урок 5. Авторизация пользователя

Вы увидите, как создать логику для логина пользователя в систему с помощью JWT Token.

Урок 6. Создание пользователя

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

Урок 7. Настройка Passport

Вы увидите, как подключить и настроить библиотеку Passport.js и ее стратегию по работе с JWT Token.

Урок 8. Функционал постов

Начиная с данного ролика, вы увидите, как создаются все эндпоинты для создания, редактирования, удаления постов.

Урок 9. Роуты постов

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

Урок 10. Загрузка картинки

В ролике будет создан Middleware позволяющий Express обрабатывать загрузку картинок на сервер.

Урок 11. Контроллер постов

В ролике вы увидите создание всей логики по получению, удалению, редактированию и созданию постов.

Урок 12. Функционал комментариев

В этом видео будет создано все для комментариев: модель, роуты и контроллер.

Урок 13. Исправление ошибки

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

Блок 6. Интеграция

Количество уроков: 9
Продолжительность: 1:33:52

На этот момент в приложении уже будет две реализованные части: Front-End и Back-End, которые необходимо связать, что и является интеграцией.

В блоке вы увидите, как интегрировать все существующие страницы в админке и основном блоге, как сделать авторизацию и поддерживать сессию.

Урок 1. Создание пользователя

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

Урок 2. Логин и обработка ошибок

В этом видео показано, как интегрировать систему авторизации и визуально отображать ошибки, которые могут возникнуть, например, неправильный пароль или логин.

Урок 3. Обработка 401 ошибки

Время жизни токена 1 час, и когда он истекает сервер будет отдавать 401 ошибку авторизации, которую необходимо обработать, чтобы приложение вело себя корректно.

Урок 4. Добавление токена к запросам

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

Урок 5. Поддержание сессии с токеном

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

Урок 6. Создание поста

В ролике будет написана интеграция страницы, позволяющей создавать пост с картинкой.

Урок 7. Загрузка, редактирование и удаление постов

Вы увидите, как интегрировать остальной функционал по постам в панели администратора.

Урок 8. Вывод постов в блоге

Начиная с этого видео будет производиться интеграция основного блога с сервером.

Урок 9. Добавление комментариев

В ролике будет показана интеграция по выводу и добавлению комментариев в блоге.

Блок 7. Аналитика и графики

Количество уроков: 3
Продолжительность: 0:48:05

В блоке вы увидите, как реализовать страницу в панели администратора, отвечающую за аналитику внутри блога.

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

Урок 1. Настройка и установка графиков

В видео показано, как подключить плагин для Vue.js, который позволит создавать красивые графики.

Урок 2. Формирование данных на сервере

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

Урок 3. Создание компонента графика

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

Блок 8. Последние штрихи

Количество уроков: 4
Продолжительность: 0:23:20

Данный блок покажет вам некоторые моменты, которые улучшат приложение, например: создание общего фильтра для отображения даты и времени, исправление консольных предупреждений, добавление Title для каждой страницы, использование ENV-переменных.

В конце блока вы увидите, как превратить весь блог в PWA-приложение с офлайн доступом и Service Workers.

Урок 1. Исправление Warning в консоли

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

Урок 2. Фильтр отображения даты

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

Урок 3. Название страниц

Вы увидите задание названий страниц - Title, в том числе и для SEO-оптимизации. Также вы увидите использование переменных окружения через Nuxt.config.

Урок 4. Создание PWA из приложения

Nuxt.js позволяет делать из любого приложения PWA благодаря удобному модулю, который будет подключен в этом ролике.

Блок 9. Деплой приложения

Количество уроков: 4
Продолжительность: 0:20:48

В данном блоке уже завершенное приложение будет подготовлено для деплоя на удаленный сервер.

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

Урок 1. Защита ключей

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

Урок 2. Настройка и установка Heroku

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

Урок 3. Настройка приложения

Перед деплоем необходимо настроить приложение, добавить специальные скрипты, настроить системные переменные.

Урок 4. Деплой приложения

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

Бонус 1
SEO

Этот бонусный курс расскажет вам про удобные инструменты, которые есть в Nuxt.js для внутренней оптимизации под SEO вашего приложения.

Будут разобраны темы: добавление мета тегов, генерация Robots.txt и Sitemap.xml, а также добавление редиректов.

Вы увидите, как добавлять и оптимизировать ваши страницы для внутренней SEO-оптимизации на примере Meta-тегов и узнаете, какие особенности есть при этом.

Вы узнаете про дополнительные инструменты, позволяющие генерировать файлы Robots.txt и Sitemap.xml. Для SEO важны 301 и 302 редиректы, которые легко можно настроить в Nuxt.js с использованием дополнительного модуля.

Количество уроков: 4
Продолжительность курса: 00:18:08
Автор: Владилен Минин

Бонус 2
Премиум курс «NodeJS. Основы»

NodeJS – это платформа, которая позволяет писать на языке JavaScript в любом месте, а не только в браузере, и которая добавляет большое количество возможностей языку, такие как: работа с файлами, создание веб серверов и т.д. В результате данного курса вы увидите пошаговое создание приложения на NodeJS, которое будет показывать погоду в любом введенном городе планеты.

В процессе создания приложения вы познакомитесь со всеми основными аспектами работы с NodeJS: модульность, NPM, работа с сервером и сторонним API (включая Async Await), создание своего веб-сервера на Express.js, использование языка шаблонизации Ejs, рендеринг веб-страниц, обработка Get и Post запросов и многое другое.

Количество уроков: 10
Продолжительность курса: 01:35:53
Автор: Владилен Минин

Бонус 3
Премиум курс «MongoDB»

MongoDB - база данных, которая может работать в приложениях, написанных на платформе Node.js.

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

В этом бонусе вы познакомитесь с инструментом Mongoose, который удобно позволяет работать с схемами и моделями в рамках MongoDB.

Количество уроков: 5
Продолжительность курса: 0:43:52
Автор: Владилен Минин

Бонус 4
Премиум курс «WebPack 4+»

В данном курсе вы познакомитесь с последней версией технологии WebPack. Это технология для веб-разработки, с помощью которой вы можете собирать весь ваш проект и максимально оптимизировать все составляющие.

Вы одновременно можете получить возможность модульности для JavaScript файлов с ES6-синтаксисом, компилировать любой тип файлов, например TypeScript, CoffeScript, Sass, Less, Ecmascript6 и т.д.
В данном бонусе создается приложение, в котором будут показана реализация всех базовых и часто используемых задач при современной веб разработке: модульность, компиляция препроцессоров, компиляция TypeScript, работа с React jsx, Babel, локальный сервер для разработки, работа с любым типом файлов и два режима сборки проекта.

Количество уроков: 12
Продолжительность курса: 01:45:04
Автор: Владилен Минин