第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應用已經運行起來了

(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/...

具體下載代碼的命令以下：

# 使用git命令下載flask-course-primary倉庫全部的代碼
git clone https://github.com/miaojie19/flask-course-primary.git

# 下載完成後，進入day1目錄下面，便可看到今天的代碼
cd flask-course-primary
cd day1