使用 python 创建一个 Web 计算器 (基于Python Flask) 附源码

LIY若依

已于 2024-07-31 23:20:58 修改

阅读量3.5k

点赞数 10

文章标签： python 前端 flask

于 2024-07-31 23:03:25 首次发布

本文链接：https://blog.csdn.net/m0_74972192/article/details/140834451

版权

在这篇博客中，我们将介绍如何使用 Flask 创建一个简单的 Web 计算器应用程序。Flask 是一个轻量级的 Python Web 框架，非常适合快速开发和原型设计。通过这个项目，你将学习到如何使用 Flask 构建 Web 应用程序，以及如何处理用户输入和显示结果。

环境准备

首先，确保你已经安装了 Flask。你可以使用以下命令安装 Flask：

pip install Flask

创建 Flask 应用程序

步骤 1：创建应用实例

from flask import Flask, render_template, request

app = Flask(__name__)

解析：

from flask import Flask, render_template, request：导入 Flask 框架及其相关模块。
app = Flask(__name__)：创建一个 Flask 应用实例，__name__ 变量表示当前模块的名称。

步骤 2：定义根路由

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

解析：

@app.route('/')：定义根路由，当用户访问根 URL (/) 时，调用 index() 函数。
def index(): return render_template('index.html')：index() 函数返回 index.html 模板。

步骤 3：定义计算路由

@app.route('/calculate', methods=['POST'])
def calculate():
    try:
        expression = request.form['expression']
        result = eval(expression)
        return render_template('index.html', result=result, expression=expression)
    except Exception as e:
        return render_template('index.html', result='错误', expression=expression)

解析：

@app.route('/calculate', methods=['POST'])：定义处理计算请求的路由，使用 POST 方法。
expression = request.form['expression']：获取用户输入的表达式。
result = eval(expression)：计算表达式的结果。
return render_template('index.html', result=result, expression=expression)：返回 index.html 模板，并传递计算结果和表达式。
except Exception as e: return render_template('index.html', result='错误', expression=expression)：如果计算过程中出现错误，返回错误信息。

步骤 4：运行应用

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

解析：

if __name__ == '__main__': app.run(debug=True)：以调试模式运行应用。

创建 HTML 模板

步骤 1：HTML 头部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flask 计算器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .calculator {
            border: 1px solid #ccc;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .display {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            font-size: 1.2em;
            text-align: right;
        }
        .buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
        }
        .buttons button {
            padding: 20px;
            font-size: 1.2em;
            cursor: pointer;
        }
    </style>
</head>

解析：

<!DOCTYPE html>：声明文档类型为 HTML5。
<html lang="en">：定义 HTML 文档的语言为英语。
<head>：包含文档的元数据。
<meta charset="UTF-8">：设置文档的字符编码为 UTF-8。
<title>Flask 计算器</title>：设置网页标题。
<style>：包含 CSS 样式，用于美化计算器界面。

步骤 2：HTML 主体

<body>
    <div class="calculator">
        <form method="post" action="/calculate">
            <input type="text" name="expression" class="display" value="{{ expression }}" readonly>
            <div class="buttons">
                <button type="button" onclick="appendToExpression('7')">7</button>
                <button type="button" onclick="appendToExpression('8')">8</button>
                <button type="button" onclick="appendToExpression('9')">9</button>
                <button type="button" onclick="appendToExpression('/')">/</button>
                <button type="button" onclick="appendToExpression('4')">4</button>
                <button type="button" onclick="appendToExpression('5')">5</button>
                <button type="button" onclick="appendToExpression('6')">6</button>
                <button type="button" onclick="appendToExpression('*')">*</button>
                <button type="button" onclick="appendToExpression('1')">1</button>
                <button type="button" onclick="appendToExpression('2')">2</button>
                <button type="button" onclick="appendToExpression('3')">3</button>
                <button type="button" onclick="appendToExpression('-')">-</button>
                <button type="button" onclick="appendToExpression('0')">0</button>
                <button type="button" onclick="appendToExpression('.')">.</button>
                <button type="submit">=</button>
                <button type="button" onclick="appendToExpression('+')">+</button>
            </div>
        </form>
        {% if result is not none %}
        <div class="result">
            <h2>结果: {{ result }}</h2>
        </div>
        {% endif %}
    </div>
    <script>
        function appendToExpression(value) {
            const display = document.querySelector('.display');
            display.value += value;
        }
    </script>
</body>
</html>

解析：

<body>：包含网页的主体内容。
<div class="calculator">：定义计算器的容器。
<form method="post" action="/calculate">：定义表单，使用 POST 方法提交数据到 /calculate 路由。
<input type="text" name="expression" class="display" value="{{ expression }}" readonly>：定义显示屏，显示用户输入的表达式。
<div class="buttons">：定义按钮容器，使用 CSS 网格布局排列按钮。
<button type="button" onclick="appendToExpression('7')">7</button>：定义按钮，点击按钮时调用 appendToExpression('7') 函数，将数字 7 追加到显示屏。
<script>：包含 JavaScript 代码，用于处理按钮点击事件。

运行 Flask 应用程序

然后在浏览器中访问 http://127.0.0.1:5000/，你将看到一个简单的计算器界面。

完整代码

Python

from flask import Flask, render_template, request

app = Flask(__name__)

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

@app.route('/calculate', methods=['POST'])
def calculate():
    try:
        expression = request.form['expression']
        result = eval(expression)
        return render_template('index.html', result=result, expression=expression)
    except Exception as e:
        return render_template('index.html', result='错误', expression=expression)

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

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flask 计算器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
        .calculator {
            border: 1px solid #ccc;
            padding: 20px;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        .display {
            width: 100%;
            padding: 10px;
            margin-bottom: 10px;
            font-size: 1.2em;
            text-align: right;
        }
        .buttons {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 10px;
        }
        .buttons button {
            padding: 20px;
            font-size: 1.2em;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <div class="calculator">
        <form method="post" action="/calculate">
            <input type="text" name="expression" class="display" value="{{ expression }}" readonly>
            <div class="buttons">
                <button type="button" onclick="appendToExpression('7')">7</button>
                <button type="button" onclick="appendToExpression('8')">8</button>
                <button type="button" onclick="appendToExpression('9')">9</button>
                <button type="button" onclick="appendToExpression('/')">/</button>
                <button type="button" onclick="appendToExpression('4')">4</button>
                <button type="button" onclick="appendToExpression('5')">5</button>
                <button type="button" onclick="appendToExpression('6')">6</button>
                <button type="button" onclick="appendToExpression('*')">*</button>
                <button type="button" onclick="appendToExpression('1')">1</button>
                <button type="button" onclick="appendToExpression('2')">2</button>
                <button type="button" onclick="appendToExpression('3')">3</button>
                <button type="button" onclick="appendToExpression('-')">-</button>
                <button type="button" onclick="appendToExpression('0')">0</button>
                <button type="button" onclick="appendToExpression('.')">.</button>
                <button type="submit">=</button>
                <button type="button" onclick="appendToExpression('+')">+</button>
            </div>
        </form>
        {% if result is not none %}
        <div class="result">
            <h2>结果: {{ result }}</h2>
        </div>
        {% endif %}
    </div>
    <script>
        function appendToExpression(value) {
            const display = document.querySelector('.display');
            display.value += value;
        }
    </script>
</body>
</html>

这个 HTML 模板定义了计算器的界面，包括显示屏和按钮。我们使用了简单的 CSS 样式来美化界面，并使用 JavaScript 处理按钮点击事件，将输入值追加到显示屏。

运行 Flask 应用程序

效果图：

其他文章推荐

总结

在这个项目中，你学习了以下内容：

Flask 框架：你了解了如何使用 Flask 框架来构建一个简单的 Web 应用程序。
路由和视图函数：你学习了如何定义路由和视图函数来处理用户请求和返回响应。
模板渲染：你学习了如何使用 Jinja2 模板引擎来渲染 HTML 页面，并动态显示数据。
表单处理：你了解了如何处理用户输入的数据，并在服务器端进行验证和处理。
静态文件：你学习了如何管理和提供静态文件，如 CSS、JavaScript 和图像。

结论

通过这个项目，你学习了如何使用 Flask 构建一个简单的 Web 应用程序，并了解了如何处理用户输入和显示结果，欢迎在评论区留言。继续探索和学习，祝你在深度学习的旅程中取得更多的成果！🚀

希望这个博客对你有所帮助如果你有任何问题或需要进一步的指导，请随时提问。继续加油！🚀

LIY若依

关注

10
点赞
踩
18

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用 python 创建一个 Web 计算器 (基于Python Flask) 附源码

解析：定义根路由，当用户访问根 URL () 时，调用index()函数。index()函数返回index.html模板。try:return render_template('index.html', result='错误', expression=expression)解析：定义处理计算请求的路由，使用 POST 方法。：获取用户输入的表达式。：计算表达式的结果。：返回index.html模板，并传递计算结果和表达式。
复制链接

扫一扫