前言

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

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

靜態文件概念

先來簡單的介紹下，靜態文件是什么？

靜態文件（static files），在通常的 web 項目下，指的是內容不需要動態生成的文件。比如圖片、CSS 文件和 JavaScript 腳本等。

就像下面通過 F12 審查元素時的圖片，點擊資源下，就可以看到服務器提供的一些靜態文件。

絕對路徑和相對路徑

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

實際上，在 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/')def user_info(username):    return f'地址上傳入的用戶名稱: {username} ！~'

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

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

http://localhost:8080/user/mige  #訪問

重點來看下，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，所以我們來訪問下這個地址，看下控制臺中會打印出什么？

http://localhost:8080/test   # 訪問

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

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

3. 使用 url_for 來加載靜態文件

在了解到上述概念后，開始使用函數來整合我們的靜態文件。

對于靜態文件，需要傳入的端點值是 static (我們創建的文件夾名字)，同時使用 filename 參數來傳入相對于 static 文件夾的文件路徑。

添加我們的 HTML 代碼：

                 
{{ username }}的公眾號 - {{username}}雜談
    
国产精品亚洲综合久久

相比上篇文章，多了 link 和 img 這兩個標簽。同時注意，在引用圖片路徑時，使用的是 {{url_for}} 的形式，而不是絕對路徑。

訪問下頁面：

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

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

在模板中可以直接使用，是因為 flask 在啟動后，把一些常用的函數和對象添加到了模板上下文環境里。

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

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

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

總結

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

來回顧一下大體框架：

1. 初識 flask ，快速搭建了一個最小的 web 應用
2. flask 整合模板，實現數據的動態化加載
3. flask 結合靜態文件，實現相對路徑的加載

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

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

如果有什么問題，歡迎小伙伴們留言探討！

推薦閱讀：新疆企業網