MEAN stack ajax POST Error: TypeError: Cannot read property 'userName' of undefined

MEAN stack ajax POST Error: TypeError: Cannot read property 'userName' of undefined

所以,这里有一些背景信息:我正在为我的学校开发一个 MEAN 堆栈应用程序,我们可以在其中阅读 post 我们的 Galaga 和 Dig Dig 高分到 mongo 数据库。

我收到一个错误:

server.js:37 是:

app.post("/api/scores", function(req, res){
    Score.create({
        name:res.body.userName,
        game:res.body.game,
        points:res.body.userPoints
    });
});

res.body.* 来自的 index.html 是:

<!DOCTYPE html>
<html ng-app="nameOfApp">
  <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"></script>
        <script src="core.js"></script>
    </head>
      <body ng-controller="mainController">
        <div class="container">
        <div class="jumbotron text-center">
            <div class="container">
              <h1>HelpDesk Gaming Leaderboard</h1>
            </div>
        </div>
      <div class="container">
        <table>
          <tr>
            <td><b>Name</b></td>
            <td><b>Score</b></td>
          </tr>
          <tr ng-repeat="score in scores">
            <td>{{score.name}}</td>
            <td>{{score.points}}</td>
          </tr>
        </table>
        </div>
      <br/>
      <h2>Score?</h2>
      <form>
      <input name="userName" type="String" class="form-control" id="userName" ng-model="formData.userName" placeholder="Your Name">
      <input name="game" type="String" class="form-control" id="game" ng-model="formData.game" placeholder="The game?">
      <input name="userPoint" type="Number" class="form-control" id="userPoint" ng-model="formData.userPoint" placeholder="Points?">
      <button type="submit" class="btn btn-default" ng-click="createScore()">Submit</button>
    </form>
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
    </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js">
    </script>

  </body>
</html>

和 core.js,即 angular 部分是:

var nameOfApp= angular.module('nameOfApp', []);

nameOfApp.controller("mainController", ["$scope", "$http", function($scope, $http) {
                $scope.formData = {};



                // when landing on the page, get all scores and show them
                $http.get('/api/scores')
                    .success(function(data) {
                        $scope.scores = data;
                        console.log(data);
                    })
                    .error(function(data) {
                        console.log('Error: ' + data);
                    });
                $scope.createScore = function() {
                    $http.post('/api/scores', $scope.formData)
                        .success(function(data) {
                            $scope.formData = {};
                            $scope.scores = data;
                            console.log(data);
                        })
                        .error(function(data) {
                            console.log('Error: ' + data);
                        });
                };

}]);

感谢您的意见,如果我在文体上有任何错误,我很乐意听取意见。我正努力在 MEAN 堆栈开发方面做得更好。

您想要在 Score.create 方法中使用的不是 res.body.*,您想要使用 req.body.*。 'req' 是您的 http 请求中的所有数据。 应该是:

app.post("/api/scores", function(req, res){
    Score.create({
        name:req.body.userName,
        game:req.body.game,
        points:req.body.userPoints
    });
});