Python flask+react+antd實現登錄demo

時間 2019-12-01

標籤 python flask+react+antd flask react antd 實現登錄 demo 欄目 Python 简体版

原文原文鏈接

這兩天在研究flask和antd，想把這倆個東西結合來使用，單獨學antd的時候用的是dva來配置，可是發現這樣與flask結合的話須要啓動兩個服務，做爲flask只是做爲數據的接口，並沒用用到其強大的模板渲染功能，因此最後仍是想能本地化antd，把它當作只是一個ui組件庫來用的話可能就能實現了。下面是具體的流程。　　css

在上一篇中寫到了將antd本地化，在此基礎上咱們就能夠用antd表單組件渲染一個登陸頁面，再將其放在flask的templates中。模板login.html: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中加載出模板，包括登陸的處理：jquery

# -*- 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中有代碼，後端返回數據成功之後直接跳轉到登陸之後的頁面便可。json

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。