Angular JS和Flask RESTful API

时间:2015-11-18 16:10:40

标签: python angularjs cors flask-restful

我目前正在开发一个网站,它使用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方法

0 个答案:

没有答案