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

本文详述了一个使用 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 的控制结果:

{% block head %}
......
{% endblock %}

注意,这对控制结构是必须要添加在 html 文件中的。

接下来,是 index.html 的 body 部分。

bod

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值