- 108
- 426 725
Lectoria. Обучение веб-разработке.
Russia
เข้าร่วมเมื่อ 9 ก.พ. 2015
Онлайн-школа по программированию и веб-разработке. Видеокурсы, интенсивы и бесплатные вебинары Ʌectoria ориентированы на веб-разработчиков, занимающихся непосредственной работой с различными IT-инструментами, разбирающихся в своей области, но на деле сталкивающихся с вопросами, которые требуют нестандартного подхода и более глубоких знаний. Курсы и уроки Ʌectoria созданы практикующими специалистами, имеющими дело с реальными заказами. Такие курсы несут в себе практическую ценность, так как дают именно те знания, которые непосредственно применяются при веб-разработке.
✅ Канал в телеграм: t.me/lectoriapro
✅ Группа в телеграм: t.me/lectoriachat
✅ Инстаграм: lectoria.pro
✅ Vkontakte: lectoria.pro
✅ Facebook: lectoria.pro
✅ Канал в телеграм: t.me/lectoriapro
✅ Группа в телеграм: t.me/lectoriachat
✅ Инстаграм: lectoria.pro
✅ Vkontakte: lectoria.pro
✅ Facebook: lectoria.pro
Vue3 + Laravel: Большой туториал | Как создать интерактивную таблицу с пагинацией
В этом видео я покажу вам, как работать с двумя мощными инструментами разработки веб-приложений: Laravel и Vue3.
Вначале мы начнем с установки Laravel и настройки базы данных Sqlite. Затем я расскажу вам о создании миграций в Laravel и покажу, как использовать UserFactory и DatabaseSeeder.
После этого мы перейдем к созданию маршрутов в Laravel и внедрению логики в контроллер. Я также покажу вам, как добавить поле "аватар".
В середине видео я расскажу вам о курсе по Laravel, который я предлагаю, и подготовке frontend-проекта. Вы узнаете, как связать frontend с backend и внедрить стили.
Я также расскажу о концепции Feature Sliced Design и продемонстрирую создание Vue-компонентов. Мы создадим основу для компонента Table.vue и его дочерних компонентов TableHeadRow.vue и TableHeadCell.vue.
Затем я проведу вас через TypeScript и покажу, как валидировать пропсы и вызывать компоненты. Вы увидите, как наполнять логику в компоненте TableHeadRow и перейти на TypeScript.
Мы продолжим создавать компоненты TableBodyRow и TableBodyCell, а затем соберем их в компонент Table.
Далее я покажу вам, как получать данные с сервера с помощью Fetch API и добавлять параметры к запросу. Вы узнаете о computed адресе запроса и создадите сортировку в таблице.
Мы также реализуем компонент Pagination.vue и научимся выводить циклические данные. Я покажу вам, как добавить анимацию сортировки таблицы с помощью TransitionGroup.
Вы узнаете, как реализовать строку поиска и создать виджет UsersTable.vue. В конце я расскажу о курсе по Vue3, который также предлагается.
Не забудьте подписаться на мой канал и оставить свои вопросы и комментарии в разделе ниже. Буду рад помочь вам в этом захватывающем путешествии в мир Laravel и Vue3!
-----------------------------------------------------
⏱ Таймкоды:
00:00:00 - о видео
00:02:58 - установка Laravel
00:05:15 - создаем БД Sqlite. Настройка Laravel
00:07:18 - создаем миграции Laravel
00:12:00 - UserFactory и DatabaseSeeder
00:15:22 - создаем маршруты Laravel
00:18:38 - внедряем логику в контроллер
00:29:12 - добавляем поле avatar
00:33:24 - про курс по Laravel
00:34:53 - подготовка frontend-проекта
00:37:39 - про связь с backend
00:39:37 - внедряем стили
00:40:10 - про Feature Sliced Design
00:44:25 - index.js и index.scss
00:46:48 - vite-plugin-sass-glob-import
00:48:21 - создаем Vue-компоненты
00:51:07 - создаем основу для Table.vue
00:55:14 - создаем основу для TableHeadRow.vue и TableHeadCell.vue
00:59:26 - пропсы TableHeadCell.vue
00:59:59 - про TypeScript
01:02:51 - валидация пропса
01:04:17 - вызов TableHeadCell
01:06:16 - наполняем логику TableHeadRow
01:07:05 - переходим на TypeScript
01:14:39 - создаем TableBodyRow и TableBodyCell
01:44:10 - собираем компонент Table
01:49:05 - получение данных от сервера Fetch API
01:55:45 - добавляем параметры к запросу
01:57:44 - computed адрес запроса
02:00:53 - создаем сортировку в Table
02:22:41 - создаем Pagination.vue
02:34:49 - вывод циклических данных
02:36:37 - TransitionGroup анимация сортировки таблицы
02:40:19 - реализация строки поиска
02:44:04 - виджет UsersTable.vue
02:47:34 - про курс Vue3
-----------------------------------------------------
✅ Исхдоный код из видео:
👉 github.com/azernov/laravel-vue-tutorial
✅ Макеты Open CRM:
👉 open-crm-demo.artprog.pro/
👉 github.com/azernov/open-crm
✅ Ссылка на отзывы о курсе:
💬 lectoria.pro/read/otzyvy-o-kurse-vue-3.html?
✅ Ссылка на курс по Vue3:
👉 lectoria.pro/catalog/vuejs-3.html?
✅ Прочие ссылки:
Канал курса по CRM: t.me/lectoria_crm
Чат курса по CRM: t.me/lectoria_crm_chat
Чат телеграм Lectoria: t.me/lectoriachat
Канал телеграм Lectoria: t.me/lectoriapro
💵 BTC Donation: bc1qm395pj4eyqfu7dd2u36hggzjv56j58mppvrna6
💵 Тинькофф/СБП: 5280 4137 5004 0557
Instagram: lectoria.pro
VK: lectoria
Facebook: lectoria.pro
Сайт проекта Lectoria: lectoria.pro
🖥 Обучение веб-разработке Lectoria: th-cam.com/channels/uzjhRFc0S85MWIsaeZym8Q.html
🖥 Обучение разработке на MODX Revolution: th-cam.com/users/OpenModx
#vue3 #vue #laravel #laraveltutorial #vuejs #frontend #обучениепрограммированию #онлайнкурсы #webdeveloper #программирование
Вначале мы начнем с установки Laravel и настройки базы данных Sqlite. Затем я расскажу вам о создании миграций в Laravel и покажу, как использовать UserFactory и DatabaseSeeder.
После этого мы перейдем к созданию маршрутов в Laravel и внедрению логики в контроллер. Я также покажу вам, как добавить поле "аватар".
В середине видео я расскажу вам о курсе по Laravel, который я предлагаю, и подготовке frontend-проекта. Вы узнаете, как связать frontend с backend и внедрить стили.
Я также расскажу о концепции Feature Sliced Design и продемонстрирую создание Vue-компонентов. Мы создадим основу для компонента Table.vue и его дочерних компонентов TableHeadRow.vue и TableHeadCell.vue.
Затем я проведу вас через TypeScript и покажу, как валидировать пропсы и вызывать компоненты. Вы увидите, как наполнять логику в компоненте TableHeadRow и перейти на TypeScript.
Мы продолжим создавать компоненты TableBodyRow и TableBodyCell, а затем соберем их в компонент Table.
Далее я покажу вам, как получать данные с сервера с помощью Fetch API и добавлять параметры к запросу. Вы узнаете о computed адресе запроса и создадите сортировку в таблице.
Мы также реализуем компонент Pagination.vue и научимся выводить циклические данные. Я покажу вам, как добавить анимацию сортировки таблицы с помощью TransitionGroup.
Вы узнаете, как реализовать строку поиска и создать виджет UsersTable.vue. В конце я расскажу о курсе по Vue3, который также предлагается.
Не забудьте подписаться на мой канал и оставить свои вопросы и комментарии в разделе ниже. Буду рад помочь вам в этом захватывающем путешествии в мир Laravel и Vue3!
-----------------------------------------------------
⏱ Таймкоды:
00:00:00 - о видео
00:02:58 - установка Laravel
00:05:15 - создаем БД Sqlite. Настройка Laravel
00:07:18 - создаем миграции Laravel
00:12:00 - UserFactory и DatabaseSeeder
00:15:22 - создаем маршруты Laravel
00:18:38 - внедряем логику в контроллер
00:29:12 - добавляем поле avatar
00:33:24 - про курс по Laravel
00:34:53 - подготовка frontend-проекта
00:37:39 - про связь с backend
00:39:37 - внедряем стили
00:40:10 - про Feature Sliced Design
00:44:25 - index.js и index.scss
00:46:48 - vite-plugin-sass-glob-import
00:48:21 - создаем Vue-компоненты
00:51:07 - создаем основу для Table.vue
00:55:14 - создаем основу для TableHeadRow.vue и TableHeadCell.vue
00:59:26 - пропсы TableHeadCell.vue
00:59:59 - про TypeScript
01:02:51 - валидация пропса
01:04:17 - вызов TableHeadCell
01:06:16 - наполняем логику TableHeadRow
01:07:05 - переходим на TypeScript
01:14:39 - создаем TableBodyRow и TableBodyCell
01:44:10 - собираем компонент Table
01:49:05 - получение данных от сервера Fetch API
01:55:45 - добавляем параметры к запросу
01:57:44 - computed адрес запроса
02:00:53 - создаем сортировку в Table
02:22:41 - создаем Pagination.vue
02:34:49 - вывод циклических данных
02:36:37 - TransitionGroup анимация сортировки таблицы
02:40:19 - реализация строки поиска
02:44:04 - виджет UsersTable.vue
02:47:34 - про курс Vue3
-----------------------------------------------------
✅ Исхдоный код из видео:
👉 github.com/azernov/laravel-vue-tutorial
✅ Макеты Open CRM:
👉 open-crm-demo.artprog.pro/
👉 github.com/azernov/open-crm
✅ Ссылка на отзывы о курсе:
💬 lectoria.pro/read/otzyvy-o-kurse-vue-3.html?
✅ Ссылка на курс по Vue3:
👉 lectoria.pro/catalog/vuejs-3.html?
✅ Прочие ссылки:
Канал курса по CRM: t.me/lectoria_crm
Чат курса по CRM: t.me/lectoria_crm_chat
Чат телеграм Lectoria: t.me/lectoriachat
Канал телеграм Lectoria: t.me/lectoriapro
💵 BTC Donation: bc1qm395pj4eyqfu7dd2u36hggzjv56j58mppvrna6
💵 Тинькофф/СБП: 5280 4137 5004 0557
Instagram: lectoria.pro
VK: lectoria
Facebook: lectoria.pro
Сайт проекта Lectoria: lectoria.pro
🖥 Обучение веб-разработке Lectoria: th-cam.com/channels/uzjhRFc0S85MWIsaeZym8Q.html
🖥 Обучение разработке на MODX Revolution: th-cam.com/users/OpenModx
#vue3 #vue #laravel #laraveltutorial #vuejs #frontend #обучениепрограммированию #онлайнкурсы #webdeveloper #программирование
มุมมอง: 18 411
วีดีโอ
Про Vue3: Для моих подписчиков
มุมมอง 883ปีที่แล้ว
В этом видео я поделюсь с вами новостями про обучение на курсе по Vue3 Все ссылки из видео вы найдете ниже 00:27 - Сколько длится курс 00:37 - Что входит в обучение 01:19 - Что будет на созвонах 01:40 - Что ты получишь после курса 02:28 - Чего не будет на курсе 02:57 - Сколько времени посвящено Vue3 03:18 - Что отличает курс от бесплатных 04:36 - Цель курса #Vue3 #обучениепрограммированию #Арте...
Неочевидное: События Vue3 и JS | #vue #vuejs #vue3 #frontend #фронтенд
มุมมอง 1.5Kปีที่แล้ว
В этом видео-уроке мы рассмотрим неочевидные особенности нативных и пользовательских событий во Vue3. Нативные события передаются вверх по DOM-дереву, то есть от вложенных элементов к родительским. Это означает, что если вы добавляете слушатель события к дочернему элементу, событие будет передано и обработано родительским элементом, если он также имеет слушатель для этого события. В Vue3 пользо...
Какую сборку Vue подключить? | Как добавить Vue в проект | #vue #vuejs #vue3 #frontend #фронтенд
มุมมอง 1.5Kปีที่แล้ว
В этом видео я расскажу о том, как выбрать подходящую сборку Vue3 и как ее подключить в ваш проект. Vue3 - это новая версия популярного фреймворка для создания пользовательских интерфейсов, которая предоставляет множество новых возможностей для удобной и быстрой разработки. Но как выбрать правильную сборку и подключить ее в свой проект? В видео я рассмотрю различные варианты сборок Vue3 и их ос...
Vue3 хуки жизненного цикла в деталях | Vue Hooks | Vue Lifecycle hooks | #vue #frontend #vuejs
มุมมอง 6Kปีที่แล้ว
В этом видео я расскажу о хуках жизненного цикла компонентов в Vue3 и как они могут помочь вам управлять состоянием и поведением вашего приложения. Мы обсудим такие ключевые концепции, как "mounted", "updated", "beforeUnmount", "beforeUpdate" и многие другие. Я покажу вам, как использовать эти хуки для создания более динамичных и интерактивных приложений. Кроме того, я расскажу об их различных ...
VueRouter: meta, children и хуки | Просто объясняю про VueRouter
มุมมอง 3.9Kปีที่แล้ว
VueRouter: meta, children и хуки | Просто объясняю про VueRouter
Основы работы с Vue Router: руководство для начинающих | Просто объясняю про Vue Router
มุมมอง 15Kปีที่แล้ว
Основы работы с Vue Router: руководство для начинающих | Просто объясняю про Vue Router
Вся суть работы с внешним API на Vue | Просто объясняю Vue 3
มุมมอง 19Kปีที่แล้ว
Вся суть работы с внешним API на Vue | Просто объясняю Vue 3
Давайте познакомимся. Артем Зернов. Lectoria
มุมมอง 1.2Kปีที่แล้ว
Давайте познакомимся. Артем Зернов. Lectoria
Разработка CRM. 024 Верстка страницы Profile
มุมมอง 1.9K2 ปีที่แล้ว
Разработка CRM. 024 Верстка страницы Profile
Разработка CRM. 023 Верстка страниц SignIn, SignUp, Dashboard
มุมมอง 1.1K2 ปีที่แล้ว
Разработка CRM. 023 Верстка страниц SignIn, SignUp, Dashboard
Разработка CRM. 022 Верстка DialogChoose
มุมมอง 7032 ปีที่แล้ว
Разработка CRM. 022 Верстка DialogChoose
Разработка CRM. 021 Верстка linked-fields, named-filter и notification
มุมมอง 7062 ปีที่แล้ว
Разработка CRM. 021 Верстка linked-fields, named-filter и notification
Разработка CRM. 020 Верстка radio, checkbox, datepicker, tabs
มุมมอง 9542 ปีที่แล้ว
Разработка CRM. 020 Верстка radio, checkbox, datepicker, tabs
Разработка CRM. 019 Верстаем Textbox по БЭМ
มุมมอง 9872 ปีที่แล้ว
Разработка CRM. 019 Верстаем Textbox по БЭМ
Разработка CRM. 017 Переменные, шрифты и базовые стили. Верстка Button
มุมมอง 1.2K2 ปีที่แล้ว
Разработка CRM. 017 Переменные, шрифты и базовые стили. Верстка Button
Разработка CRM. 015 Развертывание среды для верстки
มุมมอง 2.5K2 ปีที่แล้ว
Разработка CRM. 015 Развертывание среды для верстки
Разработка CRM. 014 Предфинальный обзор дизайн системы
มุมมอง 1.7K2 ปีที่แล้ว
Разработка CRM. 014 Предфинальный обзор дизайн системы
Разработка CRM. 012 Сборка компонента Button
มุมมอง 1.4K2 ปีที่แล้ว
Разработка CRM. 012 Сборка компонента Button
Разработка CRM. 011 База для дизайн системы
มุมมอง 2.9K2 ปีที่แล้ว
Разработка CRM. 011 База для дизайн системы
Разработка CRM. 010.1 Прототипы завершены
มุมมอง 1.4K2 ปีที่แล้ว
Разработка CRM. 010.1 Прототипы завершены
Разработка CRM. 010 Про таблицы в Figma
มุมมอง 3.5K2 ปีที่แล้ว
Разработка CRM. 010 Про таблицы в Figma
Спасибо, доходчиво
добрый вечер , а почему вы не юзаете никакие хуки жизненного цикла , чтоб обращаться к серверу в правильное время ?
спасибо
спасибо
Да, уж! Ну для кого объяснение-то? Туда-сюда, вставил-вынул и типа должно быть понятно?
Вот про нюансы и надо бы рассказывать, содержание этого ролика я могу посмотреть в документации за 5 минут
Ты лучший, ты просто боженька!!! Я такое видео искал пол года!
Не понимаю зачем нужно вызывать функцию генерации эвента в обработчике нативного эвента input, по сути меняется только то, что передастся нативному эвенту callback или undefined
Добрый день! Спасибо за урок. Правда я не совсем понял зачем иметь доступ к атрибутам, слотам и т.д. на 19:50? Какая здесь практическая цель?
Отвратительная подача материала
❤ круто, подскажите пожалуйста vue.js и vue 3 - это же одно и то же?
Smile brother, your content is really helpful
Нельзя эмитить update:modelValue во время ввода текста, только на нажатие на галочку
Спасибо🎉🎉🎉
Спасибо🎉🎉🎉
СПасибо нтересные речи !!
Не сказано как вью понимает где искать файл вью
🚲
Пример наглядный. Есть хорошее решение с jwt
Хороший гайд❤
Я предпочитаю сразу писать автотесты в таких случаях. Они тоже консольные
Спасибо, очень круто!!! Не терпится узнать, как использовать переданный параметр в компонент. Можно ли прямо присвойт состоянию (напр. const myId=params('id'))
если ключ и значение объекта имеют одинаковые имена то можно использовать короткую нотацию) просто routes) Импорты так же можно легко добавлять через alt + shift + enter или alt + enter - А так спасибо за видео полезно)
Какие то магические функции track и trigger. Начиная смотреть я предполагал увидеть завершенный код.
А с axios не легче тянуть? И вроде как из коробки
5:50 - привет битриксу!))
Без обид, но вообще непонятно. Тема сложная ее разжевывать нужно, а не проносится со скоростью звука. Даже просто из-за скорости речи пришлось на 0.75 выставить
Оч качетсвенный контент и очень красивая связная, профессиональная речь. С огромным удовольствием посмотрел, законспектировал и теперь осознаннее дебажу приложение. Спасибо, друг :)
Удачи)
На PHP версии 8 и выше для проверки ставиться версия monolog 3.0
Не правильно выбрано имя интерфейса. Интерфейс должен был называться как VideoService
Потому что учила реакт, а нужно срочно и вчера переписать на вью😂
Ну раз ты инструмент тогда нужно искать мастера :)
1 0 1 мой друг. Нравится backend, выбираю между PHP, Java, C# что посоветуете и почему?
С Java я знаком очень мало, поэтому трудно дать какие-то дельные комментарии насчет этого. Помню только, что на Java разрабатываются мощные Enterprise-приложения. На этом моя экспертиза все... :) Насчет C#. С ним у меня опыт был в далеком 2009-м году. Тогда этот язык использовался мной для разработки банковской системы учета финансов. В каком статусе C# сегодня, затрудняюсь дать ответ. Что же касается PHP, то про него могу сказать, что он популярен, у него невысокий порог входа в разработку и для него есть много open-source инструментов. Например, тот же Laravel - очень удобный и гибкий фреймворк. В любом случае, каждый из этих языков широко используется для одних задач и более редко для других. Что-то лучше подходит для высоконагруженных проектов, что-то лучше подходит для более простых проектов. Поэтому нужно отталкиваться от того, что вам больше нравится, к чему больше испытываете интерес. Те инструменты и используйте.
Давайте без базового v-model?
Видео не о чем. Дизлайк
Хорошее объяснение, спасибо
Ты сему слово, а он тебе Композишин Апи Опшион Апи
кто может подсказать мне бы построить такую логику: если imageURL = " ", то в img src=" путь -типа @/assets/....png " будет определенная картинка
хотелось бы побаловаться с исходником, допустим скачав с гита или если бы ты оставил ссылочку на песочницу
24:55 зачем экранизировать параметры? Разве лара это не делает из коробки?
Шипение в музыке что ли? Не возможно слушать, в начале все норм было.
Да, так и есть. 😢
Благодарю!
Благодарю!
Вот бы полный туториал по работе с апи 🙏🏻
Музыка лишняя конечно, на скорости просмотра в х1.5- х2 очень тяжело смотреть.
Зареактил так зареактил
Очень классный канал, удачи в продвижении!