Flask request 請求參數管理

時間 2021-01-19

標籤 css html 前端 jquery npm json flask bootstrap 後端 api 欄目 Python 简体版

原文原文鏈接

1.爲何要學習Flask request 請求參數管理css

1.一個完整的系統組成分爲兩部分(後端api,前端頁面)
* 前端頁面負責用戶體驗交互式效果--將用戶輸入的數據傳遞給後端api進行計算和處理.
* 後端api負責業務模塊功能實現-將預期的結果返回給前端頁面

2.使用Bootstrap前端框架模擬form表單數據提交html

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
   <href="./bootstrap-datetimepicker/dist/css/bootstrap-datepicker3.min.css">
  </head>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
   <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/usm/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> 

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
<form enctype="multipart/form-data" action="http://192.168.31.202:5050/Login" method="post">
    <div class="form-group col-sm-4">
      <label for="inputPassword4">登錄用戶</label>
      <input type="text" name="name" class="form-control" id="inputPassword4">
  </div>
   <div class="form-group col-sm-4">
     <label for="inputAddress">登錄密碼</label>
     <input type="password" name="passwd" class="form-control" id="inputAddress" placeholder="">
    </div>

  <button type="submit" name="submit" class="btn btn-primary">Sign in</button>
</form>
  </body>

</html>

3.flask 接收Bootstrap傳遞form表單數據前端

from flask import Flask, render_template, request,Response
import os
import json
app = Flask(__name__)

@app.route('/login')
def login_index():
   return render_template('index.html')

@app.route('/Login', methods = ['GET', 'POST'])
def login():
   if request.method == 'GET':
      return Response(json.dumps({"code": 0, "data": "test"}), mimetype='application/json')

   elif request.method == 'POST':
        name = request.form['name']
        passwd = request.form['passwd']
        if name and passwd:
           return Response(json.dumps({"code": 0, "data": "user login success"}), mimetype='application/json') 
        else:
           return Response(json.dumps({"code": 0, "data": "帳號或密碼未輸入 "}), mimetype='application/json')     

@app.route('/UserLogin', methods = ['GET', 'POST'])
def UserLogin():
   if request.method == 'GET':
      return Response(json.dumps({"code": 0, "data": "json data test"}), mimetype='application/json')

   elif request.method == 'POST':
          Data = request.get_json()
        name = Data.get('name',None)
        passwd = Data.get('password',None)
        if  name and passwd:
                    return Response(json.dumps({"code": 0, "data": "UserLogin success"}), mimetype='application/json') 
        else:
            return Response(json.dumps({"code": 0, "data": "帳號或密碼未輸入 "}), mimetype='application/json')     

if __name__ == '__main__':
    app.run(
        host="0.0.0.0",
        port=5050,
        debug=True
    )

*4.驗證接收Postman json請求數據**
jquery