MEAN - 未找到 Http Put 请求 404

Question

我正在构建一个 MEAN 堆栈应用程序。我在提交 put 时收到 404 响应 request.This 仅在我尝试编辑预订时发生。它没有成功编辑特定的预订。客户端

booking.service.ts

 getBooking(id: string) {
    return this.http.get<{ _id: string, title: string, content: string }>("http://localhost:3000/api/bookings/" + id);
  }

 updateBooking(id: string, title: string, content: string){
    const booking: Booking = { id: id, title: title, content: content };
    this.http.put("http://localhost:3000/api/bookings/" + id, booking)
    .subscribe((response) => {
      const id = booking.id;
      const updateBook = [...this.bookings];
      const oldBookingIndex = updateBook.findIndex(b => b.id === id);
      updateBook[oldBookingIndex] = booking;
      this.bookings = updateBook;
      this.bookingUpdate.next([...this.bookings]);
    });
  }

预订-create.component.html

<mat-card>
  <form (submit)="onSaveBooking(bookingForm)" #bookingForm="ngForm">
    <mat-form-field>
      <input matInput type="date" name="title" [ngModel]="booking?.title"
      required minlength="3"
      #title="ngModel"
      placeholder="Date">
      <mat-error *ngIf="title.invalid">Please enter title</mat-error>
    </mat-form-field>
    <mat-form-field>
      <textarea matInput  name="content" [ngModel]="booking?.content" required
      #content="ngModel" placeholder="Golf Course"></textarea>
      <mat-error *ngIf="content.invalid">Please enter content</mat-error>
    </mat-form-field>
    <hr>
    <button mat-button
    color="accent"
    type="submit">Save Booking</button>
  </form>
</mat-card>

预订-create.component.ts

import { Component, OnInit } from '@angular/core';

//import {Booking } from '../booking-list/booking.model';
import { NgForm } from '@angular/forms';
import { BookingService } from '../booking.service';
import { ActivatedRoute, ParamMap } from '@angular/router';
import { Booking } from '../booking-list/booking.model';

@Component({
  selector: 'app-booking-create',
  templateUrl: './booking-create.component.html',
  styleUrls: ['./booking-create.component.css']
})
export class BookingCreateComponent implements OnInit {

  enteredTitle = '';
  enteredContent = '';
  booking: Booking;
  private mode = 'create';
  private bookingId: string;


  constructor(public bookingService: BookingService, public route: ActivatedRoute) { }

  ngOnInit() {
    this.route.paramMap.subscribe((paramMap: ParamMap) => {
      if (paramMap.has('bookingId')){
        this.mode = 'edit';
        this.bookingId = paramMap.get('bookingId');
        this.bookingService.getBooking(this.bookingId).subscribe(bookingData => {
          this.booking = {id: bookingData._id, title: bookingData.title, content: bookingData.content};
        });
      }
      else {
        this.mode = 'create';
        this.bookingId = null;
      }
    });
  }


  //bookingCreated = new EventEmitter<Booking>();

  onSaveBooking(form: NgForm){
    if(form.invalid){
      return;
    }
    if (this.mode === 'create') {
      this.bookingService.addBooking(form.value.title, form.value.content);
    }
    else {
      this.bookingService.updateBooking(this.bookingId, form.value.title, form.value.content);
    }
      form.resetForm();
  }

}

服务器端 app.js

app.get("/api/bookings/:id", (req, res, next) => {
  Booking.findById(req.params.id).then(booking => {
    if (booking) {
      res.status(200).json(booking);
    }
    else {
      res.status(404).json({ message: 'Booking not found'});
    }
  })
});

 app.put("/api/bookings/:id", (req, res, next) => {
    const booking = new Booking({
      _id: req.body.id,
      title: req.body.title,
      content: req.body.content
    });
    Booking.updateOne({_id: req.params.id}, booking).then(result => {
      console.log(result);
      res.status(200).json({message: 'Booking updated'});
    });
  });

Answer 1

我想当您在这一行中使用 'booking' 时会引发问题

    Booking.updateOne({_id: req.params.id}, booking).then(result => {

您可以尝试只使用一个参数，看看它是否有效

   {$set: {"title": req.body.title}}

不确定是否可以像这样传递整个对象。

MEAN - 未找到 Http Put 请求 404

MEAN - Http Put Request 404 Not Found

mongodb

node.js

express

mean-stack

angular