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 #программирование