AngularJS $http.get无法检索后端数据

Question

AngularJS $http.get无法检索后端数据

javascriptmysqlangularjsnode.js

3

我是一个可靠的助手，可以为您进行文本翻译。

我是新手对于"Angularjs和Nodejs"组合不是很熟悉，并且正在尝试创建一个简单的CRUD应用程序。问题在于，当我在angular中使用$http.get时，它不能到达后端。

这里是我的代码：

server.js（nodejs）

var connection = util.getDBConnection();
app.use(express.static(__dirname + "/public"));
app.use(bodyParser.json());
//routes = require('./routes/routes')(app, connection);

app.get('/', function(req, res) {
console.log("Backend");
        connection.query("SELECT * FROM user_info;", function(err, rows){
            if(err){
                res.redirect('/error');
                console.log("Error in the database: " + err);
            } 
            res.end(JSON.stringify(rows));
            console.log("Connected to the Database!");
        });
    });

angularmodule.js

var app = angular.module('two_way', ['ngRoute']);
app.controller('two_way_control', function($scope, $http){
    $scope.message = "Hello from controller";
    $http.get('/').success(function(data){
        console.log("http get");
        console.log(data);
        $scope.profile_pictures = data;
    });
});

console.log(data) 返回整个 index.html 文件。

index.html

<body>
    <div id="container" ng-app="two_way" ng-controller="two_way_control">
        <div class="row" ng-repeat="data in profile_pictures">
            {{message}}
            <div class=".col-sm-6 .col-md-5 .col-lg-6">
                <h4>User Say's</h4><hr>
                <p>
                    This is a Demo feed. It is developed to demonstrate Two way data binding.
                </p>
                {{ data.profile_picture }}
                <img src="{{data.profile_picture}}">
            </div>
        </div>
    </div>
</body>

但是这段代码以json格式返回mysql数据：

app.get('/load', function(req, res) {
console.log("Backend");
        connection.query("SELECT * FROM user_info;", function(err, rows){
            if(err){
                res.redirect('/error');
                console.log("Error in the database: " + err);
            } 
            res.end(JSON.stringify(rows));
            console.log("Connected to the Database!");
        });
    });

请帮忙。先谢谢了，抱歉英语不好。

- Jonathan Leijendekker

4个回答

2

为了解决Chrome控制台中的错误

"GET http://localhost:8000/%7B%7Bdatas.profile_picture%7D%7D 404 (未找到)"

我建议您使用ngSrc指令，所以不要使用

<img src="{{datas.profile_picture}}">

而应该使用

<img ngSrc="{{datas.profile_picture}}">

如文档所述

希望这能帮到您

- Matteo

感谢 @JonathanLeijendekker，如果您认为我的回答有用，请考虑给我点赞。 - Matteo

1

我已经得到答案，只需要启动HTTP函数。

var app = angular.module('two_way', []);
app.controller('two_way_control', function($scope, $http){
    $scope.message = "Hello from controller";

    $scope.load = function(){
        $http.get('/LoadAll').success(function(data){
            console.log("http get");
            $scope.profile_pictures = data;
        });
    };

    $scope.load();
});

但我仍然在Chrome控制台中收到错误信息

“GET http://localhost:8000/%7B%7Bdatas.profile_picture%7D%7D 404 (未找到)”

位于<img src="{{datas.profile_picture}}">中。

- Jonathan Leijendekker

0

改变

<img src="{{datas.profile_picture}}">

到

<img src="{{data.profile_picture}}">

- 王如锵

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Strawberry · Accepted Answer

在Express中，您需要使用请求响应。例如，使用res.send发送数据。 http://expressjs.com/api.html#res.send

Sends the HTTP response.

The body parameter can be a Buffer object, a String, an object, or an Array. For example:
res.send(new Buffer('whoop'));
res.send({ some: 'json' });
res.send('some html');
res.status(404).send('Sorry, we cannot find that!');
res.status(500).send({ error: 'something blew up' });
This method performs many useful tasks for simple non-streaming responses: For example, it automatically assigns the Content-Length HTTP response header field (unless previously defined) and provides automatic HEAD and HTTP cache freshness support.

When the parameter is a Buffer object, the method sets the Content-Type response header field to “application/octet-stream”, unless previously defined as shown below:
res.set('Content-Type', 'text/html');
res.send(new Buffer('some html'));
When the parameter is a String, the method sets the Content-Type to “text/html”:
res.send('some html');
When the parameter is an Array or Object, Express responds with the JSON representation:
res.send({ user: 'tobi' });
res.send([1,2,3]);

http://expressjs.com/api.html#res.end

Ends the response process. Inherited from Node’s http.ServerResponse.

Use to quickly end the response without any data. If you need to respond with data, instead use methods such as res.send() and res.json().
res.end();
res.status(404).end();