Get 404 nicht gefunden mit PUT Anfrage in MEAN App

Question

Ich habe eine Schaltfläche Bearbeiten auf meiner Ereignis-Detailseite, die auf eine neue Seite geht, wo Benutzer das aktuell ausgewählte Ereignis aktualisieren kann. Ich habe keine Probleme mit GET, um einzelne/alle Events und POST zu bekommen, um ein neues Event zu erstellen. Aber ich bin auf der Aktualisierung bestehender Ereignis fest und ständig 404-Fehler erhalten: PUT http://localhost:3000/api/events 404 (nicht gefunden) Auf meinem Server Route habe ich:

//return event-details 
 
app.get('/api/events/:id', events.getEventById); 
 

 
//update event 
 
app.put('/api/events/:id', events.updateCurrentEvent);

Server Side Event Controller:

exports.updateCurrentEvent = function(req, res) { 
 

 
    Event.findById(req.params.id, req.body, function(err, event) { 
 
     var event = req.body; 
 
     if(!event) { 
 
      res.statusCode = 404; 
 
      res.send({ error: 'Not found'}); 
 
     } 
 
     event.title = req.body.title; 
 
     event.desc = req.body.desc; 
 
     event.date = req.body.date; 
 
     event.duration = req.body.duration; 
 
     event.address = req.body.address; 
 
     event.city = req.body.city; 
 
     event.state = req.body.state; 
 

 
     event.save(function (err) { 
 
      if (!err) { 
 
       log.info("event updated"); 
 
       res.send({ status: 'OK', event:event }); 
 
      } else { 
 
       if(err.name == 'ValidationError') { 
 
        res.statusCode = 400; 
 
        res.send({ error: 'Validation error' }); 
 
       } else { 
 
        res.statusCode = 500; 
 
        res.send({ error: 'Server error' }); 
 
       } 
 
       log.error('Internal error(%d): %s',res.statusCode,err.message); 
 
      } 
 
     }); 
 

 
    });

My $ resource:

app.factory('mvEvent', function($resource) { 
 
    var EventResource = $resource('/api/events/:_id', {_id: "@id"}, { 
 
     update: {method:'PUT', isArray:false} 
 
    }); 
 

 
    return EventResource; 
 
});

meine clientseitige Controller:

angular.module('app').controller('mvUpdateEventCtrl', function($scope, $routeParams, $location, mvEvent) { 
 

 
    $scope.event = mvEvent.get({_id:$routeParams.id}) 
 
     .$promise 
 
      .then(function(event) { 
 
       $scope.event = event; 
 
       console.log($scope.event); 
 
       $scope.title =$scope.event.title; 
 
       $scope.desc = $scope.event.desc; 
 
       $scope.date = $scope.event.date; 
 
       $scope.duration = $scope.event.duration; 
 
       $scope.address = $scope.event.address; 
 
       $scope.city = $scope.event.city; 
 
       $scope.state = $scope.event.state; 
 
      }); 
 

 
    $scope.updateEvent = function() { 
 
     $scope.event.$update(function() { 
 
     }, function(error) { 
 
      $scope.error = error.data.message; 
 
     }); 
 
    } 
 
});

Meine Client-Seite Routen:

var app = angular.module('app', ['ngResource', 'ngRoute', 'ui.bootstrap']); 
 

 
app.config(function($routeProvider, $locationProvider){ 
 

 
    $locationProvider.html5Mode(true); 
 

 
    $routeProvider 
 
     //events route 
 
     .when('/events', { 
 
      templateUrl: '/partials/events/event-list', 
 
      controller: 'mvEventListCtrl' 
 
     }) 
 
     //events detail route 
 
     .when('/events/:id', { 
 
      templateUrl: '/partials/events/event-details', 
 
      controller: 'mvEventDetailsCtrl' 
 
     }) 
 
     //update event route 
 
     .when('/events/:id/update', { 
 
      templateUrl: '/partials/admin/event-update', 
 
      controller: 'mvUpdateEventCtrl' 
 
     }) 
 
});

Das Erhalten der Ereignisdetails, die in jedem Textfeld angezeigt werden, ist so weit wie möglich. Sobald ich auf "Update Event" Button klicke, erhalte ich den 404 Fehler und es scheint irgendwo in meinem Server Code zu liegen. Ich habe ziemlich viele verschiedene Ansätze gesehen, die eine PUT-Anfrage implementieren, mit oder ohne routeParams, mit findById, dann save oder findByIdAndUpdate. Ich frage mich, ob es einen Standard Weg gibt, dies zu tun. Danke im Voraus!!

Answer 1

Entfernen Sie die Leitung var event = req.body; von Ihrem serverseitigen Controller. Erstens ist es nicht erforderlich. Zweitens ist es dasselbe wie der Name des Dokuments, das von Event.findById Callback zurückgegeben wird, und das wird von der Variablendeklaration überschrieben.

exports.updateCurrentEvent = function(req, res) { 

    Event.findById(req.params.id, req.body, function(err, event) { 

     var event = req.body; // <<==== Remove this line 

     if(!event) { 
      res.statusCode = 404; 
      res.send({ error: 'Not found'}); 
     } 

     event.title = req.body.title; 
     event.desc = req.body.desc; 
     event.date = req.body.date; 
     event.duration = req.body.duration; 
     event.address = req.body.address; 
     event.city = req.body.city; 
     event.state = req.body.state; 

     event.save(function (err) { 
      if (!err) { 
       log.info("event updated"); 
       res.send({ status: 'OK', event:event }); 
      } else { 
       if(err.name == 'ValidationError') { 
        res.statusCode = 400; 
        res.send({ error: 'Validation error' }); 
       } else { 
        res.statusCode = 500; 
        res.send({ error: 'Server error' }); 
       } 
       log.error('Internal error(%d): %s',res.statusCode,err.message); 
      } 
     }); 
    }); 
}