靜態檔案處理

簡介

關於靜態檔案處理牽扯到前後端的互動方式(例:HTTP通訊協定、網址)、以及後端flask程式處理

甚麼是靜態檔案(Static Files)

不執行程式、直接將檔案傳送到前端

• 常見的靜態檔案
  • 圖片檔案( .jpg)
  • 影片檔案( .mp4)
  • HTML、CSS、JavaScript 程式檔( .html 、 .css 、 .js)
• 直接將檔案名稱對應到網址路徑

預設路徑

建立 static 資料夾和網址路徑

• 程式不需要任何更動
• 操作方式如下
  1. 建立 static 資料夾
  2. 將檔案放入 static 資料夾
  3. 啟動伺服器
  4. 前端使用 /static/檔案名稱 連線取得檔案

自訂路徑

在程式中設定靜態檔案路徑

• 程式中建立 Application 物件時，透過參數指定

Flask(
    __name__,
    static_folder = "資料夾名稱",
    static_url_path="應對的網址路徑"

實際操作

上面的紅色框框都不是靜態檔案位址，他們是動態的路由

「預設」的靜態檔案處理操作

1. 在專案目錄底下建立一個子資料夾(目錄)且名子一定叫 static

   

2. 在專案底下的static目錄內增加一個靜態檔案(.jpg ....)

   

3. 如此一來就創建成功了~我們啟動server並觀察一下
   

4. 我們在原來的網址後面增加 /static/照片.jpg 就成功了!
   

為什麼可以這樣??沒為什麼，這就是規定

以「自訂」的方式呈現「預設」的靜態檔案處理操作

在建立Application物件，可以設定靜態檔案的路徑處理
而下面這段是利用自訂的方式呈現預設的參數設定，這樣的設定跟預設呈現的結果一模一樣

code點擊下放「詳細資訊」

基本是上次的code繼續延伸下去

from flask import Flask #載入 Flask
#在建立Application物件，可以設定靜態檔案的路徑處理
app=Flask(
            __name__,
            static_folder="static",   #靜態檔案的「資料夾」名稱
            static_url_path="/static"  #靜態檔案的對應網址「路徑」
        ) 
# 所有在static 資料夾底下的檔案，都對應到網址路徑 /static/檔案名稱


#建立路徑 / 對應的處理方式

#路由設定
@app.route("/") #'/'叫正斜線反之'\'叫反斜線
def index():#用來回應路徑 / 的處理函式
    return "Hello Flask"    # 回傳路徑 / 的內容

#建立路徑 /data對應的處理函式
@app.route("/data")
def handData():
    return "My Data"
#動態路由:建立 /usr/使用者名稱 的處理函式

@app.route("/user/<username>")
def handleUser(username):
    return "Hello "+username

@app.route("/player/<name>")
def User(name):
    if name=="琪琪":
        return "嗨! "+name
    else:
        return "我是BOT"

app.run(port=3000) #啟動伺服器

「自訂」的靜態檔案處理操作(路徑)

我們將staic_url_path="static"改成ststic_url_path="/abc"，那麼意思就是將static目錄底下的資料，全部都對應成網址路徑 /abc/檔案名稱 例: http://127.0.0.1:3000/abc/照片.jpg

我們重啟server。原本的static不能使用了

Code :

from flask import Flask #載入 Flask
#在建立Application物件，可以設定靜態檔案的路徑處理
app=Flask(
            __name__,
            static_folder="static",   #靜態檔案的「資料夾」名稱
            static_url_path="/abc"  #靜態檔案的對應網址「路徑」
        ) 
# 所有在static 資料夾底下的檔案，都對應到網址路徑 /abc/檔案名稱


#建立路徑 / 對應的處理方式

#路由設定
@app.route("/") #'/'叫正斜線反之'\'叫反斜線
def index():#用來回應路徑 / 的處理函式
    return "Hello Flask"    # 回傳路徑 / 的內容

#建立路徑 /data對應的處理函式
@app.route("/data")
def handData():
    return "My Data"
#動態路由:建立 /usr/使用者名稱 的處理函式

@app.route("/user/<username>")
def handleUser(username):
    return "Hello "+username

@app.route("/player/<name>")
def User(name):
    if name=="琪琪":
        return "嗨! "+name
    else:
        return "我是BOT"

app.run(port=3000) #啟動伺服器

「自訂」的靜態檔案處理操作(資料夾)

1. 我們將原本的static_folder="static"改為static_folder="public"且將static_url_path="/abc"改為static_url_path="/"
   
2. 將 static 目錄改為 public
   
3. 我們看一下結果，更改成功
   

Code :

from flask import Flask #載入 Flask
#在建立Application物件，可以設定靜態檔案的路徑處理
app=Flask(
            __name__,
            static_folder="public",   #靜態檔案的「資料夾」名稱
            static_url_path="/"  #靜態檔案的對應網址「路徑」
        ) 
# 所有在static 資料夾底下的檔案，都對應到網址路徑 /abc/檔案名稱


#建立路徑 / 對應的處理方式

#路由設定
@app.route("/") #'/'叫正斜線反之'\'叫反斜線
def index():#用來回應路徑 / 的處理函式
    return "Hello Flask"    # 回傳路徑 / 的內容

#建立路徑 /data對應的處理函式
@app.route("/data")
def handData():
    return "My Data"
#動態路由:建立 /usr/使用者名稱 的處理函式

@app.route("/user/<username>")
def handleUser(username):
    return "Hello "+username

@app.route("/player/<name>")
def User(name):
    if name=="琪琪":
        return "嗨! "+name
    else:
        return "我是BOT"

app.run(port=3000) #啟動伺服器

參考文章與資料來源

澎澎的教學網站
澎澎的yt教學頻道