Flask 项目实战：实现一个精美的智能提升优先级的计算器

最新推荐文章于 2024-07-31 23:03:25 发布

zg1g

最新推荐文章于 2024-07-31 23:03:25 发布

阅读量962

点赞数

本文链接：https://blog.csdn.net/daigualu/article/details/109335651

版权

本文详述了一个使用 Flask 和 Bootstrap 实现的 Web 版计算器项目，具备括号自动补全功能，确保操作优先级的对等性。通过 Python 的 Flask 框架处理后端逻辑，前端采用 HTML、CSS 和 JavaScript。文章涵盖项目结构、界面设计、Flask 后端逻辑、请求响应处理以及调试步骤，展示了完整的前后端数据交互流程。

摘要由CSDN通过智能技术生成

day 1~day 27 总结了 Python 基础部分和进阶部分所有核心知识点。

如果你充分利用这 27 天，并掌握了主要知识点。

那么接下来，你在学习基于 Python 开发的常见框架和包时，将会事半功倍，学习速度会更快。

今天我们将利用过往所学的知识，使用 Web 主流框架之一 Flask，进行项目实战，实现一个精美的 Web 版计算器。

Web 版计算器

使用 Flask 作为后端，前端使用 Bootstrap 框架，语言 Python + html + css +javascript

计算器核心功能：具备括号自动补全功能，以此实现 +-*/ 4 个操作优先级的对等性。

AC 键：清零屏幕

CE 键：删除屏幕上的最后一位字符

计算器操作的演示动画，如下所示：

a748eaa0-60f1-11ea-be13-9d4b32a4c9f6

代码目录结构

以下是框架目录结构图：

|-- flask-calculator
    |-- manage.py
    |-- app
        |-- __init__.py
        |-- calc
        |   |-- views.py
        |   |-- __init__.py
        |-- static
        |   |-- css
        |   |   |-- bootstrap.min.css
        |   |   |-- orbitron.css
        |   |   |-- style.css
        |   |   |-- yMJMMIlzdpvBhQQL_SC3X9yhF25-T1nyGy6BoWgz.woff2
        |   |-- js
        |       |-- jquery-3.1.1.min.js
        |       |-- main.js
        |-- templates
            |-- index.html

manage.py ： app 启动相关模块；

app 的 __init__.py ：app 启动默认加载的文件，完成创建 app ，加载 bootstrap，跨站请求伪造保护功能等

views.py：app 的路由处理模块

calc 的 __init__.py ，完成实例化一个 Blueprint 类对象，创建蓝本

css：前端样式相关的处理，引用 bootstrap 框架

orbitron.css 和 yMJMMIlzdpvBhQQL_SC3X9yhF25-T1nyGy6BoWgz.woff2 ：与字体相关

style.css ：自定义的 css 样式文件

jquery.js：引用库，与 html dom 操作相关的最常用的 js 库

main.js：自定义的前端计算器处理逻辑

index.html：自定义的前端 html 文件

界面设计

Flask 使用的前端模板引擎为 jinja2，介绍此项目主要涉及的 jinja2 模板语法。

1) 导入基本的模板文件

{% extends "bootstrap/base.html" %}
{% import "bootstrap/wtf.html" as wtf %}

2) 块标题

{% block title %}Block Title{%endblock %}

{% %} 是 jinja2 的一种控制结构

紧接着， index.html 文件的 head 节点结构，如下所示：

{% block head %}
<head>
    <title>Flask Calculator</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="../static/css/bootstrap.min.css" rel="stylesheet">
    <link href="../static/css/style.css" rel="stylesheet">
    <link href='../static/css/orbitron.css' rel='stylesheet' type='text/css'>
    <!-- <link href='https://fonts.googleapis.com/css?family=Orbitron' rel='stylesheet' type='text/css'> -->
</head>
{% endblock %}

与不带模板引擎的普通 html 文件相比，所写的 head 部，只多出一对 jinja2 的控制结果：