在oschina开源中国学习到不少东西,今天回馈下. 现用python框架flask做api很方便,angular用久了有依赖了,为方便后面的同学,给出个完整实例. ##FLASK部分,用到了flask-json,和一个转json的方法 ###当然你也可以用flask的api专用插件,但我在现实场景用的时间,有些地方不是很方便,大家如果是做app应用,可以用flask的api插件,毕竟是有速率限制restful特性,我现在的是混合用法
pip install flask-json
###先做数据 models.py
1class Qiu(db.Model): 2 __tablename__ = 'qius' 3 id = db.Column(db.Integer, primary_key=True) 4 name = db.Column(db.String(64)) 5 active = db.Column('is_active', 6 db.Boolean(), 7 nullable=False, 8 default=False) # 是否激活 9 phone = db.Column(db.String(20), server_default='') # 企业电话 10 11 def to_json(self): 12 """ 13 转json,因为angular读的是json,这里要注意,很常用的方法 14 """ 15 return { 16 'id': self.id, 17 'name': self.name, 18 'active': self.active, 19 'phone': self.phone, 20 }
###flaskapi,这里做了获取数据和删除接口
1from app.models import Qiu 2from flask import jsonify 3from flask_json import JsonError, json_response 4@main.route('/api/v1.0/qius', methods=['GET']) 5def get_qius(): 6 """ 7 获取单个成员信息 8 :param user_id: 9 """ 10 qius = Qiu.query.all() 11 ##转json 12 return json_response(qius=(qiu.to_json() for qiu in qius)) 13 14@main.route('/api/v1.0/qius', methods=['delete']) 15#这里的methods是delete,可以用post,angular中也要改为post 16def delete_qius(): 17 """ 18 删除成员信息 19 :param user_id: 20 :return: TRUE FALSE 21 """ 22 # if not request.json or not 'id' in request.json: 23 #从angularjs调用的json中取数据 24 user_id=request.json['deluid'] 25 qiu = Qiu.query.get(user_id) 26 db.session.remove(qiu) 27 db.session.commit() 28 res = "ok" 29 return jsonify({'res': res})
###再做视图 views.py 视图的功能当前只是页面渲染,数据是用angularjs读的
1from app.models import Qiu 2from flask import render_template, redirect, request, url_for, flash, abort 3 4@main.route('/qiuadmin', methods=['GET', 'POST']) 5def qiuadmin(): 6 #qius=Qiu.query.all() 7 #return render_template('main/qiu.html',qius=qius) 8 return render_template('main/qiu.html')
###qiu.html
1<script> 2//这个是csrftoken,angularjs会用cookie模块调用 3var csrftoken = "{{ csrf_token() }}" 4</script> 5<div ng-controller="MainCtrl"> 6<tr ng-repeat="qiu in qius"> 7 8 <td class="center"> 9 [{[qiu.name||'']}](#) 10 </td> 11 <td class="center">{[qiu.phone]}</td> 12 <td class="center"> 13 {[qiu.active]} 14 </td> 15</tr> 16</div>
###最后就是angularjs调用api,获取和删除数据
1var yunApp = angular.module('yunApp', ['ngCookies']); 2yunApp.run(function ($http, $cookies) { 3//这里取的是csrftoken 不然angularjs post或delete时会报csrf失败错误 4 $http.defaults.headers.post['X-CSRFToken'] = csrftoken; 5}); 6//解决flask和angular在模板中的标签一样会冲突,把angularjs的标签换成{[xxx]} 7yunApp.config( 8 [ 9 '$interpolateProvider', 10 function ($interpolateProvider) { 11 $interpolateProvider.startSymbol('{['); 12 $interpolateProvider.endSymbol(']}'); 13 } 14 ] 15); 16 17//主控制器 18yunApp.controller( 19 'MainCtrl', [ 20 "$scope", "$http", "$log", "$document", "$window", 21 function ($scope, $http, $log, $document,$window,) { 22$rootScope.qius=null; 23 $http.get('/api/v1.0/qius') 24 .success(function (response) { 25 $rootScope.qius = response.qius; 26 $scope.qius = $rootScope.qius; 27 28 }).error(function () { 29 alert('获取数据失败' ); 30 }); 31 //删除用户及转移数据方法 32 $scope.removeit = function (userid) { 33 // var param = { uid: userid }; 34 if ($window.confirm('你确定要删除用户吗？')) { 35 //alert("确定"); 36 // return true; 37 if (userid) { 38 data = {deluid: userid}; 39 $http({ 40 method: 'DELETE', 41 url: '/api/v1.0/qius', 42 data: data, 43 headers: {'Content-Type': 'application/json'} 44 }).success(function (data) { 45 if (data.res == "ok") { 46 alert('成功'); 47 $http.get('/api/v1.0/qius') 48 .success(function (response) { 49 $rootScope.qius = response.qius; v 50 $scope.qius = $rootScope.qius; 51 }).error(function () { 52 alert('失败'); 53 }); 54 } 55 else if (data.status == 200 && data.res == "no") alert('失败'); 56 }).error(function () { 57 alert('删除用户失败'); 58 }); 59 } 60 else { 61 alert('参数错误'); 62 $timeout(function () { 63 setInterval(function () { 64 $window.location.reload(); 65 }, 800) 66 }) 67 } 68 } else { 69 //alert("取消"); 70 return false; 71 } 72 }; 73 74 } 75 ]);
angular cookie需要加载:angular-cookies.min.js,如不需要删除更新删除操作,可删除['ngCookies']和下面获取csrftoken部分.
完毕,有问题留言