用於Python函數的Web UI

Question

我有一個Python函數，它將一系列整數作爲輸入並返回另一系列整數。我想以網絡應用程序的形式發佈該功能。

登錄頁面應該包含帶有一系列整數字段（帶有輸入驗證），下拉字段和提交按鈕的Web表單。提交按鈕觸發所述的python函數並返回應該在html表格中呈現的結果。

我與Web開發一個完整的新手，但一些研究之後，似乎瓶是最合適的框架，我使用了上述任務。我的問題是，迄今爲止我遇到的文檔主要處理博客開發，因此與我之後的應用程序類型不相關。

因此，我尋求任何指針（示例代碼，書籍，文章）或指導，讓我開始我的任務。在最簡單的形式，就是我正在尋找的是：

• Web表單，它有一個整數（1-10）和第二整數（1-5）從下拉列表
• 網絡形式的回報錯誤，如果用戶輸入無效的整數（< 1，> 10）
• 上提交按鈕蟒函數計算兩個整數
• 結果被呈現在web表單

理解所有指導的總和。

Answer 1

那麼它真的很簡單，它是所有關於你如何在HTML模板呈現形式，讓您的視圖來獲取表單數據，並通過上下文回模板。

我趕緊嘲笑像你想要什麼樣（沒有什麼特別的，只是回到基本，並告訴你如何將這些一起工作），它的代碼只有幾行的2個文件main.py（核心文件，就像一個視圖邏輯）和一個模板calculation.html：

main.py

from flask import Flask 
from flask import render_template 
from flask import request 

app = Flask(__name__) 

@app.route("/", methods=['GET', 'POST']) 
def calculation(): 
    result = 0 
    error = '' 
    # you may want to customize your GET... in this case not applicable 
    if request.method=='POST': 
     # get the form data 
     first = request.form['first'] 
     second = request.form['second'] 
     if first and second: 
      try: 
       # do your validation or logic here... 
       if int(first)>10 or int(first)<1: 
        raise ValueError 
       result = int(first) + int(second) 
      except ValueError: 
       # you may pass custom error message as you like 
       error = 'Please input integer from 1-10 only.' 
    # you render the template and pass the context result & error 
    return render_template('calculation.html', result=result, error=error) 

if __name__ == "__main__": 
    app.run() 

模板/ calculation.html

<h1>Calculation</h1> 
<form method="POST"> 
    <input type="text" name="first" value=""> 
    <select name="second"> 
     <option value="1" selected>1</option> 
     <option value="2">2</option> 
     <option value="3">3</option> 
     <option value="4">4</option> 
     <option value="5">5</option> 
    </select> 
    <input type="submit" value="Submit"> 
    {% if result %} 
    <p> 
     <label name='result'>Answer is: {{ result }}</label> 
    </p> 
    {% endif %} 
    {% if error %} 
    <p> 
    <label name="error">{{ error }}</label> 
    </p> 
    {% endif %} 
</form> 

希望這些都是自我解釋，你可以去了解如何與瓶形式基本等

讀Flask Doc工作，並試圖跟進，他們是真的很簡單一旦你指定了基礎，你可能會開始尋找中級和前進的話題。

僅供參考，有一個WTForms稱爲Flask-WTF的延伸，它與形式打交道時非常方便，雖然沒有什麼可以阻止你只是在做純HTML格式如上面的代碼中的一切。

希望這有助於我希望你喜歡簡單和靈活Flask帶給你。