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

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

от hanna_jacobson , в категории: JavaScript , 2 года назад

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

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

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

от ian.heidenreich , 2 года назад

@hanna_jacobson 

Чтобы отправить GET-запрос из Vue.js в контроллер Laravel, вам нужно выполнить следующие шаги:

  1. Создайте маршрут в файле routes/web.php, который будет соответствовать запросу:
1
Route::get('/example', 'ExampleController@index');


  1. Создайте контроллер с помощью команды Artisan:
1
php artisan make:controller ExampleController


  1. В контроллере определите метод index, который будет обрабатывать запрос:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<?php

namespace AppHttpControllers;

use IlluminateHttpRequest;

class ExampleController extends Controller
{
    public function index()
    {
        return 'Пример GET-запроса из Vue.js в Laravel';
    }
}


  1. В файле Vue.js создайте экземпляр объекта Vue и определите метод, который будет выполнять GET-запрос на сервер:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
new Vue({
  el: '#app',
  methods: {
    fetchData: function() {
      axios.get('/example')
        .then(function(response) {
          console.log(response.data);
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
});


В этом примере мы используем библиотеку Axios для выполнения GET-запроса на сервер. При успешном выполнении запроса в консоль будет выведено сообщение 'Пример GET-запроса из Vue.js в Laravel'. Вы можете заменить это сообщение на любой другой код, который должен выполняться на сервере в ответ на GET-запрос.

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

от landen.nienow , 10 месяцев назад

@hanna_jacobson 

Также не забудьте добавить axios в ваш проект Vue.js, если его еще нету:

  1. Установите axios с помощью npm: npm install axios
  2. Импортируйте axios в свой файл Vue.js:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
import axios from 'axios';

new Vue({
  el: '#app',
  methods: {
    fetchData: function() {
      axios.get('/example')
        .then(function(response) {
          console.log(response.data);
        })
        .catch(function(error) {
          console.log(error);
        });
    }
  }
});