1. 首页
  2. Laravel

与Laravel一起打造Vue水疗中心第5部分

我们在第4部分结束了编辑用户的功能,并学习了如何使用v-model跟踪视图组件user属性的更改。现在,我们准备好研究删除用户以及在删除操作成功后如何处理用户界面。

在此过程中,我们将研究构建Axios客户端实例,以便在配置API客户端时实现更大的灵活性。

更新API以处理删除用户

我们要做的第一件事是定义用于删除单个用户的API路由。由于路由模型绑定,这只是***2中的几行:

1public function destroy(User $user)
2{
3$user->delete();
4
5return response(null, 204);
6}

接下来,在routes/api.php文件的Api组底部定义新路由:

1Route::namespace(\"Api\")->group(function () {
2Route::get(\"/users\", \"UsersController@index\");
3Route::get(\"/users/{user}\", \"UsersController@show\");
4Route::put(\"/users/{user}\", \"UsersController@update\");
5Route::delete(\"/users/{user}\", \"UsersController@destroy\");
6});

删除前端的用户

我们将向/users/:id/edit视图组件添加删除功能,通过在\”更新\”按钮下的UsersEdit.vue组件中添加一个删除按钮:

1<div>
2<button>
3<button>
4</div>

我们从更新按钮复制了:disabled属性,我们可以使用该属性来防止在操作发生时意外更新或删除。

下一步,我们需要连接onDelete()回调来处理删除用户:

1onDelete() {
3
4api.delete(this.user.id)
6console.log(response);
7});
8}

我们在API客户机上调用delete()函数,然后链接回调以注销控制台中的响应对象。如果单击\”删除\”,更新和删除按钮将被禁用,因为我们正在设置>——我们将在一秒钟内回到这一点。如果打开控制台,您将看到一个204 No Content响应对象,指示删除操作已成功。

如何对成功删除的用户做出反应

与更新用户稍有不同的一点是,一旦删除记录,数据库中就没有用户了。在传统的web应用程序中,我们可能会删除该记录,然后将用户重定向回所有用户的列表。

我们可以在SPA中通过编程将用户导航回/users页来完成这项工作:

1this.$router.push({ name: \"users.index\" })

this.$router.push()调用应用到我们的事件,最基本的版本是这样的:

1onDelete() {
3api.delete(this.user.id)
5this.$router.push({ name: \"users.index\" });
6});
7}

如果你刷新应用程序并删除一个用户,你会注意到一个被禁用的按钮的短暂闪烁,然后浏览器导航到/users页面而没有任何反馈。

我们可以用一个专门的toast/通知机制来处理通知用户的问题。我让你来决定方法,但是这里有一个我要说的基本概念:

1onDelete() {
3api.delete(this.user.id)
7});
8}

上面的代码设置了我们在第4部分中设置的this.message数据属性,并在导航到/users索引页之前等待两秒钟。

您还可以使用portal vue或布局中的组件来临时(或使用(强制关闭按钮)以指示操作成功(或失败)给用户一些反馈。

四Oh四从ModelNotFoundException轻松渲染404.blade.php。不过,SPA有点不同。以上路线有效,因此,我们需要我们的组件来呈现错误组件,而不是将用户重定向到一个专用的404路由。

我们将在resources/assets/js/app.js中添加一些新路由到Vue路由器配置,其中包含一个专用的404视图和一个catch all组件,该组件重定向与404路由不匹配的路由:

1{ path: \"/404\", name: \"404\", component: NotFound },
2{ path: \"*\", redirect: \"/404\" },

我们将创建一个位于resources/assets/js/views/NotFound.vue的简单NotFound组件:

1<template>
2<div>
3<h2>Not Found</h2>
4<p>Woops! Looks like the page you requested cannot be found.</p>
5</div>
6</template>

因为我们在Laravel的后端有一个catch all路由,这意味着如果该路径与定义的路由不匹配,前端还需要一个catch all路由来响应404页。这里的后端路由是一个刷新器,它捕获所有路由并发送SPA模板:

1Route::get(\"/{any}\", \"SpaController@index\")
2->where(\"any\", \".*\");

如果您输入了一个无效的URL,如/does-not-exist,您将看到如下内容:

Vue路由器点击通配符路由,它将浏览器重定向到/404

我们前面的示例中的用户id无效,但仍然无法工作,因为从技术上讲,路由是有效的。我们需要更新UsersEdit组件以捕获create()回调中失败的请求,并将用户发送到404路由:

1created() {
2api.find(this.$route.params.id)
>
>
>
6})
>
8this.$router.push({ name: \"404\" });
9});
10}

现在如果您直接向/users/2000/edit这样的URI发出请求,您应该看到应用程序重定向到404页,而不是挂在UsersEdit组件中的\"加载…\"UI上。

API客户端选项

尽管我们专用的users.jsHTTP客户端在一个小型应用程序中可能被认为是杀伤力过大,但我认为这种分离已经为我们提供了很好的服务,因为我们在多个组件中使用了API模块。如果您想了解灵活客户端提供的所有细节,我将在构建灵活的Axios客户端的文章中详细讨论这个想法。

与Laravel一起打造Vue水疗中心第5部分 为WP2原创文章,链接:https://www.wp2.cn/laravel/%e4%b8%8elaravel%e4%b8%80%e8%b5%b7%e6%89%93%e9%80%a0vue%e6%b0%b4%e7%96%97%e4%b8%ad%e5%bf%83%e7%ac%ac5%e9%83%a8%e5%88%86/

发表评论

您的电子邮箱地址不会被公开。