pythonapp开发实战经典_Python 全栈：Flask 项目实战_实现一个精美的智能提升优先级的计算器...

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

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

Web 版计算器

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

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

AC 键：清零屏幕

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

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

image

代码目录结构

以下是框架目录结构图：

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

界面设计