Vue3 + Laravel: Большой туториал | Как создать интерактивную таблицу с пагинацией

В этом туториале мы рассмотрим, как создать интерактивную таблицу с пагинацией с использованием Vue3 и Laravel. Это очень полезный функционал для веб-приложений, позволяющий пользователям просматривать большие объемы данных по частям.

Шаг 1: Установка Laravel и настройка API

Сначала установим Laravel, используя Composer:


composer create-project --prefer-dist laravel/laravel имя_проекта


Затем создадим модель и миграцию для нашей таблицы данных:


php artisan make:model Data -m


Укажем поля таблицы в миграции и выполним миграцию:


php artisan migrate


Теперь настроим API для получения данных из таблицы. Создадим контроллер и маршруты для этого:


php artisan make:controller DataController


И добавим маршруты в файл routes/api.php:


Route::get('/data', [DataController::class, 'index']);


Шаг 2: Создание Vue3 приложения

Устанавливаем Vue CLI, если еще не установлено:


npm install -g @vue/cli


Создаем новый проект Vue3:


vue create имя_проекта


Шаг 3: Создание компонента таблицы с пагинацией

Создадим компонент Table.vue:

Шаг 4: Получение данных из API с помощью Axios

Устанавливаем Axios, если еще не установлено:


npm install axios


Используем Axios для запроса данных из API в компоненте Table.vue:


// в методе fetchData() компонента Table.vue
axios.get('/api/data', {
params: {
page: this.page,
perPage: this.perPage,
},
})
.then(response => {
this.items = response.data;
})
.catch(error => {
console.error(error);
});


Шаг 5: Использование компонента в приложении Vue3

Добавляем компонент Table.vue в файле App.vue:

Шаг 6: Запуск приложения

Запускаем Laravel приложение на одном порту с Vue3 приложением:


php artisan serve


Запускаем Vue3 приложение:


npm run serve


Теперь мы создали интерактивную таблицу с пагинацией, которая получает данные из Laravel API и отображает их с помощью Vue3. Этот туториал поможет вам освоить работу с Vue3 и Laravel, а также создать мощный функционал для ваших веб-приложений.