本文详解 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"
这是完全无效的路径：
Json Schema Toolkit
下载
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
-
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 后端）。
✅ 完整修复步骤
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" />
</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" /> </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）与后端（Laravel8000）端口不同，需配置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路径。 - Vue 模板中
