1 Flask mega-tutorial（Flask超级教程）第1章 Hello world

╰半夏微凉° 2022-05-18 09:53 195阅读 0赞

如需转载请注明出处。  
win10 64位、Python 3.6.3、Notepad++、Chrome 67.0.3396.99（正式版本）（64 位）  
注：作者编写时间2017-12-06，linux、python 3.5.2

以下内容均是加入自己的理解与增删，以记录学习过程。不限于翻译，部分不完全照搬作者Miguel Grinberg的博客，版权属于作者，感谢他提供免费学习的资料。

<table> 
 <tbody> 
 <tr> 
 <th colspan="4">传送门</th> 
 </tr> 
 <tr> 
 <td><a href="https://blog.csdn.net/weixin_38256474/article/details/81332147" rel="nofollow">00 开篇</a></td> 
 <td><a href="https://blog.csdn.net/weixin_38256474/article/details/81354752" rel="nofollow">01 Hello world</a></td> 
 <td><a href="https://blog.csdn.net/weixin_38256474/article/details/81364734" rel="nofollow">02 模板</a></td> 
 <td><a href="https://blog.csdn.net/weixin_38256474/article/details/81389112" rel="nofollow">03 Web表单</a></td> 
 </tr> 
 <tr> 
 <td><a href="https://blog.csdn.net/weixin_38256474/article/details/81485554" rel="nofollow">04 数据库</a></td> 
 <td><a href="https://blog.csdn.net/weixin_38256474/article/details/81536333" rel="nofollow">05 用户登录</a></td> 
 <td><a href="https://blog.csdn.net/weixin_38256474/article/details/81565017" rel="nofollow">06 个人资料和头像</a></td> 
 <td><a href="https://blog.csdn.net/weixin_38256474/article/details/81590339" rel="nofollow">07 错误处理</a></td> 
 </tr> 
 <tr> 
 <td><a href="https://blog.csdn.net/weixin_38256474/article/details/81634851" rel="nofollow">08 关注</a></td> 
 <td><a href="https://blog.csdn.net/weixin_38256474/article/details/81672110" rel="nofollow">09 分页</a></td> 
 <td><a href="https://blog.csdn.net/weixin_38256474/article/details/81746739" rel="nofollow">10 支持QQ邮箱</a></td> 
 <td><a href="https://blog.csdn.net/weixin_38256474/article/details/81779883" rel="nofollow">11 美化页面</a></td> 
 </tr> 
 <tr> 
 <td><a href="https://blog.csdn.net/weixin_38256474/article/details/81951594" rel="nofollow">12 时间和日期</a></td> 
 <td><a href="https://blog.csdn.net/weixin_38256474/article/details/81982032" rel="nofollow">13 I18n和L10n 翻译成中文 zh-CN</a></td> 
 <td><a href="https://blog.csdn.net/weixin_38256474/article/details/81989457" rel="nofollow">14 Ajax(百度翻译API</a></td> 
 <td><a href="https://blog.csdn.net/weixin_38256474/article/details/82055120" rel="nofollow">15 更好的App结构(蓝图)</a></td> 
 </tr> 
 <tr> 
 <td><a href="https://blog.csdn.net/weixin_38256474/article/details/82119331" rel="nofollow">16 全文搜索</a></td> 
 <td><a href="https://blog.csdn.net/weixin_38256474/article/details/82185100" rel="nofollow">17 部署到腾讯云Ubuntu</a></td> 
 <td><a href="https://blog.csdn.net/weixin_38256474/article/details/82185153" rel="nofollow">18 部署到Heroku</a></td> 
 <td><a href="https://blog.csdn.net/weixin_38256474/article/details/82185229" rel="nofollow">19 部署到Docker容器</a></td> 
 </tr> 
 <tr> 
 <td><a href="https://blog.csdn.net/weixin_38256474/article/details/82776565" rel="nofollow">20 JavaScript魔法</a></td> 
 <td><a href="https://blog.csdn.net/weixin_38256474/article/details/82778415" rel="nofollow">21 用户通知</a></td> 
 <td><a href="https://blog.csdn.net/weixin_38256474/article/details/82778449" rel="nofollow">22 后台工作(Redis)</a></td> 
 <td><a href="https://blog.csdn.net/weixin_38256474/article/details/82778519" rel="nofollow">23 应用程序编程接口(API)</a></td> 
 </tr> 
 </tbody> 
</table>

我略去安装Python过程。

1、**创建一个目录**，名为：microblog；  
2、**创建虚拟环境**，可参考博文：[虚拟环境使用指南][Link 1]

C:\Users\Administrator>d:
    
    D:\>cd D:\microblog
    
    D:\microblog>python -m venv venv
    
    D:\microblog>

3、激活虚拟环境：activate

D:\microblog>cd D:\microblog\venv\Scripts
    
    D:\microblog\venv\Scripts>activate
    (venv) D:\microblog\venv\Scripts>

注：退出虚拟环境 deactivate

4、安装Flask：pip install flask  
安装指定版本的第三方库可用命令：pip install flask==版本号

(venv) D:\microblog\venv\Scripts>pip install flask
    Collecting flask
      Using cached https://files.pythonhosted.org/packages/7f/e7/08578774ed4536d3242b14dacb4696386634607af824ea997202cd0edb4b/Flask-1.0.2-py2.py3-none-any.whl
    Collecting Werkzeug>=0.14 (from flask)
      Using cached https://files.pythonhosted.org/packages/20/c4/12e3e56473e52375aa29c4764e70d1b8f3efa6682bef8d0aae04fe335243/Werkzeug-0.14.1-py2.py3-none-any.whl
    Collecting itsdangerous>=0.24 (from flask)
      Using cached https://files.pythonhosted.org/packages/dc/b4/a60bcdba945c00f6d608d8975131ab3f25b22f2bcfe1dab221165194b2d4/itsdangerous-0.24.tar.gz
    Collecting Jinja2>=2.10 (from flask)
      Using cached https://files.pythonhosted.org/packages/7f/ff/ae64bacdfc95f27a016a7bed8e8686763ba4d277a78ca76f32659220a731/Jinja2-2.10-py2.py3-none-any.whl
    Collecting click>=5.1 (from flask)
      Using cached https://files.pythonhosted.org/packages/34/c1/8806f99713ddb993c5366c362b2f908f18269f8d792aff1abfd700775a77/click-6.7-py2.py3-none-any.whl
    Collecting MarkupSafe>=0.23 (from Jinja2>=2.10->flask)
      Using cached https://files.pythonhosted.org/packages/4d/de/32d741db316d8fdb7680822dd37001ef7a448255de9699ab4bfcbdf4172b/MarkupSafe-1.0.tar.gz
    Installing collected packages: Werkzeug, itsdangerous, MarkupSafe, Jinja2, click, flask
      Running setup.py install for itsdangerous ... done
      Running setup.py install for MarkupSafe ... done
    Successfully installed Jinja2-2.10 MarkupSafe-1.0 Werkzeug-0.14.1 click-6.7 flask-1.0.2 itsdangerous-0.24

可看到会附带安装好：Werkzeug, itsdangerous, MarkupSafe, Jinja2, click。 
并可在目录D:\\microblogvenv\\Lib\\site-packages下查看到。 
上述重要库对应版本：

<table> 
 <thead> 
 <tr> 
 <th>库名</th> 
 <th align="center">版本号</th> 
 <th align="right">简要说明</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td>flask</td> 
 <td align="center">1.0.2</td> 
 <td align="right">内核</td> 
 </tr> 
 <tr> 
 <td>werkzeug</td> 
 <td align="center">0.14.1</td> 
 <td align="right">核心1，路由模块</td> 
 </tr> 
 <tr> 
 <td>jinja2</td> 
 <td align="center">2.10</td> 
 <td align="right">核心2，模板引擎</td> 
 </tr> 
 <tr> 
 <td>itsdangerous</td> 
 <td align="center">0.24</td> 
 <td align="right">（加密数据）签名模块</td> 
 </tr> 
 <tr> 
 <td>MarkupSafe</td> 
 <td align="center">0.23</td> 
 <td align="right">为Python实现XML / HTML / XHTML 标记安全字符串</td> 
 </tr> 
 <tr> 
 <td>click</td> 
 <td align="center">5.1</td> 
 <td align="right">命令行工具库</td> 
 </tr> 
 </tbody> 
</table>

以上的库均由Armin Ronacher及其Flask团队pallets开发编写。  
为什么要详细列出版本号？是为后面运行时可能出现的问题提供指导。有一个方法叫 左手画圆、右手画方。

5、创建一个“Hello,World!” Flask应用程序

0）、该应用程序将存在于一个包（app）中。在Python中，包含*\_\_init\_\_.py*文件的子目录被视为包，其可被导入。当导入一个包时，*\_\_init\_\_.py*将会执行并定义“暴露”给外部的标识（告诉你们，我是一个包 package）。

在D:\\microblog下创建一个目录，名为**app**。并写一个*\_\_init\_\_.py*文件，表明app是一个包 package。

*\_\_init\_\_.py*，它将创建Flask应用程序实例，代码如下：

from flask import Flask#从flask包中导入Flask类
    
    app = Flask(__name__)#将Flask类的实例 赋值给名为 app 的变量。这个实例成为app包的成员。
    
    #print('等会谁（哪个包或模块）在使用我：',__name__)
    
    from app import routes#从app包中导入模块routes
    
    #注：上面两个app是完全不同的东西。两者都是纯粹约定俗成的命名，可重命名其他内容。

上述脚本只是创建了一个作为Flask类的实例的应用程序对象，Flask类是从flask包中导入的。传递给Flask类的变量*\_\_name\_\_*是一个Python预定义的变量，该变量设置为使用它的模块的名字。等会谁使用它？可加入一句打印用于理解，如上（不用时注释掉或删除该行代码）。当应用程序运行时，可看到打印的是**包 app**。  
当需要加载如模板文件等相关资源时，Flask将使用此处传递的模块的位置作为起点，这将在第2章中介绍。  
传递的变量*\_\_name\_\_*总是以正确的方式配置给Flask。  
接着，从包 app中导入模块routes，目前尚未编写它。

还注意到：routes模块是在脚本底部导入，而不是顶部，因为它始终是完成的。底部导入是避免循环导入（circular import）问题的解决方法。在接下来的routes模块中，需要导入这个脚本（*\_\_init\_\_.py*）中的**变量app**，因此将其放置在底部导入，以避免由这俩个文件之间的相互引用引起的error。

![这里写图片描述][70]

关于 包 package、import导入的问题可参考博文中的一部分：[传送门][Link 2]  
1）、routes模块

**路由**，是处理URL 和函数 之间关系的程序。使用[route()装饰器][route]来把函数绑定到URL。  
在Flask中，应用程序 路由的处理程序被编写为Python函数，称为 *视图函数*，例此模块中的*index()*。 *视图函数*映射到一个或多个路由URL，以便Flask知道客户端请求给定URL时要执行的逻辑（Python代码）。

![这里写图片描述][70 1]

路由，就会用到**路由模块(werkzeug)**。Flask使用Werkzeug路由系统，该系统是自动根据复杂度来为路由进行排序的，是有算法的。  
一时之间，可能不好理解 路由 概念，可联想到路由器的路由功能来加深理解。

app/routes.py代码：

from app import app#从app包中导入 app这个实例
    
    #2个路由
    @app.route('/')
    @app.route('/index')
    #1个视图函数
    def index():
    	return "Hello,World!"#返回一个字符串

`@app.route`装饰器 为作为一个参数给定的URL和函数之间创建关联。代码中有两个装饰器，它们共同将URL `/` 和 `/index` 关联至`index()`函数。这意味着当浏览器这俩个URL中任一个时，**Flask**将调用此函数（`index()`）并将其返回值（字符串）作为响应 Response传递回浏览器。

2）、为完成这个简单的应用程序，还需在顶层 top-level定义一个Flask应用程序实例 的Python脚本，命名为*microblog.py*，并仅有一行代码，即导入应用程序实例。代码如下：

from app import app#从app包中导入变量app（它是作为app包成员的变量）

目前为止，项目结构图：

microblog/
      venv/
      app/
        __init__.py
        routes.py
      microblog.py

3）运行程序。  
运行之前，设置`FLASK_APP`环境变量，它会告诉Flask如何导入刚写的应用程序。

(venv) D:\microblog\venv\Scripts>cd D:\microblog
    
    (venv) D:\microblog>set FLASK_APP=microblog.py

使用命令 `flask run`运行程序：

(venv) D:\microblog>flask run
     * Serving Flask app "microblog.py"
     * Environment: production
       WARNING: Do not use the development server in a production environment.
       Use a production WSGI server instead.
     * Debug mode: off
     * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
    127.0.0.1 - - [02/Aug/2018 16:36:28] "GET / HTTP/1.1" 200 -
    127.0.0.1 - - [02/Aug/2018 16:36:29] "GET /favicon.ico HTTP/1.1" 404 -
    127.0.0.1 - - [02/Aug/2018 16:36:41] "GET /index HTTP/1.1" 200 -

注：环境变量不会在终端中被记住，比如打开新的终端窗口时，得重新设置它。不过，Flask允许注册 在运行flask 命令时要自动导入的环境变量。要使用这个选项，得安装python-dotenv包：

(venv) D:\microblog>pip install python-dotenv

然后，在项目的顶级目录中创建一个`.env`文件（如microblog/microblog.env），文件中编写环境变量名称、值：

FLASK_APP=microblog.py

[python-dotenv文档][python-dotenv]

服务器初始化后，它将等待客户端链接。`flask run`命令指示服务器在IP地址127.0.0.1上运行，也即 localhost。  
网络服务器侦听特定端口号上的连接。部署在生产Web服务器上的应用程序通常侦听端口443（若未实施加密，可能是侦听80），但访问这些端口需要管理权限。上述应用程序是开发环境中运行，Flask将使用免费提供的端口5000。浏览器地址栏输入如下URL并回车：

http://localhost:5000/

或使用其他URL：

http://localhost:5000/index

当分别输入上述URL时，将看到应用程序路由映射在进行中。  
![这里写图片描述][70 2]  
第一个URL映射到`/`；第二个URL映射到`/index`。两个路由都与应用程序中唯一的视图函数index()相关联，因此它们生成相同的输出（返回的字符串）。  
![这里写图片描述][70 3]  
当然，输入其他URL，收到404错误，因为应用程序只能识别这俩个URL。  
![这里写图片描述][70 4]  
按Ctrl-C即可将程序停止。

![这里写图片描述][70 5]

参考：  
[作者博客][Link 3]

如需转载请注明出处。

[Link 1]: https://blog.csdn.net/weixin_38256474/article/details/81289702
[70]: /images/20220518/94a187354a924db88a679bf6b384ec2d.png
[Link 2]: https://blog.csdn.net/weixin_38256474/article/details/81228492
[route]: https://dormousehole.readthedocs.io/en/latest/api.html#flask.Flask.route
[70 1]: /images/20220518/638f39e6ca1a43c09e4cf337fa02983d.png
[python-dotenv]: https://pypi.org/project/python-dotenv/
[70 2]: /images/20220518/0b0e67e79f8142e5a499b4179c813e57.png
[70 3]: /images/20220518/2ea00d4a709b41b4a58d08d9311ca431.png
[70 4]: /images/20220518/2713faae186e4608b4fc09200207bde3.png
[70 5]: /images/20220518/03454e934e46418d97203845a907810d.png
[Link 3]: https://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-i-hello-world