从 axios 删除 Laravel 资源路由

Posted 2023-03-14

【中文标题】从 axios 删除 Laravel 资源路由

【英文标题】：Laravel resource route delete from axios

【发布时间】：2018-04-30 23:57:04

【问题描述】：

我想设置 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() 方法处理删除请求？

【问题讨论】：

"我想设置 axios 删除a record..." 但是$positions 暗示你想删除多条记录？您能否澄清一下您是要删除单个资源还是多个资源？

@CyRossignol 谢谢这解决了问题

【参考方案1】：

当我们尝试使用路由不支持的 HTTP 动词向路由发送请求时，Laravel 会抛出 MethodNotAllowedHttpException。在这个问题的情况下，我们看到这个错误是因为 javascript 代码向一个路径为 /job‑management 的 URL 发送了 DELETE 请求，该请求由仅支持 GET 的路由处理 和 POST 请求。我们需要将 URL 更改为 Laravel 期望资源丰富的控制器的常规格式。

该错误令人困惑，因为它隐藏了我们将请求发送到错误 URL 的事实。要了解原因，让我们看一下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 的URL 被传递给控制器​​的index() 和store() 方法，它们不处理DELETE 请求。这就是我们看到异常的原因。

如问题所示，要执行 DELETE 请求，我们需要将请求发送到路径为 /job-management/position 的 URL，其中 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 版本。请注意在模板字符串周围放置反引号 (`) 而不是标准引号。

【参考方案2】：

正如我在上面的代码中看到的那样，您将 Positionseloquent 作为参数传递给 destroy 方法，但在您的 vueJS 中，您没有传递此对象。为此，您会像这样传递它：

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

和你的axios删除的url里面的id参数，它可以是数据对象或任何想法。

希望对你有帮助