Question

堆积如山的堆垛机

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

我当前的任务只是通过后端从数据库中获取数据，然后在前端以表格形式显示数据。我选择的后端是Laravel，我将它与Vue和Bootstrap-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'));
    }
}

然后我将这些条目发送到如下所示的home.blade.php视图：

@extends('layouts.app')

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

在这里，我想将$users数据传递给我的Vue组件（适当地命名为my-component）。

在my-component内，我想在表格中显示姓名和电子邮件。我碰到了Bootstrap-Vue，我非常喜欢它们的组件外观，因此我想学习使用它，在这种情况下，我正在使用它们的table component（请参见下面的实现）。

<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>

无论如何，我仍无法解决如何将$users传递到Vue并将items: [ ... ]替换为数据库数据的问题？

我意识到有很多关于此的在线教程（CRUD教程），但是其中大多数都是“获取此代码并将其粘贴到此处” 的形式。当我尝试学习时，这并没有帮助我使用教程中其他人的代码，并且在此过程中不知道如何，何时，何地和什么。

在愤怒的“如何谷歌搜索”中，我遇到了以下question用户在遇到类似问题的情况。我按照相关链接从Vue文档中阅读了props，但是我仍然对如何做到这一点感到困惑。

因此，我想向您，堆高机同事，寻求您的帮助/协助/指导/智慧。

编辑：大多数“搜索”都说我必须利用AJAX请求，因此，由于我使用Laravel，所以我知道axios是用于执行此操作的内置工具。 / p>

Answer 1

快速又脏

您可以将JSON中的数据作为道具传递

<my-component :users='{{json_encode($users)}}'></my-component>

export default{
    props:['users']
}

API方式

每当我看到Vue和Laravel时，我的想法都会直接进入SPA（单页应用程序）。这是您所有网络路由（/ home，/ users等）的位置，仅显示一个视图，即应用程序本身，然后应用程序将通过对服务器的API调用（/ api / users，/ api）获得所需的任何数据/ posts）

在上述架构中，您的控制器中将有一个新方法（例如_users()），该方法会返回所有用户的JSON数据，然后您的前台就可以使用该数据。

（您也可以在不将整个事情变成SPA的情况下使用它）

_users(){ // resolve this in your routes.php as /api/users
    $users=Users::all()

    return $users; // Laravel will automagically cast toArray and json_encode
}

export default{
    data(){
        return{
            users:[]
        }
    },
    methods:{
        getUsers(){
            axios.get('/api/users')
            .then(response=>{
                this.users=response.data
            })
        }
    },
    mounted(){
        this.getUsers()
    }

}

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

1 个答案:

快速又脏

API方式