在 Laravel API 中使用 PUT 方法从 Vue.js 发送数据时出错？这里有解决方案！

vue.js

2024-03-25 04:24:03

在 Laravel API 中使用 PUT 方法从 Vue.js 发送数据

概述

使用 PUT 方法更新后端数据库时，开发者可能会遇到从 Vue.js 发送数据到 Laravel API 的问题。本文将提供一个详细的指南，解决此问题并提供一个可行的工作解决方案。

问题陈述

当使用 axios 从 Vue.js 发送 PUT 请求时，前端似乎没有向后端发送任何数据，导致 API 返回“数据错误”响应。

解决方案

要解决此问题，我们需要对 Vue.js 和 Laravel 端的代码进行修改：

Vue.js 前端：

使用 FormData 对象发送数据，如下所示：

const formData = new FormData();
formData.append('json', JSON.stringify(data));

Laravel 后端：

在控制器中，使用以下代码获取 JSON 数据：

$json = $request->input('json', null);

示例代码

Vue.js 前端：

editCustomer() {
  const data = {
    name: this.name,
    surname: this.surname,
    phone: this.phone,
    email: this.email
  };

  const formData = new FormData();
  formData.append('json', JSON.stringify(data));

  const url = `api/customers/update/${this.id}`;

  axios.put(url, formData)
    .then(res => {
      console.log(res.data.status);
    })
    .catch(error => {
      console.log(error);
    });
}

Laravel 后端：

public function update($id, Request $request) {

  $json = $request->input('json', null);
  $params_array = json_decode($json, true);

  // ... 其他代码略 ...
}