![fe58850d5ffa164fc784139af527f5ba.png](https://i-blog.csdnimg.cn/blog_migrate/c4a342e7d018482f507b3fe0b0874ed5.jpeg)
文章转发自专业的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>