Javascript 如何使用Laravel后端和Vue前端从数据库中获取数据？

你好，斯塔克兄弟

作为一个辅助项目，我试图教自己一些基本的全栈开发。这是一个非常有趣的领域，我非常想提高我的技能

我当前的任务只是通过后端从数据库获取数据，然后在前端以表的形式显示数据。我选择的后端是Laravel，我将其与Vue和引导Vue一起用于前端部分

下面是我在HomeController.php文件中的代码，我从标准用户表中获取所有数据库条目

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use \App\User

class HomeController extends Controller
{
    /**
     * Create a new controller instance.
     *
     * @return void
     */
    public function __construct()
    {
        $this->middleware('auth');
    }

    /**
     * Show the application dashboard.
     *
     * @return \Illuminate\Contracts\Support\Renderable
     */
    public function index()
    {
        $users = User::all();
        return view('home', compact('users'));
    }
}

但是，我仍停留在这一点上，不知道如何将

$users

传递到vue中，并用我的数据库数据替换

项：[……]

我意识到有很多在线教程（CRUD教程）处理这个问题，但是大多数都是以“获取此代码并将其粘贴到此处”的形式出现的。当我试图学习它没有帮助我使用别人的代码从一个教程，在这个过程中不知道如何，何时，何地和什么

在我愤怒的“如何谷歌搜索”中，我遇到了以下用户遇到的类似问题。我按照相关链接阅读了Vue文档中的

道具

，但是我仍然不知道如何操作

因此，我请求你们，各位堆垛工，给予帮助/帮助/指导/智慧

编辑：我的大多数“谷歌搜索”都说我必须使用AJAX请求，因此，由于我使用的是Laravel，我知道axios是实现这一点的内置工具。

快速而肮脏 您可以将JSON中的数据作为道具传递

导出默认值{
道具：[“用户”]
}

---

API方式 每当我看到Vue和Laravel时，我的想法就会直接转到SPA（单页应用程序）。在这里，所有web路由（/home、/users等）只显示一个视图，即应用程序本身，然后应用程序将通过对服务器的API调用（/API/users、/API/posts）获得所需的任何数据

在上述体系结构中，您的控制器中会有一个新方法（例如，

\u users（）

），该方法返回所有用户的JSON数据，然后前端可以使用该数据

（您也可以使用此功能，而无需将整个设备作为SPA）

\u users（）{//在routes.php中以/api/users的形式解决此问题
$users=users:：all（）
return$users；//Laravel将自动转换为数组和json_编码
}

导出默认值{
数据（）{
返回{
用户：[]
}
},
方法：{
getUsers（）{
获取（'/api/users'））
。然后（响应=>{
this.users=response.data
})
}
},
安装的（）{
这个文件名为getUsers（）
}
}

axios是内置工具

-内置在何处？-关于如何使用axios使用API，您是否阅读过vuejs示例（食谱）？这就是Laravel“附带”的用于处理HTTP请求的库，也许我选择vocab作为“内置”和“工具”并不完全正确。@JaromandaX不，我还没有查看该链接，但是我看到它包含大量信息，我现在将处理它！谢谢

axios

是一个用于AJAX的客户端“库”——无论如何，这本食谱的代码应该是help@JaromandaX当您使用composer或Laravel安装程序以及Vue创建新的Laravel项目时，axios与它们捆绑在一起

@extends('layouts.app')

@section('content')
    <my-component></my-component>
@endsection

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <b-table
                :striped="striped"
                :bordered="bordered"
                :borderless="borderless"
                :outlined="outlined"
                :small="small"
                :hover="hover"
                :dark="dark"
                :fixed="fixed"
                :foot-clone="footClone"
                :no-border-collapse="noCollapse"
                :items="items"
                :fields="fields"
                :head-variant="headVariant"
                :table-variant="tableVariant"
                ></b-table>
            </div>
        </div>
    </div>
</template>

<script>
  export default {
    data() {
      return {
        fields: ['name', 'email', 'age'],
        items: [
          { age: 40, first_name: 'Dickerson', last_name: 'Macdonald' },
          { age: 21, first_name: 'Larsen', last_name: 'Shaw' },
          { age: 89, first_name: 'Geneva', last_name: 'Wilson' }
        ],
        tableVariants: [
          'primary',
          'secondary',
          'info',
          'danger',
          'warning',
          'success',
          'light',
          'dark'
        ],
        striped: true,
        bordered: false,
        borderless: false,
        outlined: false,
        small: false,
        hover: false,
        dark: false,
        fixed: false,
        footClone: false,
        headVariant: null,
        tableVariant: '',
        noCollapse: false
      }
    }
  }
</script>