Python 全栈：Flask 项目实战_实现一个精美的智能提升

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

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

Web 版计算器

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

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

AC 键：清零屏幕

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

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

代码目录结构

以下是框架目录结构图：

|-- 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 文件

界面设计