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

已于 2024-07-31 23:20:58 修改
阅读量3.8k 收藏 25
点赞数 11
文章标签： python 前端 flask
于 2024-07-31 23:03:25 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/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 Mega-Tutorial
  • Flask 入门教程

  其他文章推荐

总结

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

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

结论

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

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

DexHunter脱壳神器分析
jltxgcy的专栏
01-26 1万+
0x00    这篇文章我们分析Android脱壳神器DexHunter的源代码。DexHunter作者也写了一篇介绍它的文章从Android运行时出发，打造我们的脱壳神器。DexHunter源代码位于https://github.com/zyq8709/DexHunter。    0x01    DexHunter 实现中，只需要修改一处文件：dalvik\vm\native\dalvik_sy
Android dex文件通用自动脱壳器
09-02
标 题: 【原创】Android dex文件通用自动脱壳器 作 者: zyqqyz 时 间: 2015-09-01,13:03:30 链 接: http://bbs.pediy.com/showthread.php?t=203776 之前做了一个Android dex的通用脱壳器，主要思想是以AOP的模式对运行时ART和DVM进行定制，附件中是在HITCON上演讲的ppt。 源码地址：https://github.com/zyq8709/DexHunter 代码较挫，大家可以看看，有兴趣的可以继续在上边改一改：）。 github上有一段demo视频和相关的样本，大家有兴趣也可以试试。 测试了国内主流的6款在线加固服务，可以正常脱下来。有其他的样本的也可以试试，发现问题的话请联系我。 为了方便大家阅读，我把对运行时的关键修改摘了出来。class_linker.txt 是对ART的修改，dalvik_system_DexFile.txt是对DVM的修改。 demo视频下载：http://pan.baidu.com/s/1o6Mjwim 密码：x1ay 因为那个视频是H264编码的MP4，所以可能比较挑播放器，大家可以换着试试，比如kmplayer等。 我传了一份到优酷，视频地址:http://v.youku.com/v_show/id_XMTMyNDc4OTQwMA==.html*转载请注明来自看雪论坛@PEdiy.com
DexHunter(Hook版).zip
06-29
DexHunter(Hook版).zip
DexHunter的原理分析和使用说明（一）
热门推荐
Fly20141201. 的专栏
12-17 1万+
Android通用脱壳工具DexHunter是2015年下半年，大牛 zyqqyz最先在看雪论坛放出来的，见《Android dex文件通用自动脱壳器》这篇文章的说明。作者 zyqqyz在放出DexHunter通用脱壳工具代码的同时还专门在乌云网站上写了一篇文章《 从Android运行时出发，打造我们的脱壳神器》，更详细的对DexHunter通用脱壳工具的原理进行了详细的说明。当时看了几遍作者
DexHunter的原理分析和使用说明（二）
Fly20141201. 的专栏
12-18 8160
前面的博文《Android通用脱壳工具DexHunter的原理分析和使用说明（一）》中已经记录了很多关于DexHunter脱壳工具的脱壳原理和思考的思路问题并没有涉及到DexHunter脱壳工具的代码的分析，今天我就代码分析、理解和DexHunter脱壳工具的使用以及需要注意的地方进行博文的记录。
分析Dexhunter
weixin_34417814的博客
03-06 127
—–我又回来csdn开始记流水账了 源码位置：https://github.com/zyq8709/DexHunter 配置工具： 4.4.3版本的nexus5手机 下载好的源码和编译环境 我们先谈用法： 置换源码中的dalvik\vm\native\dalvik_system_DexFile.cpp文件 然后 make libdvm 编译...
DexHunter：Android逆向工程的新锐工具
gitblog_00047的博客
04-07 471
DexHunter：Android逆向工程的新锐工具 去发现同类优质开源项目:https://gitcode.com/ 项目简介 是一个强大的Android应用逆向工程工具，由开发者Mufanc创建并维护。该项目旨在为安全研究人员、软件开发人员和安卓应用审计者提供方便的Dalvik字节码静态分析和动态调试支持。 技术分析 DexHunter 结合了多种高级特性： 多格式支持：不仅处理原始的.d...
DexHunter脱壳神器分析.pdf
最新发布
04-18
Android逆向过程学习
DexHunter(Hook版)：深入Android应用保护机制
根据给出的信息，文件“DexHunter(Hook版).zip”标题和描述中重复指出了相同的名称，但是没有给出具体的内容描述。然而，从文件名和标签中，我们可以推断出一些关于该文件可能涉及的知识点。 首先，DexHunter 可能...
Android应用脱壳技术解析：DexHunter与安全强化服务
"Android终极脱壳：The Terminator to Android Hardening Services" ...文章《Android终极脱壳》通过深入探讨DexHunter和其他加固产品的分析，揭示了Android应用保护的挑战，并提供了对这个领域未来发展的洞察。
探秘DexHunter：安卓应用加固解密利器
gitblog_00021的博客
05-14 598
探秘DexHunter：安卓应用加固解密利器 去发现同类优质开源项目:https://gitcode.com/ 项目简介 DexHunter，一个自动解压加固DEX文件的神器，源自对Android运行时源码的深度改造。这个项目旨在帮助开发者和安全研究者绕过复杂的安卓应用保护机制，提取出隐藏在打包应用内的原始代码。DexHunter由修改后的ART和DVM运行时组成，适用于Android 4.4.3...
Android中dump出dex文件
06-07
Android中dump出dex文件
android dex 解析工具,[Android逆向]DEX自解析重构技术
weixin_30510711的博客
05-26 900
[Android逆向]DEX自解析重构技术：小萌新一枚，知识可能总结不到位的，还望海涵。1、DexHunter介绍2、DexHunter使用方法与注意3、DexHunter源码详细分析/dalvik/vm/native/dalvik_system_DexFile.cpphttps://github.com/zyq8709/DexHunterhttps://github.com/kesuki/Dex...
android一键脱壳,GitHub - MichaelCraneVONG/DexHunter: Android dex文件通用自动脱壳器General Automatic Unpacking Too...
weixin_36115496的博客
05-29 292
DexHunter#####NOTICE： The feature string is very important. It may be changed along with the evolution of hardening services. If it is incorrect, the unpacking process cannot be triggered. DexHunter l...
【原创】简单尝试脱“爱加密”官网加固的DEX壳--二代抽取壳(dexhunter工具应用)
zhangmiaoping23的专栏
01-03 5964
0x00序 第一次尝试脱dex壳，样本是在“爱加密”官网上免费加固的，非商业版。 本文只是做些简单的笔记，给像我一样的逆向新手们提供点思路，高手们不要见笑。 0x01加固包和原包对比 加固后的classes.dex文件变大了，脱到JEB里面发现多了一些壳代码和一些垃圾类（jpvbhn、cioub、flsye…）。 原包中，很多类方法的指令被抽空了，如下面的on...
简单尝试脱某加固的DEX壳--二代抽取壳(dexhunter)
zhangmiaoping23的专栏
12-13 1246
0x00 序 第一次尝试脱dex壳，样本是在“*****”官网上免费加固的，非商业版。 本文只是做些简单的笔记，给像我一样的逆向新手们提供点思路，高手们不要见笑。0x01 加固包和原包对比 加固后的classes.dex文件变大了，脱到JEB里面发现多了一些壳代码和一些垃圾类（jpvbhn、cioub、flsye…）。 原包中，很多类方法的指令被抽空了，如下面的onCreate。 将assets目...
从Android运行时出发，打造我们的脱壳神器
燕十二的BLOG
11-30 2347
0x00 前言 之前对Android的两个运行时的源码做了一些研究，又加上如火如荼的Android加固服务的兴起，便产生了打造一个用于脱壳的运行时，于是便有了DexHunter的诞生（源码：https://github.com/zyq8709/DexHunter/）。今天，我就通过这篇小文聊聊我的一些简单的思路，供大家参考和讨论。 0x02 相关机制 首先，先来看一看An
DexHunter学习笔记记录
playboyma的博客
07-29 3124
源地址 http://ju.outofmemory.cn/entry/267514 0x00 前言 前段时间遇到一个app，解包后发现了libDexHekper.so，搜索了一下发现是梆梆的壳，于是花了一段时间研究了一下怎么脱。这篇博客文章在 dexhunter 的基础上做了修改。 0x01 dexhunter的适配 加固发展到今天，几乎很难通过动态调试
换一个帅一点姿势实现DexHunter
zhangmiaoping23的专栏
05-13 670
转：https://bbs.pediy.com/thread-225427.htmDexHunter需要刷机，感觉太麻烦了，所以用xposed弄了一份。然后大部分解析逻辑都放到了java层，这样也有另一个好处，就是壳总不能修改java正常的api。所以define class之类的都可以直接调用java 层的classloader来初始化class。注意：目前我只在dalvik上面实现，art还没...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

LIY若依

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值