Axios、Laravel 和 VueJS 中的删除方法

Question

我正在尝试通过 axios 向 laravel 发送删除请求，如下所示：

axios.delete('api/users/' + this.checkedNames)
.then((response) => {
    console.log(response)
}, (error) => {
    // error callback
})

现在，我从 axios 文档中读到，对于删除请求，我们应该使用 configObject，因此上面的内容可以重写为：

axios.delete('api/users/', {params: {ids:     
    this.checkedNames})
.then((response) => {
    console.log(response)
}, (error) => {
    // error callback
})

然后我在 api.php 中有 Route::resource('users', 'UsersController'); 所以删除的默认路径是：

DELETE| api/users/{user}| users.destroy

控制器的方法是：

|App\Http\Controllers\UsersController@destroy

当我传递单个 ID 时，我能够按预期删除用户，比方说 api/users/12，它被正确删除，但是当我尝试传递上面的数组时，事情变得复杂了。

如果我尝试按照 axios 文档 axios.delete('api/users/', {params: {id: this.checkedNames}}) 看起来我正在发送这个 http://lorillacrud.dev/api/users?id[]=21&id[]=20 但我得到一个 405 方法不允许。

如果我尝试 axios.delete('api/users/' + this.checkedNames ) 我会得到 http://lorillacrud.dev/api/users/20,21 所以在我的销毁方法中我可以抓取 ID 并删除，但我想知道这是否是正确的方法？

更新

我似乎成功了，但我不明白所以仍然感谢任何帮助来理解我实际正在做的事情！

所以，如果更改为：

axios.delete('api/users/destroy', {params: {'id': this.checkedNames})

在我的销毁方法中：

    if ($request->id) {
        foreach ($request->id as $id) {
            User::destroy($id);
        }
    }
    User::destroy($id);
}

所以...

// not deletes the user
axios.delete('api/users/destroy', {params: {id: id}}) 

// ok deletes the users when using request->id in a for loop in the destroy laravel method.
axios.delete('api/users/destroy', {params: {ids: this.checkedNames}}) 

// ok deletes one user
axios.delete('api/users/' + id)

抱歉，伙计们，但我很困惑为什么和什么!!!

路由名称是user.destroy为什么当我传递一个数组时它起作用而当我传递单个值时它不起作用，为什么反之，当传递一个数组时，带有删除方法的路由不会删除？？？

使用 api/users/destroy 与仅使用 api/users 有什么区别？

感谢您对此的任何帮助！

Answer 1

这是因为方法签名。使用 Resource 时的默认 delete 路由需要一个参数。所以在做的时候：

axios.delete('api/users', {params: {'id': this.checkedNames})

您缺少一个必需的参数。路由定义为

Route::delete('api/users/{id}', 'UserController@destroy');
// You are missing `id` here. So it won't work.

通常，如果您要偏离默认行为，建议创建您自己的函数。因此，您可以保留默认的 destroy($id) 函数以删除单个条目并编写一个将删除多个条目的新函数。首先为它添加一条路线

Route::delete('api/users', 'UserController@deleteMany');

然后定义函数来处理它

public function deleteMany(Request $request)
{
    try 
    {
        User::whereIn('id', $request->id)->delete(); // $request->id MUST be an array
        return response()->json('users deleted');
    }

    catch (Exception $e) {
        return response()->json($e->getMessage(), 500);
    }
}

总而言之，您的问题来自路由定义。您来自 Axios 的路线与 Laravel 的路线定义不匹配，因此出现 405.

Answer 2

我在发出删除请求时无法将数据作为模型发送。我找到了如下修复方法：

deleteCall (itemId, jsonModel) {
return api.delete(`/users/${itemId}/accounts/`, {data: jsonModel})
},

Answer 3

我也遇到了同样的问题。这对我有用：

deletePost: function(id) {
                axios.post('/posts/'+id,{_method: 'delete'})
            }

使用 axios.post() 代替 axios.delete，并发送 _method "delete"

Answer 4

正在删除数组中的用户

另一个不错的选择是将 javascript 数组转换为字符串，并传递给它具有所需的参数，而不是传递对象。这里的例子：

在Vue.js 2.5.17+

//Use the javascript method JSON.stringify to convert the array into string: axios.delete('api/users/' + JSON.stringify(this.checkedNames))

在Laravel 5.3+

//Resource default route (you don't need to create, it already exists)
Route::delete('api/users/{id}', 'UserController@destroy'); 

//In laravel delete method, convert the parameter to original array format 
public function destroy($id)
{
    User::destroy(json_decode($id); //converting and deleting users in array 'id'
}

通过id删除单个用户

传个id就可以了。您不需要转换它。

在Vue.js 2.5.17+

axios.delete('api/users/' + id)

在Laravel 5.3+

您可以根据需要命名参数：user、id、item ,...

In Laravel 5.6+ < is named as $id //this can be the id or the user object
In Laravel 5.7+ > is named as $user //this can be the id or the user object

public function destroy($id)
{
    User::destroy($id); 
}

Answer 5

axios.post('/myentity/839', {
  _method: 'DELETE'
})
.then( response => {
   //handle success
})
.catch( error => {
   //handle failure
})

https://www.mikehealy.com.au/deleting-with-axios-and-laravel/

Axios、Laravel 和 VueJS 中的删除方法

Delete Method in Axios, Laravel and VueJS

api

laravel

axios

更新