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

来源：互联网发布：java string转int 编辑：程序博客网时间：2024/06/05 06:54

作为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)

阅读全文

0 0

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

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