javascript - 如何使用 Laravel 后端和 Vue 前端从数据库中获取数据?
问题描述
祝你好!
作为一个附带项目,我正在尝试自学一些基本的全栈开发。这是一个非常有趣的领域,我非常想提高我的技能。
我目前的任务只是通过后端从数据库中获取数据,然后在前端以表格的形式显示出来。我选择的后端是 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,我非常喜欢他们组件的外观,因此我想学习使用它,在这种情况下,我使用的是他们的表格组件(请参阅下面的实现)。
<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 教程),但是其中大部分都是“获取此代码并将其粘贴到此处”的形式。当我试图学习它并没有帮助我使用教程中的其他人的代码时,并且在此过程中不知道如何,何时,何地和什么。
在我愤怒的“如何使用谷歌搜索”中,我遇到了以下问题,用户遇到了类似的问题。我按照相关链接阅读了props
Vue 文档,但是我仍然不知道如何去做。
因此,我向您寻求帮助/协助/指导/智慧。
编辑:我的大部分“谷歌搜索”都说我必须使用 AJAX 请求,因此由于我使用的是 Laravel,我知道 axios 是执行此操作的内置工具。
解决方案
又快又脏
您可以将 JSON 中的数据作为道具传递
<my-component :users='{{json_encode($users)}}'></my-component>
export default{
props:['users']
}
API方式
每当我看到 Vue 和 Laravel 时,我的想法就直接进入了 SPA(单页应用程序)。这是您的所有网络路由(/home、/users 等)仅显示一个视图的位置,即应用程序本身,然后应用程序将通过对服务器的 API 调用(/api/users、/api)获取所需的任何数据/帖子)
在上述架构中,您的控制器中将有一个新方法(例如_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()
}
}
推荐阅读
- machine-learning - sklearn.model_selection GridSearchCV 抛出 KeyError: 'mean_train_score'
- c++ - 标识符 u16 未定义 - 无法在 VS2019 中构建项目,
- reactjs - 如何更新地图功能中的反应带标签状态
- r - ID变量随时间变化,如何通过ID计算pct变化
- android - 如何解析json数据Android
- ios - 如何在 iOS 设备上使用 Flutter 访问传感器信息
- swiftui - 详细列表视图 - 顶部对齐问题
- python - 获取最新的免费数据库索引?
- php - 如何避免卡住的进程?
- javascript - 为什么这适用于箭头函数,而不是常规函数?