Python教學

Python Flask 建立簡單的網頁

本篇介紹如何用 Python 與 Flask 來建立一個簡單的網站，要學習建立一個網頁最間單的方式就是從Hello World開始，接下來介紹怎麼用Flask建立一個簡單的Hello World網頁。

安裝 Flask 套件

如果是第一次寫 Flask 程式，肯定沒有安裝過 Flask，
輸入下列指令來安裝 Flask 吧！

1
pip3 install Flask

或到以下相關網站下載安裝包
PyPI 的 Flask：https://pypi.org/project/Flask/

簡單的 Flask 網頁伺服器

以下為最簡單的 Flask 網頁伺服器的程式碼，注意 Python 檔案名稱不要使用 flask.py 避免跟 Flask 模組衝突，
一開始要匯入 flask 模組 import flask 或 from flask import Flask，接著建立一個app實體
__name__ 為 python 內建的關鍵字，代表目前執行的模組，
index() 函式表示網頁首頁時，這邊會回傳一個 Hello World 的字串，index() 函式名稱可以隨便取，
@app.route('/') 的 @ 為裝飾器(Decorator)的意思，它是以函式為基礎，提供附加的功能。
而 @app.route('/') 的意思為定義一個路由，綁定後面的 index() 函式來處理 / URL 的邏輯，表示使用者用瀏覽器連線到網站 / 根目錄路徑時會被導到 index() 這個函式，

所以這個程式的工作是接收到使用者連線到到網站根目錄路徑時，
被 Flask 導到 index() 這個函式作處理，最後回傳 Hello World 的字串，

python3-flask-hellowrold.py
1
2
3
4
5
6
7
8
9
10
11
12
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
from flask import Flask

app = Flask(__name__)

@app.route('/')
def index():
    return "Hello World"

if __name__ == '__main__':
    app.run()

啟動程式後會看見下列的輸出，表示網頁伺服器已經就緒了，
接下來就可以直接在瀏覽器，開啟http://127.0.0.1:5000/這個URL網址，

URL：全名為Uniform Resource Locator，中文為網址，是網站在網際網路上的門牌號碼，我們通常利用瀏覽器輸入URL網址藉此對網頁伺服器發出請求資料。

1
2
3
4
5
6
7
$ ./python3-flask-hellowrold.py 
 * Serving Flask app "python3-flask-hellowrold" (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

瀏覽器打開http://127.0.0.1:5000/這個URL網址後可以看見直接顯示一個Hello World的頁面，

或者在 console 輸入 curl 指令

1
$ curl http://127.0.0.1:5000/

而console的輸出會多了一行連線紀錄，如下所示，

1
127.0.0.1 - - [02/Nov/2020 21:03:39] "GET / HTTP/1.1" 200 -

這是因為瀏覽器發送了一個HTTP請求到127.0.0.1:5000這個地址去，也就是我們這個python程式，而我們這個python程式收到這個請求後最後回傳了Hello World這個字串，而瀏覽器將這個字串顯示出來

只要這個程式沒有關閉，這個網頁伺服器就會一直開著，一直服務每個HTTP連線進來的請求，並回傳Hello World字串，直到按下CTRL+C程式才會結束，
當這個網頁伺服器結束後再用瀏覽器去連，就會發現這個網站掛掉了連不上這個網站，意味著要讓這個網站一直運行的話，這個程式就要一直開著不能被關閉，
另外這個網站只能限制本機端使用者才能存取這個網站，換句話說你用別台電腦連這台電腦的IP加上5000的網頁是存取不到的，原因在於127.0.0.1這個IP只限制本機端(localhost)存取，若要讓別台電腦或外網存取的話，要再修改一下，這部分之後會提到，

開啟 Debug mode 偵錯模式

在剛剛輸出中發現Debug mode: off，如果要開啟Debug mode的話，
在app = Flask(__name__)之後加入下列程式碼即可開啟Debug mode，

1
app.config["DEBUG"] = True

這麼輸出會變成

1
2
3
4
5
6
7
8
9
* Serving Flask app "python3-flask-hellowrold" (lazy loading)
* Environment: production
  WARNING: This is a development server. Do not use it in a production deployment.
  Use a production WSGI server instead.
* Debug mode: on
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
* Restarting with stat
* Debugger is active!
* Debugger PIN: 259-438-846

開啟 Debug mode 的話，程式碼有更動的話 server 會自動 reload，另外有任何錯誤的話都能在瀏覽器上看到錯誤的訊息以及 Traceback 等等的資訊。

更改網頁回傳的字串

如果要更改Hello World這個字串，就直接修改原本的index()函式的回傳字串存檔後再重新執行，
可以改成下列這樣子試試，看看結果會變成怎樣，

python3-flask-hellowrold2.py
1
2
3
@app.route('/')
def index():
    return "<h1>This is index page!</h1>"

接著用瀏覽器重新整理或重新打開該網址的話就會發現字串改變了，

新增頁面

那如果我想要存取http://127.0.0.1:5000/about這個頁面也想要顯示個不同的字串，那要如何修改程式呢？

在修改程式之前我們試著先去存取這個網頁，會發現瀏覽器顯示Not Found字串，代表http://127.0.0.1:5000/about這個網址目前是沒有處理的，

好，那接下來我們開始來處理http://127.0.0.1:5000/about這個網址，

python3-flask-hellowrold3.py
1
2
3
@app.route('/about')
def about():
    return "This is about page"

我們在原本的程式加上about函式，並且在函式修飾器上添加路徑，
表示連線到http://127.0.0.1:5000/about這個網址請轉到about()函式來處理，最後結果如下所示，

透過 URL 來傳參數

接著我們要透過 URL 來傳遞參數，以下範例示範路由傳遞參數的作法來傳遞 username，

python3-flask-url-args.py
1
2
3
4
5
6
7
8
9
10
11
12
#!/usr/bin/env python3
# -*- coding: utf-8 -*-
from flask import Flask

app = Flask(__name__)

@app.route('/user/<username>')
def index(username):
    return '<p>Hi ' + username + '</p>'

if __name__ == "__main__":
    app.run(debug=True)

結果可以看到 Hi shengyu

關於 URL 來傳遞參數更詳細的用法可以參考這篇

額外補充

在Console的輸出上有段警告文字，

1
2
WARNING: This is a development server. Do not use it in a production deployment.
Use a production WSGI server instead.

意思是如果要部署這個網站的話，請用產品等級的Python WSGI server，這裡官方建議用Waitress，有興趣的人可以參考下面連結，
Deploy to Production — Flask Documentation (1.1.x)
https://flask.palletsprojects.com/en/1.1.x/tutorial/deploy/

參考
第 20 天：Flask：基礎網頁製作 - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天
https://ithelp.ithome.com.tw/articles/10222132
Python Web Flask 實戰開發教學 - 簡介與環境建置
https://blog.techbridge.cc/2017/06/03/python-web-flask101-tutorial-introduction-and-environment-setup/
輕鬆學習 Python：使用 Flask 創建 Web API. 如何以 Web API 分享資料
https://medium.com/datainpoint/flask-web-api-quickstart-3b13d96cccc2
小狐狸事務所: Python 學習筆記 : 用 Flask 架站 (一) 請求處理
http://yhhuang1966.blogspot.com/2019/08/python-flask.html
python - Simple Flask Application Not Working - Stack Overflow
https://stackoverflow.com/questions/46401131/simple-flask-application-not-working

其它相關文章推薦
下一篇要介紹 flask render_template 樣板的用法