这两天在研究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. Mysql哪些字段适合建立索引

    数据库建立索引常用的规则如下: 1.表的主键.外键必须有索引: 2.数据量超过300的表应该有索引: 3.经常与其他表进行连接的表,在连接字段上应该建立索引: 4.经常出现在Where子句中的字段,特 ...

  2. laravel 配置设置

    public function updateRegisterSetting(Request $request, Configuration $config) { $conf = $request-&g ...

  3. PDF文件如何标注，怎么使用PDF标注工具

    我们在使用文件的时候需要给文件的部分添加标注,能够更加直观的了解文件,但是有很多小伙伴们对于PDF文件怎么添加标注都不知道,也不知道PDF标注工具要怎么使用,那么下面就跟大家分享一下怎么使用PDF标注 ...

  4. cf1140E 回文串+染色方案dp

    有点硬核的dp..要用到一个结论.. /* 把原串拆成奇偶串,再拆成极大连续的-1串:该串两端都是非-1数,中间都是-1,并且下标要么都是偶数,要么都是技术 然后对所有这些串进行dp,dp[i][0] ...

  5. 关于金蝶k3 wise供应生门户登陆界面屏蔽业务账套多余功能模块设置方法

    关于金蝶k3 wise供应生门户登陆界面屏蔽业务账套多余功能模块设置方法 1. 找到以下路径 ...\Kingdee\K3ERP\KDHR\SITEFILE\WEBUI\ 找到“Login.aspx” ...

  6. python--使用递归的方式建立二叉树

    树和图的数据结构,就很有意思啦. # coding = utf-8 class BinaryTree: def __init__(self, root_obj): self.key = root_ob ...

  7. tp3.2上传图片生成缩略图

    //引入 use think\Image; /* * $name为表单上传的name值 * $filePath为为保存在入口文件夹public下面uploads/下面的文件夹名称,没有的话会自动创建 ...

  8. es6 箭头函数【箭头表达式】

    箭头函数,通过 => 语法实现的函数简写形式,C#/JAVA8/CoffeeScript 中都有类似语法.与函数不同,箭头函数与其执行下文环境共享同一个 this.如果一个箭头函数出现在一个函数 ...

  9. 去除ArrayList集合中的重复自定义对象元素

    要求去除ArrayList集合中重复的Student的对象(什么叫重复,所有属性值都相同叫做重复). 思路: 1.创建一个新集合 2.遍历旧集合中的每一个元素,去新集合中找这个元素,如果这个元素不存在 ...

  10. A - Exposition CodeForces - 6E

    题目链接:https://vjudge.net/contest/202699#problem/A 题意 给一个n个元素的序列,从中挑出最长的子序列,要求子序列中元素差的最大值不超过k.问有几个最长子序 ...