Laravel 和 Vue.js put 方法使用 fetch

Question

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

我使用 axios 进行 post 和 fetch 放置。 我不知道 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()
  },

控制器

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

应用程序接口

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 作为路径参数。

Answer 2

更新：我现在已经成功地让它工作了。 我会分享给大家，以防其他刚接触 laravel 和 vue 的人可能遇到同样的问题。

这是现在的工作代码，使用 axios。

save() {
    const { department, id } = this
    if (this.editedIndex > -1) {
      axios 
      .put('/api/department', { department, id })
      .then(response => this.initialize())
      .catch(error => console.log(error))
    } else {
      axios 
      .post('/api/department', { department })
      .then(response => this.initialize())
      .catch(error => console.log(error))
    }
    this.close()

我认为当你遇到问题时，睡眠会很有帮助。