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

然后我有Route::resource('users', 'UsersController'); 在 api.php 中，因此刪除的默認路由是：

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所以在我的銷毀方法中我可以獲取 ids 並刪除，但我想知道這是否是正確的方法？

更新

我似乎讓它工作了，但我不明白，所以仍然感謝任何幫助，以了解我實際在做的工作！

因此，如果更改為：

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什么區別？

感謝您對此的任何幫助！

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

我也遇到了同樣的問題。 這對我有用：

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

使用axios.post()而不是axios.delete ，並發送_method "delete"

Answer 3

我在發出刪除請求時遇到了將數據作為模型發送的問題。 我找到了如下修復方法：

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

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/