使用 Vue.js 和 Laravel 实现动态 CRUD 操作

2023-11-21 09:31:15

在上一节教程中，我们探索了 Vue 路由的强大功能，它使我们能够使用动态路径参数获取组件数据。现在，我们准备转向构建一个真正的 CRUD（增删改查）功能，其中此部分将重点介绍编辑现有用户。

剖析动态路由

在处理第一个表单时，我们对定义动态 Vue 路由有了深入的了解。动态路由本质上是带有占位符的路由，该占位符在渲染组件时用实际值替换。在我们的例子里，路由是这样的：

/users/:id/edit

占位符 :id 将在渲染组件时用用户的 ID 替换。这允许我们轻松地从服务器获取特定用户的详细信息，以便在表单中预填充数据。

构建编辑表单

编辑表单位于 resources/views/users/edit.blade.php 文件中。它使用 v-model 指令与 Vue 组件进行通信，使我们能够在表单字段中动态更新数据。对于一个简单的编辑用户表单，代码如下：

<form action="/users/{{ $user->id }}" method="POST">
  @csrf
  @method('PUT')

  <label for="name">姓名</label>
  <input type="text" id="name" name="name" v-model="user.name">

  <label for="email">邮箱</label>
  <input type="email" id="email" name="email" v-model="user.email">

  <button type="submit">更新</button>
</form>

处理表单提交

当用户提交编辑表单时，Vue.js 会触发 submit 事件并调用我们定义的 updateUser 方法。此方法将更新的用户信息发送回服务器进行处理：

methods: {
  updateUser() {
    axios.put(`/users/${this.user.id}`, this.user)
      .then(response => {
        // 处理成功的响应
      })
      .catch(error => {
        // 处理错误响应
      });
  }
}