Мы в сети

VK
FB

Оформите подписку!

 Введите Ваш E-m@il и
получайте свежие новости

Страница автора - Владилен Минин - Webformyself
Страница автора

Автор(ы): Владилен Минин - Webformyself

Nuxt.js — это фреймворк высокого уровня, который создан с целью улучшения библиотеки Vue.js. Nuxt — это удобный инструмент, который позволяет быстро и относительно легко создавать действительно сложные приложения. Это основа для более простого создания сложных приложений Vue, не предназначенная для других фреймворков. Он позволяет создавать готовые к работе веб-приложения и призван упростить разработку универсальных и одностраничных сервисов. Nuxt обеспечивает отличную файловую структуру, улучшает роутинг, обеспечивает рендеринг на стороне сервера и позволяет создавать универсальные сервисы.  Вы можете сделать все это самостоятельно, но такой подход всегда требует времени, и иногда для него необходимы действительно хорошие навыки.

Смотреть видео:

Фреймворк Nuxt.js. Руководство по FullStack-разработке. (Владилен Минин)

Содержание:

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

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

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

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

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

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

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

Данный блок посвящен теории фреймворка 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. Создание блога

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В блоке вы увидите, как создается клиентская часть для панели администратора, где будет возможность создавать новые посты, редактировать существующие, смотреть статистику, добавлять новых пользователей. В блоке будут реализованы такие элементы, как: загрузка картинок, валидация форм, защита роутов и создание контента постов в формате 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

В этом блоке будет показана реализация серверной части для приложения. Вы увидите, как создается масштабируемая, гибкая архитектура бекенда для будущего блога. Будут разобраны такие элементы, как: работа с базами данных, защита ключей, разделенные роуты от публичного 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. Интеграция

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

В данном блоке уже завершенное приложение будет подготовлено для деплоя на удаленный сервер. Вы пошагово увидите, что необходимо сделать, чтобы запустить приложение на серверах 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 с использованием дополнительного модуля.

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

Автор: Владилен Минин

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

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

Автор: Владилен Минин

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

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

Автор: Владилен Минин

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

© 2019 http://www.dvdcurse.ru Все права защищены.