Данный блок является вводным, где вы подробно узнаете про то, что вас ждет в курсе и какие инструменты потребуются для его изучения.
В ролике вы узнаете об авторе. Увидите финальное приложение, которое будет разрабатываться в уроках курса и узнаете всю необходимую информацию о нем.
В ролике вы узнаете про те инструменты, которые потребуются для наиболее эффективного и комфортного прохождения курса.
Данный блок посвящен теории фреймворка 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 вы увидите, как они работают.
Технология SSR усложняет разработку, так как необходимо рендерить контент и на сервере, и на клиенте. Метод AsyncData, возвращающий Promise позволяет крайне удобно загружать контент на сервере.
- Урок №10. Async Data на практике
Вы увидите, как сделать реальный запрос к серверу и вывести реальные данные.
Nuxt.js по умолчанию включает в себя модуль Vuex и работает с ним особым образом, который и показан в ролике.
Помимо методов AsyncData есть метод Fetch, с помощью которого на серверной стороне можно заполнять стейт еще до загрузки клиента.
- Урок №13. Middleware и защита роутов
Вы увидите, как с помощью Middleware реализовывать защиту роутов, например от неавторизованных пользователей.
Nuxt добавляет удобный функционал в Vuex: новый Action, который вызывается один раз и только на сервере, который позволяет инициализировать приложение.
- Блок №3. Front-End. Создание блога
В данном блоке вы увидите, как создается клиентская часть для будущего приложения. В блоке будет создана только основная часть блога, без панели администратора и с использованием UI-фреймворка Element-UI.
- Урок №1. Создание проекта
Вы увидите, как создается проект.
- Урок №2. Настройка проекта
После создания проекта его необходимо настроить, процесс чего вы увидите в этом видео.
В этом видео показано как создавать и настраивать общую структуру страницы.
- Урок №4. Главная страница
Вы увидите, как создается главная страница блога, в который будет выводиться список всех постов.
В этом видео показано как создается компонент отдельного поста.
- Урок №6. Страница детального отображения
Вы увидите, как создается отдельная страница, обрабатывающая динамический параметр и выводящая детальное отображение поста.
- Урок №7. Обработка ошибки роутов
В Nuxt есть возможность валидации страницы перед тем, как на нее зайти, что и будет реализовано в данном уроке.
- Урок №8. Список комментариев
Вы увидите, как формируются компоненты комментария и выводится список, состоящий из тестовых данных.
- Урок №9. Форма добавления комментариев
В уроке будет реализована форма, с помощью которой будут добавляться комментарии.
- Урок №10. Валидация и логика для добавления комментария
Вы увидите, как настроить валидацию для формы с помощью Element-UI.
- Урок №11. Анимация при изменении страниц
В видео показано, как добавлять анимацию на переход роутов.
- Блок №4. Front-End. Панель администратора
В блоке вы увидите, как создается клиентская часть для панели администратора, где будет возможность создавать новые посты, редактировать существующие, смотреть статистику, добавлять новых пользователей. В блоке будут реализованы такие элементы, как: загрузка картинок, валидация форм, защита роутов и создание контента постов в формате HTML и MD.
- Урок №1. Создание структуры страниц
Вы увидите, как задать Layout для админки, который существенно отличается от основной разметки блога.
Вы увидите создание навигации в админке, которая позволит переключаться между страницами и будет показывать активный роут.
Вы увидите создание страницы логина, с помощью которой будет проходить авторизация в панель администратора.
- Урок №4. Создание авторизации с Vuex
Вся авторизация в приложении будет работать через Vuex и в этом видео будет создана база, для последующей интеграции.
- Урок №5. Завершение сессии
В уроке будет создан Middleware, который будет защищать страницы админки от неавторизованных пользователей.
- Урок №6. Страница детального отображения
Для того чтобы завершить сессию в уроке будет создана страница, выполняющая данную логику.
- Урок №7. Обработка ошибок
Вы увидите, как создать общую шину для обработки всех ошибок приложения через Vuex и последующий вывод ошибок в UI через плагины Element-UI.
- Урок №8. Добавление пользователей
В этом видео будет создана страница, которая позволит добавлять пользователей для панели администратора.
- Урок №9. Список постов. Часть №1
В ролике будет создана страница с Data Table, которая будет показывать список уже существующих постов с краткой информацией по комментариям, датой и количеством просмотров.
- Урок №10. Список постов. Часть №2
В этой части будет добавлена возможность динамического удаления поста с красивым окошком подтверждения действия.
- Урок №11. Редактирование поста
В ролике будет реализована форма, с помощью которой можно будет редактировать уже существующий пост.
Вы увидите, как создать страницу, которая в дальнейшем позволит создавать новые посты, включая полную валидацию.
- Урок №13. Предпросмотр текста в MD и HTML
В уроке будет подключен плагин, позволяющий рендерить текст в формате MD и HTML для того, чтобы давать пользователям возможность предпросмотра поста.
Вы увидите, как подключить и настроить компонент загрузки файлов из Element-UI.
В этом блоке будет показана реализация серверной части для приложения. Вы увидите, как создается масштабируемая, гибкая архитектура бекенда для будущего блога. Будут разобраны такие элементы, как: работа с базами данных, защита ключей, разделенные роуты от публичного API и закрытого API, авторизация через JWT-токен, загрузка файлов и многое другое.
- Урок №1. Декомпозиция файлов
По умолчанию весь сервер представлен в одном файле, в этом уроке вы увидите, как разделить логику на несколько файлов для более удобной разработки.
- Урок №2. Создание объекта конфигурации
Любое приложение требует конфигурации и в этом видео вы увидите, как создается такой объект для Node.js и как подключать разный тип конфига в зависимости от типа сборки: продакш или девелопмент.
- Урок №3. Подключение MongoDB
В уроке вы увидите, как подключить и настроить MongoDB к приложению.
- Урок №4. Роуты, контроллеры, модели
В ролике будет созданы основные сущности приложения и структура папок, где они хранятся.
- Урок №5. Авторизация пользователя
Вы увидите, как создать логику для логина пользователя в систему с помощью JWT Token.
- Урок №6. Создание пользователя
В уроке реализована логика по созданию нового пользователя в системе и сохранении его в базе данных, в том числе с защитой пароля.
- Урок №7. Настройка Passport
Вы увидите, как подключить и настроить библиотеку Passport.js и ее стратегию по работе с JWT Token.
- Урок №8. Функционал постов
Начиная с данного ролика, вы увидите, как создаются все эндпоинты для создания, редактирования, удаления постов.
В видео будут созданы все роуты для работы с постами, причем разделенные на админку и на основной блог.
- Урок №10. Загрузка картинки
В ролике будет создан Middleware позволяющий Express обрабатывать загрузку картинок на сервер.
- Урок №11. Контроллер постов
В ролике вы увидите создание всей логики по получению, удалению, редактированию и созданию постов.
- Урок №12. Функционал комментариев
В этом видео будет создано все для комментариев: модель, роуты и контроллер.
- Урок №13. Исправление ошибки
Пока не сделана интеграция и нет данных в базе, могут возникать временные проблемы при запуске приложения, которые будут исправлены в этом видео.
На этот момент в приложении уже будет две реализованные части: Front-End и Back-End, которые необходимо связать, что и является интеграцией. В блоке вы увидите, как интегрировать все существующие страницы в админке и основном блоге, как сделать авторизацию и поддерживать сессию.
- Урок №1. Создание пользователя
В ролике вы увидите, как со стороны клиента идет подключение к серверу и создается новый пользователь в системе.
- Урок №2. Логин и обработка ошибок
В этом видео показано, как интегрировать систему авторизации и визуально отображать ошибки, которые могут возникнуть, например, неправильный пароль или логин.
- Урок №3. Обработка 401 ошибки
Время жизни токена 1 час, и когда он истекает сервер будет отдавать 401 ошибку авторизации, которую необходимо обработать, чтобы приложение вело себя корректно.
- Урок №4. Добавление токена к запросам
Для поддержания сессии необходимо к каждому запросу добавлять JWT-токен, что и будет реализовано в этом видео.
- Урок №5. Поддержание сессии с токеном
Для того чтобы после перезагрузки страницы поддерживать авторизацию, необходимо хранить токен на стороне клиента, но есть проблема, так как первые запросы должны быть сделаны на сервере. В этом ролике вы узнаете, как подобную проблему решить и реализовать автоматическую авторизацию в системе.
В ролике будет написана интеграция страницы, позволяющей создавать пост с картинкой.
- Урок №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.
В приложении есть два файла конфигурации, содержащие в себе различные данные, которые необходимо защитить перед тем, как использовать систему контроля версий Git.
- Урок №2. Настройка и установка Heroku
Для деплоя будет использована система Heroku, которую необходимо для начала установить и настроить, что и будет показано в этом ролике.
- Урок №3. Настройка приложения
Перед деплоем необходимо настроить приложение, добавить специальные скрипты, настроить системные переменные.
- Урок №4. Деплой приложения
Вы увидите, как происходит деплой и запуск приложения на удаленном сервере.
Автор: Владилен Минин
Этот бонусный курс расскажет вам про удобные инструменты, которые есть в 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, локальный сервер для разработки, работа с любым типом файлов и два режима сборки проекта.
3D - моделирование (319)
Бизнес и заработок (416)
Графика и видео (449)
Графический дизайн (93)
Дети и их родители (84)
Духовные практики (20)
Женщина и мужчина (37)
Здоровье и спорт (192)
Инвестиции и финансы (290)
Иностранные языки (28)
Компьютер и программы (103)
Личностный рост (110)
Маркетинг и реклама (143)
Музыка и звука (21)
Программирование (92)
Работа и карьера (19)
Создание сайтов и блогов (296)
Строительство и ремонт (116)
Хобби и увлечения (158)
Разные курсы (1)
