美文网首页
Python 全栈:Flask 项目实战_实现一个精美的智能提升

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

作者: you的日常 | 来源:发表于2020-12-30 15:19 被阅读0次

那么接下来,你在学习基于 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 文件

界面设计

相关文章

网友评论

      本文标题:Python 全栈:Flask 项目实战_实现一个精美的智能提升

      本文链接:https://www.haomeiwen.com/subject/sfldrktx.html