通过Laravel创建Vue单页应用（五）

我们将Update按钮的:disabled属性复制到Delete按钮，防止我们在执行操作时不小心更新或删除。接下来，我们需要在删除按钮上绑定onDelete()回调，从而实现删除用户的功能。onDelete(){this.saving=true;api.delete(this.user.id).then((response)=>{console.log(response);});}我们调用API客户端的delete()方法，然后绑定一个注销回调函数控制台中的响应对象。如果单击删除按钮，更新和删除按钮将被禁用，因为我们当前设置this.saving=true-我们稍后会讨论这个。如果打开控制台，会看到一个内容为204NoContent的响应对象，表示删除成功。如何在成功删除用户后给出相应的反馈与更新用户不同。一旦我们成功删除一条用户记录，数据库中就没有该用户的记录了。在传统的Web应用程序中，我们会删除该用户记录并重定向回用户列表。在我们的SPA单页应用程序中，我们还可以通过以编程方式将用户导航到/users页面来执行此操作：this.$router.push({name:'users.index'})在我们的delete中this.$router.push()函数应用于事件。删除事件的原始版本应该是这样的：onDelete(){this.saving=true;api.delete(this.user.id).then((response)=>{this.$router.push({name:'users.index'});});}如果刷新应用程序，并删除一个用户，你会注意到禁用按钮短暂闪烁，然后browse浏览器导航到/users页面，没有任何反馈。我们可以使用专门的弹出/通知机制来通知用户。我将为您提供代码的粗略版本，但这只是我对这个问题的基本想法。onDelete(){this.saving=true;api.delete(this.user.id).then((response)=>{this.message='UserDeleted';setTimeout(()=>this.$router.push({name:'users.index'}),2000);});}上面的代码设置了我们在第4节中设置的this.message数据属性，并在导航到/users页面之前等待2秒。也可以使用portal-vue等插件或者布局中的组件来临时闪现消息（或者在消息弹出后用强制关闭按钮关闭），显示操作是否成功（或失败），从而向用户展示提供反馈。404你可能已经注意到，即使我们的Vue路由匹配/users/:id/edit模式，当用户id不存在时，我们仍然可能收到404响应。使用服务器端Laravel应用程序，我们可以轻松地从ModelNotFoundException渲染404.blade.php。但是SPA有点不同。上面的路由是有效的，所以我们需要我们的组件来渲染错误组件或将用户重定向到专用的404路由。我们将向resources/assets/js/app.js中的Vue路由配置添加一些新路由，这些路由提供专用的404视图和一个将所有不匹配的路由重定向到404路由的包罗万象：{path:'/404',name:'404',component:NotFound},{path:'*',redirect:'/404'}，我们将在resources/assets/js/views/NotFound.vue中创建一个简单的NotFound组件：因为在后端的Laravel程序中有一个通用路由，也就是说前端也需要这样一个通用路由.当访问路径与定义的路由不匹配时，使用404页面作为响应。下面是刷新后台路由，会抓取所有路由信息，渲染SPA模板：Route::get('/{any}','SpaController@index')->where('any','.*');如果你输入一个无效的URL，比如/does-not-exist，你会看到一堆这样的东西：Vue路由器触发一个通配符路由规则，将浏览器重定向到/404。对于我们之前的无效用户ID示例，我们设置的规则仍然无法正常工作，因为从技术上讲，路由是有效的。为了在create()回调中捕获失败的请求信息，并将用户请求重定向到404路由，我们需要更新UsersEdit：created(){api.find(this.$route.params.id).then((response)=>{this.loaded=true;this.user=response.data.data;}).catch((err)=>{this.$router.push({name:'404'});});}现在，如果您直接向/users/2000/edit这样的URI发出请求，您应该会看到您的应用程序重定向到404页面，而不是挂在UsersEdit组件的“正在加载...”UI上。API客户端选项尽管我们专用的users.jsHTTP客户端在小型应用程序中可能被认为是过大的杀伤力，但我认为自从我们使用API模块以来，这种分离对我们很有帮助。如果您想了解灵活客户端提供的所有细节，我在构建灵活的Axios客户端一文中详细讨论了这个想法。在不更改客户端外部API的情况下，我们可以更改客户端在幕后的工作方式。例如，我们可以创建一个具有自定义配置和默认值的Axios客户端实例：返回client.get('用户',参数);},find(id){returnclient.get(`users/${id}`);},update(id,data){returnclient.put(`users/${id}`,data);},delete(id){returnclient.delete(`users/${id}`);},};现在如果我想自定义整个模块的工作方式并且不影响方法，我可以稍后用一些配置替换baseURL。接下来我们学习了如何通过Vue路由器在前端删除用户并响应成功删除。我们通过在主app.js文件中使用vue.use(vuerouter)注册vue路由器，通过this.$router属性引入了编程导航。接下来，我们将转向构建用户创建以总结如何执行基本的创建、读取、更新和删除(CURD)操作。至此，您应该拥有了自己完成创建新用户所需的所有工具，因此请尝试在发布本系列的下一篇文章之前构建此功能。准备就绪后，查看第6部分-创建新用户