如何利用Laravel创建Vue单页应用（第五部分）

在上一部分，我们成功实现了编辑用户的功能，并了解了如何使用 v-model 来监视视图组件中用户信息的更改。现在，我们继续构建删除用户的功能，并探讨删除操作成功后如何处理 UI 变化。在这个过程中，我们将创建一个 Axios 客户端实例，以便我们在配置 API 客户端时具有更多灵活性。

1. 创建 Axios 客户端实例

首先，我们需要创建一个 Axios 客户端实例，以便我们能够与后端 API 进行通信。在 resources/js/app.js 文件中，添加以下代码：

import axios from 'axios';

const API_URL = 'http://localhost:8000/api/users';

export default axios.create({
  baseURL: API_URL,
  headers: {
    'Content-Type': 'application/json',
  },
});

这个客户端实例将被用来发送 API 请求到我们定义的 API_URL，也就是后端 API 的根路径。我们还设置了默认的请求头，以确保所有请求都是以 JSON 格式发送和接收的。

2. 删除用户功能

现在，我们可以开始构建删除用户的功能。在 User.vue 组件中，添加一个名为 deleteUser() 的方法：

deleteUser() {
  // 发送删除请求到API
  axios.delete(`/${this.user.id}`)
    .then(() => {
      // 从列表中移除用户
      this.$emit('userDeleted', this.user.id);

      // 显示成功信息
      this.$bvToast.toast('用户已成功删除！', {
        title: '成功',
        variant: 'success',
        solid: true,
      });
    })
    .catch(error => {
      // 显示错误信息
      this.$bvToast.toast('删除用户时发生错误！', {
        title: '错误',
        variant: 'danger',
        solid: true,
      });
    });
}

这个方法首先向 API 发送一个 DELETE 请求，请求路径是 /users/{id}，其中 {id} 是要删除的用户 ID。如果请求成功，它将从列表中移除用户并显示一条成功信息。如果请求失败，它将显示一条错误信息。

3. 处理 UI 变化

当用户被删除时，我们需要更新 UI 以反映这一变化。为此，我们在 UserList.vue 组件中添加一个名为 userDeleted() 的方法：

userDeleted(userId) {
  // 从列表中过滤掉已删除的用户
  this.users = this.users.filter(user => user.id !== userId);
}

这个方法从列表中过滤掉已删除的用户，并更新 UI 以反映这一变化。

4. 完成删除功能

现在，我们已经成功实现了删除用户的功能，并更新了 UI 以反映这一变化。现在，当用户点击删除按钮时，将向 API 发送一个 DELETE 请求，成功后将从列表中移除用户并显示一条成功信息。如果请求失败，它将显示一条错误信息。

总结

在这一部分中，我们成功实现了删除用户的功能，并探讨了如何在删除操作成功后处理 UI 变化。我们还创建了一个 Axios 客户端实例，以便我们在配置 API 客户端时具有更多灵活性。通过本指南，我们已经从零开始构建了一个完整的用户管理系统，实现了创建、读取、更新和删除（CRUD）功能。我们也探讨了如何使用 Axios 进行 API 请求，以及如何处理 UI 组件与后台数据的交互。本指南适合具有基本编程知识和对 Vue.js 和 Laravel 感兴趣的开发者。