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

我在使用put方法时遇到错误[！[enter image description here][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()
  },

控制器

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，正如上面发布的错误所示。

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

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

编辑： 如果发出PUT请求，则应该将其发送到与资源相关的端点（创建或更新）。它是一个幂等请求，这意味着如果发送请求，无论发送一次还是多次，都将导致相同的结果。
请尝试以下方式：

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

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

---

并确保request方法在请求中添加id作为path参数

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

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

编辑： 如果发出PUT请求，则应该将其发送到与资源相关的端点（创建或更新）。它是一个幂等请求，这意味着如果发送请求，无论发送一次还是多次，都将导致相同的结果。
请尝试以下方式：

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

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

并确保request方法在请求中添加id作为path参数

更新： 我现在已经成功地使它工作了。我将把它分享给大家，以防其他刚接触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()

我认为当你陷入困境时，睡眠会有很大帮助。

更新： 我现在已经成功地使它工作了。我将把它分享给大家，以防其他刚接触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()

---

---

我认为当你陷入困境时，睡眠会有很大帮助。

如果你指的是API，那么我确实有一个API。post方法有效，但不适用于put。我现在已经发布了我的API。好的，它可能与Laravel有关，我来看看。顺便说一句，如果您不确定端点是否与Axios有关，可以安装Postman（或任何rest客户端，如curl或其他）之类的工具来验证端点。您能检查一下更新是否有什么不同吗？非常感谢。我试过邮递员，这是结果，请参考上面编辑的问题。看来拉威尔确实有问题。我试试你的推荐。编辑：在放入{id}之后，它变成了405（不允许使用方法），如果您所指的是API，那么我确实有一个API。post方法有效，但不适用于put。我现在已经发布了我的API。好的，它可能与Laravel有关，我来看看。顺便说一句，如果您不确定端点是否与Axios有关，可以安装Postman（或任何rest客户端，如curl或其他）之类的工具来验证端点。您能检查一下更新是否有什么不同吗？非常感谢。我试过邮递员，这是结果，请参考上面编辑的问题。看来拉威尔确实有问题。我试试你的推荐。编辑：在把{id}变成405（不允许使用方法）供参考后，他们的GitHub上有axios。谢谢。我现在已经成功地解决了这个问题。这个问题毫无意义。您的初始错误消息的状态为404，但您的邮递员示例的状态为405，并且出于某种原因，正在检测GET请求。此外，您的URL也不同，第一个是

/api/department

，第二个是

/api/department/

删除的屏幕截图。这实际上是一个同样使用get departmentfyi的测试选择框的错误，他们的Gitub上有axios谢谢。我现在已经成功地解决了这个问题。这个问题毫无意义。您的初始错误消息的状态为404，但您的邮递员示例的状态为405，并且出于某种原因，正在检测GET请求。此外，您的URL也不同，第一个是

/api/department

，第二个是

/api/department/

删除的屏幕截图。这实际上是一个同样使用get departmentI的测试选择框的错误，我看不出这与您原来的客户端代码在功能上有什么不同。我怀疑你实际上改变了服务器端的一些东西，除了使用axios之外，原始代码现在还可以工作，id现在包含在put方法中，而我使用的第一个fetch方法没有包含id。它根本不会更改URL，因此不会修复404响应status@JimERussel这不正是我在回答中所说的吗？如果有用，请接受。我没有在控制器和路由中放置$id。完成。我看不出这与您最初的客户端代码在功能上有什么不同。我怀疑你实际上改变了服务器端的一些东西，除了使用axios之外，原始代码现在还可以工作，id现在包含在put方法中，而我使用的第一个fetch方法没有包含id。它根本不会更改URL，因此不会修复404响应status@JimERussel这不正是我在回答中所说的吗？如果有用，请接受。我没有在控制器和路由中放置$id。完成。