1. 程式人生 > >Express app.use(express.static)祥解

Express app.use(express.static)祥解

express相信是很多人用nodejs搭建伺服器的首選框架,相關教程有很多,也教會了大家來如何使用。如果你想更深的瞭解他的細節,不妨和我一起來研究一下。

先來看一個每個人都用到的方法app.use(express.static(__dirname+'/public'));

你肯定在你的app檔案中這麼用過它:

  app.use(express.static(__dirname + '/public'));//設定靜態檔案目錄

正如註釋中寫的那樣,這句話的意思是,將靜態檔案目錄設定為專案根目錄+/public,當然你也可能是這麼寫的:

app.use(express.static(path.join(__dirname, 'public')));//
和上面是一樣的

運用path模組的join方法效果和前面是等價的,注意這裡要引入path模組。

你有沒有產生過疑問,為什麼這句話能夠幫我們設定靜態檔案目錄呢?他到底做了些什麼呢?

為了照顧初學者,我們不妨先從最基本的靜態資原始檔說起,什麼是靜態資原始檔呢?

靜態資原始檔通俗的可以理解成對於不同的使用者來說,內容都不會變化的檔案。比如不管是張三李四還是王五訪問百度,他們所接收到的看到的圖片、css檔案和前端javascript檔案都是一樣的,我們稱這類檔案為靜態資原始檔。

那麼響應的,對於不同使用者做出不同反應的就是動態檔案了,張三李四王五登入百度,百度會分別對他們顯示"你好張三"、"你好李四"、"你好王五",那麼負責這麼動態邏輯的檔案就是動態檔案了,根據你是用的技術不同,動態檔案可能是.jsp檔案、php檔案或者我們node.js的伺服器端js檔案。

那麼app.use()方法又幹了什麼事情呢,我們先來看看官方API怎麼說的:

大意是說,app.use是用來給path註冊中間函式的,這個path預設是'/',也就是處理任何請求,同時要注意的是他會處理path下的子路徑,比如如果設定path為'/hello',那麼當請求路徑為'/hello/','/hello/nihao','/hello/bye'這樣的請求都會交給中間函式處理的。

於是我們現在知道了app.use(express.static(__dirname + '/public'))是將所有請求,先交給express.static(__dirname + '/public')來處理一下,雖然我們暫時不知道express.static()的處理細節,但是這不影響我們做出一些推測,最起碼我們可以知道,express.static()的返回值肯定是一個函式。

官方文件十分詳盡,像我們解釋了express.static()的一些細節,我簡單的翻譯給大家:

Serving static files in Express

為了提供對靜態資原始檔(圖片、csss檔案、javascript檔案)的服務,請使用Express內建的中間函式 express.static 。

傳遞一個包含靜態資源的目錄給 express.static 中介軟體用於立刻開始提供檔案。比如用以下程式碼來提供public目錄下的圖片、css檔案和javascript檔案:

app.use(express.static('public'));

現在,你可以載入 public目錄下的檔案了:

http://localhost:3000/images/kitten.jpg
http://localhost:3000/css/style.css
http://localhost:3000/js/app.js
http://localhost:3000/images/bg.png
http://localhost:3000/hello.html

Express 會在靜態資源目錄下查詢檔案,所以不需要把靜態目錄作為URL的一部分。

 通過多次使用 express.static 中介軟體來新增多個靜態資源目錄:

app.use(express.static('public'));
app.use(express.static('files'));

Express 將會按照你設定靜態資源目錄的順序來查詢靜態資原始檔。

為了給靜態資原始檔建立一個虛擬的檔案字首(實際上檔案系統中並不存在) ,可以使用 express.static 函式指定一個虛擬的靜態目錄,就像下面這樣:

app.use('/static', express.static('public'));

現在你可以使用 /static 作為字首來載入 public 資料夾下的檔案了。

http://localhost:3000/static/images/kitten.jpg
http://localhost:3000/static/css/style.css
http://localhost:3000/static/js/app.js
http://localhost:3000/static/images/bg.png
http://localhost:3000/static/hello.html

然而,你提供給 express.static 函式的路徑是一個相對node程序啟動位置的相對路徑。如果你在其他的資料夾中啟動express app,更穩妥的方式是使用靜態資原始檔夾的絕對路徑: 

app.use('/static', express.static(__dirname + '/public'));