文档章节

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

雨花
 雨花
发布于 2016/05/29 13:22
字数 728
阅读 303
收藏 2

【推荐】2019 Java 开发者跳槽指南.pdf(吐血整理) >>>

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

完毕,有问题留言

© 著作权归作者所有

雨花
粉丝 1
博文 16
码字总数 3362
作品 0
杭州
个人站长
私信 提问
第46天: Flask数据持久化

by 太阳雪 Web 应用离不开数据存储,今天就来学习下 Flask 中如何与数据库交互,最后我们将做一个提交的实例 Flask 中最方便用的数据库框架是 flask_sqlalchamy,是对 SQLAlchamy 在 Flask ...

纯洁的微笑
10/30
0
0
Flask 教程 第四章:数据库

本文转载自:https://www.jianshu.com/p/253bd3638cb5 在Flask Mega-Tutorial系列的第四部分,我将告诉你如何使用数据库。 本章的主题是重中之重!大多数应用都需要持久化存储数据,并高效地...

天降攻城狮
02/22
0
0
Flask-Login详解

关于Flask登录认证的详细过程请参见拙作<>一文,而本文则偏重于详细介绍Flask-Login的原理,代码的解析。 首次登陆 我们首先来看一下首次登录验证的流程图: 首次登陆 Flask-Login在登录过程...

geekpy
2017/10/12
0
0
Flask 教程 第十六章:全文搜索

本文转载自:https://www.jianshu.com/p/56cfc972d372 这是Flask Mega-Tutorial系列的第十六部分,我将在其中为Microblog添加全文搜索功能。 本章的目标是为Microblog实现搜索功能,以便用户...

天降攻城狮
02/23
0
0
Python进阶(五十)-解析Flask运行原理

Python进阶(五十)-解析Flask运行原理   在学习Python Web开发过程中,掌握了Flask的开发方法。经过一段时间的视频学习,回过头来对Flask的运行原理做一简要解析,以增强自己对Flask的了解。...

sunhuaqiang1
2017/05/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周一乱弹 —— 我的视频网站vip账号和我厚脸皮的朋友们

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @Cobbage :分享小海的单曲《衡山路(2016现场版)》: 《衡山路(2016现场版)》- 小海 手机党少年们想听歌,请使劲儿戳(这里) @FalconChe...

小小编辑
33分钟前
4
0
Spring Cloud Alibaba 实战(十二) - Nacos配置管理

> 本章主要内容是:使用Nacos管理配置以及实现配置管理的原因,配置如何管理以及动态刷新和最佳实现总结,最后是Nacos配置刷新原理解读 该技术类似于Spring Cloud Config 1 配置管理的意义 项目...

JavaEdge
今天
8
0
面试官问你编码相关的面试题,把这篇甩给他就完事!

前情回顾:Java中一个字符占两字节 但为什么new String("字").getBytes().length 返回3个字节 今天主要聊一聊: 字节 字符 字符集 编码 字符编码 Java 内码和外码 Unicode 字节 例如 :00001...

gzc426
今天
9
0
写的简单sh脚本2

#!/bin/bashexport LANG="en_US.UTF-8"#chmod +x filename 记得给文件加可执行权限#./vsimstart.sh#启动vsim项目echo "start vism"#207------------------------------assets=vsim-a......

hexiaoming123
昨天
6
0
java基础(1)变量和常量

概要和总结: 数据类型图: 基本数据类型:只有基本功能-----保存数据 (4类8种)byte-short-int-long-float-double-char-boolean 引用数据类型:有更多功能,保存数据,处理数据...

煌sir
昨天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部