基于Flask实现带输入校验的加法Web应用

码头散步
码头散步
发布时间:2026-10-13 | 4人浏览过
原创

本文详解如何使用Python Flask框架开发一个简单的加法Web应用。通过封装sum_function子函数实现逻辑复用,利用try-except语句对输入进行浮点数校验,并在HTML模板中保留用户输入值以优化交互体验。最终通过localhost:8080端口验证正确与错误输入下的运行结果。

Flask加法应用主程序实现

主程序文件名为mainaddfunc.py。


from flask import Flask, render_template, request, url_for
from add import *

app = Flask(__name__)
 
@app.route('/', methods=['GET'])
def home():
  return render_template('index.html')

@app.route('/', methods=['POST'])
def add():
    a = request.form['adder1']
    b = request.form['adder2']
    try:
      a = float(a)
      b = float(b)
      result = sum_function(a, b)
      return render_template('index.html', result=result, var1=a, var2=b)
    except:
      return render_template('index.html', message='inputs false!!!', var1=a, var2=b)
    
if __name__ == '__main__':
  app.run(port=8080)

函数调用与输入校验逻辑优化

对比原作者的代码,可以发现此处result变量调用了Python子函数sum_function。部分读者可能会质疑:如此简单的加法运算为何要引入子程序?虽然看似繁琐,但这种调用方式打开了子函数应用的新思路。当遇到复杂逻辑时,只需套用此模板即可自然实现函数调用。此外,代码进行了两处关键修改:第一处加入了try语句,用于判断输入的加数是否为数字,若无法转换为浮点数则触发报错;第二处引入了var1和var2两个变量,将两个加数作为变量传递给HTML页面。这样做的好处何在?请参见下一段代码index.html。


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>加法</title>
</head>
<body>
<div align="center" style="margin-top: 40px;">
  <form name="form1" method="POST">
    <input type="text" placeholder="adder" name="adder1" value="{{ var1 }}">+
    <input type="text" placeholder="adder-2" name="adder2" value="{{ var2 }}">=
    <input type="text" readonly="readonly" placeholder="result" name="result" value="{{ result }}">
    <input type="submit" value="计算" οnclick="">
  </form>
</div>
{% if message %}
  <p style="color:red">{{ message }}</p>
  {% endif %}
</body>

HTML模板中的输入值保留机制

与原作者代码相比,此处增加了value="{{ var1 }}和value="{{ var2 }}。其优势在于:当用户输入两个加数并点击计算按钮后,即使页面刷新,输入的加数仍会保留在输入框中,不会消失。原作者虽已注意到此问题,但此处提供了更完善的改进方案。以下是最终的运行效果。

展示了在正确输入和错误输入两种情况下的界面表现。

运行验证与子函数代码

演示至此结束。给初学者的提示:在谷歌浏览器地址栏输入http://localhost:8080/即可查看运行结果,毕竟Flask主要用于Web开发。最后附上Python子函数add.py的代码。


def sum_function(a, b):
  c = a + b
  return c

以上为本文全部内容,希望能为各位的学习提供帮助,也欢迎大家继续支持本站。

相关标签:

本站声明

本文内容仅供参考,不代表本站观点。转载或引用请注明出处。如发现内容问题,请通过联系我们页面反馈。

Python 相关产品和应用

全部下载

专题列表