2016-05-10 17 views
1

私のイベント詳細ページには、現在選択されているイベントを更新できる新しいページに移動する編集ボタンがあります。私はGETを使用してシングル/すべてのイベントを取得し、POSTを使用して新しいイベントを作成することに問題はありません。しかし、私は、既存のイベントを更新するにこだわっていると、常に404エラーを取得:MEANアプリケーションのPUTリクエストで404が見つかりません

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

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

サーバー側のイベントコントローラ:

私は私のサーバーのルート上に http://localhost:3000/api/events 404(見つかりません) をPUTを

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

 
    });

マイ$リソースサービス:

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

 
    return EventResource; 
 
});

私のクライアント側のコントローラ:

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; 
 
     }); 
 
    } 
 
});
私のクライアント側のルート:

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

各テキストフィールドに表示されるイベントの詳細を取得することは、可能な限りです。私が「Update event」ボタンを押すとすぐに404エラーが発生し、サーバーサイドのコードのどこかにあるようです。 findByIdを使ってsaveまたはfindByIdAndUpdateを使って、PUTリクエストを実装しているrouteParamsの有無にかかわらず、かなり異なったアプローチを見てきました。私はこれを行う標準的な方法があるかどうか疑問に思っています。前もって感謝します!!

+0

Welcome to Stackoverflow!方法を理解するためにhttp://stackoverflow.com/help/how-to-askとhttp://meta.stackoverflow.com/questions/254393/what-exactly-is-a-recommendation-questionを読んでください。質の高い質問をしてください。 – mqpasta

+0

URLをブラウザのコンソールに表示する方法を投稿できますか? – maddygoround

+0

更新イベントページがロードされると、get(event._id)の約束事がコンソールに記録されます。しかし、更新イベントボタンがヒットした後、「PUT/api/events 404 not found」というメッセージが表示されます。 – Pezhetairoi

答えて

0

サーバー側コントローラからvar event = req.body;行を削除します。まず、必須ではありません。第2に、それはEvent.findByIdコールバックによって返されたドキュメントの名前と同じで、変数宣言によってオーバーライドされています。

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); 
      } 
     }); 
    }); 
} 
関連する問題