在Axios,Laravel和VueJS中删除方法

时间:2017-09-24 07:52:26

标签: laravel api axios

我正在尝试通过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,但我得到的方法是不允许的。

如果我尝试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为什么当我传递一个数组时它才起作用,而当我传递一个单值时它没有,为什么反向使用方法删除的路由在传递数组时不会删除??? / p>

仅使用api/users/destroyapi/users之间有何区别?

感谢您提供任何帮助!

5 个答案:

答案 0 :(得分:3)

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

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。

答案 1 :(得分:1)

在发出删除请求时,我无法发送数据作为模型。我发现了如下修复方法:

this.setState({
    recipient: {...this.state.recipient, ...temp}
})

答案 2 :(得分:0)

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

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

使用axios.post()代替axios.delete,然后发送_method“删除”

答案 3 :(得分:0)

删除数组中的用户

另一个好的选择是将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+中

您可以根据需要命名参数:useriditem,...

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

答案 4 :(得分:-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/