angluarjs flask 前后台数据交互传递 异步请求

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/Mike_CSU/article/details/73176026

作为python的初学者 找文档找资料 搞了一天多 终于知道后台flask与前台angluarjs如何数据的交互

angluarjs数据的传值 主要是使用&http传值 

AngularJS 应用组成如下:
  • View(视图), 即 HTML。
  • Model(模型), 当前视图中可用的数据。
  • Controller(控制器), 即 JavaScript 函数,可以添加或修改属性。
下面写一个简单的登录代码:

前端(angluarjs):

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js">
        <!-- 这里直接引入这个js文件-->
    </script>
    <style>
        input.ng-invalid {
            background-color: lightblue;
        }
    </style>
</head>
<body>
<h2>登录</h2>
<form ng-app="myApp" ng-controller="validateCtrl"
      name="myForm" novalidate>
    <p>用户名:<br>
        <input type="text" name="user" ng-model="user.name" required>
        <span style="color:red" ng-show="myForm.user.$dirty && myForm.user.$invalid">
  <span ng-show="myForm.user.$error.required">请输入用户名</span>
  </span>
    </p>
    <p>密码:<br>
        <input type="password" name="password" ng-model="user.password" required>
        <span style="color:red" ng-show="myForm.password.$dirty && myForm.password.$invalid">
  <span ng-show="myForm.password.$error.required">请输入密码</span>
  </span>
    </p>
    <p>
        <button ng-click="nclick()"
                ng-disabled="myForm.user.$dirty && myForm.user.$invalid  ||
  myForm.password.$dirty && myForm.password.$invalid  ">signin
        </button>
    </p>
</form>
<script> 
    var app = angular.module('myApp', []);
    app.controller('validateCtrl', function ($scope, $http, $location) {
       
        $scope.nclick = function () {
            $http({              
                method: 'POST',
                url: 'login',                                    //请求的路径
                data: {                                          //放进的值
                    post: $scope.user
                },
 headers: {'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8 '} }).then(function successCallback(response) { //http异步刷新  //请求成功执行代码
		 console.log(response.data);
                $scope.names = response.data;                      //请求成功后获取请求返回的数据
                window.location = "successlogin"                  //跳转到后台 successlogin
            }, function errorCallback(response) {
                // 请求失败执行代码
                $scope.names = response.data;
            });
        };
    });
</script>
</form>
</body>
</html>

后台(flask):

@auth.route('/login', methods=['GET', 'POST'])
def login():
    datas = request.get_data()                    #前台传过来的数据用request接受 不过接受的是字符串str
    evaldatas = eval(datas)			  #需要把数据str 转换成字典序 用eval 这样就可以用键值对取值了
    username =  evaldatas['post']['name']
    password =  evaldatas['post']['password']
    user = User.query.filter_by(name=username, password=password).first()   #User 是model层的一个类 如下面代码
    if user is not None:
        login_user(user)
        return "成功"
    return "失败"

(model):

class User(UserMixin,db.Model):
    __tablename__ = 'users'
    id = db.Column(db.Integer, primary_key=True)
    name = db.Column(db.String(40),nullable=True)
    email = db.Column(db.String(40),nullable=True)
    password = db.Column(db.String(40),nullable=True)
展开阅读全文

没有更多推荐了,返回首页