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

—————————————————–

✅ Исхдоный код из видео:
👉 https://github.com/azernov/laravel-vue-tutorial

✅ Макеты Open CRM:
👉 http://open-crm-demo.artprog.pro/
👉 https://github.com/azernov/open-crm

✅ Ссылка на отзывы о курсе:
💬 https://lectoria.pro/read/otzyvy-o-kurse-vue-3.html?utm_source=youtube&utm_content=lesson-20230610

✅ Ссылка на курс по Vue3:
👉 https://lectoria.pro/catalog/vuejs-3.html?utm_source=youtube&utm_content=lesson-20230610

✅ Прочие ссылки:
Канал курса по CRM: https://t.me/lectoria_crm
Чат курса по CRM: https://t.me/lectoria_crm_chat
Чат телеграм Lectoria: https://t.me/lectoriachat
Канал телеграм Lectoria: https://t.me/lectoriapro

💵 BTC Donation: bc1qm395pj4eyqfu7dd2u36hggzjv56j58mppvrna6
💵 Тинькофф/СБП: 5280 4137 5004 0557

Instagram: https://instagram.com/lectoria.pro
VK: https://vk.com/lectoria
Facebook: https://fb.com/lectoria.pro
Сайт проекта Lectoria: https://lectoria.pro
🖥 Обучение веб-разработке Lectoria: https://www.youtube.com/channel/UCuzjhRFc0S85MWIsaeZym8Q
🖥 Обучение разработке на MODX Revolution: https://youtube.com/c/OpenModx

#vue3 #vue #laravel #laraveltutorial #vuejs #frontend #обучениепрограммированию #онлайнкурсы #webdeveloper #программирование