百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程网 > 正文

Flask 基础理解

yuyutoo 2024-12-03 05:44 4 浏览 0 评论

web项目简述

最简单的web项目可通过一个 本地的html 文件来渲染页面,并由浏览器来显示 html内容。 比如 test.html , 内容如下。

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8"/>

</head>

</html>

<body>

<div id="main" style="width: 600px; height: 400px;">

<h1>This is a web page</h1>

</div>

</body>

通过浏览器打开后, 会显示以下内容


最常用的 web 项目包含前端和后端, 前端负责渲染页面 , 后端提供数据。前后端各司其责产生了很多的前后端技术框架, 其中 Flask 为 Python web 框架, 依托Python技术为支撑, 包括了整个的前后端技术总体。

Flask 中关键技术

  • Template

中文名为模板, Template 是一个 html 文件, 其中包含了一些静态数据, 以及用于显示动态数据的占位符。 当前端请求到来时,可通过 render_template() 函数将该模板渲染为 html 码流, 并返回浏览器继而在用户的浏览器中进行显示。

  • Static Files

中文名为静态文件, 包含一些样式表配置 .css 文件,以及图片资源, 或引用的本地的 js 前端技术框架。

  • Blueprints

中文名为蓝图, 其作用可以很好的组织代码结构, 按模块对代码进行分组管. 每个蓝图分布在一个独立的模块里.


工程布局图

且文档中对该布局图的说明如下。

  • flaskr/, a Python package containing your application code and files.
  • tests/, a directory containing test modules.
  • .venv/, a Python virtual environment where Flask and other dependencies are installed.
  • Any other project files you might add in the future.

上面提供的说明,工程名叫 flask-tutorial, 它包含如下内容:

  • 主应用目录 flaskr,是一个 python package,包括所有的应用代码和文件;
  • 测试案例目录 tests, 对设有涉及到的函数接口进行单元测试;
  • 虚拟环境 .venv;
  • 工程所需的其他附加文件。

模块说明

tutorial 案例中要求得本工程具备以下模块:

  • db 数据库模块, 用于访问 sqlite3 数据库;
  • auth 鉴权模块, 用于对用户信息进行鉴权;
  • blog 博客模块, 用于展示博客信息;
  • static 和 template 在创建主应用包时, 会自动生成的。

由于还要对存在的各模块数据进行测试, 从而产生了 tests 单元测试代码集, 是独立与 flaskr 工程存在的。

通过些描述, 就不难理解整个目录结构就此明确出来了, 相应的目录(包), 可通过在 exploer 中添加, 或 pycharm 中添加。

工程中包的组织

Flask 主应用只能有一个主包, 其他的按工程项目要求, 可按如下来分。对于小型的项目, 一个主包就够用了, 其他的按照模块, 分布在相应的 模块名.py 中即可;对于大型项目, 可将每个模块分成包, 里面又有各自的 templates 和 static , 以及相应的 .py 业务逻辑接口。

整个业务的连通过程

结合,这个业务流程, 再对 flask tutorial 的代码进行查看, 发现不会再凌乱。 也制导作者想表达的工程化意图。

建立 Hello 工程

学习任何一门新的框架时, 最好的方式是自行编写最简单的 Hello 工程, 以了解开发环境,部署环境, 以及最终运行测试后, 是否达到预期要求。

以我的开发环境为例如下所示。

Python: python3.8

PythonModules: Flask, 可通过 pip install Flask 命令进行安装

IDE: PyCharm 2020.3.5

  • 启动 PyCharm 应用, 弹出如下界面, 如下图所示.
  • 点击 New Project 弹出界面, 选择 左边 Flask 工程, 并指定 Location 生成的位置 ,如下图所示.
  • 点击 Create 后, 生成 flask_helloworld 工程如下所示.
  • 点击运行按钮, 启动应用并在控制台中能看到应用已经的日志, 并告知了访问地址. 如下图所示.


  • 通过提供的服务地址进行访问, 看能否有输出,结合 app.py 中的代码可以看到是否输出一致

建立 flask-tutorial BluePrint 工程

BluePrint 即蓝图, 它的作用是为了更清晰的模块化分工, 举个例子: 用户注册、用户登进、用户登出 这些操作都是和用户鉴权相关; 创建博客文档、更新博客文档,以及删除博客文档等这些,是和博客文档相关。 那么我们按照模块化分工, 可将其分为 用户鉴权蓝图(模块)、博客蓝图(模块)两大类。 另外, 我们需要提供数据存储功能的数据库模块。

通过上述描述可知, flaskr 系统至少存在三大模块, 用图例说明如下。



  • 启动 PyCharm 应用, 弹出如下界面, 如下图所示.
  • 点击 New Project 弹出界面, 选择 左边 Flask 工程, 并指定 Location 生成的位置 ,如下图所示.
  • 点击 Create 后, 生成 flask_tutorial 工程如下所示.
  • flask_tutorial 工程目录上,右键执行 New ----> Python Package 创建包,输入包名 flaskr, 创建成功后的截图如下所示。

通过以上步骤,生成了flaskr 主包名, 其主应用为 __init__.py。

  • flaskr 目录上,右键执行 New------> Python File 分别创建 auth.py、blog.py、db.py , 创建成功后如下所示。

通过以上步骤,生成了auth 蓝图、blog 蓝图 , 以及数据库模块。 但并没有内容,下一步考虑如何将这些衔接起来。

  • 实现上述涉及到的模块代码

__init__.py 中的代码如下所示。

import os
from flask import Flask
from . import db
from . import auth
from . import blog


def create_app(test_config=None):
    # create and configure the app
    app = Flask(__name__, instance_relative_config=True)

    if test_config is None:
        # load the instance config, if it exists, when not testing
        app.config.from_pyfile('config.py', silent=True)
    else:
        # load the test config if passed in
        app.config.from_mapping(test_config)

    # ensure the instance folder exists
    try:
        os.makedirs(app.instance_path)
    except OSError:
        pass

    # 对蓝图进行注册
    app.register_blueprint(auth.auth_bp)
    app.register_blueprint(blog.blog_bp)
    app.add_url_rule('/', endpoint='index')

    # a simple page that says hello
    @app.route('/hello')
    def hello():
        return 'Hello, World!'

    return app

auth.py 中的代码如下所示。

from flask import Blueprint, render_template

auth_bp = Blueprint('auth', __name__, url_prefix='/auth')


@auth_bp.route('/register', methods=('GET', 'POST'))
def register():
    return render_template('auth/register.html')

blog.py 中的代码如下所示。

from flask import Blueprint, render_template

blog_bp = Blueprint('blog', __name__)


@blog_bp.route('/create', methods=('GET', 'POST'))
def create():
    return render_template('blog/create.html')
  • 配置运行目标, 如下截图所示
  • 运行目标, 并在浏览器中输入 127.0.0.1:5000/auth/register 显示截图如下所示。

说明蓝图已可以成功访问。


相关事项说明

本文不提供 flask-tutorial 的全部工程下载链接, 请到 flask 官网自行下载, 仅借官网全部工程, 自我简化出主要代码骨架,帮助大家理解整个工程是怎么搭建起来的。 由于在写的过程中, 由于不小心疏忽,可能会存在一些问题, 欢迎大家批评指正。

相关推荐

史上最全的浏览器兼容性问题和解决方案

微信ID:WEB_wysj(点击关注)◎◎◎◎◎◎◎◎◎一┳═┻︻▄(页底留言开放,欢迎来吐槽)●●●...

平面设计基础知识_平面设计基础知识实验收获与总结
平面设计基础知识_平面设计基础知识实验收获与总结

CSS构造颜色,背景与图像1.使用span更好的控制文本中局部区域的文本:文本;2.使用display属性提供区块转变:display:inline(是内联的...

2025-02-21 16:01 yuyutoo

写作排版简单三步就行-工具篇_作文排版模板

和我们工作中日常word排版内部交流不同,这篇教程介绍的写作排版主要是用于“微信公众号、头条号”网络展示。写作展现的是我的思考,排版是让写作在网格上更好地展现。在写作上花费时间是有累积复利优势的,在排...

写一个2048的游戏_2048小游戏功能实现

1.创建HTML文件1.打开一个文本编辑器,例如Notepad++、SublimeText、VisualStudioCode等。2.将以下HTML代码复制并粘贴到文本编辑器中:html...

今天你穿“短袖”了吗?青岛最高23℃!接下来几天气温更刺激……

  最近的天气暖和得让很多小伙伴们喊“热”!!!  昨天的气温到底升得有多高呢?你家有没有榜上有名?...

CSS不规则卡片,纯CSS制作优惠券样式,CSS实现锯齿样式

之前也有写过CSS优惠券样式《CSS3径向渐变实现优惠券波浪造型》,这次再来温习一遍,并且将更为详细的讲解,从布局到具体样式说明,最后定义CSS变量,自定义主题颜色。布局...

柠檬科技肖勃飞:大数据风控助力信用社会建设

...

你的自我界限够强大吗?_你的自我界限够强大吗英文

我的结果:A、该设立新的界限...

行内元素与块级元素,以及区别_行内元素和块级元素有什么区别?

行内元素与块级元素首先,CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,分别为块级(block)、行内(inline)。块级元素:(以下列举比较常...

让“成都速度”跑得潇潇洒洒,地上地下共享轨交繁华
让“成都速度”跑得潇潇洒洒,地上地下共享轨交繁华

去年的两会期间,习近平总书记在参加人大会议四川代表团审议时,对治蜀兴川提出了明确要求,指明了前行方向,并带来了“祝四川人民的生活越来越安逸”的美好祝福。又是一年...

2025-02-21 16:00 yuyutoo

今年国家综合性消防救援队伍计划招录消防员15000名

记者24日从应急管理部获悉,国家综合性消防救援队伍2023年消防员招录工作已正式启动。今年共计划招录消防员15000名,其中高校应届毕业生5000名、退役士兵5000名、社会青年5000名。本次招录的...

一起盘点最新 Chrome v133 的5大主流特性 ?

1.CSS的高级attr()方法CSSattr()函数是CSSLevel5中用于检索DOM元素的属性值并将其用于CSS属性值,类似于var()函数替换自定义属性值的方式。...

竞走团体世锦赛5月太仓举行 世界冠军杨家玉担任形象大使

style="text-align:center;"data-mce-style="text-align:...

学物理能做什么?_学物理能做什么 卢昌海

作者:曹则贤中国科学院物理研究所原标题:《物理学:ASourceofPowerforMan》在2006年中央电视台《对话》栏目的某期节目中,主持人问过我一个的问题:“学物理的人,如果日后不...

你不知道的关于这只眯眼兔的6个小秘密
你不知道的关于这只眯眼兔的6个小秘密

在你们忙着给熊本君做表情包的时候,要知道,最先在网络上引起轰动的可是这只脸上只有两条缝的兔子——兔斯基。今年,它更是迎来了自己的10岁生日。①关于德艺双馨“老艺...

2025-02-21 16:00 yuyutoo

取消回复欢迎 发表评论: