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

Stella981
• 阅读 692

在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部分.

完毕,有问题留言

点赞
收藏
评论区
推荐文章
blmius blmius
2年前
MySQL:[Err] 1292 - Incorrect datetime value: ‘0000-00-00 00:00:00‘ for column ‘CREATE_TIME‘ at row 1
文章目录问题用navicat导入数据时,报错:原因这是因为当前的MySQL不支持datetime为0的情况。解决修改sql\mode:sql\mode:SQLMode定义了MySQL应支持的SQL语法、数据校验等,这样可以更容易地在不同的环境中使用MySQL。全局s
Jacquelyn38 Jacquelyn38
2年前
2020年前端实用代码段,为你的工作保驾护航
有空的时候,自己总结了几个代码段,在开发中也经常使用,谢谢。1、使用解构获取json数据let jsonData  id: 1,status: "OK",data: 'a', 'b';let  id, status, data: number   jsonData;console.log(id, status, number )
Wesley13 Wesley13
2年前
java将前端的json数组字符串转换为列表
记录下在前端通过ajax提交了一个json数组的字符串,在后端如何转换为列表。前端数据转化与请求varcontracts{id:'1',name:'yanggb合同1'},{id:'2',name:'yanggb合同2'},{id:'3',name:'yang
皕杰报表之UUID
​在我们用皕杰报表工具设计填报报表时,如何在新增行里自动增加id呢?能新增整数排序id吗?目前可以在新增行里自动增加id,但只能用uuid函数增加UUID编码,不能新增整数排序id。uuid函数说明:获取一个UUID,可以在填报表中用来创建数据ID语法:uuid()或uuid(sep)参数说明:sep布尔值,生成的uuid中是否包含分隔符'',缺省为
Wesley13 Wesley13
2年前
Java日期时间API系列31
  时间戳是指格林威治时间1970年01月01日00时00分00秒起至现在的总毫秒数,是所有时间的基础,其他时间可以通过时间戳转换得到。Java中本来已经有相关获取时间戳的方法,Java8后增加新的类Instant等专用于处理时间戳问题。 1获取时间戳的方法和性能对比1.1获取时间戳方法Java8以前
Easter79 Easter79
2年前
Twitter的分布式自增ID算法snowflake (Java版)
概述分布式系统中,有一些需要使用全局唯一ID的场景,这种时候为了防止ID冲突可以使用36位的UUID,但是UUID有一些缺点,首先他相对比较长,另外UUID一般是无序的。有些时候我们希望能使用一种简单一些的ID,并且希望ID能够按照时间有序生成。而twitter的snowflake解决了这种需求,最初Twitter把存储系统从MySQL迁移
Wesley13 Wesley13
2年前
mysql设置时区
mysql设置时区mysql\_query("SETtime\_zone'8:00'")ordie('时区设置失败,请联系管理员!');中国在东8区所以加8方法二:selectcount(user\_id)asdevice,CONVERT\_TZ(FROM\_UNIXTIME(reg\_time),'08:00','0
Stella981 Stella981
2年前
Django中Admin中的一些参数配置
设置在列表中显示的字段,id为django模型默认的主键list_display('id','name','sex','profession','email','qq','phone','status','create_time')设置在列表可编辑字段list_editable
Wesley13 Wesley13
2年前
MySQL部分从库上面因为大量的临时表tmp_table造成慢查询
背景描述Time:20190124T00:08:14.70572408:00User@Host:@Id:Schema:sentrymetaLast_errno:0Killed:0Query_time:0.315758Lock_
Python进阶者 Python进阶者
2个月前
Excel中这日期老是出来00:00:00,怎么用Pandas把这个去除
大家好,我是皮皮。一、前言前几天在Python白银交流群【上海新年人】问了一个Pandas数据筛选的问题。问题如下:这日期老是出来00:00:00,怎么把这个去除。二、实现过程后来【论草莓如何成为冻干莓】给了一个思路和代码如下:pd.toexcel之前把这