Как получить данные из Laravel бэкэнда и отобразить их в интерфейсе Vue / Nuxt - PullRequest
Новая
       0

Как получить данные из Laravel бэкэнда и отобразить их в интерфейсе Vue / Nuxt

0 голосов
/ 06 апреля 2020

У меня есть внешний интерфейс Vue / Nuxt, который функционирует должным образом, и внутренний сервер Laravel, который подключен к моей базе данных.

Моя проблема в том, как соединить их и отобразить данные из БД на моей странице Vue.

Если я запускаю приложение с использованием php artisan serve, я получаю правильные данные из БД, но не могу использовать переходы страниц Nuxt / Vue и только компонентный refre sh. Если я запускаю приложение, используя npm run dev, я получаю ссылки на страницы и только для компонентов refre sh, но данные, возвращенные из моего запроса Ax ios, являются HTML отправляющей страницы.

Итак, я предполагаю, что это какая-то асинхронная c проблема, но я очень новичок в этом и не знаю, что делать.

Любые советы или советы будут огромной помощью.

Топор ios запрос: 

created() {
    const { data } = this.$axios
      .get("/items")
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });
  },

Я не включил свой контроллер, модель et c. поскольку он работает через сервер Laravel, поэтому я предполагаю, что они настроены нормально. Хотя при необходимости я могу отредактировать их в посте.

1 Ответ

0 голосов
/ 08 апреля 2020

Вы должны использовать пакет dotenv . Затем в первой строке nuxt.config. js: 

require("dotenv").config()

А вот мой топор ios, настроенный в nuxt.config. js: 

/*
   ** Axios configuration
   */
  axios: {
    // See https://github.com/nuxt-community/axios-module#options
    baseURL: process.env.BASE_URL,
    headers: {
      common: {
        Accept: "application/json"
      }
    }
  },

Это прекрасно работает для меня. Если вы все еще не можете получить данные API, откройте вкладку «Сеть» в разделе «Инструменты разработчика». Проверьте, запущен ли какой-либо запрос, и если да, проверьте URL и возможный ответ, если таковой имеется.

...