Vue3 + Laravel: Большой туториал | Как создать интерактивную таблицу с пагинацией
В этом видео я покажу вам, как работать с двумя мощными инструментами разработки веб-приложений: Laravel и Vue3.
Вначале мы начнем с установки Laravel и настройки базы данных Sqlite. Затем я расскажу вам о создании миграций в Laravel и покажу, как использовать UserFactory и DatabaseSeeder.
После этого мы перейдем к созданию маршрутов в Laravel и внедрению логики в контроллер. Я также покажу вам, как добавить поле “аватар“.
В середине видео я расскажу вам о курсе по Laravel, который я предлагаю, и подготовке frontend-проекта. Вы узнаете, как связать frontend с backend и внедрить стили.
Я также расскажу о концепции Feature Sliced Design и продемонстрирую создание Vue-компонентов. Мы создадим основу для компонента и его дочерних компонентов и .
Затем я проведу вас через TypeScript и покажу, как валидировать пропсы и вызывать компоненты. Вы увидите, как наполнять логику в компоненте TableHeadRow и перейти на TypeScript.
Мы продолжим создавать компоненты TableBodyRow и TableBodyCell, а затем соберем их в компонент Table.
Далее я покажу вам, как получать данные с сервера с помощью Fetch API и добавлять параметры к запросу. Вы узнаете о computed адресе запроса и создадите сортировку в таблице.
Мы также реализуем компонент и научимся выводить циклические данные. Я покажу вам, как добавить анимацию сортировки таблицы с помощью TransitionGroup.
Вы узнаете, как реализовать строку поиска и создать виджет . В конце я расскажу о курсе по 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 - и
00:46:48 - vite-plugin-sass-glob-import
00:48:21 - создаем Vue-компоненты
00:51:07 - создаем основу для
00:55:14 - создаем основу для и
00:59:26 - пропсы
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 - создаем
02:34:49 - вывод циклических данных
02:36:37 - TransitionGroup анимация сортировки таблицы
02:40:19 - реализация строки поиска
02:44:04 - виджет
02:47:34 - про курс Vue3
-----------------------------------------------------
✅ Исхдоный код из видео:
👉
✅ Макеты Open CRM:
👉
👉
✅ Ссылка на отзывы о курсе:
💬
✅ Ссылка на курс по Vue3:
👉
✅ Прочие ссылки:
Канал курса по CRM:
Чат курса по CRM:
Чат телеграм Lectoria:
Канал телеграм Lectoria:
💵 BTC Donation: bc1qm395pj4eyqfu7dd2u36hggzjv56j58mppvrna6
💵 Тинькофф/СБП: 5280 4137 5004 0557
Instagram:
VK:
Facebook:
Сайт проекта Lectoria:
🖥 Обучение веб-разработке Lectoria:
🖥 Обучение разработке на MODX Revolution:
#vue3 #vue #laravel #laraveltutorial #vuejs #frontend #обучениепрограммированию #онлайнкурсы #webdeveloper #программирование
3 views
833
292
2 months ago 01:08:48 2
Bruxelles et Washington veulent recenser tout ce que vous possédez - Pol & Eco avec Pierre Jovanovic
2 months ago 00:00:54 1
PARIS 17ÈME - APPARTEMENT A VENDRE - 1 090 000 € - 119 m² - 5 pièce(s)
2 months ago 02:09:21 1
François Asselineau répond à vos questions en direct n°33
2 months ago 00:00:54 1
PARIS 17EME - APPARTEMENT A VENDRE - 1 347 000 € - 134 m² - 3 pièces
2 months ago 00:00:39 1
PARIS 7ÈME - APPARTEMENT A VENDRE - 3 170 000 € - 162 m² - 6 pièce(s)
2 months ago 00:12:32 1
Le “Dragon d’Acier“ chinois : l’arme ultime qui inquiète les USA !
2 months ago 00:00:54 1
PARIS 16EME - APPARTEMENT A VENDRE - 2 990 000 € - 185 m² - 6 pièces
2 months ago 00:04:12 4
Démo de Kizomba a The Wave Dance Festival par Said & Oksana
2 months ago 00:00:32 1
Appartement À vendre - 4 pièces - Paris 4ème - 1 400 000 €
2 months ago 00:00:54 1
PARIS 11EME - APPARTEMENT A VENDRE - 1 400 000 € - 98 m² - 4 pièces
2 months ago 00:00:54 1
PARIS 6ÈME - APPARTEMENT A VENDRE - 1 790 000 € - 111 m² - 4 pièce(s)
2 months ago 00:00:54 1
PARIS 7ÈME - APPARTEMENT À VENDRE - 4 870 000 € - 155 m² - 5 pièces
2 months ago 00:12:35 1
Les BRICS dévoilent leur projet de monnaie commune au sommet de Kazan : une nouvelle ère économique
2 months ago 01:34:31 1
EP-116 - La mafia médicale - Avec Ghis (Ghislaine Lanctôt)
2 months ago 00:16:23 1
10 000 € pour un Esclave Robotique ? Elon Musk Révèle son Plan
2 months ago 00:00:59 1
Appartement À vendre - 8 Pièces - Paris - 3 280 000 €
2 months ago 00:10:50 1
Art Blue Création : Intro vers vos futures vues
2 months ago 00:00:54 1
PARIS 18EME - APPARTEMENT A VENDRE - 7 800 000 € - 250 m² - 5 pièces
2 months ago 18:17:32 1
Vue JS - Полный курс c нуля | Result University
2 months ago 00:07:27 1
Un autre angle de vue sur le cancer. Mon expérience d’énergéticienne et chamane & patiente.
2 months ago 00:00:54 1
PARIS 11ÈME - APPARTEMENT A VENDRE - 1 120 000 € - 85 m² - 3 pièce(s)
2 months ago 00:00:54 1
PARIS 5EME - APPARTEMENT A VENDRE - 2 760 000 € - 210 m² - 7 pièces
2 months ago 00:11:20 1
Pouvoir Occulte Maçonnique : Un ex Magistrat et Maire de Naples se lâche ENFIN / Luigi de Magistris
2 months ago 00:00:31 1
Appartement À vendre - 5 pièces - Paris - 1 199 000 €