Последние поступления

  • Видеокурс
  • Видеокурс
  • Видеокурс
  • Видеокурс
  • Видеокурс
  • Видеокурс

    Последние новости

    • Киберпонедельник Скидка 60% на все курсы по Joomla. (Александр Куртеев)
    • Скидка 50%. Курс
    • Скидка 30% до 19 января 2020 г. Запуск 4 потока на курсе Time Blending. (Глеба Хлопунова)
    • 30% скидка на курсы до 27 января 2020 года. (Александр Куртеев)
    • Скидк 60%. до 16 января 2020. Распродажа от команды WebForMySelf!
    • ПОЛУЧИТЕ СКИДКУ ДО 80%! Большая распродажа в честь Нового Года! (Михаил Русаков)

      Мы в сети

      VK
      FB

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

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

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

      Страница автора - Владилен Минин - 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, локальный сервер для разработки, работа с любым типом файлов и два режима сборки проекта.

      • Страница курса - Фреймворк Nuxt.js. Руководство по FullStack-разработке. (Владилен Минин - Webformyself)
      • Похожие видеокурсы по теме:
        Видеокурс Бесплатный видео урок
        Видеокурс Бесплатный видео урок
        Видеокурс Бесплатный видео урок
        Видеокурс Бесплатный видеокурс
        Видеокурс Бесплатный видео урок
        Видеокурс Бесплатный видео урок
      • Смотрите бесплатное видео по теме:
        Промо ролики видеокурса Full-Stack практика. Создание JavaScript блога. (Владилен Минин - Webformyself)
        Промо ролики видеокурса JavaScript. Быстрый старт. (Владилен Минин - Webformyself)
        Промо ролики видеокурса Server Side Rendering с Nuxt.js. Быстрый старт. (Владилен Минин - Webformyself)
        Промо ролики видеокурса React JS. Основы. (Владилен Минин - Webformyself)
        Промо ролики видеокурса Server Side Rendering с Nuxt.js. Быстрый старт. (Владилен Минин - Webformyself)
        Промо ролики видеокурса Препроцессоры. Быстрый старт. (Владилен Минин - Webformyself)

      Добавить комментарий


      Защитный код
      Обновить