Axios、Laravel 和 VueJS 中的删除方法

Delete Method in Axios, Laravel and VueJS

提问by Lorenzo Beltrame

I am trying to send a delete request via axios to laravel as follow:

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

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

Now from axios documentation I read that for delete request we should be using a configObject so the above could be rewritten as so:

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

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

I have then Route::resource('users', 'UsersController');in api.php so the default route for deleting is:

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

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

and the controller's method is:

控制器的方法是：

|App\Http\Controllers\UsersController@destroy

I am able to delete as expected a user when I pass a single id let's say api/users/12, it gets deleted correctly but when I try to pass the array above things get complicated.

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

if I try as per axios documentation axios.delete('api/users/', {params: {id: this.checkedNames}})it looks I am sending this http://lorillacrud.dev/api/users?id[]=21&id[]=20but I get a 405 method not allowed.

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

if I try axios.delete('api/users/' + this.checkedNames )I get http://lorillacrud.dev/api/users/20,21so in my destroy method I could grab the ids and delete, but I am wondering if this is the correct way to do it?

如果我尝试axios.delete('api/users/' + this.checkedNames )，我得到http://lorillacrud.dev/api/users/20,21我的破坏方法，我可以抢IDS和删除等等，但我想知道这是否是做了正确的方法是什么？

update

更新

I seemed I made it work but I am not understanding so any help still appreciated to make a sense of what I am actually making work!

我似乎让它工作了，但我不明白，所以仍然感谢任何帮助，以了解我实际在做的工作！

So, if change to:

因此，如果更改为：

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

and in my destroy method:

在我的销毁方法中：

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

So...

所以...

// 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)

sorry guys but I have a lot of confusion why and what !!!

对不起，伙计们，但我很困惑为什么和什么！！！

The route name is user.destroywhy does it work when I pass an array and it does not when I pass a single value, why viceversa the route with method delete will not delete when pass an array ???

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

Any difference between using api/users/destroyvs api/usersonly?

使用api/users/destroy和api/users只使用有什么区别？

Thanks for any help on this!

感谢您对此的任何帮助！

采纳答案by EddyTheDove

It is because of the method signatures. The default deleteroute when using Resourceexpects a single parameter. So when doing:

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

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

you are missing a requiredparameter. The route definition is

你缺少一个必需的参数。路由定义是

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

Usually, if you are going to stray away from the default behavior, it is recommended to create your own function. So you could leave the default destroy($id)function as is to delete a single entry and write a new function that will delete many. Start by adding a route for it

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

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

Then define the function to handle it

然后定义函数来处理它

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);
    }
}

To summarise, your problem came from route definition. Your route from Axios did not match the route definition from Laravel, hence the 405.

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

回答by Elib

I also experienced the same problem. This works for me:

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

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

Using axios.post()instead of axios.delete, and sending _method"delete"

使用axios.post()代替axios.delete，并发送_method“删除”

回答by Ravi Anand

I was having issue to send data as model while making delete request. I found a fix as follows:

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

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

回答by Jose Seie

Deleting users in array

删除数组中的用户

Other good option, is to convert javascript array to string, and pass it has the required parameter, instead of passing object. Here the example:

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

In Vue.js 2.5.17+

在 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))

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

In Laravel 5.3+

在 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'
}

Deleting single user by id

通过id删除单个用户

Just pass the id. You don't need to convert it.

只需传递id。你不需要转换它。

In Vue.js 2.5.17+

在 Vue.js 2.5.17+ 中

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

In Laravel 5.3+

在 Laravel 5.3+

You can name the parameter as you wish: user, id, item,...

您可以随意命名参数：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); 
}