Lectoria. Обучение веб-разработке.
Lectoria. Обучение веб-разработке.
  • 108
  • 426 725
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 #программирование
มุมมอง: 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
Как работает реактивность "под капотом"
มุมมอง 4.4Kปีที่แล้ว
Как работает реактивность "под капотом"
Vue. Composition API vs Options API
มุมมอง 7Kปีที่แล้ว
Vue. Composition API vs Options API
Vue3 Аватарка с Drop-загрузкой
มุมมอง 1.9Kปีที่แล้ว
Vue3 Аватарка с Drop-загрузкой
Vue3 TextBox с фиксацией состояния
มุมมอง 3.7Kปีที่แล้ว
Vue3 TextBox с фиксацией состояния
Разработка CRM. Верстка завершена!
มุมมอง 6K2 ปีที่แล้ว
Разработка CRM. Верстка завершена!
Разработка 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. 018 Сборка иконок
มุมมอง 8052 ปีที่แล้ว
Разработка CRM. 018 Сборка иконок
Разработка CRM. 017 Переменные, шрифты и базовые стили. Верстка Button
มุมมอง 1.2K2 ปีที่แล้ว
Разработка CRM. 017 Переменные, шрифты и базовые стили. Верстка Button
Разработка CRM. 016 Теория БЭМ
มุมมอง 1.3K2 ปีที่แล้ว
Разработка CRM. 016 Теория БЭМ
Разработка CRM. 015 Развертывание среды для верстки
มุมมอง 2.5K2 ปีที่แล้ว
Разработка CRM. 015 Развертывание среды для верстки
Разработка CRM. 014 Предфинальный обзор дизайн системы
มุมมอง 1.7K2 ปีที่แล้ว
Разработка CRM. 014 Предфинальный обзор дизайн системы
Разработка CRM. 013 Компонент textbox
มุมมอง 1K2 ปีที่แล้ว
Разработка CRM. 013 Компонент textbox
Разработка 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

ความคิดเห็น

  • @tyortyo
    @tyortyo 14 วันที่ผ่านมา

    Спасибо, доходчиво

  • @mr.9049
    @mr.9049 หลายเดือนก่อน

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

  • @СтепанПалий-д9ж
    @СтепанПалий-д9ж 2 หลายเดือนก่อน

    спасибо

  • @СтепанПалий-д9ж
    @СтепанПалий-д9ж 2 หลายเดือนก่อน

    спасибо

  • @tsuranov
    @tsuranov 3 หลายเดือนก่อน

    Да, уж! Ну для кого объяснение-то? Туда-сюда, вставил-вынул и типа должно быть понятно?

  • @albertkhasanov2867
    @albertkhasanov2867 3 หลายเดือนก่อน

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

  • @MrBlackChildren
    @MrBlackChildren 4 หลายเดือนก่อน

    Ты лучший, ты просто боженька!!! Я такое видео искал пол года!

  • @ВладимирСеменихин-к5ф
    @ВладимирСеменихин-к5ф 4 หลายเดือนก่อน

    Не понимаю зачем нужно вызывать функцию генерации эвента в обработчике нативного эвента input, по сути меняется только то, что передастся нативному эвенту callback или undefined

  • @forward8229
    @forward8229 4 หลายเดือนก่อน

    Добрый день! Спасибо за урок. Правда я не совсем понял зачем иметь доступ к атрибутам, слотам и т.д. на 19:50? Какая здесь практическая цель?

  • @МаксимВикторович-ж4о
    @МаксимВикторович-ж4о 4 หลายเดือนก่อน

    Отвратительная подача материала

  • @nelavas4651
    @nelavas4651 4 หลายเดือนก่อน

    ❤ круто, подскажите пожалуйста vue.js и vue 3 - это же одно и то же?

  • @baigeldysultanov
    @baigeldysultanov 4 หลายเดือนก่อน

    Smile brother, your content is really helpful

  • @АндрейМакаров-щ1з
    @АндрейМакаров-щ1з 5 หลายเดือนก่อน

    Нельзя эмитить update:modelValue во время ввода текста, только на нажатие на галочку

  • @UrTa91
    @UrTa91 5 หลายเดือนก่อน

    Спасибо🎉🎉🎉

  • @UrTa91
    @UrTa91 5 หลายเดือนก่อน

    Спасибо🎉🎉🎉

  • @ЯўгенГурыновіч
    @ЯўгенГурыновіч 5 หลายเดือนก่อน

    СПасибо нтересные речи !!

  • @Niakita
    @Niakita 5 หลายเดือนก่อน

    Не сказано как вью понимает где искать файл вью

  • @AzatUlykpan
    @AzatUlykpan 5 หลายเดือนก่อน

    🚲

  • @Hairy89pro
    @Hairy89pro 6 หลายเดือนก่อน

    Пример наглядный. Есть хорошее решение с jwt

  • @Hairy89pro
    @Hairy89pro 6 หลายเดือนก่อน

    Хороший гайд❤

  • @dmitrybutskikh2979
    @dmitrybutskikh2979 6 หลายเดือนก่อน

    Я предпочитаю сразу писать автотесты в таких случаях. Они тоже консольные

  • @GGSoft2009
    @GGSoft2009 6 หลายเดือนก่อน

    Спасибо, очень круто!!! Не терпится узнать, как использовать переданный параметр в компонент. Можно ли прямо присвойт состоянию (напр. const myId=params('id'))

  • @eg0ist_665
    @eg0ist_665 6 หลายเดือนก่อน

    если ключ и значение объекта имеют одинаковые имена то можно использовать короткую нотацию) просто routes) Импорты так же можно легко добавлять через alt + shift + enter или alt + enter - А так спасибо за видео полезно)

  • @engenes.
    @engenes. 6 หลายเดือนก่อน

    Какие то магические функции track и trigger. Начиная смотреть я предполагал увидеть завершенный код.

  • @tefikov
    @tefikov 6 หลายเดือนก่อน

    А с axios не легче тянуть? И вроде как из коробки

  • @eugene_kulik
    @eugene_kulik 6 หลายเดือนก่อน

    5:50 - привет битриксу!))

  • @АлексМиллер-п4г
    @АлексМиллер-п4г 6 หลายเดือนก่อน

    Без обид, но вообще непонятно. Тема сложная ее разжевывать нужно, а не проносится со скоростью звука. Даже просто из-за скорости речи пришлось на 0.75 выставить

  • @RuslanMavlyanov
    @RuslanMavlyanov 7 หลายเดือนก่อน

    Оч качетсвенный контент и очень красивая связная, профессиональная речь. С огромным удовольствием посмотрел, законспектировал и теперь осознаннее дебажу приложение. Спасибо, друг :)

  • @frykt0zik
    @frykt0zik 7 หลายเดือนก่อน

    Удачи)

  • @Максим-й8п7т
    @Максим-й8п7т 7 หลายเดือนก่อน

    На PHP версии 8 и выше для проверки ставиться версия monolog 3.0

  • @aliakseiprybytkou7552
    @aliakseiprybytkou7552 7 หลายเดือนก่อน

    Не правильно выбрано имя интерфейса. Интерфейс должен был называться как VideoService

  • @melenium
    @melenium 7 หลายเดือนก่อน

    Потому что учила реакт, а нужно срочно и вчера переписать на вью😂

  • @chego2412
    @chego2412 8 หลายเดือนก่อน

    Ну раз ты инструмент тогда нужно искать мастера :)

  • @qrthack
    @qrthack 8 หลายเดือนก่อน

    1 0 1 мой друг. Нравится backend, выбираю между PHP, Java, C# что посоветуете и почему?

    • @lectoria
      @lectoria 8 หลายเดือนก่อน

      С Java я знаком очень мало, поэтому трудно дать какие-то дельные комментарии насчет этого. Помню только, что на Java разрабатываются мощные Enterprise-приложения. На этом моя экспертиза все... :) Насчет C#. С ним у меня опыт был в далеком 2009-м году. Тогда этот язык использовался мной для разработки банковской системы учета финансов. В каком статусе C# сегодня, затрудняюсь дать ответ. Что же касается PHP, то про него могу сказать, что он популярен, у него невысокий порог входа в разработку и для него есть много open-source инструментов. Например, тот же Laravel - очень удобный и гибкий фреймворк. В любом случае, каждый из этих языков широко используется для одних задач и более редко для других. Что-то лучше подходит для высоконагруженных проектов, что-то лучше подходит для более простых проектов. Поэтому нужно отталкиваться от того, что вам больше нравится, к чему больше испытываете интерес. Те инструменты и используйте.

  • @feedgemer7349
    @feedgemer7349 8 หลายเดือนก่อน

    Давайте без базового v-model?

  • @Всеукраїнськийаудитсайтів
    @Всеукраїнськийаудитсайтів 8 หลายเดือนก่อน

    Видео не о чем. Дизлайк

  • @АлександрПасечный-ж6д
    @АлександрПасечный-ж6д 8 หลายเดือนก่อน

    Хорошее объяснение, спасибо

  • @SteevenHookah
    @SteevenHookah 8 หลายเดือนก่อน

    Ты сему слово, а он тебе Композишин Апи Опшион Апи

  • @zhuk9349
    @zhuk9349 8 หลายเดือนก่อน

    кто может подсказать мне бы построить такую логику: если imageURL = " ", то в img src=" путь -типа @/assets/....png " будет определенная картинка

  • @zhuk9349
    @zhuk9349 8 หลายเดือนก่อน

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

  • @sevaske
    @sevaske 8 หลายเดือนก่อน

    24:55 зачем экранизировать параметры? Разве лара это не делает из коробки?

  • @TheEmberEve
    @TheEmberEve 9 หลายเดือนก่อน

    Шипение в музыке что ли? Не возможно слушать, в начале все норм было.

  • @lvovich_biz
    @lvovich_biz 9 หลายเดือนก่อน

    Да, так и есть. 😢

  • @Anatoli-bq1pe
    @Anatoli-bq1pe 9 หลายเดือนก่อน

    Благодарю!

  • @Anatoli-bq1pe
    @Anatoli-bq1pe 9 หลายเดือนก่อน

    Благодарю!

  • @lvovich_biz
    @lvovich_biz 9 หลายเดือนก่อน

    Вот бы полный туториал по работе с апи 🙏🏻

  • @flops6066
    @flops6066 9 หลายเดือนก่อน

    Музыка лишняя конечно, на скорости просмотра в х1.5- х2 очень тяжело смотреть.

  • @esviken
    @esviken 9 หลายเดือนก่อน

    Зареактил так зареактил

  • @НикитаСилич-п1з
    @НикитаСилич-п1з 9 หลายเดือนก่อน

    Очень классный канал, удачи в продвижении!