Flask做api+angularjs调用实现获取数据及删除的完整实例

在oschina开源中国学习到不少东西,今天回馈下. 现用python框架flask做api很方便,angular用久了有依赖了,为方便后面的同学,给出个完整实例. ##FLASK部分,用到了flask-json,和一个转json的方法 ###当然你也可以用flask的api专用插件,但我在现实场景用的时间,有些地方不是很方便,大家如果是做app应用,可以用flask的api插件,毕竟是有速率限制restful特性,我现在的是混合用法

pip install flask-json

###先做数据 models.py

class Qiu(db.Model):
    __tablename__ = 'qius'
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(64))
    active = db.Column('is_active',
                       db.Boolean(),
                       nullable=False,
                       default=False)  # 是否激活
    phone = db.Column(db.String(20), server_default='')  # 企业电话

    def to_json(self):
        """
        转json,因为angular读的是json,这里要注意,很常用的方法
        """
        return {
            'id': self.id,
            'name': self.name,
            'active': self.active,
            'phone':  self.phone,
        }

###flaskapi,这里做了获取数据和删除接口

from app.models import  Qiu
from flask import jsonify
from flask_json import JsonError, json_response
@main.route('/api/v1.0/qius', methods=['GET'])
def get_qius():
    """
    获取单个成员信息
    :param user_id:
    """
    qius = Qiu.query.all()
    ##转json
    return json_response(qius=(qiu.to_json() for qiu in qius))

@main.route('/api/v1.0/qius', methods=['delete']) 
#这里的methods是delete,可以用post,angular中也要改为post
def delete_qius():
    """
    删除成员信息
    :param user_id:
    :return: TRUE FALSE
    """
    # if not request.json or not 'id' in request.json:
    #从angularjs调用的json中取数据
    user_id=request.json['deluid']
    qiu = Qiu.query.get(user_id)
    db.session.remove(qiu)
    db.session.commit()
    res = "ok"
    return jsonify({'res': res})

###再做视图 views.py 视图的功能当前只是页面渲染,数据是用angularjs读的

from app.models import  Qiu
from flask import render_template, redirect, request, url_for, flash, abort

@main.route('/qiuadmin', methods=['GET', 'POST'])
def qiuadmin():    
    #qius=Qiu.query.all()
    #return render_template('main/qiu.html',qius=qius)
    return render_template('main/qiu.html')

###qiu.html

<script>    
//这个是csrftoken,angularjs会用cookie模块调用    
var csrftoken = "{{ csrf_token() }}"        
</script>
<div ng-controller="MainCtrl">
<tr ng-repeat="qiu in qius">

                                            <td class="center">
                                                [{[qiu.name||'']}](#)
                                            </td>
                                            <td class="center">{[qiu.phone]}</td>
                                            <td class="center">
                                             {[qiu.active]}
                                            </td>            
</tr>
</div>

###最后就是angularjs调用api,获取和删除数据

var yunApp = angular.module('yunApp', ['ngCookies']);
yunApp.run(function ($http, $cookies) {
//这里取的是csrftoken 不然angularjs post或delete时会报csrf失败错误
    $http.defaults.headers.post['X-CSRFToken'] = csrftoken;
});
//解决flask和angular在模板中的标签一样会冲突,把angularjs的标签换成{[xxx]}
yunApp.config(
    [
        '$interpolateProvider',
        function ($interpolateProvider) {
            $interpolateProvider.startSymbol('{[');
            $interpolateProvider.endSymbol(']}');
        }
    ]
);

//主控制器
yunApp.controller(
    'MainCtrl', [
        "$scope", "$http",  "$log", "$document", "$window",
        function ($scope, $http, $log, $document,$window,) {
$rootScope.qius=null;
           $http.get('/api/v1.0/qius')
                .success(function (response) {
                    $rootScope.qius = response.qius;
                    $scope.qius = $rootScope.qius;

                }).error(function () {
                    alert('获取数据失败' );
                });
            //删除用户及转移数据方法
            $scope.removeit = function (userid) {
                // var param = { uid: userid };
                if ($window.confirm('你确定要删除用户吗？')) {
                    //alert("确定");
                    // return true;
                    if (userid) {
                        data = {deluid: userid};
                        $http({
                            method: 'DELETE',
                            url: '/api/v1.0/qius',
                            data: data,
                            headers: {'Content-Type': 'application/json'}
                        }).success(function (data) {
                            if (data.res == "ok") {
                                alert('成功');
                                $http.get('/api/v1.0/qius')
                                    .success(function (response) {
                                        $rootScope.qius = response.qius;                                        v
                                        $scope.qius = $rootScope.qius;
                                    }).error(function () {
                                    alert('失败');
                                });
                            }
                            else if (data.status == 200 && data.res == "no")                         alert('失败');
                        }).error(function () {
                            alert('删除用户失败');
                        });
                    }
                    else {
                        alert('参数错误');
                        $timeout(function () {
                            setInterval(function () {
                                $window.location.reload();
                            }, 800)
                        })
                    }
                } else {
                    //alert("取消");
                    return false;
                }
            };

        }
    ]);

angular cookie需要加载:angular-cookies.min.js,如不需要删除更新删除操作,可删除['ngCookies']和下面获取csrftoken部分.

完毕,有问题留言