Question

我使用Flask制作了一个REST API，它在http://localhost:5000/api/person上提供了一个JSON响应，给出了SQLite数据库中所有人的ID，姓名和电话号码。 http://localhost:5000/api/person/Name_of_person提供与人名相对应的JSON响应。我想使用AngularJS来使用API，这样我就可以输出所有人的姓名以及他们的电话号码。

的index.html

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="customersCtrl"> 

<ul>

  <li ng-repeat="x in myData">
    {{ x.id }} + ', ' + {{x.name }} + ',' + {{x.phone}}
  </li>

</ul>

</div>

<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
  $http.get("http://localhost:5000/api/person").then(function (response) {
  $scope.myData = response.data.objects;
  });
});
</script>

</body>
</html>

http://localhost:5000/api/person

的内容

{
  "num_results": 5, 
  "objects": [
{
  "id": 24, 
  "name": "Name2", 
  "phone": "9999192938"
}, 
{
  "id": 23, 
  "name": "Name3", 
  "phone": "9999192938"
}, 
{
  "id": null, 
  "name": "Name4", 
  "phone": "9999192938"
}, 
{
  "id": 21, 
  "name": "Name5", 
  "phone": "9999192938"
}, 
{
  "id": null, 
  "name": "Name6", 
  "phone": "9999192938"
}
  ], 
  "page": 1, 
  "total_pages": 1
}

我很确定我的语法是正确的但我没有得到index.html的输出。任何人都可以解释我哪里出错了吗？是因为它在本地服务器上并且无法检索数据吗？

Answer 1

如果API返回正确的结果，请通过REST客户端测试api。
如果您在运行应用程序时遇到问题，请使用firefox浏览器进行测试。对于chrome，您需要通过任何服务器提供index.html，因为它阻止了file：/// protocol并需要http：//才能正常运行。
确保您的API支持CORS。您必须在API端设置它（请参阅Flask文档），否则您可以使用CORS插件进行chrome。
如果问题仍然存在，则可能存在任何逻辑/语法错误。请粘贴/分享浏览器控制台的屏幕截图。

使用AngularJS来使用REST

1 个答案: