【问题标题】：How to get Laravel api resource based data in Vue如何在 Vue 中获取基于 Laravel api 资源的数据
【发布时间】：2019-01-14 00:58:03
【问题描述】：

我正在尝试显示user_id 列与auth()->user()->id 匹配的用户项目列表。

我的问题是如何定义我的资源路由使用什么功能。

代码

Controller

class ProjectController extends Controller
{
    public function index()
    {
        $projects = Project::orderby('id', 'desc')->latest()->take(10)->get();
        return response()->json($projects);
    }

    public function userprojects()
    {
        $projects = Project::orderby('id', 'desc')->where('user_id', '=', Auth::user()->id)->get();
        return $projects;
    }
}

Api route

Route::resource('projects', 'Api\ProjectController', ['except' => ['create', 'edit', 'destroy']]);

Vue component

<template>
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header">Your Published Projects <span class="badge badge-info">{{projects.length}}</span></div>

                <div class="card-body">
                    <ul>
                        <li v-for="project in projects" :key="project.id">
                            {{project.title}} - {{project.user_id}}
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            projects: []
        }
    },
    created(){
            this.fetchProjects();
        },
        methods:{
            fetchProjects(){
                var self = this;
                axios.get('api/projects')
                    .then(function (resp) {
                        self.projects = resp.data;
                })
                .catch(function (resp) {
                    console.log(resp);
                        alert("Could not load projects");
                });
            },
        },
}
</script>

问题

如何告诉我的组件不加载 index 函数而是加载来自userprojects 函数的数据？

【问题讨论】：

标签： laravel vue.js

【解决方案1】：

所以你可以添加一条新路线

Route::get('projects-user', 'Api\ProjectController@userprojects')->name('userprojects');

在js中。

axios.get(Router('userprojects').url()).then(response => {
    this.userprojects= response.data;
});

您也可以在控制器中执行此操作

class ProjectController extends Controller
{
    public function index()
    {
      if(Auth::check()){
        $projects = Project::orderby('id', 'desc')->where('user_id', '=', Auth::user()->id)->get();
      }else{
        $projects = Project::orderby('id', 'desc')->latest()->take(10)->get();
      }

        return response()->json($projects);
    }

}

【讨论】：

是两个不同的东西，兄弟，我需要我的索引来加载所有项目和我的其他功能来向他们展示每个用户项目。
所以你可以添加一个新的路由 Route::get('projects-user', 'Api\ProjectController@userprojects')->name('userprojects');在 js 中。 axios.get(Router('userprojects').url()).then(response => { this.userprojects= response.data; });

【解决方案2】：

您可以在资源路由之前创建一个新路由并使用它：

Route::get('projects/me', 'Api\ProjectController@userprojects', ['except' => ['create', 'edit', 'destroy']]);
Route::resource('projects', 'Api\ProjectController', ['except' => ['create', 'edit', 'destroy']]);

然后在你的组件上：

axios.get('api/projects/me')
.then(function (resp) {
    self.projects = resp.data;
})

【讨论】：

谢谢兄弟，我做到了它会识别路线但是它在Auth::user()->id 中出现id 错误所以我尝试了Auth::id() 它返回[] 然后我尝试了硬编码的id，它确实做到了工作，现在我应该如何在 api 控制器中获取我的身份验证用户 ID？它似乎与通常的控制器不同，我们只需通过 Auth::user()->id 获取 aut 用户 ID
改用Auth::user()->getKey()。
Auth::user()->getKey() 根据模型中 $primaryKey 属性的值解析表的 id 列。
它返回Call to a member function getKey() on null
这意味着您没有通过身份验证。