在本 Python 教程中，我将引导您完成使用 Python、flask 和 Sqlite3 构建多计算器应用程序的 Python Web 应用程序开发步骤。完成本 Python 教程后，基本上您可以掌握处理 HTML5、JINJA、CSS3、flask、Python 和 sqlite3 的基础知识和技能。然后你会发现开发一个Web应用程序并不难。
Python Web 应用程序线框图：UI 和 UX 设计与可视化
线框是一个图表或一组图表，由代表网站或应用程序骨架的简单线条和形状组成。它主要可视化用户界面 (UI) 和核心功能，并深入解释什么是UX 线框、它们的外观以及它们如何使您的客户受益。
计算器应用程序 – 主页 UI
计算器应用程序 – UX（设计营销漏斗）
基本上你可以免费注册一个线框帐户。该功能将受到限制，但如果是 Web 开发的早期阶段，那么在试用期后概述 UI 和 UX 就足够了。
Python Web 应用程序 – Python 和 Flask
首先，任何. 应用程序都需要一个核心引擎或功能核心在设计和可视化之前做好准备。因为它涉及核心算法和逻辑。没有这些核心要素，任何应用都只是一个没有灵魂的模型。在本文中，我们将使用 Python 和 Flask 来构建核心和灵魂。
之前我分别介绍了三个计算器，分别是SKU P&L、会员计划CLV和投资评估NPV。基本上，多计算器应用程序是将这三个核心功能特性和算法组合到一个功能脚本中。有关每个计算器的详细信息，请查看这些文章。
您需要谨慎更新三个关键部分，而不是通过订阅 Easy2Digital 时事通讯来获取此 Python 脚本的详细信息。
1. 在 self 对象中组合位置参数
三个计算器的 OOP 编码之间存在细微差别。这是因为如前所述，每个计算器都会有不同的变量指标来影响结果。这三个指标有共同的指标，也有不同的指标。因此，首先，您需要将 3 个计算器的自对象编码合并为一个。
例如，它们都有相同的有机和付费媒体指标。因此，基本上只要您确保参数位置可以与您在任何新语句的函数中创建的参数位置相匹配，就可以了。这是为了避免在错误的度量中使用数字。
2. 创建路线
与单个计算器相比，多计算器应用程序需要更复杂的路线图。基本上我们可以参考我之前谈到的UX线框来创建路线并为每个路线分配任务。
例如，主页包含两条路由，因为它在 UX 中有两个分配。首先，用户访问 Web 应用程序，因此我们需要一个@app.route("/") ，它返回return render_template("index_selector.html", all_data = data) 。
因此，此路线可以在任何用户选择计算器之前加载主页 UI。
然后，用户将选择他们喜欢使用的计算器。所以我们需要第二条路线： @app.route("/add_items", methods=["post"]) 。该路由的主要目的是通过 if 条件触发打开哪个计算页面。
最后但并非最不重要的一点是具体的计算器路线。在每个路由中，它都有自己定义的函数，并且 self 对象位置参数需要根据我在开始时谈到的新组合 self 对象进行更新。
@app.route("/CLV", methods=["POST", "GET"])@app.route("/NPV", methods=["POST", "GET"])@app.route("/PL", methods=["POST", "GET"])除了 Flask 之外，还有另一个流行的 Web 应用程序开发选项，那就是 Django。我很快就会发布另一篇相关文章。
3. 创建并分配相关结果页面
由于每个计算器的UI和客户期望不同，因此每个计算器有两个页面——一个是计算前的页面，另一个是结果页面。在存储 html5 文件的模板文件夹中，您需要在那里创建这些文件并在每个计算器路径中使用正确的文件。
return render_template("result_clv.html")return render_template("result_npv.html")return render_template("result.html")Python Web 应用程序 – HTML5 + Jinja
根据 UI 和 UX，这个多计算应用程序主要需要 Jinja 和一些 HTML5 元素功能
1.Jinja动态内容
Jinja 是一个可以在 html5 编码中使用的函数，用于连接动态和变量以根据实际数据显示动态内容。它以{%...%}开头，以{% endfor %}结尾。在框架内，您可以使用双大括号{{ }}设置与函数或数据库连接的变量
2. id, class=”column”, class=”box”
在 HTML5 中，id 代表一个唯一的元素，用于区分同一段脚本中的其他元素。我们通常将其用于 CSS 设计和装饰以及营销跟踪的特定区域或元素。
对于班级来说，用于大型动作是非常常见和流行的。一个类名可以在多个元素中使用。您可以方便地将应用. 到相同设置的区域或块分组。
3. 表格
表单加操作与应用程序脚本中的烧瓶路径连接。
<form action="/CLV" method="post">操作的名称需要与您想要连接和通信的特定路线相同。所有数据通信都将根据您在此处设置的名称进行。
CSS3
在此应用程序中，有两个符号和符号将特定的装饰命令分配给特定的元素。
1. 以哈希#开头
对于类元素和表单值，您可以使用哈希值加上您在类或表单元素中使用的名称。
2. 以点开头。
对于 id 元素，您可以使用并以点开头加上您在 id 元素中使用的名称。
SQLite3
在此应用程序中，我使用 sqlite3 在主页的选择器中显示计算选项。
首先，我们使用参数 select 来获取 lousi2.db 文件中的数据。模块的名称是我之前在数据库文件中设置的列名。计算器的名称就是表名称。我们使用 fetchall() 来表示获取列中的所有数据。
def get_db():db = getattr(g, '_database', None)if db is None:db = g._database = sqlite3.connect('louis2.db')cursor = db.cursor()cursor.execute('''SELECT module from calculators'')all_data = cursor.fetchall()all_data = [str(val[0]) for val in all_data]return all_data其次，在html5脚本中，您需要在Jinja部分输入列的名称和返回变量。更重要的是，它是一个选择器，所以我们需要设置一个选项值，它是模块数据的完整列表。
<form action="/add_items" method="POST"><select name="select_url">{% for module in all_data %}<option value="{{ module }}">{{ module }}</option>{% endfor %}关于MySQL、SQL、MongoBD数据库的使用和连接，我会另外发一篇文章。
赫罗库
对于托管应用程序来说，部署非常简单、直接，并且是开发和上线应用程序的快速方法。有关如何设置和使用的更多详细信息，请查看这篇文章。
https://www.easy2digital.com/automation/data/python-tutorial-26-create-a-shopify-bot-web-application-using-flask-and-heroku/
关于阿里云+域名等服务端，我会另外发一篇文章
全套HTML5、CSS5、Python、Flask编码脚本
如果您对 Python Web 应用程序开发 – 多功能计算器 – NPV、P&L、CLV 的完整脚本感兴趣，请添加消息“Python Web 应用程序 – 多功能计算器”来订阅我们的新闻通讯。我们会立即将脚本发送到您的邮箱。
我希望您喜欢阅读 Python Web 应用程序开发 – 多功能计算器 – NPV、P&L、CLV。如果您这样做了，请通过执行下列操作之一来支持我们，因为这总是对我们的频道有所帮助。
- 通过 PayPal 支持我的频道 ( paypal.me/Easy2digital)
- 订阅我的频道并打开通知铃Easy2Digital Youtube 频道。
- 关注并喜欢我的页面Easy2Digital Facebook 页面
- 使用主题标签 #easy2digital 将文章分享到您的社交网络
- 使用 Easy2Digital 10% OFF 折扣代码购买产品 ( BUYFROMLOCOUPON)
- 您订阅我们的每周通讯即可接收 Easy2Digital 有关Buyfromlo产品和数字软件的最新文章、视频和折扣代码
- 通过 Patreon 订阅我们的月度会员即可享受独家优惠 ( www.patreon.com/louisludigital)
