Смена контента каждые 5 секунд Laravel + Vue + AJAX

#ajax #laravel #vuejs #laravel_56 #laravel_57

Как сделать, чтобы баннер менялся на следующий каждые 5 секунд?

Компонент






Контроллер

public function list()
{
  $banner = Banner::where('published', 1)->first();

  return response()->json($banner);
}

    

Ответы

Ответ 1

Не нужно слать запросы для получения только одной сущности из БД.

Ниже пример постраничной зацикленной подгрузки контента: сама страница не перезагружается
в браузере, а происходит лишь подгрузка содержимого в компонент Vue через AJAX с параметром
page. При этом номер текущей "партии" содержимого page сохраняется в localStorage.

Применительно не только к баннерам: это может быть виджет новостей, ротатор изображений
и др.

Маршрутизатор

// BannerController замените на свой.

Route::get('/banners/list', 'BannerController@list');


Контроллер

public function list(Request $request)
{
  // Обрабатываем запросы только по AJAX.
  if ($request->ajax()) {
    $banners = Banner::where('published', 1)->paginate(5);

    return response()->json($banners, 200);
  }

  // Запретим прямой доступ на страницу.
  abort(403, 'Unauthorized action.');
}


Примерное содержимое компонента: