前言

上篇文章講到 flask 的模板檔案如何使用，印象模糊的朋友可以回顧一下flask入門 （二）（不用寫程式碼的前端！）

今天的主題 - flask 和靜態檔案結合的使用技巧。

靜態檔案概念

先來簡單的介紹下，靜態檔案是什麼？

靜態檔案（static files），在通常的 web 專案下，指的是內容不需要動態生成的檔案。比如圖片、CSS 檔案和 JavaScript 指令碼等。

絕對路徑和相對路徑

計算機中常會說到的檔案路徑概念，絕對路徑和相對路徑。有人可能會有疑問，為什麼突然要講這個概念？

實際上，在 web 專案中，載入靜態檔案的路徑書寫，對於新手朋友們來說一直是一個頭疼的問題，當初我就是這麼過來的，畢業設計的時候自己寫網頁，本地測試的好好的，載入圖片和樣式等沒問題，但是一上傳到伺服器上，立馬就載入不出來了。

所以，在說明靜態檔案和 flask 結合使用之前，先把路徑的概念弄明白，就會明白在 flask 框架中，為什麼要使用這樣那樣的方法了。

絕對路徑

我們直接看下面的示例：

現在我電腦上有個資料夾，其中有一些照片，假設現在 horse 這個照片：

那麼此張照片的絕對路徑即：

/Users/sy/Desktop/make-money/picture/horse.png

完整的描述檔案位置的路徑就是絕對路徑，以web站點根目錄為參考基礎的目錄路徑。絕對路徑名的指定是從樹型目錄結構頂部的根目錄開始到某個目錄或檔案的路徑，由一系列連續的目錄組成，中間用斜線分隔，直到要指定的目錄或檔案，路徑中的最後一個名稱即為要指向的目錄或檔案。

百度百科

相對路徑

還是以 horse.png 為例，如果同在一個 picture 目錄下，此時如果有個 .py 的指令碼。如果想直接讀取到 png 檔案，則不需要進行絕對路徑的編寫，直接寫 horse.png 的名稱即可讀取到。

因為 horse 與 get-pic 是相對的，即相對路徑。

相對路徑就是指由這個檔案所在的路徑引起的跟其它檔案（或資料夾）的路徑關係。使用相對路徑可以為我們帶來非常多的便利。HTML絕對路徑(absolute path)指帶域名的檔案的完整路徑。

百度百科

相對路徑的好處是什麼呢？對於服務端開發來說，相對路徑可以理解為靈活。它是找一個參照物而設定自己的路徑的。

假如一個靜態檔案寫在程式中，如果有一天專案的名字換了，或者換了個位置，那你還需要自己去修改靜態檔案中的路徑，否則靜態檔案將會載入不出來。

而此時若是用相對路徑就沒有這樣的問題了，相對路徑一般在 web 專案中依賴於專案本身的根目錄。

PS：根目錄，一般預設專案名稱資料夾下的目錄。比如這次的專案，我建立個叫 traffic 的資料夾，那麼 traffic 這層的檔案目錄即為根目錄。

flask載入靜態檔案

上面說的基礎概念，如果你明白以後，接下來咱們看下，如何將 flask 與靜態檔案聯絡起來。

1. 建立 static 目錄，images 目錄

建立完畢後，我們將 js、css、圖片等資源放到 static 目錄下。這裡以圖片為例，讓我們的頁面直接載入處於本地的圖片。所以在 images 資料夾下放一張圖片，在 static 下放一張網站圖示的圖片。

2. flask 中 url_for() 的使用

url_for() 是 flask 框架提供的一個函式，第一個引數可以傳入作為代表某個路由的端點（endpoint），它最主要的作用是用來生成 URL，避免了開發者手寫 URL 的情況。

使用 url_for() 生成的 url 即相對路徑，有些開發者喜歡用絕對路徑來進行檔案的路徑定義。（這樣是極其不友好的，不靈活！）

這麼說可能大家還是覺得抽象，下面用個小 demo 來演示下:

@app.route('/user/<username>')def user_info(username): return f'地址上傳入的使用者名稱稱: {username} ！~'

在 Python 腳本里，url_for()函式需要從 flask包中匯入，這次的程式碼中多了兩個函式，一個是 user_info ，一個是 test_url_for。

user_info中使用了 <username>，當我們訪問這個地址時，需要手動的傳入一個引數。例如這樣：

重點來看下，test_url_for 函式。

@app.route('/test')def test_url_for():    print(url_for('hello_world'))  # 輸出：/    print(url_for('user_info', username='mige'))  # 輸出：/user/mige    print(url_for('user_info', username='zatan'))  # 輸出：/user/zatan    print(url_for('test_url_for'))  # 輸出：/test    # 下面這個呼叫傳入了多餘的關鍵字引數，它們會被作為查詢字串附加到 URL 後面。    print(url_for('test_url_for', num=4 ** 2))  # 輸出：/test?num=16    return 'Test page'

它的路由給的是 /test，所以我們來訪問下這個地址，看下控制檯中會打印出什麼？

url_for函式中，第一個引數便是端點。可以觀察到，在 python 檔案中便是帶有 @app.route 裝飾的函式名稱。而第二個引數比較靈活，根據不同場景傳入不同引數。

就控制檯列印而言，可以看到路徑輸出是相對路徑，這樣一來使用此函式便可以在路徑上相對靈活了。

3. 使用 url_for 來載入靜態檔案

在了解到上述概念後，開始使用函式來整合我們的靜態檔案。

對於靜態檔案，需要傳入的端點值是 static (我們建立的資料夾名字)，同時使用 filename 引數來傳入相對於 static 資料夾的檔案路徑。

新增我們的 HTML 程式碼：

訪問下頁面：

看到頁面成功顯示圖片，說明從專案路徑而言，是沒有問題的，資源成功被載入引入。

也許有人會想到一個問題，為什麼模板裡直接引用 flask 的函式？

在模板中可以直接使用，是因為 flask 在啟動後，把一些常用的函式和物件新增到了模板上下文環境裡。

上下文環境：在 web 專案中經常看到的一個詞，大家可以將其理解為一個共享的大儲水池，假設 A 管道想用 B 管道的東西，只需要把東西傳入到蓄水池中，B 管道從中獲取即可。

池中合成 B ，需要用到 A,C ，所以用蓄水池（上下文）傳遞。

在程式碼中，環境不同時，會遇到想用某個環境中的 A 變數，此時就可以通過上下文這樣一個全域性的中介進行獲取。

總結

到這裡，flask 的基礎部分就介紹完了，是不是很簡單呢？

來回顧一下大體框架：

初識 flask ，快速搭建了一個最小的 web 應用flask 整合模板，實現資料的動態化載入flask 結合靜態檔案，實現相對路徑的載入

web開發必備神器，微框架 - flask！你值得擁有~真香。。。

下篇文章介紹下，如何使用 Python 操作 MongoDB 資料庫，敬請期待！