我目前正在开发一个网站,它使用Angular JS作为前端框架,使用Flask作为RESTful API。我正在使用vagrant来托管我的应用所在的LAMP服务器。 API使用curl进行测试,它完全按照我的要求运行。
运行应用时出现以下错误:
`*GET http://localhost:5000/choreographer/api/v1.0/choreographers net::ERR_CONNECTION_REFUSED
(anonymous function) @ angular.js:10722
sendReq @ angular.js:10515
serverRequest @ angular.js:10222
processQueue @ angular.js:14745
(anonymous function) @ angular.js:14761
Scope.$eval @ angular.js:15989
Scope.$digest @ angular.js:15800
Scope.$apply @ angular.js:16097
(anonymous function) @ angular.js:12226
eventHandler @ angular.js:3298*`
我原本以为这可能是一个CORS问题,所以我尝试使用$http.jsonp()
。这产生了同样的错误。我知道有些东西阻碍了我访问API的能力,但我不知道是什么或如何解决它。
我的AngularJS模块如下:
angular.module('myApp.choreographer', ['ngRoute'])
.config(['$routeProvider', function($routeProvider) {
$routeProvider.when('/choreographer', {
templateUrl: 'choreographer/choreographer.html',
controller: 'choreographerCtrl'
});
}])
.factory('choreographerService', function($resource) {
return $resource('http://localhost:5000/choreographer/api/v1.0/choreographers');
})
.controller('choreographerCtrl', function($scope, choreographerService) {
var choreographers = choreographerService.query(function() {
console.log(choreographers);
}); //query() returns all the entries
});
烧瓶API如下:
\#!env/bin/python
from flask import Flask, jsonify
from flask import abort
from flask import request
app = Flask(__name__)
@app.route('/')
def index():
return "Hello World!"
choreographers = [
{
"id":1,
"firstName": "Danny",
"lastName": "Boy",
"email": "email@email.edu",
"bio": "Biography for Danny."
},
{
"id":2,
"firstName": "Jessica",
"lastName": "Martin",
"email": "helloworld@smu.edu",
"bio": "Biography text for Jessica"
},
{
"id":3,
"firstName": "John",
"lastName": "Doe",
"email": "test@pleasework.com",
"bio": "Biography text for John"
}
]
@app.route('/choreographer/api/v1.0/choreographers', methods=['GET'])
def get_choreographers():
return jsonify({'choreographers': choreographers})
@app.route('/choreographer/api/v1.0/choreographer/<int:choreographer_id>', methods=['GET'])
def get_choreographer(choreographer_id):
choreographer = [choreographer for choreographer in choreographers if choreographer['id'] == choreographer_id]
if len(choreographer) == 0:
abort(404)
return jsonify({'choreographer':choreographer[0]})
@app.route('/choreographer/api/v1.0/choreographer', methods=['POST'])
def add_choreographer():
if not request.json or not 'firstName' in request.json:
abort(400)
choreographer = {
'id': choreographers[-1]['id'] + 1,
'firstName': request.json['firstName'],
'lastName': request.json.get('lastName',""),
'email': request.json['email'],
'bio': request.json['bio'],
}
choreographers.append(choreographer)
return jsonify({'choreographers': choreographer}),201
@app.route('/choreographer/api/v1.0/choreographers/<int:choreographer_id>', methods=['PUT'])
def update_choreographer(choreographer_id):
choreographer = [choreographer for choreographer in choreographers if choreographer['id'] == choreographer_id]
if len(choreographer) == 0:
abort(404)
if not request.json:
abort(400)
if 'firstName' in request.json and type(request.json['firstName']) != unicode:
abort(400)
if 'lastName' in request.json and type(request.json['lastName']) is not unicode:
abort(400)
choreographer[0]['firstName'] = request.json.get('firstName', choreographer[0]['firstName'])
choreographer[0]['lastName'] = request.json.get('lastName', choreographer[0]['lastName'])
choreographer[0]['email'] = request.json.get('email', choreographer[0]['email'])
choreographer[0]['bio'] = request.json.get('bio', choreographer[0]['bio'])
return jsonify({"choreographer": choreographer[0]})
@app.route('/choreographer/api/v1.0/choreographers/<int:choreographer_id>', methods=['DELETE'])
def delete_choreographer(choreographer_id):
choreographer = [choreographer for choreographer in choreographers if choreographer['id'] == choreographer_id]
if len(choreographer) == 0:
abort(404)
choreographers.remove(choreographer[0])
return jsonify({'result':True})
if __name__ == '__main__':
app.run(debug=True)
My Angular测试Flask API中的第一个GET方法