Python flask+react+antd实现登陆demo

这两天在研究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>

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的更多相关文章

Python+Flask+MysqL的web技术建站过程
1.个人学期总结时间过得飞快,转眼间2017年就要过去.这一年,我学习JSP和Python,哪一门都像一样新的东西,之前从来没有学习过. 这里我就用我学习过的Python和大家分享一下,我是怎么从一 ...
[Python][flask][flask-login]关于flask-login中各种API使用实例
本篇博文跟上一篇[Python][flask][flask-wtf]关于flask-wtf中API使用实例教程有莫大的关系. 简介:Flask-Login 为 Flask 提供了用户会话管理.它处理了 ...
细数Python Flask微信公众号开发中遇到的那些坑
最近两三个月的时间,断断续续边学边做完成了一个微信公众号页面的开发工作.这是一个快递系统,主要功能有用户管理.寄收件地址管理.用户下单,订单管理,订单查询及一些宣传页面等.本文主要细数下开发过程中遇到 ...
Python Flask学习笔记之Hello World
Python Flask学习笔记之Hello World 安装virtualenv,配置Flask开发环境 virtualenv 虚拟环境是Python解释器的一个私有副本,在这个环境中可以安装私有包 ...
个人学期总结及Python+Flask+MysqL的web建设技术过程
一个学期即将过去,我们也迎来了2018年.这个学期,首次接触了web网站开发建设,不仅是这门课程,还有另外一门用idea的gradle框架来制作网页. 很显然,用python语言的flask框架更加简 ...
Python+Flask+MysqL的web建设技术过程
一.前言(个人学期总结) 个人总结一下这学期对于Python+Flask+MysqL的web建设技术过程的学习体会,Flask小辣椒框架相对于其他框架而言,更加稳定,不会有莫名其妙的错误,容错性强,运 ...
Python Flask 在Sina App Engine (SAE)上安家
早就听说了Python的大名,随着的编程语言的理解加深,越发认为动态语言的威力--真大呀. 趁这段时间不忙,我也用Python写了一个应用,而且将其部署到Sina App Engine (SAE).S ...
Python Flask 实现移动端应用接口（API）
引言目前,Web 应用已形成一种趋势:业务逻辑被越来越多地移到客户端,逐渐完善为一种称为富互联网应用(RIA,rich Internet application)的架构.在 RIA 中,服务器的主要 ...
Python flask构建微信小程序订餐系统
第1章 <Python Flask构建微信小程序订餐系统>课程简介本章内容会带领大家通览整体架构,功能模块,及学习建议.让大家在一个清晰的开发思路下,进行后续的学习.同时领着大家登陆ht ...

随机推荐

C++ shut down a computer
前阵子有朋友问我,怎么用C语言写一个小程序,控制电脑关机.这个我真的不懂,这几天闲着,就上网搜了搜,整理一下. IDE: Code::Blocks 16.01 操作系统:Windows 7 x64 # ...
Rsync 常见错误及解决方法
由于阿里云SLB不提供ECS间的数据同步服务,如果部署在SLB后端ECS上的应用服务是无状态的,那么可以通过独立的ECS或RDS服务来存储数据:如果部署在SLB后端ECS上的应用服务是有状态的,那么需 ...
AR 前言
LBS 基于位置的服务,是指通过电信移动运营商的无线电通讯网络或外部定位方式,获取移动终端用户的位置信息,在GIS平台的支持下,为用户提供相应服务的一种增值业务. 它包括两层含义:首先是确定移动设备或 ...
Spring.Net 简单实例-01(IOC)
1.话不多说看操作.新建"Windows窗体应用程序" 2:通过配置文件创建IOC容器首先引入安装包 3:定义一个接口(更好的体现封装性,当然也可以直接使用类) 定义一个类,实现 ...
know yourself
Know yourself! ------Socrates 麦穗古希腊有一位大学者,名叫苏格拉底.一天,他带领几个弟子来到一块麦地边.那正是收获的季节,地里满是沉甸甸的麦穗.苏格拉底对弟子们说:“你 ...
Echo（）、print（）、print_r（）区别
echo可以一次输出多个值,多个值之间用逗号分隔.echo是语言结构(language construct),而并不是真正的函数,因此不能作为表达式的一部分使用.echo是php的内部指令,不是函数, ...
iptables命令
iptables命令是Linux上常用的防火墙软件,是netfilter项目的一部分.可以直接配置,也可以通过许多前端和图形界面配置. 语法 iptables(选项)(参数) 选项 -t<表&g ...
|ERROR|ERROR: missing data for column "createtime" (seg3 slice1 192.168.66.23:40001 pid=33370)之mysql换行符或者空格引起的问题
1.最近的kettle的数据交换配置,启动kettle引起的错误,如下所示: |ERROR|ERROR: missing data pid=) 引发这个错误,并不是这个字段引起的错误,一般是这个字段临 ...
google 插件
鼠标手势 crxMouse Chrome™ Gestures Google翻译 json格式化 JSONView github展开文件夹 Octotree axure 原型 Axur ...
基于bootstrap的jQuery多级列表树插件 treeview
http://www.cnblogs.com/mfc-itblog/p/5233453.html http://www.htmleaf.com/jQuery/Menu-Navigation/20150 ...

Python flask+react+antd实现登陆demo

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

随机推荐

热门专题