ОЗНАКОМИТЬСЯ - Http Put Request 404 Not Found - PullRequest
Новая
       5

ОЗНАКОМИТЬСЯ - Http Put Request 404 Not Found

0 голосов
/ 09 апреля 2020

Я создаю стековое приложение MEAN. Я получаю ответ 404 при отправке запроса пут. Это происходит только тогда, когда я пытаюсь изменить бронирование. Не удалось отредактировать указанное c бронирование. Сторона клиента

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

booking-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>

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

}

Приложение на стороне сервера. 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'});
    });
  });

1 Ответ

0 голосов
/ 18 апреля 2020

Я полагаю, когда вы используете 'booking' в этой строке, которая вызывает проблему 

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

Вы можете попробовать использовать один параметр, чтобы увидеть, работает ли он 

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

Не уверен, что весь объект можно передать таким образом.

...