这两天在研究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中有代码，后端返回数据成功以后直接跳转到登录以后的页面即可。
