第1天：你的第一个Flask Web应用——你好，喵星在线！

原文：http://www.catonlinepy.tech/
声明：本文为博主原创文章，未经许可，不得转载

1. 你将学会什么

通过学习第一天的内容，你将学会如何创建你的第一个flask web应用，并且在自己的电脑上运行它。这是第一天的学习内容，所有内容的代码都将托管在github上，猫姐强烈建议各位同学在学习本课内容时，先跟着教程自己尝试手敲代码，遇到问题后再去查看猫姐github上的代码，如果问题实在不知道如何解决，可以在日志下面留言具体说明情况。

2. 运行环境准备

在开始写代码前，我们需要准备好flask web应用的运行环境，因此我们需要做3件事：1. 安装python；2. 安装虚拟开发环境；3. 安装flask框架。下面我们详细介绍一下这3个步骤的操作过程：

2.1 第一步：安装python

首先是安装Python环境，下面提供了适用于不同操作系统的python安装包链接，大家根据自己的情况安装即可：

1. python for windows
2. python for Linux/Unix（一般已经安装了python解释器）
3. python for Mac OS X
安装python的过程就不详细说明，相信大家都不会有什么问题，猫姐在这里强烈推荐各位同学使用Linux发行版进行学习，虽然开始时可能会遇到一些操作上的问题，但是在使用Linux发行版操作系统时，你会学到更多的其它软件开发的知识，毕竟Linux才是专門为软件开发人员准备的系统。

猫姐使用的操作系统是ubuntu18.04，大家也可以使用deepin或centos等其它Linux发行版操作系统。查看python环境是否安装成功的命令如下（打开命令行ctrl+alt+T,输入python）：

$ python
Python 2.7.15rc1 (default, Nov 12 2018, 14:31:15) 
[GCC 7.3.0] on linux2
Type "help", "copyright", "credits" or "license" for more information.
>>> 

如上我们会看到三个大于号（>>>），这表示我们已经进入python交互环境中。我们可以在python交互环境中输入各种python语句，进行python基础知识的学习。如果想要退出python交互环境，只需可以输入exit()即可；在Linux或Mac OS X操作系统中，通过ctrl+d快捷键也可以退出python交互环境。

2.2 第二步：安装虚拟开发环境

对于不了解python的同学来说，可能不知道虚拟环境是什么东西，不用担心！如果你能坚持学习完成后面几天的内容，你将会对虚拟环境有更深入的理解。这里猫姐简单解释一下，虚拟开发环境的主要作用是为了将web开发项目所用的各种库与操作系统自带的python库隔离开来，这样做的好处是开发环境与系统环境隔离，环境之间不会相互影响，特别是对于多人协作的大型项目的开发，建立虚拟环境是非常有必要的。猫姐说了这么多“废话”，其实建立虚拟开发环境的过程很简单，主要完成下面几个步骤（猫姐强烈推荐同学们使用python3进行学习）：

# 安装python3的虚拟环境包管理模块
$ sudo apt-get install python3-venv

# 使用下面命令，创建一个虚拟开发环境
$ python3 -m venv <虚拟环境的名字>

# 激活刚才建立的虚拟开发环境，（这里我们创建一个名为miao_venv的虚拟环境）
$ python3 -m venv miao_venv
$ source maio_venv/bin/activate

2.3 第三步：安装Flask web框架

前面两步，我们已经安装了python开发环境、创建了虚拟开发环境，并激活了虚拟开发环境。大家需要记住，后面我们所有python包的安装都要在虚拟开发环境中进行。如下，当我们激活虚拟开发环境后，会看到命令行前面出现一个括号，括号中的内容为虚拟开发环境的名字：

$ python3 -m venv miao_venv
$ source miao_venv/bin/activate
(miao_venv) maojie:~/flask-course$   #注意这里括号中的内容，表示我们已经在miao_venv的虚拟开发环境中

安装python包的方法非常简单，Flask作为python的一个包，安装起来当然也是非常简单的，运行如下命令即可：

#使用pip install 安装flask
(miao_venv) maojie:~/flask-course$ pip install flask

#想要退出虚拟开发环境，运行下面命令即可，注意观察输入命令后，命令行出现的变化
(miao_venv) maojie:~/flask-course$ deactivate 

如果想验证flask是否安装成功，可以进入python解释器，用import导入，如果导入没有报错，则安装成功。

#注意：一定要在虚拟环境中安装flask,然后运行python解释器
(miao_venv) maojie:~/flask-course$ python  
>>> import flask

3. 我们的第一个Flask Web程序

万事俱备，只欠东风。有了前面的准备工作，我们现在可以正式干活了。由于这个教程将会是一个十多天的系列教程，所以需要创建一个目录来管理以后每一天教程的代码，下面大家可以跟着猫姐一起完成项目目录的创建过程。我们首先创建一个名为flask-plan的目录，然后该目录下面创建miao_venv的虚拟环境，并将其激活，最后安装flask模块。

#创建flask-plan目录
maojie@Thinkpad:~$ mkdir flask-plan

#进入flask-plan目录
maojie@Thinkpad:~$ cd flask-plan

#创建 maio_venv目录
maojie@Thinkpad:~/flask-plan$ python3 -m venv miao_venv

#激活虚拟开发环境
maojie@Thinkpad:~/flask-plan$ source miao_venv/bin/activate
(miao_venv) maojie@Thinkpad:~/flask-plan$ 

#安装flask模块
(miao_venv) maojie@Thinkpad:~/flask-plan$ pip install flask

猫姐会将后面所有教程的代码放到flask-course-primary目录，因此下面首先创建flask-course-primary目录，然后在该目录下创建day1目录，用来存放这一篇教程的所有代码:

#创建flask-course-primary目录
(miao_venv) maojie@Thinkpad:~/flask-plan$ mkdir flask-course-primary

#进入到flask-course-primary
(miao_venv) maojie@Thinkpad:~/flask-plan$ cd flask-course-primary/

#创建第一天的课程目录
(miao_venv) maojie@Thinkpad:~/flask-plan/flask-course-primary$ mkdir day1

#进入到day1目录
(miao_venv) maojie@Thinkpad:~/flask-plan/flask-course-primary$ cd day1

下面是今天这篇教程的代码组织结构，在命令行下输入tree命令可以直接看到。这里，run.py文件直接存放在day1目录下。猫姐创建了一个名为hello的python包（当目录下面存在__init__.py文件时，我们称该目录为python的一个包）。此外，hello目录下还有routes.py，用来存放视图函数等代码。

(miao_venv) maojie@Thinkpad:~/flask-plan/flask-course-primary$ tree day1/
day1/
├── hello
│   ├── __init__.py
│   └── routes.py
└── run.py

我们通过下面的命令完成hello包的创建：

(miao_venv) maojie@Thinkpad:~/flask-plan/flask-course-primary/day1$ mkdir hello
(miao_venv) maojie@Thinkpad:~/flask-plan/flask-course-primary/day1$ cd hello/
(miao_venv) maojie@Thinkpad:~/flask-plan/flask-course-primary/day1/hello/$ touch __init__.py

下面猫姐对以上文件中的代码及用途逐个进行讲解，我们首先来看一下__init__.py文件中的代码，猫姐这里使用的编辑器是Pycharm，大家可以根据自己的喜好选择顺手的ide进行代码的编辑。

# 以下是__init__.py文件中的代码，我们逐行进行解释
from flask import Flask    # 从flask包中导入Flask类
app = Flask(__name__)      # 通过Flask类创建一个app实例
from hello import routes   # 从hello包中导入routes文件里的所有代码

routes.py文件的创建也是非常简单的，如果不用在命令行中用touch命令新建文件的话，那么可以在Pycharm中，鼠标右击hello-New-Python File，在弹框中输入routes.py即可。

hello/routes.py文件中的代码如下图所示：

# 以下是routes.py文件中的代码，我们逐行进行解释
from hello import app         # 从hello包中导入app实例
@app.route("/")               # 使用装饰器对下面的视图函数index进行装饰
def index():
    return "你好，喵星在线！"     # 这里返回的内容，会直接送到浏览器中显示出来

# 解释：这里装饰器的实际作用就是将路由与视图函数绑定起来，当用户在浏览器中输入/路由请求时，就会对应的执行下面的index函数

最后是day1目录下run.py文件中的代码：

from hello import app         # 从hello包中导入app实例

if __name__ == "__main__":    
    app.run()                 # app实例调用自己的run函数

现在，这样一个简单的Flask Web应用程序就完成了。如果要使用flask run命令，我们需要进入run.py所在目录。在运行之前，需要通过设置FLASK__APP环境变量来告诉Flask，具体的app实例在哪一个python文件中。

# 设置FLASK_APP环境变量，运用flask run命令时可以找到app实例在run.py文件中
(miao_venv) maojie@Thinkpad:~/flask-plan/flask-course-primary/day1$ export FLASK_APP=run.py

# 使用flask run命令将程序运行起来 
(miao_venv) maojie@Thinkpad:~/flask-plan/flask-course-primary/day1$ flask run
 * Serving Flask app "run.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)  # 如果看到这里正常显示，则web应用已经运行起来了

如果是Windows操作系统，将export替换为set即可。

如果直接运行run.py文件，则只需进入到run.py的目录day1中，使用命令python run.py即可将web程序运行起来，结果如下：

(flask_venv) meyou@meyou-ThinkPad-W520:~/flask_learing/flask-tutorial-for-newbies/day1$ python run.py
 * Serving Flask app "hello" (lazy loading)
 * 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) # 如果看到这里正常显示，则web应用已经运行起来了

最后我们在地址栏中输入 http://127.0.0.1:5000/ 或是http://localhost:5000/就可以看到下图所示的效果了。

这样，一个简单的Flask Web应用程序就完成了。最后还有一点值得提醒的是，在终端会话中设置的环境变量不会永久生效，所以每次在重新新开一个终端时，就需要重新导入FLASK_APP环境变量，这样非常麻烦。所以Flask从1.0版本起，就可以通过配置.flaskenv文件直接导入FLASK_APP环境变量，省去每次重启系统后导入环境变量的麻烦。为了使用dotenv工具，我们需要安装dotenv包，直接使用下面的pip命令安装即可：

(miao_venv) maojie@Thinkpad:~/flask-plan/flask-course-primary/day1$ pip install python-dotenv

安装完成后，我们需要在day1目录下新建一个名为.flaskenv的文件，里面写入如下内容：

FLASK_APP=run.py

通过此项设置，当我们运行flask run时，FLASK_APP就会自动加载，而不需要手动导入环境变量。

4. 总结

学习完第一天的教程，我们掌握了如下技能：

1. 如何创建虚拟开发环境
2. 如何进入及退出虚开发拟环境
3. 如何在虚拟开发环境中安装python包
4. 如何组织并完成一个最简单的Flask应用
5. 如何运行我们的Flask web应用程序

第二天的内容，我们将会带领大家一起了解什么是业务逻辑和响应逻辑的分离，为什么在Flask应用中需要使用模板（templates)，第一天的内容就到这里，喜欢的同学们可以在下面点赞留言，或是访问我的博客地址：http://www.catonlinepy.tech/ 加入我们的QQ群进一步交流学习！

5. 代码的获取

大家可以到github上获取今天教程中的所有代码：https://github.com/miaojie19/flask-course-primary.git
具体下载代码的命令如下：

# 使用git命令下载flask-course-primary仓库所有的代码
git clone https://github.com/miaojie19/flask-course-primary.git

# 下载完成后，进入day1目录下面，即可看到今天的代码
cd flask-course-primary
cd day1