Laravel API 数据获取失败的常见原因与 Vue.js 正确调用方案-php教程-PHP中文网

Laravel API 数据获取失败的常见原因与 Vue.js 正确调用方案

本文详解 laravel + vue.js 项目中无法通过 axios 获取数据库数据的核心问题：api 路由配置错误、前端请求路径不匹配及组件通信缺陷，并提供完整可运行的修复方案。

本文详解 laravel + vue.js 项目中无法通过 axios 获取数据库数据的核心问题：api 路由配置错误、前端请求路径不匹配及组件通信缺陷，并提供完整可运行的修复方案。

在 Laravel 与 Vue.js（尤其是 Inertia 或纯 Axios 集成）协作开发中，一个高频报错现象是：表格仅渲染表头，但无实际数据——看似“接口已调用”，实则请求根本未命中正确后端端点。你当前代码中的关键症结在于 API 请求 URL 错误。

? 问题定位：路由路径不匹配

你在 Welcome.vue 中硬编码了：

url: "http://localhost:5174/routes/api.php"

这是完全无效的路径：

routes/api.php 是 Laravel 的路由定义文件，不是可访问的 HTTP 接口；
Laravel 的 API 路由默认通过 /api/xxx 前缀暴露，且需经 RouteServiceProvider 注册并由 api 中间件组处理；
你已在 routes/api.php 中正确定义了资源路由：Route::resource('firma', 'FirmaController');，它会自动注册标准 RESTful 端点（如 GET /api/firma）。

✅ 正确做法是将请求地址改为：

url: "/api/firma" // 推荐使用相对路径，避免跨域和端口硬编码

或确保开发服务器代理配置正确（如 Vite 的 server.proxy），而非直连 5174 端口（该端口通常属于 Vite 开发服务器，不应直接访问 Laravel 后端）。

Json Schema Toolkit

使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。

下载

✅ 完整修复步骤

1. 更新 `Welcome.vue` 请求逻辑（推荐使用 Composition API + `onMounted`）

<script setup>
import { onMounted, ref } from 'vue'
import axios from 'axios'
import FirmenListe from './FirmenListe.vue'

const firmas = ref([])

onMounted(async () => {
  try {
    const response = await axios.get('/api/firma')
    firmas.value = response.data.data || response.data // 注意：Resource Controller 默认返回 `data` 包裹（Laravel 9+ 分页响应为 `data` 数组；若未分页，可能直接返回数组）
  } catch (error) {
    console.error('Failed to fetch firms:', error.response?.data || error.message)
  }
})
</script><template><div class="body">
    <firmenliste :firmas="firmas"></firmenliste>
</div>
</template>

2. 修正 `FirmenListe.vue` 模板结构

标签在 <table> 内部是非法 HTML，应改为 <code><tbody>；<li> <code>v-for 应作用于 <tr> 元素，而非包裹它的 <code><tr> 外层容器。<pre class="brush:php;toolbar:false;"><template><div class="firma-liste"> <div class="data"> <table class="ui celled table"> <thead><tr> <th>ID</th> <th>Firmenname</th> </tr></thead> <tbody><tr v-for="firma in firmas" :key="firma.id"><firmen :firma="firma"></firmen></tr></tbody> </table> </div> </div> </template><script setup> import Firmen from './Firmen.vue' defineProps({ firmas: { type: Array, default: () => [] } }) </script></pre> <h4>3. 修正 <code>Firmen.vue 模板语法与 props 命名
- Vue 模板中 {} 是文本插值语法（仅适用于 Vue 2 的 v-text 场景），Vue 3 应使用双花括号 {{ }}；
- Props 名称建议语义化（firma 而非 firmas，因单个对象）；
- 确保后端返回字段名为 firmenname（与数据库列一致）。
```
<template><td>{{ firma.id }}</td>
  <td>{{ firma.firmenname }}</td>
</template><script setup>
defineProps({
  firma: {
    type: Object,
    required: true
  }
})
</script>
```
4. 验证后端控制器返回格式（关键！）

确保 FirmaController@index 返回标准 JSON 响应：
```
// app/Http/Controllers/FirmaController.php
public function index()
{
    return Firma::all(); // 或 ->get()，返回集合，Laravel 自动转为 JSON 数组
    // 若需分页：return Firma::paginate(10);
}
```
⚠️ 注意：若使用 paginate()，前端需访问 response.data.data；若用 all()，则直接为数组。

? 补充注意事项
- CORS 配置：本地开发时，若前端（Vite 5174）与后端（Laravel 8000）端口不同，需配置 fruitcake/laravel-cors 或 Laravel 9+ 内置 CORS 支持；
- 认证中间件：你路由中使用了 auth:sanctum，若未登录，请求将被拒绝。开发阶段可临时移除中间件测试：Route::resource('firma', 'FirmaController')->withoutMiddleware(['auth:sanctum']);；
- 调试技巧：在浏览器 Network 面板检查请求是否发出、状态码（如 404 表示路由不存在，401 表示未授权）、响应内容是否符合预期。
遵循以上修复，即可实现 Laravel 数据库 → API → Vue.js 的稳定链路，让公司列表真实渲染。核心原则始终是：前端 URL 必须精确匹配 Laravel php artisan route:list 输出的 GET api/firma 路径。