Express.js express.static()用法及代碼示例

/lexpress.static()函數是Express中的內置中間件函數。它基於serve-static提供靜態文件。

用法:

express.static(root, [options])

參數：root參數描述從中提供靜態資產的根目錄。

返回值：它重新調整對象。

快遞模塊的安裝：

您可以訪問安裝Express模塊的鏈接。您可以使用此命令安裝此軟件包。
```
npm install express
```
安裝Express模塊後，可以使用命令在命令提示符下檢查Express版本。
```
npm version express
```
之後，您可以僅創建一個文件夾並添加一個文件，例如index.js。要運行此文件，您需要運行以下命令。
```
node index.js
```

範例1： 文件名：index.js

var express = require('express'); 
var app = express(); 
var path = require('path'); 
var PORT = 3000; 
  
// Static Middleware  
app.use(express.static(path.join(__dirname, 'public'))) 
    
app.get('/', function (req, res, next) { 
    res.render('home.ejs'); 
}) 
  
app.listen(PORT, function(err){ 
    if (err) console.log(err); 
    console.log("Server listening on PORT", PORT); 
});

現在，使用以下代碼在views文件夾中創建home.ejs文件：Filename：home.ejs

<!DOCTYPE html>  
<html>  
<head>  
    <title>express.static() Demo</title>  
</head>  
<body>  
   <h2>Greetings from GeeksforGeeks</h2> 
  <img src="Demo.jpg" width="150" height="100" />  
</body>  
</html>

運行程序的步驟：

項目結構將如下所示：

注意： Demo.jpg放置在公用文件夾中，因為公用文件夾現在作為服務器的靜態文件夾。
確保使用以下命令安裝了express和ejs模塊：
```
npm install express
npm install ejs
```
使用以下命令運行index.js文件：
```
node index.js
```
輸出：
```
Server listening on PORT 3000
```
現在打開瀏覽器並轉到http：//localhost：3000 /，您將在屏幕上看到以下輸出：

範例2：
文件名：index.js

var express = require('express'); 
var app = express(); 
var path = require('path'); 
  
// Static Middleware  
console.log(app.use(express.static( 
    path.join(__dirname, 'public'))))

使用以下命令運行index.js文件：

node index.js

輸出：

[Function:app] EventEmitter {
  _events:[Object:null prototype] { mount:[Function:onmount] },
  _eventsCount:1,
  _maxListeners:undefined,
  setMaxListeners:[Function:setMaxListeners],
  getMaxListeners:[Function:getMaxListeners],
  emit:[Function:emit],
  .
  .
  .
  .
  locals:[Object:null prototype] {
    settings:{
      'x-powered-by':true,
      etag:'weak',
      'etag fn':[Function:generateETag],
      env:'development',
      'query parser':'extended',
      'query parser fn':[Function:parseExtendedQueryString],
      'subdomain offset':2,
      'trust proxy':false,
      'trust proxy fn':[Function:trustNone],
      view:[Function:View],
      views:'C:\\Users\\Lenovo\\Downloads\\GFG 
        Reviewer Internship\\Program\\views',
      'jsonp callback name':'callback'
    }
  },
  mountpath:'/',
  _router:[Function:router] {
    params:{},
    _params:[],
    caseSensitive:false,
    mergeParams:undefined,
    strict:false,
    stack:[ [Layer], [Layer], [Layer] ]
  }
}

參考： Offical Documentation

相關用法

注：本文由純淨天空篩選整理自gouravhammad大神的英文原創作品 Express.js express.static() Function。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。