这两天在研究flask和antd，想把这俩个东西结合来使用，单独学antd的时候用的是dva来配置，但是发现这样与flask结合的话需要启动两个服务，作为flask只是作为数据的接口，并没用用到其强大的模板渲染功能，所以最后还是想能本地化antd，把它当做只是一个ui组件库来用的话可能就能实现了。下面是具体的流程。　　

在上一篇中写到了将antd本地化，在此基础上我们就可以用antd表单组件渲染一个登录页面，再将其放在flask的templates中。模板login.html:

<!DOCTYPE html>

<html>

  <head>

      <meta charset="UTF-8" />

      <title>欢迎登录!</title>

      <script src="/static/react/react.min.js"></script>

      <script src="/static/react/react-dom.min.js"></script>

      <script src="/static/react/browser.min.js"></script>

      <script src="/static/antd/dist/antd.js"></script>

      <link href="/static/antd/dist/antd.css" rel="stylesheet"/>

      <link href="/static/css/login.css" rel="stylesheet"/>

      <script src="/static/js/pagetools/jquery-1.11.3.min.js"></script>

  </head>

  <body>

    <div id="loginBox"></div>

    <script type="text/babel" src="/static/components/Login.js"> </script>

  </body>

</html>

Login.js是整个登录表单的渲染代码，在最后包含了表单的验证，其实主要就是把官网上的代码拿来用就行，只要在用到antd（大写开头的标签）组件的时候加上（antd.）：

var FormItem = antd.Form.Item;

var Login = React.createClass({

  getInitialState: function() {

    return {

      username: "",

      userpass:"",

      namevalidateStatus:"",

      passvalidateStatus:"",

      lastvalidateStatus:"",

      nameHelp:"",

      passHelp:"",

      lastHelp:""

    };

  },

  handleUsernameChange: function (event) {

        this.setState({

            username: event.target.value

        });

    },

  handleUserpassChange: function (event) {

        this.setState({

            userpass: event.target.value

        });

    },

  handleSubmit: function(event) {

      if(this.state.username == ''){

          this.setState({

            namevalidateStatus: 'error',

            nameHelp:'请输入用户名！'

        });

      }

      else if(this.state.userpass == ''){

           this.setState({

            passvalidateStatus: 'error',

            passHelp:'请输入密码！'

        });

      }

      else{

         var obj = this;
           //提交表单数据到后端验证

          $.post("/loginAction",{

               username:this.state.username,

               userpass:this.state.userpass

              },

              function(data,status){

                var returnData = JSON.parse(data);

               if(returnData.infostatus=='T'){

                obj.setState({

                    lastvalidateStatus:"success",

                    lastHelp:returnData.infomsg

                  });

                location.href="/antd";

               }

               else {

                obj.setState({

                    userpass: '',

                    namevalidateStatus:"",

                    passvalidateStatus:"",

                    lastvalidateStatus:"error",

                    nameHelp:"",

                    passHelp:"",

                    lastHelp:returnData.infomsg

                  });

               }

              });

      }

      event.preventDefault();

  },

  render: function() {

    return (

        <antd.Form onSubmit={this.handleSubmit}  className="login-form">

              <h1>欢迎登录</h1>

              <FormItem validateStatus={this.state.namevalidateStatus} help={this.state.nameHelp}>

              <antd.Input className="username"  value={this.state.username} onChange={this.handleUsernameChange} prefix={<antd.Icon type="user" style={{ fontSize: 13 }} />}  placeholder="Username" />

              </FormItem>

              <FormItem validateStatus={this.state.passvalidateStatus} help={this.state.passHelp}>

              <antd.Input className="userpass"  value={this.state.userpass} onChange={this.handleUserpassChange}  prefix={<antd.Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />

              </FormItem>

              <FormItem validateStatus={this.state.lastvalidateStatus} help={this.state.lastHelp}>

              <antd.Checkbox>记住我</antd.Checkbox>

            <a className="login-form-forgot">忘记密码</a>

            <antd.Button type="primary" htmlType="submit" className="login-form-button">

              登录

            </antd.Button>

            <a>注册</a>

            </FormItem>

        </antd.Form>

    );

  }

});

ReactDOM.render(<Login />, document.getElementById('loginBox'));

这样模板就渲染好了，通过mian.py中加载出模板，包括登录的处理：

# -*- coding:utf-8 -*-

from flask import Flask, render_template, session, redirect, url_for, escape, request

from dpl import grade

from dpl import user

from dpl import userLogin

# from dpl import selected_grade

import json

app = Flask(__name__)

@app.route('/login')

def login():

    return render_template('login.html')

@app.route('/loginAction',methods=['GET', 'POST'])

def login_action():

    user_pass = request.form.get('userpass')

    user_name = request.form.get('username')

    print('username',user_name)

    print('user_pass',user_pass)

    result = userLogin.UserLogin.select_user(user_name,user_pass)

    if request.method == 'POST':

        if result['infostatus']=='T':

            session['username'] = user_name

            return json.dumps(result)

        else:

            return json.dumps(result)

@app.route('/antd')

def test_antd():

    # session.pop('username',None)

    name = 0

    if 'username' in session:

        name = session['username']

    return render_template('antd.html',username=name)

@app.route('/userlist')

def get_user():

    userlist = user.get_user()

    return json.dumps(userlist)

@app.route('/backLogin')

def back_login():

    session.pop('username',0)

    return redirect('/login')

# for session

app.secret_key = 'A0Zr98j/3yX R~XHH!jmN]LWX/,?RT'

if __name__ == '__main__':

    app.run(host='0.0.0.0',port=8001,debug=True)

实现登录在Login.js中有代码，后端返回数据成功以后直接跳转到登录以后的页面即可。

Python flask+react+antd实现登陆demo的更多相关文章

  1. Python+Flask+MysqL的web技术建站过程

    1.个人学期总结 时间过得飞快,转眼间2017年就要过去.这一年,我学习JSP和Python,哪一门都像一样新的东西,之前从来没有学习过. 这里我就用我学习过的Python和大家分享一下,我是怎么从一 ...

  2. [Python][flask][flask-login]关于flask-login中各种API使用实例

    本篇博文跟上一篇[Python][flask][flask-wtf]关于flask-wtf中API使用实例教程有莫大的关系. 简介:Flask-Login 为 Flask 提供了用户会话管理.它处理了 ...

  3. 细数Python Flask微信公众号开发中遇到的那些坑

    最近两三个月的时间,断断续续边学边做完成了一个微信公众号页面的开发工作.这是一个快递系统,主要功能有用户管理.寄收件地址管理.用户下单,订单管理,订单查询及一些宣传页面等.本文主要细数下开发过程中遇到 ...

  4. Python Flask学习笔记之Hello World

    Python Flask学习笔记之Hello World 安装virtualenv,配置Flask开发环境 virtualenv 虚拟环境是Python解释器的一个私有副本,在这个环境中可以安装私有包 ...

  5. 个人学期总结及Python+Flask+MysqL的web建设技术过程

    一个学期即将过去,我们也迎来了2018年.这个学期,首次接触了web网站开发建设,不仅是这门课程,还有另外一门用idea的gradle框架来制作网页. 很显然,用python语言的flask框架更加简 ...

  6. Python+Flask+MysqL的web建设技术过程

    一.前言(个人学期总结) 个人总结一下这学期对于Python+Flask+MysqL的web建设技术过程的学习体会,Flask小辣椒框架相对于其他框架而言,更加稳定,不会有莫名其妙的错误,容错性强,运 ...

  7. Python Flask 在Sina App Engine (SAE)上安家

    早就听说了Python的大名,随着的编程语言的理解加深,越发认为动态语言的威力--真大呀. 趁这段时间不忙,我也用Python写了一个应用,而且将其部署到Sina App Engine (SAE).S ...

  8. Python Flask 实现移动端应用接口（API）

    引言 目前,Web 应用已形成一种趋势:业务逻辑被越来越多地移到客户端,逐渐完善为一种称为富互联网应用(RIA,rich Internet application)的架构.在 RIA 中,服务器的主要 ...

  9. Python flask构建微信小程序订餐系统

    第1章 <Python Flask构建微信小程序订餐系统>课程简介 本章内容会带领大家通览整体架构,功能模块,及学习建议.让大家在一个清晰的开发思路下,进行后续的学习.同时领着大家登陆ht ...

随机推荐

  1. Java的家庭记账本程序（A）

    日期:2019.2.1 博客期:028 星期五 其实我早就开始开发“家庭记账本”的软件了,只不过写博客写的有点晚,我是打算先做web的!因为Android Studio的教程,还是要对应版本,好多问题 ...

  2. OSError: cannot identify image file

    OSError: cannot identify image file <_io.BytesIO object at 0x00000236DD598BF8> 说一下为什么会出现OSErro ...

  3. redis客户端、分布式锁及数据一致性

    Redis Java客户端有很多的开源产品比如Redission.Jedis.lettuce等. Jedis是Redis的Java实现的客户端,其API提供了比较全面的Redis命令的支持:Redis ...

  4. LeetCode（107）： 二叉树的层次遍历 II

    Easy! 题目描述: 给定一个二叉树,返回其节点值自底向上的层次遍历. (即按从叶子节点所在层到根节点所在的层,逐层从左向右遍历) 例如:给定二叉树 [3,9,20,null,null,15,7], ...

  5. 页面初始化的js函数要放在最最最最最最最前边！否则没效果

    简单说一下这个情况,html的页面的各部分都是动态渲染的,所以头部的某些个样式调用函数需要在页面初始化的时候被加载,这个我也是知道的,结果后边代码敲着敲着,就把这个事儿给忘了,然后启动项目的时候,页面 ...

  6. 【linux】复制文件夹内容到另一个文件夹

    我一直觉得cp是个非常简单的指令.结果居然遇到坑了.记录一下. 文件夹1:test1/ 文件夹2:test2/ 目标:将test1/中的所有文件和目录拷贝到test2/中 正确指令: cp -rf t ...

  7. centos之mysql安装配置使用

    安装:  这里只安装得时mysql5.1,如果想安装5.6,看这里http://www.cnblogs.com/xuange306/p/8243859.html yum install -y mysq ...

  8. python文件操作r+,w+,a+,rb+,

    w:以写方式打开, a:以追加模式打开 (从 EOF 开始, 必要时创建新文件) r+:以读写模式打开 w+:以读写模式打开 (参见 w ) a+:以读写模式打开 (参见 a ) rb:以二进制读模式 ...

  9. The connection string 'MysqlEF' in the application's configuration file does not contain the require异常

    在学习EF core first 对接mysql时,出现了这个异常. 原因是:连接字符串中缺少providerName="MySql.Data.MySqlClient" <a ...

  10. php让一个数组按照另外一个数组的键名进行排序

    $a = [ 'id', 'name', 'identityId', 'phone', 'email', 'schoolId' ]; $b = [ 'id' => '唯一标识', 'identi ...