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>
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的更多相关文章
- 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 ...
随机推荐
- NIO（三）
使用直接缓冲区完成文件的复制(内存映射文件) package com.cppdy.nio; import java.nio.MappedByteBuffer; import java.nio.chan ...
- 单击列表行前边的checkbox被选中，再单击，取消选中
需求描述:单击datatabl的一行数据,前边的checkbox被勾选上,再次点击,选中取消,第一次碰到这种需求,不过呢也很实用,简单记录一下 代码: //html代码<tr class=&qu ...
- poj2817状态压缩 升维
/* 两两求出字符串之间最大可以匹配的值 由已知状态推导出位置状态 状态s表示已经加入到集合中的字符串,0表示串i不存在,1存在 由于字符串的加入顺序会影响结果,所以增加一维来表示 dp[S][i]表 ...
- Python元组与列表的区别
列表类似于我们用铅笔在纸上写字,写错了还可以擦掉:而元组则类似于用钢笔写字,写错了就擦不掉了,除非换张纸重写. 列表和元组的区别主要体现在一下几个方面: 列表属于可变序列,他的元素可以随时修改或删除: ...
- OrCAD Capture CIS 16.6 导出BOM
OrCAD Capture CIS 16.6 一.选择设计文件:菜单:Tools > Bill of Materials... 二.Bill of Materials > Open in ...
- php模拟数据请求
php:模拟后台接受数据的步骤<?php> 1.连接数据库 $host="localhost"; $uname="root"; $upwd=&quo ...
- NPOI操作Excel(一)--NPOI基础
用C#读取Excel的方法有很多中,由于近期工作需要,需要解析的Excel含有合并单元格以及背景色等特殊要求,故在网上查了一些关于读Excel的方法的优缺点,觉得NPOI能满足我的需要,所以搜索了一些 ...
- 阿里云人脸识别测试接口出错 返回Body：{ "errno": 1031, "err_msg": "Invalid Image URL.", "request_id": "cdbe2927-e1bb-4eb1-a603-8fcd4b0b7fc8" }
错误信息如下 返回Body:{ "errno": 1031, "err_msg": "Invalid Image URL.", " ...
- docker批量删除none镜像
1.直接用docker images | grep none | awk ‘{print $3}’ |xgars docker rmi 通过关键字搜索,得到docker id,进行删除
- 如果拷贝项目出现各种找不到文件的时候，基本就是没有标记，或者文件名的问题，Could not find resource mybatis.xml,解决方法
Could not find resource mybatis.xml