MEAN堆栈数据库问题与角度

时间:2014-07-05 19:57:29

标签: node.js angularjs mongodb express mean-stack

当我将一个项目添加到我的数据库时,它只显示添加了id,但是我没有添加我为该项目选择的name属性:含义 - 当我添加到'player'时,'name'属性不会保留保存。有人可以告诉我为什么吗?我认为这是字符串转换的问题,但我不确定。

*我可以使用POSTMAN的PUT选项更新项目的名称。 使用x-www-form-urlencoded选项,我可以使用普通字符串更新项目的名称。

所以我需要简单地进行某种字符串转换,还是我的代码还有其他问题?如果您需要我提供更多代码,请告诉我。谢谢!

这是我的代码:

浏览器控制 - 网络:

是 - (我只添加名称属性) 当我添加name属性时,它不会被保存 - 但仍然创建了一个项目。这就是问题所在。

browser console - network tab:
Remote Address:127.0.0.1:3000
Request URL:http://localhost:3000/api/players
Request Method:POST
Status Code:200 OK
Request Headersview source
Accept:application/json, text/plain, */*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8,he;q=0.6
Connection:keep-alive
Content-Length:18
Content-Type:application/json;charset=UTF-8
Cookie:connect.sid=s%3AX2FaOplCDPU3qDaM7vVQPb5vFo_ievn1.zFM%2FKNj2QN5eDspCFOJEE2fYwXiTyUnN90sR8oTfnpI
Host:localhost:3000
Origin:http://localhost:3000
Referer:http://localhost:3000/add
User-Agent:Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36
Request Payloadview source
{showName:Jay}
showName: "Jay"
Response Headersview source
Connection:keep-alive
Content-Length:29
Content-Type:application/json
Date:Sun, 06 Jul 2014 06:13:25 GMT
X-Powered-By:Express

这是路由的代码:服务器端。也许这里有一个错误:

    .post(function(req, res) {

    var player = new Player();      // create a new instance of the Player model
    player.name = req.body.name;  // set the player name (comes from the request)
    player.sport = req.body.sport;
    player.league = req.body.league;
    player.team = req.body.team;
    player.age = req.body.age;
    player.description = req.body.description;

    // save the player and check for errors
    player.save(function(err) {
        if (err)
            res.send(err);

        res.json({ message: 'Player created!' });
    });

})


.get(function(req, res) {
    Player.find(function(err, players) {
        if (err)
            res.send(err);

        res.json(players);
    });
});

控制器:add.js

angular.module('MyApp')
.controller('AddCtrl', ['$scope', '$alert', 'Player', function($scope, $alert, Player) {
    $scope.addShow = function() {
        Player.save({ showName: $scope.showName },
            function() {
                $scope.showName = '';
                $scope.addForm.$setPristine();
                $alert({
                    content: 'Player has been added.',
                    placement: 'top-right',
                    type: 'success',
                    duration: 3
                });
            },
            function(response) {
                $scope.showName = '';
                $scope.addForm.$setPristine();
                $alert({
                    content: response.data.message,
                    placement: 'top-right',
                    type: 'danger',
                    duration: 3
                });
            });
    };
}]);

模板:add.html

<div class="container">
<div class="panel panel-default">
    <div class="panel-heading">Add Sports Player</div>
    <div class="panel-body">
        <form class="form" method="post" ng-submit="addShow()" name="addForm">
            <div class="form-group" ng-class="{ 'has-success' : addForm.showName.$valid && addForm.showName.$dirty, 'has-error' : addForm.showName.$invalid && addForm.showName.$dirty }">
                <input class="form-control" type="text" name="showName" ng-model="showName" placeholder="Enter TV show name" required autofocus>
                <div class="help-block text-danger" ng-if="addForm.showName.$dirty" ng-messages="addForm.showName.$error">
                    <div ng-message="required">Sports Player's name is required.</div>
                </div>
            </div>
            <button class="btn btn-primary" type="submit" ng-disabled="addForm.$invalid">Add</button>
        </form>
    </div>
</div>

服务:player.js

angular.module('MyApp')
.factory('Player', ['$resource', function($resource) {
    return $resource('/api/players/:_id');
}]);

1 个答案:

答案 0 :(得分:1)

据我所知,您正在向/ api / players发出POST HTTP请求:

Request URL:http://localhost:3000/api/players  
Request Method:POST

但是,您只需发送showName

Request Payloadview source
{showName:Jay}
showName: "Jay"

但在服务器端,您不是在寻找showName,而是在寻找namesportleague等:

var player = new Player();      // create a new instance of the Player model
player.name = req.body.name;  // set the player name (comes from the request)
player.sport = req.body.sport;
player.league = req.body.league;
player.team = req.body.team;
player.age = req.body.age;
player.description = req.body.description;

如果您想存储name,那么您需要通过name而不是showName发送。如果您想存储showName,那么您需要从请求正文(req.body.showName)中提取它。因此,要么将所有这些属性从客户端发送到服务器端,要么将服务器端更改为仅接受showName Player

希望这有道理吗?只是与您在客户端发送的内容断开连接,而不是您在服务器端寻找的内容。它在客户端看起来像是在处理电视节目,而在服务器端看起来像是一个运动队的一些玩家,这也有点令人困惑?