使用Flask构建基于Web的计算器

在这里，我们将学习使用Python和Flask创建基于Web的计算器的分步过程。Flask易于安装且使用简单，非常适合小型到中型项目。对于在使用Python进行Web开发领域的新手来说，本教程是一个极好的入门方式。

我们还将回顾构建计算器界面所需的最小HTML、CSS和JavaScript知识，该界面允许进行简单的计算。

安装

首先，在我们继续编码之前，我们需要确保已经安装了Python和Flask。如果你尚未安装Flask，可以通过pip（Python的包安装程序）轻松安装。

步骤1：安装Python

首先，您必须在您的机器上安装Python。您可以从官方Python网站下载。

另请阅读：Python环境搭建

步骤2：安装Flask

打开命令提示符或终端，并运行以下命令：

pip install flask

使用Flask构建基于Web的计算器

我们将首先创建一个简单的Flask应用程序，然后设计计算器的HTML界面并使用CSS进行样式设置。

步骤1：创建Flask应用程序 (app.py)

此文件将存储我们Flask应用程序的主要逻辑。

app.py 代码

from flask import Flask, render_template, request
app = Flask(__name__)
@app.route("/", methods=["GET", "POST"])
def index():
   result = ''
   if request.method == "POST":
      try:
         expression = request.form["display"]
         # Evaluate the expression safely using eval
         result = eval(expression)
      except Exception as e:
         result = "Error"
   return render_template("index.html", result=result)

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

代码解释

让我们首先导入必要的模块，包括：Flask、RenderTemplate和Request。

**index()**函数处理两种HTTP方法协议，包括GET和POST。当用户提交表单（POST请求）时，该函数尝试计算用户输入的表达式并返回该值。

如果在计算过程中出现任何问题（例如，输入错误），则返回“错误”。

最后，我们将计算结果与index.HTML模板一起呈现。

步骤2：创建HTML模板 (index.html)

在你的项目文件夹内创建一个名为“templates”的目录。在“templates”目录中，创建一个名为“index.html”的文件。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flask Calculator</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
</head>
<body>
<div class="calculator">
   <h1>Flask Calculator</h1>
   <form method="POST">
      <input type="text" name="display" id="display" value="{{ result }}" readonly>

      <div class="buttons">
         <button type="button" class="btn" onclick="appendToDisplay('1')">1</button>
         <button type="button" class="btn" onclick="appendToDisplay('2')">2</button>
         <button type="button" class="btn" onclick="appendToDisplay('3')">3</button>
         <button type="button" class="btn operator" onclick="appendToDisplay('+')">+</button>

         <button type="button" class="btn" onclick="appendToDisplay('4')">4</button>
         <button type="button" class="btn" onclick="appendToDisplay('5')">5</button>
         <button type="button" class="btn" onclick="appendToDisplay('6')">6</button>
         <button type="button" class="btn operator" onclick="appendToDisplay('-')">-</button>

         <button type="button" class="btn" onclick="appendToDisplay('7')">7</button>
         <button type="button" class="btn" onclick="appendToDisplay('8')">8</button>
         <button type="button" class="btn" onclick="appendToDisplay('9')">9</button>
         <button type="button" class="btn operator" onclick="appendToDisplay('*')">×</button>

         <button type="button" class="btn" onclick="appendToDisplay('0')">0</button>
         <button type="button" class="btn" onclick="clearDisplay()">C</button>
         <button type="submit" class="btn operator">=</button>
         <button type="button" class="btn operator" onclick="appendToDisplay('/')">÷</button>
      </div>
   </form>
</div>

<script>
   function appendToDisplay(value) {
      const display = document.getElementById('display');
      display.value += value;
   }

   function clearDisplay() {
      document.getElementById('display').value = '';
   }
</script>
</body>
</html>

代码解释

index.html 文件定义了计算器的外观。在这个程序中，它包含一个输入字段用于输入数值和显示结果。

它包含数字按钮和数学运算按钮（+，-，*，/），以及功能键，包括“C”键清除结果和“=”键显示结果。

计算器上的按钮，显示追加和清除功能，使用 JavaScript 函数来处理按钮交互以及显示的更新或清除。

步骤 3：添加样式 (style.css)

在你的项目文件夹内创建一个名为“static”的目录。在“static”目录中，创建一个名为“style.css”的文件来设置计算器的样式。

body {
   font-family: Arial, sans-serif;
   background-color: #f0f0f0;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 100vh;
   margin: 0;
}

.calculator {
   width: 100%;
   max-width: 600px;
   background-color: #333;
   padding: 30px;
   border-radius: 15px;
   box-shadow: 0px 0px 15px 0px #000;
   text-align: center;
}

h1 {
   color: #fff;
   margin-bottom: 20px;
   font-size: 36px;
}

#display {
   width: 100%;
   height: 80px;
   font-size: 36px;
   text-align: right;
   padding: 15px;
   margin-bottom: 20px;
   border-radius: 10px;
   border: none;
   background-color: #222;
   color: #fff;
}

.buttons {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 15px;
}

.btn {
   width: 100%;
   padding: 30px;
   font-size: 24px;
   border: none;
   border-radius: 10px;
   background-color: #666;
   color: #fff;
   cursor: pointer;
   transition: background-color 0.2s;
}

.btn:hover {
   background-color: #555;
}

.operator {
   background-color: #ff9500;
}

.operator:hover {
   background-color: #e68a00;
}

.btn:active {
   background-color: #444;
}

.operator:active {
   background-color: #cc7a00;
}