Axios、Laravel 和 VueJS 中的删除方法

Posted 2023-03-14

【中文标题】Axios、Laravel 和 VueJS 中的删除方法

【英文标题】：Delete Method in Axios, Laravel and VueJS

【发布时间】：2018-03-05 09:34:03

【问题描述】：

我正在尝试通过 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为什么当我传递一个数组时它可以工作而当我传递一个值时它却没有，为什么反之亦然带有方法delete的路由在传递一个数组时不会删除？？？

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

感谢您对此的任何帮助！

【问题讨论】：

感谢编辑，下一个问题会更加小心。

【参考方案1】：

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

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

【参考方案2】：

删除数组中的用户

另一个不错的选择，是将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); 

【参考方案3】：

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

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

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

【参考方案4】：

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

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

【参考方案5】：

这是因为方法签名。使用 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。

【讨论】：

好的，我明白了，非常感谢我专注于参数，而错误出现在 laravel 方面！感谢您指出这一点。

当你在像public function deleteMany(ModelName $request)这样的销毁函数上使用模型时你会怎么做这个方法从id发送所有数据这不起作用