Express細節探究(1)——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'));

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM