api laravel 统一返回方法_通过 Laravel 创建一个 Vue 单页面应用（四）

文章转发自专业的Laravel开发者社区，原始链接： https:// learnku.com/laravel/t/3 4450

我们在第三部分中放弃构建真实的用户端，而学习使用 Vue 路由获取组件数据的新方式。现在我们准备将注意力转移到为用户创建 CRUD（增删改查）的功能上 —— 本教程将聚焦在编辑已存在的用户。

在处理第一个表单时，我们有机会了解如何定义动态 Vue 路由。我们的路由的动态部分是与用户数据记录匹配的用户 ID。对于编辑用户，Vue 路由如下所示：

/users/:id/edit

这个路由的动态部分是 :id 参数，它将取决于用户的 ID。我们将使用数据库中的 id 字段，但你也可以使用 UUID 或者其他的数据标识。

安装

在处理 Vue 组件之前，我们需要定一个新的 API 接口来获取指定的用户，然后再定义一个接口来处理更新。

打开 routes/api.php 路由文件，在获取全部用户的 index 路由下方添加下面的路由：

Route::namespace('Api')->group(function () {
    Route::get('/users', 'UsersController@index');
    Route::get('/users/{user}', 'UsersController@show');
});

理由 Laravel 内置的路由模型绑定，控制器方法将很简单明了。在 app/Http/Controllers/Api/UsersController.php 中添加下面的方法：

// app/Http/Controllers/Api/UsersController

public function show(User $user)
{
    return new UserResource($user);
}

像 /api/users/1 这样请求一个用户，将返回如下的 JSON：

{
    "data": {
        "name": "Antonetta Zemlak",
        "email":"znikolaus@example.org"
    }
}

第三部分的 UserResource 需要包含 id 列，所以需要更新 app/Http/Resources/UserResource.php 添加 id 键。整个文件如下：

<?php

namespace AppHttpResources;

use IlluminateHttpResourcesJsonResource;

class UserResource extends Resource
{
    /**
     * Transform the resource into an array.
     *
     * @param  IlluminateHttpRequest  $request
     * @return array
     */
    public function toArray($request)
    {
        return [
            'id' => $this->id,
            'name' => $this->name,
            'email' => $this->email,
        ];
    }
}

现在 /api/users 和 /api/users/{user} 路由都将返回 id 字段，通过这个，可以在路由中区分用户。

定义 UsersEdit 组件

定义了 show 之后，我们接着定义 Vue 中的路由和相应的组件。新增相应的路由到 resources/js/app.js 中。下面是引入 UsersEdit 组件（尚未创建）和整个路由实例的代码片段：

import UsersEdit from './views/UsersEdit';

// ...

const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: '/hello',
            name: 'hello',
            component: Hello,
        },
        {
            path: '/users',
            name: 'users.index',
            component: UsersIndex,
        },
        {
            path: '/users/:id/edit',
            name: 'users.edit',
            component: UsersEdit,
        },
    ],
});

我们在 routes 末尾新增了 users.edit 路由。

下一步， 我们需要在 resources/assets/js/views/UsersEdit.vue 中创建 UsersEdit 组件。代码如下：

<template>