如何从 Laravel 后端获取数据并在 Vue/Nuxt 前端显示

Posted 2023-02-22

【中文标题】如何从 Laravel 后端获取数据并在 Vue/Nuxt 前端显示

【英文标题】：How to get data from Laravel backend and display in Vue/Nuxt frontend

【发布时间】：2020-07-18 21:37:55

【问题描述】：

我有一个 Vue/Nuxt 前端，它可以正常工作，还有一个连接到我的数据库的 Laravel 后端。

我的问题是如何连接两者并在我的 Vue 页面中显示来自 db 的数据。

如果我使用php artisan serve 运行应用程序，我会从数据库中获得正确的数据，但我不能使用 Nuxt/Vue 的页面转换和仅组件刷新。如果我使用 npm run dev 运行应用程序，我会获得页面转换和仅组件刷新，但从我的 Axios 请求返回的数据是发送页面的 html。

所以我假设这是某种异步问题，但我对此很陌生，不知道该怎么做。

任何提示或建议都会有很大帮助。

axios 请求：

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

我没有包含我的控制器、模型等，因为它通过 Laravel 服务器运行，所以我假设它们设置良好。不过，如果需要，我可以将它们编辑到帖子中。

【问题讨论】：

你能通过使用普通浏览器让 laravel 像你期望的那样响应请求吗？例如，如果您使用浏览器访问 /items 页面会发生什么？

@FrancescoManicardi 我得到 '404 not found'

@FrancescoManicardi 实际上，如果我使用 /api/items 我会在浏览器中获取 json 数据

您只是使用了错误的 API 网址。在 axios config 中设置正确的 baseUrl 并在 .get() 中使用正确的 url，它必须工作

@FrancescoManicardi api 在我的 nuxt.config.js 文件中，所以我的 Axios 请求不需要它

【参考方案1】：

您必须使用包dotenv。然后在nuxt.config.js的第一行：

require("dotenv").config()

这是我在 nuxt.config.js 中的 axios 设置：

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

这对我来说很好。如果您仍然无法接收 API 数据，请从开发人员工具中检查网络选项卡。检查是否有任何请求被触发，如果有，请检查 url 和可能的响应（如果有）。

【讨论】：

您是否为此运行npm run dev 或php artisan serve？

我必须分开项目：一个带有 API 的 Laravel 项目和一个 Nuxt 项目。所以我需要分别运行它们。我认为你应该同时运行这两个命令。

我得到的只是：Access to XMLHttpRequest at 'http://localhost:8000/items' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我认为你需要包含 laravel-cors：packagist.org/packages/barryvdh/laravel-cors

URL 不应该是：http://localhost:8000/api/items 而不是http://localhost:8000/items 吗？