Angular / Express / Mongoose PUT方法內聯表問題

Question

因此，我已經扯了幾天頭發了。 我不確定為什么我的角度/節點火車時刻表應用程序中的PUT請求無法正常工作。 GET / POST / DELETE都能正常工作，我可以在POSTMAN中進行更新，但是當我進行內聯編輯並嘗試從前端進行更新時，即使一切似乎正確，我也找不到404。 我正在使用貓鼬來管理mongoDB，就像我說的那樣，所有這些都可以在郵遞員中使用。 無論如何，這是我的代碼。

主控制器

  angular.module('MainCtrl', []).controller('MainController', ['$scope',       '$parse', 'Train', function ($scope, $parse, Train) {
  $scope.globalConfiguration = {

    newField: {},
    removeItem: function removeItem(row) {
        var index = $scope.trains.indexOf(row);
        console.log(index);
        if (index !== -1) {
            Train.delete({
                id: $scope.trains[index]._id
            }, function () {});
            $scope.trains.splice(index, 1);
        }
    },

    updateTrain: function updateTrain(row) {
        var index = $scope.trains.indexOf(row);
        console.log(index);
        console.log($scope.trains[index]._id);
        if ($scope.globalConfiguration.editing !== false) {
            $scope.trains[$scope.globalConfiguration.editing] = $scope.globalConfiguration.newField;
            Train.update({
                id: $scope.trains[index]._id,
                index
            });

            $scope.globalConfiguration.editing = false;

        }
    },
    edit: function edit(row) {
        var index = $scope.trains.indexOf(row);
        $scope.globalConfiguration.editing = index;
        $scope.globalConfiguration.newField = angular.copy(index);
    },
    cancel: function (index) {

        if ($scope.globalConfiguration.editing !== false) {
            $scope.trains[$scope.globalConfiguration.editing] = $scope.globalConfiguration.newField;
            $scope.globalConfiguration.editing = false;
        }
    }
};

語言服務

 angular.module('TrainService', []).factory('Train', function($resource) {
   return $http.get('api/trains');
        return $resource('/api/trains');
return $resource('api/trains/:id', { id: '@_id' }, {
        'update': { method:'PUT' },
        'saveData': { method: 'POST', isArray: false}
      });
});

ROUTES.JS NODE

var Train = require('./model/train');
app.get('/api/trains', function (req, res) {
    // use mongoose to get all trains in the database
    Train.find(function (err, trains) {

        // if there is an error retrieving, send the error. 
        // nothing after res.send(err) will execute
        if (err)
            res.send(err);

        res.json(trains); // return all nerds in JSON format
    });
});
// Get Train By id
app.get('/api/trains/:id', function (req, res) {

    Train.findById(req.params.id, function (err, train) {
        if (err)
            res.send(err);
        res.json(train);

    });
});
// Update Trains 
app.put('/api/trains/:id', function (req, res) {
    Train.findByIdAndUpdate(req.params.id, req.body, function (err, train) {
        if (err)
            res.send(err);

        res.json(train);

    });
});

// route to handle creating trains goes here (app.post)
app.post('/api/trains', function (req, res) {
    //Create Trains
    Train.create(req.body, function (err, train) {
        if (err)
            res.send(err);

        res.json(train);

    });

});



// route to handle delete goes here (app.delete)
app.delete('/api/trains/:id', function (req, res) {
    Train.findByIdAndRemove(req.params.id, req.body, function (err, train) {
        if (err)
            res.send(err);

        res.json(train);

    });

});

查看HTML

<tr ng-repeat="row in displayedCollection | orderBy:'RUN_NUMBER' | unique:'RUN_NUMBER' ">
        <td>{{row.TRAIN_LINE | uppercase}}</td>
        <td>{{row.RUN_NUMBER | uppercase}}</td>
        <td>{{row.ROUTE_NAME | uppercase}}</td>
        <td><span ng-hide="editMode">{{row.OPERATOR_ID | uppercase}}</span>
            <input name="row.OPERATOR_ID" ng-show="editMode" type="text" ng-model="row.OPERATOR_ID">
        </td>
        <td>
            <button class="btn btn-sm btn-success" ng-show="editMode" ng-click="globalConfiguration.updateTrain(row); editMode = false;"><i class="glyphicon glyphicon-ok"></i>
            </button>
            <button class="btn btn-sm btn-warning" ng-show="editMode" ng-click="editMode = false; globalConfiguration.cancel()"><i ng- class="glyphicon glyphicon-remove"></i>
            </button>
            <button class="btn btn-sm btn-info" ng-hide="editMode" ng-click="editMode = true; globslConfiguration.edit(row)"><i class="glyphicon glyphicon-pencil"></i>
            </button>
            <button ng-click="globalConfiguration.removeItem(row)" class="btn btn-sm btn-danger"><i class="glyphicon glyphicon-remove-circle"></i>
            </button>

        </td>
    </tr>

我只在我認為與我的問題有關的事情上盡量保持最小，其余代碼在這里。

https://github.com/chmaltsp/Trains-Exercise

感謝幫助！！！

Answer 1

您最容易做的就是更改您的PUT請求以監聽/api/trains ，而不是req.params.id ，而是捕獲req.body.id 像這樣：

// Update Trains 
app.put('/api/trains', function (req, res) {
    Train.findByIdAndUpdate(req.body.id, req.body, function (err, train) {
        if (err)
            res.send(err);

        res.json(train);

    });
});

有關此更新為何有效的更多詳細信息：

Angular的$ resource將GET請求轉換為基於URL的參數，如下所示：

/api/trans/<id_goes_here>

所有其他請求將參數傳遞到req.body

看一下您的PUT偵聽器：

app.put('/api/trains/:id', function (req, res) {
    Train.findByIdAndUpdate(req.params.id, req.body, function (err, train) {
    ...

注意，您期望使用名為req.params.id的參數。 這對於來自Angular的$ resource的 PUT請求不起作用。 您收到404錯誤，因為Angular試圖向/api/trains發出PUT請求-而不是/api/trains/<id_goes_here>