javascript - Laravel 和 Vue.js 使用 fetch 的 put 方法

Question

我在使用 put 方法时遇到错误 [![在此处输入图像描述][1]][1]

我使用 axios 进行 post 操作，使用 fetch 进行 put 操作。我不知道 put 方法如何在 axios 上工作，所以如果有人可以提供帮助，我将非常感激。

Component.vue脚本

editItem (item) {
        this.dialog = true
        this.editedIndex = this.departments.indexOf(item)
        this.id = item.id;
        this.department = item.department_name;

      },
  save() {
    const { department } = this
    if (this.editedIndex > -1) {
      fetch('/api/department', {
        method: 'put',
        body: JSON.stringify(this.department),
        headers: {
          'content-type': 'application/json'
        }
      })
    } else {
      axios 
      .post('/api/department', { department })
      .then(response => this.initialize())
      .catch(error => console.log(error))
    }
    this.close()
  },

Controller

public function store(Request $request) {
    $department = $request->isMethod('put') ? Department::findOrFail($request->id) : new Department;

    $department->id = $request->input('id');
    $department->department_name = $request->input('department');

    if($department->save()) {
      return response()->json($department);;
    }
  }

API

Route::get('departments', 'DepartmentController@index');
Route::get('department/{id}', 'DepartmentController@show');
Route::post('department', 'DepartmentController@store');
Route::put('department', 'DepartmentController@store');
Route::delete('department/{id}', 'DepartmentController@destroy');

post 方法有效，但不适用于 put，如上面发布的错误所示。

Answer 1

这是因为你没有在后端实现 put 方法。异常表明发出了put请求，所以问题很可能与axios无关。

Route::put('foo/bar', function()
{
    //
});

编辑:如果您发出 PUT 请求，则应该将其发送到涉及资源的端点(以创建或更新)。它是幂等请求，也就是说，如果您发送该请求，无论您发送一次还是多次，都会得到相同的结果。
请尝试这样的事情:

Route::put('department/{id}', 'DepartmentController@update')

public function update(Request $request, $id)  {

并确保请求方法将 id 添加为请求中的路径参数。