这两天在研究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. 再谈树形dp

    上次说了说树形dp的入门 那么这次该来一点有难度的题目了: UVA10859 Placing Lampposts 给定一个n个点m条边的无向无环图,在尽量少的节点上放灯,使得所有边都与灯相邻(被灯照亮 ...

  2. WPA-PSK无线网络密码破解原理

    1.基于WPA2的加密标准还是能够被破解,一个弊端是他无法避开时候双方验证的模式来认证取得合法性的连接,当我们抓取足够多得双反认证的数据包之后就可以破解密码.之前很多片的博客写了如何破解这种加密的秘钥 ...

  3. poj2441状态压缩dp基础

    /* 给定n头牛,m个谷仓,每头牛只能在一些特定的谷仓,一个谷仓只能有一头牛 问可行的安排方式 dp[i][j]表示前i头牛组成状态j的方案数,状态0表示无牛,1表示有牛 使用滚动数组即可 枚举到第i ...

  4. webpack学习笔记--整体配置结构

    之前的章节分别讲述了每个配置项的具体含义,但没有描述它们所处的位置和数据结构,下面通过一份代码来描述清楚: const path = require('path'); module.exports = ...

  5. Linux 的文件类型

    Linux 的文件通常分为 7 大类 文件类型                                  缩写      英文名称                                ...

  6. Sql与C#中日期格式转换总结

    SQL中的转换方法: 一.将string转换为datetime,主要是使用Convert方法, 方法,Convert(datetime [ ( length ) ] , expression, [st ...

  7. 【Android】LMK 工作机制

    Android分析之LowMemoryKiller Android Kernel 会定时执行一次检查,杀死一些进程,释放掉内存. 那么,如何来判断,那些进程是需要杀死的呢?答案就是我们的标题:Low ...

  8. 【Android】Android 中string-array的用法

    在Android中,用string-array是一种简单的提取XML资源文件数据的方法. 例子如下: 把相应的数据放到values文件夹的arrays.xml文件里 <?xml version= ...

  9. 没有IDE的日子

    没有QT Creator,没有VS2008,没有Eclipse,也没有KDevelop,忘掉一切IDE. 好吧,现在我只有Vim了,可我跟Vim不熟. Vim魅力四射,光芒万丈,高高在上,她就是传说中 ...

  10. @+id/和android:id有什么区别？

    Any View object may have an integer ID associated with it, to uniquely identify the View within the ...