Laravel资源路由从axios删除

时间:2017-11-17 08:58:59

标签: javascript php laravel vuejs2 laravel-routing

我想设置axios以使用资源路径删除记录:

axios.delete('/job-management', this.deletedata).then((res)=>{
    console.log(res);
})

对于我的路线我有:

Route::resource('job-management', "PositionsController", [ 'as' => 'jobs']);

现在,在PositionsController我有:

public function destroy(Positions $positions) {
    return $positions;
}

但是上面总是返回"方法不允许"。如何使用axios delete()方法处理删除请求?

2 个答案:

答案 0 :(得分:4)

当我们尝试使用路由不支持的HTTP谓词向路由发送请求时,Laravel会抛出MethodNotAllowedHttpException。对于此问题,我们看到此错误,因为JavaScript代码向路径为/job‑management的URL发送 DELETE 请求,该路由仅支持 GET 和 POST 请求。我们需要将URL更改为Laravel对资源丰富的控制器所期望的传统格式。

错误令人困惑,因为它隐藏了我们将请求发送到错误网址的事实。要了解原因,让我们来看看Route::resource()(来自documentation)创建的路线:

Verb        URI                             Action  Route Name
GET         /job-management                 index   job-management.index
GET         /job-management/create          create  job-management.create
POST        /job-management                 store   job-management.store
GET         /job-management/{position}      show    job-management.show
GET         /job-management/{position}/edit edit    job-management.edit
PUT/PATCH   /job-management/{position}      update  job-management.update
DELETE      /job-management/{position}      destroy job-management.destroy

如上所示,路径组件为/job-management的网址会传递给控制器​​的index()store()方法,这些方法不会处理 DELETE 请求。这就是我们看到异常的原因。

要执行问题中显示的 DELETE 请求,我们需要将请求发送到包含/job-management/{position}之类的路径的网址,其中{position}是ID我们想要删除的头寸模型。 JavaScript代码可能类似于:

axios.delete('/job-management/5', this.deletedata).then((res) => { ... })

我已将位置ID硬编码到URL中以清楚地说明该概念。但是,我们可能希望为此ID使用变量:

let positionId = // get the position ID somehow
axios.delete(`/job-management/${positionId}`, this.deletedata).then((res) => { ... })

此表单中的URL使Laravel能够将 DELETE 请求路由到控制器的destroy()方法。上面的示例使用ES6 template string literals,因为问题中的代码表明我们正在使用支持此功能的JavaScript版本。请注意在模板字符串周围放置反引号(`)而不是标准引号。

答案 1 :(得分:3)

正如我在上面的代码中看到的那样,您将Positions eloquent作为参数传递给destroy方法,但在vueJS中,您不会传递此对象。为此你会像这样传递它:

axios.delete('/job-management/${id}').then((res)=>{
    console.log(res);
})

和ur axios url中的id param删除,它可以是数据对象或任何思考。

我希望这可以帮到你