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