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

在第3部分中,我们停止了构建真实用户端点,并了解了使用Vue路由器获取组件数据的新方法。现在,我们准备将注意力转移到为用户创建CRUD功能上。本教程将着重于编辑现有用户。 在使用第一个表单的同时,我们将有机会了解如何定义动态Vue路由。我们路由的动态部分将是与他或她的数据库记录匹配的用户ID。对于编辑用户,Vue路由将如下所示: 1/users/:id/edit 此路由的动态部分是:id参数,它将取决于用户的ID。我们将使用数据库中的id字段,但您也可以使用UUID或其他内容。在关注Vue组件之前,请先检查设置,我们需要定义一个新的API端点来获取一个单独的用户,然后我们需要指定另一个端点来执行更新。 打开routes/api.php路由文件,并在获取所有用户的index路由下添加以下路由: 1Route::namespace(\"Api\")->group(function () {2Route::get(\"/users\", \"UsersController@index\");3Route::get(\"/users/{user}\", \"UsersController@show\");4}); 使用Laravel的隐式路由模型绑定,我们的控制器方法是直截了当。将以下方法添加到app/Http/Controllers/Api/UsersController.php文件中: 1// app/Http/Controllers/Api/UsersController23public function show(User $user)4{5return new UserResource($user);6} 在类似/api/users/1的位置请求用户将返回以下JSON响应: 1{2\"data\": {3\"name\": \"Antonetta Zemlak\",4\"email\":\"znikolaus@example.org\"5}6} 第3部分中的UserResource需要更新以包含id列,因此您应该更新app/Http/Resources/UserResource.php文件以包含id数组键。我将把第3部分的整个文件粘贴到这里: 1 6mode: \"history\", 7routes: [ 8{ 9path: \"/\",10name: \"home\",11component: Home12},13{14path: \"/hello\",15name: \"hello\",16component: Hello,17},18{19path: \"/users\",20name: \"users.index\",21component: UsersIndex,22},23{24path: \"/users/:id/edit\",25name: \"users.edit\",26component: UsersEdit,27},28],29}); 我们已经将users.edit路由添加到routes配置的末尾。 下一步,我们需要在resources/assets/js/views/UsersEdit.vue处创建UsersEdit组件,组件代码如下: 1 2 3 4 5 6 7 8 910111213141516171819export default {20data() {21return {22user: {23id: null,24name: \"\",25email: \"\"26}27};28},29methods: {30onSubmit(event) {31// @todo form submit event32}33},34created() {35// @todo load user details36}37};38 让我们首先关注模板部分:我们在结束div前后呈现,因为很快我们需要在加载用户数据后有条件地显示表单。。 标记有一个占位符@submit事件,我们定义了一个onSubmit()方法处理程序,它接受一个事件对象。最后我要提到的是元素上的v-model属性,它映射到附带的data.users对象文本。我们已经删除了id、name和email的默认值。 此时,如果您加载/users/1/edit,您将看到呈现的是一个空表单: 我们打算编辑现有的用户,因此下一步是弄清楚如何从路由中获取动态:id属性并从UsersEdit.vue加载用户数据组件。使用专用客户机加载用户详细信息 在加载组件中的用户数据之前,我们将进行一项附带任务,将/api/users资源提取到专用的API模块中,我们可以使用该模块查询所有用户、单个用户和更新用户。 首先,我们将创建一个新的文件夹和文件来存放我们后端的API模块。您可以按任何方式创建这些文件。我们将从Nix命令行上的命令行演示: 1mkdir -p resources/assets/js/api/2touch resources/assets/js/api/users.js users.js组件将公开一些函数,我们可以调用这些函数对/api/users资源执行操作。这个模块相对简单,但是以后可以允许您在API请求之前或之后进行任何映射、数据操作等。此文件用作可重用API操作的存储库: 1import axios from \"axios\"; 2 3export default { 4all() { 5return axios.get(\"/api/users\"); 6}, 7find(id) { 8return axios.get(`/api/users/${id}`); 9},10update(id, data) {11return axios.put(`/api/users/${id}`, data);12},13}; 现在,我们可以使用相同的模块获取所有用户,以及查找和更新单个用户: 1// Get all users34// Find a user5client.find(userId); 目前,all()方法不接受任何分页查询参数,但我将由您来实现分页并替换我们需要的内容使用我们新的all()客户端函数加载UsersIndex.vue组件。从UsersEdit组件加载用户 现在我们有了一个可重用但非常基本的API客户端,我们可以在呈现编辑页时将其用于加载用户数据。 我们最初在组件上删除了一个created()函数,这就是我们现在请求用户数据的地方: 1// UsersEdit.vue Component 2 3import api from \"../api/users\"; 4 5export default { 6// ... 7created() {>>11});12}13}14 我们的created()回调调用users.js客户端find()函数,该函数返回一个承诺。在Promise回调中,我们设置了一个loaded数据属性(我们还没有创建),并设置了this.user数据属性。 让我们将loaded属性添加到data键中,并在默认情况下将其设置为false: 1data() { 2return { 3loaded: false, 4user: { 5id: null, 6name: \"\", 7email: \"\" 8} 9};10}, 因为我们的组件加载了

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