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 ...

随机推荐

(批量更新)对多个符合条件的id做更新操作
需求描述:把checkbox勾选的对应id的记录的标志位置1或0,这个其实不难的,不过我自己做的话,肯定是多次访问数据库做更新,看了老大的代码,发现差距不是一般的大,老大把sql灵活运用,结果一次访问 ...
Fiddler导出Jmeter脚本
版本:V4.4 用途:将fiddler抓取的请求,导出为jmx格式,方便jmeter直接调用新增功能: 1.在测试计划下,新增[HTTP请求默认值],内容为空,后续需将站点的IP和端口填下在这个下面 ...
windows下bat批处理执行sql语句__Mysql
直接上代码: @ECHO OFF SET dbhost=主机名(例如:127.0.0.1)SET dbuser=用户名(例如:root)SET dbpasswd=用户密码(例如:root)SET db ...
饮冰三年-人工智能-linux-06 系统启动流程及安全
系统启动流程 BOIS(Basic Input/Output System)基本输入输出系统:硬件和软件之间的接口,而且是很基本的接口. grub(Grand Unified BootLoader)多 ...
paython3-练习
在文本每行末尾加; f = open(r'D:\test1\1.txt','rb') w = open(r'D:\test1\2.txt','wb') for line in f.readlines( ...
Django目录结构分析
Django目录结构分析: Django的Linux项目目录记录 [root@cmdb Django]# tree mysite mysite ├── cmdb │ ├── admin.py # ...
SQLServer 常见高CPU利用率原因
1.缺失索引: USE AdventureWorks2014 SET STATISTICS TIME ON; SET STATISTICS IO ON ; SELECT per.FirstName,p ...
加密算法之非对称加密RSA
一:非对称加密的由来 RSA公钥加密算法是1977年由Ron Rivest.Adi Shamirh和LenAdleman在(美国麻省理工学院)开发的.RSA取名来自开发他们三者的名字.RSA是目前最有 ...
如何保证Redis的高可用
什么是高可用全年时间里,99%的时间里都能对外提供服务,就是高可用主备切换在master故障时,自动检测,将某个slave切换为master的过程,叫做主备切换.这个过程,实现了Redis主从架 ...
解开一个疑惑，为什么LVS开放的端口，使用netstat或ss命令，不能查找到其监听的端口呢？
RT, 这个疑问,本周一直在心里,今天找到一个说法. ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 另外LVS规则算是内核方法,用netstat -ntulp也显 ...

Python flask+react+antd实现登陆demo

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

随机推荐

热门专题