如何从Vue.js向Laravel更新数据记录？附请求代码示例

嘿，我瞅了你这段Vue请求Laravel更新数据的代码，发现几个容易踩坑的地方，我帮你捋顺下：

首先，更新数据库记录的话，Laravel的RESTful规范里用的是PUT或者PATCH请求，不是POST（POST一般用来新增）。另外你URL里的{address}是个路由占位符，得换成实际要更新的那条地址记录的ID，比如你页面里存了个addressId变量，就这么写：

// 先拼出正确的请求URL，替换占位符
const updateUrl = `http://127.0.0.1:8000/api/addresses/${this.addressId}`;

// 用PUT方法发送请求
this.$http.put(updateUrl, address_data, {
  headers: {
    'Authorization': 'Bearer ' + this.$auth.getToken()
  }
}).then(response => {
  if(response) {
    console.log('更新成功啦！', response.data);
    // 这里可以加刷新数据、提示用户之类的逻辑
  }
}, error => {
  console.error('更新失败了', error.response.data);
  // 比如弹出错误提示给用户
});

你得在routes/api.php里定义对应的更新路由，要么用RESTful资源路由，要么单独写：

use App\Http\Controllers\AddressController;

// 推荐用资源路由，自动包含update方法（只启用update的话加only）
Route::resource('addresses', AddressController::class)->only(['update']);

// 或者单独写PUT路由也行
Route::put('/addresses/{address}', [AddressController::class, 'update']);

在AddressController里，要处理请求、验证数据然后更新记录，示例代码如下：

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Address;

class AddressController extends Controller
{
    public function update(Request $request, Address $address)
    {
        // 先验证提交的数据是否符合要求
        $validatedData = $request->validate([
            'name' => 'required|string|max:255',
            'address' => 'required|string',
            'telephone_no' => 'required|string',
            'email' => 'required|email',
            'user_id' => 'required|exists:users,id'
            // 如果是上传图片，这里要改成'image' => 'nullable|image|mimes:jpeg,png,jpg|max:2048'
        ]);

        // 更新这条地址记录
        $address->update($validatedData);

        // 返回成功响应
        return response()->json([
            'message' => '地址更新成功',
            'data' => $address
        ], 200);
    }
}

如果你这里的image是用户上传的文件，那不能直接用普通的JSON对象发送，得用FormData来包装数据，不然Laravel收不到文件：

// 构建FormData对象
const formData = new FormData();
formData.append('name', this.dname);
formData.append('address', this.address);
formData.append('telephone_no', this.telephone_no);
formData.append('email', this.email);
formData.append('user_id', this.user_id);

// 把图片文件加进去（假设你通过input选择了文件，存在this.image里）
if (this.image) {
  formData.append('image', this.image);
}

const updateUrl = `http://127.0.0.1:8000/api/addresses/${this.addressId}`;

this.$http.put(updateUrl, formData, {
  headers: {
    'Authorization': 'Bearer ' + this.$auth.getToken(),
    'Content-Type': 'multipart/form-data' // 这个头必须加，不然文件传不上去
  }
}).then(response => {
  // 成功逻辑
}, error => {
  // 错误处理
});

内容的提问来源于stack exchange，提问作者abu abu