web项目简述

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

<!DOCTYPE html>

<html>

<head>

</head>

</html>

<body>

</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 基础理解