首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何从Laravel后端获取数据并在Vue/Nuxt前端显示

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

Stack Overflow用户
提问于 2020-04-07 03:24:02
回答 1查看 683关注 0票数 0

我有一个Vue/Nuxt前端,它的功能正常,还有一个Laravel后端,它连接到我的数据库。

我的问题是如何将两者连接起来,并在我的Vue页面中显示数据库中的数据。

如果我使用php artisan serve运行应用程序,我可以从数据库获得正确的数据,但我不能使用Nuxt/Vue的页面转换和仅组件刷新。如果我使用npm run dev运行应用程序,我会得到页面转换和仅组件刷新,但从Axios请求返回的数据是发送页面的超文本标记语言。

因此,我假设这是某种异步问题,但我对此非常陌生,不知道该怎么办。

任何提示或建议都将是一个巨大的帮助。

Axios请求:

代码语言:javascript
运行
复制
created() {
    const { data } = this.$axios
      .get("/items")
      .then((res) => {
        console.log(res);
      })
      .catch((err) => {
        console.log(err);
      });
  },

我没有包括我的控制器,模型等,因为它通过Laravel服务器工作,所以我假设它们设置得很好。不过,如果需要,我可以将它们编辑到帖子中。

EN

回答 1

Stack Overflow用户

发布于 2020-04-08 17:22:16

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

代码语言:javascript
运行
复制
require("dotenv").config()

下面是我在nuxt.config.js中的axios设置:

代码语言:javascript
运行
复制
/*
   ** Axios configuration
   */
  axios: {
    // See https://github.com/nuxt-community/axios-module#options
    baseURL: process.env.BASE_URL,
    headers: {
      common: {
        Accept: "application/json"
      }
    }
  },

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

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/61067425

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档