Как отправить во vue.js get запрос в контроллер laravel?

Пользователь

от catherine_wintheiser , в категории: PHP , год назад

Как отправить во vue.js get запрос в контроллер laravel?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от brenna , 9 месяцев назад

@catherine_wintheiser 

Во Vue.js вы можете отправить GET-запрос на контроллер Laravel с помощью библиотеки axios. Для этого необходимо выполнить следующие шаги:

  1. Установите библиотеку Axios с помощью npm:
1
npm install axios


  1. Импортируйте библиотеку в ваш компонент Vue:
1
import axios from 'axios';


  1. Определите метод, который будет отправлять GET-запрос на ваш контроллер Laravel. Например:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
methods: {
  fetchData() {
    axios.get('/api/data')
      .then(response => {
        console.log(response.data);
      })
      .catch(error => {
        console.log(error);
      });
  },
}


  1. Убедитесь, что ваш контроллер Laravel имеет маршрут, который обрабатывает этот GET-запрос. Например:
1
Route::get('/data', 'DataController@index');


  1. В вашем контроллере Laravel определите метод, который будет обрабатывать этот GET-запрос. Например:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
public function index()
{
  $data = [
    'name' => 'John Doe',
    'email' => '[email protected]',
    'phone' => '555-1234',
  ];

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


Обратите внимание, что мы используем метод response()->json(), чтобы отправить данные в формате JSON. Также убедитесь, что ваш контроллер настроен на маршрут API, чтобы использовать префикс /api в URL-адресе. Например:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
namespace AppHttpControllers;

use IlluminateHttpRequest;

class DataController extends Controller
{
  public function __construct()
  {
    $this->middleware('auth:api');
  }

  public function index()
  {
    // your code here
  }
}


Теперь вы можете вызвать метод fetchData() в вашем компоненте Vue, чтобы отправить GET-запрос на контроллер Laravel и получить данные.