Python 函数的 Web UI

Question

我有一个 python 函数，它将一系列整数作为输入并返回另一个整数系列。我想以网络应用程序的形式分发该功能。

登录页面应包含一个 Web 表单，其中包含一系列整数字段（带有输入验证）、下拉字段和一个提交按钮。提交按钮触发上述 python 函数并返回应在 html 表中呈现的结果。

我是 Web 开发的完全新手，但经过一些研究，flask 似乎是我用于上述任务的最合适的框架。我的问题是到目前为止我遇到的文档主要涉及博客开发，因此与我所追求的应用程序类型无关。

因此，我正在寻求任何指示（示例代码、书籍、文章）或指导来帮助我开始我的任务。以最简单的形式，我正在寻找的是：

• 从下拉列表中获取一个整数 (1-10) 和第二个整数 (1-5) 的 Web 表单
• 如果用户输入无效整数 (<1, >10)，Web 表单将返回错误
• 在提交按钮上 python 函数计算两个整数的总和
• 结果显示在网络表单上

所有指导表示赞赏。

Answer 1

嗯，这真的很简单，这完全是关于如何在 html 模板中呈现表单，获取视图以获取表单数据，并将上下文传递回模板。

我很快就模拟了一个你想要的样例（没什么特别的，只是回到基本并向你展示它们是如何协同工作的），它只有 2 个文件main.py 中的几行代码（核心文件，就像一个视图逻辑) 和模板计算.html：

主文件

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()

模板/计算.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和表单等基础知识。

阅读Flask Doc并尝试跟进，它们确实非常简单，一旦您掌握了基本知识，您就可以开始寻找中级和高级主题。

仅供参考，WTForms有一个名为Flask-WTF的扩展，它在处理表单时非常方便，尽管没有什么能阻止您像上面的代码一样以纯 html 形式执行所有操作。

希望这会有所帮助，并希望您喜欢Flask为您带来的简单性和灵活性。