经过 Laravel 建立一个 Vue 单页面应用（五）

文章转发自专业的Laravel开发者社区，原始连接：learnku.com/laravel/t/3…

咱们在第4部分完成了编辑用户的功能，而且学习了如何使用 v-model 来监听视图组件中用户信息的更改。如今咱们能够开始构思删除用户功能，以及删除操做成功后如何处理 UI 变化。

在这个过程当中，咱们将会考虑构建一个 Axios 客户端实例，以便咱们在配置 API 客户端时具备更高的灵活性。

更新 API 添加删除用户的功能

咱们要作的第一件事就是定义删除单个用户的 API 路由。 得益于 Laravel 的路由模型绑定，咱们只须要在 UsersController 中添加寥寥几行的代码就能够实现删除单个用户的功能：

public function destroy(User $user)
{
    $user->delete();

    return response(null, 204);
}

复制代码

接下来，须要在  routes/api.php 文件的 Api 路由组的底部定义新的路由。

Route::namespace('Api')->group(function () {
    Route::get('/users', 'UsersController@index');
    Route::get('/users/{user}', 'UsersController@show');
    Route::put('/users/{user}', 'UsersController@update');
    Route::delete('/users/{user}', 'UsersController@destroy');
});

复制代码

在前端删除用户

咱们将经过编辑 UsersEdit.vue 组件，在Update按钮下新增一个Delete按钮的方式，向 /users/:id/edit 视图组件中添加删除功能。

<div class="form-group">
    <button type="submit" :disabled="saving">Update</button>
    <button :disabled="saving" @click.prevent="onDelete($event)">Delete</button>
</div>

复制代码

咱们从Update按钮中复制 :disabled 属性到Delete按钮中，从而防止咱们在执行某个操做时，致使意外的更新或者删除。

接下来，咱们要在Delete按钮上绑定  onDelete()  回调，从而实现删除用户的功能。

onDelete() {
  this.saving = true;

  api.delete(this.user.id)
     .then((response) => {
        console.log(response);
     });
}

复制代码

咱们在 API 客户端调用 delete() 方法 ，而后绑定一个回调函数来注销控制台中的响应对象。若是单击“删除”按钮 ，更新和删除按钮将被禁用，由于咱们当前设置这个 this.saving = true —咱们立刻会讨论这个问题。 若是你开启了控制台，你将会看到一个内容为 204 No Content 的响应对象，这说明删除成功。

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

与更新一个用户不一样的一点是，一旦咱们成功删除了一个用户记录，那么数据库中就没有这个用户的记录了。在传统的网页应用中，咱们会删除那条用户记录，而后重定向返回用户列表。

在咱们的SPA单页应用中，咱们也能够经过编程方式将用户导航到 /users 页面的方式来实现这一点：

this.$router.push({ name: 'users.index' })

复制代码

在咱们的删除事件中应用 this.$router.push() 函数，最第一版本的删除事件应该是这个样子：

onDelete() {
  this.saving = true;
  api.delete(this.user.id)
     .then((response) => {
        this.$router.push({ name: 'users.index' });
     });
}

复制代码

若是你刷新应用，而且删除一个用户，你将会注意到禁用按钮的一个短暂的闪烁，而后而后浏览器在没有任何反馈的状况下导航到 /users 页面。

咱们可使用一个专门的弹窗/通知机制来通知用户。抛砖引玉，我会提供给你一个粗略版本的代码，可是这只是我针对这个问题的一个基本的想法。

onDelete() {
  this.saving = true;
  api.delete(this.user.id)
     .then((response) => {
        this.message = 'User Deleted';
        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有些不一样。 上述路由是有效的，因此咱们须要咱们的组件渲染 error 组件或者将用户重定向到一个专用的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组件 :

<template>
  <div>
    <h2>Not Found</h2>
    <p>Woops! Looks like the page you requested cannot be found.</p>
  </div>
</template>

复制代码

由于在后端的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 组件的“ Loading... ” UI 上。

API客户端选项

尽管咱们奉献的 users.js 在小型应用程序中，HTTP 客户端可能被认为是有点小题大作了，我认为分离已经为咱们提供了很好的服务，由于咱们在多个组件中使用了 API 模块。若是你想了解灵活客户端提供的全部细节，我在个人文章构建灵活的Axios客户端中详细讨论了这个想法。 在不改变客户机的外部 API 的状况下，咱们能够改变客户机在后台的工做方式。例如，咱们能够建立一个具备自定义配置和默认值的 Axios 客户端实例：

import axios from 'axios';

const client = axios.create({
  baseURL: '/api',
});

export default {
  all(params) {
    return client.get('users', params);
  },
  find(id) {
    return client.get(`users/${id}`);
  },
  update(id, data) {
    return client.put(`users/${id}`, data);
  },
  delete(id) {
    return client.delete(`users/${id}`);
  },
};

复制代码

如今，若是我想定制整个模块的工做方式而不影响方法，我能够在之后用一些配置替换掉 baseURL。

接下来是什么

咱们学习了如何经过Vue路由器在前端删除用户并对成功删除作出响应.。咱们经过在主app.js文件中用vue.use（vue router）注册vue路由器，引入了经过this.$router属性的编程导航。

接下来，咱们将转向构建用户建立，以总结如何执行基本的建立、读取、更新和删除（CURD）操做。此时，您应该拥有本身完成建立新用户所需的全部工具，所以能够在本系列的下一篇文章发布以前尝试构建此功能。

准备好后，请查看第6部分-建立新用户