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

我们在第4部分结束了编辑用户的功能,并学习了如何使用v-model跟踪视图组件user属性的更改。现在,我们准备好研究删除用户以及在删除操作成功后如何处理用户界面。 在此过程中,我们将研究构建Axios客户端实例,以便在配置API客户端时实现更大的灵活性。更新API以处理删除用户 我们要做的第一件事是定义用于删除单个用户的API路由。由于路由模型绑定,这只是***2中的几行: 1public function destroy(User $user)2{3$user->delete();45return 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组件中添加一个删除按钮: 1234 我们从更新按钮复制了:disabled属性,我们可以使用该属性来防止在操作发生时意外更新或删除。 下一步,我们需要连接onDelete()回调来处理删除用户: 1onDelete() {34api.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组件: 123Not Found4Woops! Looks like the page you requested cannot be found.56 因为我们在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客户端的文章中详细讨论这个想法。

admin_action_{$_REQUEST[‘action’]}

do_action( "admin_action_{$_REQUEST[‘action’]}" )动作钩子::在发送“Action”请求变量时激发。Action Hook: Fires when an ‘action’ request variable is sent.目录锚点:#说明#源码说明(Description)钩子名称的动态部分$_REQUEST['action']引用从GET或POST请求派生的操作。源码(Source)更新版本源码位置使用被使用2.6.0 wp-admin/admin.php:...

日期:2020-09-02 17:44:16 浏览:1127

admin_footer-{$GLOBALS[‘hook_suffix’]}

do_action( "admin_footer-{$GLOBALS[‘hook_suffix’]}", string $hook_suffix )操作挂钩:在默认页脚脚本之后打印脚本或数据。Action Hook: Print scripts or data after the default footer scripts.目录锚点:#说明#参数#源码说明(Description)钩子名的动态部分,$GLOBALS['hook_suffix']引用当前页的全局钩子后缀。参数(Parameters)参数类...

日期:2020-09-02 17:44:20 浏览:1032

customize_save_{$this->id_data[‘base’]}

do_action( "customize_save_{$this->id_data[‘base’]}", WP_Customize_Setting $this )动作钩子::在调用WP_Customize_Setting::save()方法时激发。Action Hook: Fires when the WP_Customize_Setting::save() method is called.目录锚点:#说明#参数#源码说明(Description)钩子名称的动态部分,$this->id_data...

日期:2020-08-15 15:47:24 浏览:775

customize_value_{$this->id_data[‘base’]}

apply_filters( "customize_value_{$this->id_data[‘base’]}", mixed $default )过滤器::过滤未作为主题模式或选项处理的自定义设置值。Filter Hook: Filter a Customize setting value not handled as a theme_mod or option.目录锚点:#说明#参数#源码说明(Description)钩子名称的动态部分,$this->id_date['base'],指的是设置...

日期:2020-08-15 15:47:24 浏览:866

get_comment_author_url

过滤钩子:过滤评论作者的URL。Filter Hook: Filters the comment author’s URL.目录锚点:#源码源码(Source)更新版本源码位置使用被使用 wp-includes/comment-template.php:32610...

日期:2020-08-10 23:06:14 浏览:903

network_admin_edit_{$_GET[‘action’]}

do_action( "network_admin_edit_{$_GET[‘action’]}" )操作挂钩:启动请求的处理程序操作。Action Hook: Fires the requested handler action.目录锚点:#说明#源码说明(Description)钩子名称的动态部分$u GET['action']引用请求的操作的名称。源码(Source)更新版本源码位置使用被使用3.1.0 wp-admin/network/edit.php:3600...

日期:2020-08-02 09:56:09 浏览:848

network_sites_updated_message_{$_GET[‘updated’]}

apply_filters( "network_sites_updated_message_{$_GET[‘updated’]}", string $msg )筛选器挂钩:在网络管理中筛选特定的非默认站点更新消息。Filter Hook: Filters a specific, non-default site-updated message in the Network admin.目录锚点:#说明#参数#源码说明(Description)钩子名称的动态部分$_GET['updated']引用了非默认的...

日期:2020-08-02 09:56:03 浏览:834

pre_wp_is_site_initialized

过滤器::过滤在访问数据库之前是否初始化站点的检查。Filter Hook: Filters the check for whether a site is initialized before the database is accessed.目录锚点:#源码源码(Source)更新版本源码位置使用被使用 wp-includes/ms-site.php:93910...

日期:2020-07-29 10:15:38 浏览:809

WordPress 的SEO 教学:如何在网站中加入关键字(Meta Keywords)与Meta 描述(Meta Description)?

你想在WordPress 中添加关键字和meta 描述吗?关键字和meta 描述使你能够提高网站的SEO。在本文中,我们将向你展示如何在WordPress 中正确添加关键字和meta 描述。为什么要在WordPress 中添加关键字和Meta 描述?关键字和说明让搜寻引擎更了解您的帖子和页面的内容。关键词是人们寻找您发布的内容时,可能会搜索的重要词语或片语。而Meta Description则是对你的页面和文章的简要描述。如果你想要了解更多关于中继标签的资讯,可以参考Google的说明。Meta 关键字和描...

日期:2020-10-03 21:18:25 浏览:1620

谷歌的SEO是什么

SEO (Search Engine Optimization)中文是搜寻引擎最佳化,意思近于「关键字自然排序」、「网站排名优化」。简言之,SEO是以搜索引擎(如Google、Bing)为曝光媒体的行销手法。例如搜寻「wordpress教学」,会看到本站的「WordPress教学:12个课程…」排行Google第一:关键字:wordpress教学、wordpress课程…若搜寻「网站架设」,则会看到另一个网页排名第1:关键字:网站架设、架站…以上两个网页,每月从搜寻引擎导入自然流量,达2万4千:每月「有机搜...

日期:2020-10-30 17:23:57 浏览:1264