Node.js後端開發 - 進階篇 #6 express框架之通過express模擬Apache實現靜態資源託管服務

目錄

一、前言

二、express模擬Apache實現靜態資源託管服務

步驟1：建立靜態資源文件夾倉庫

步驟2：寫入express關鍵代碼

---完整詳細可測試代碼

---最終效果

---查看源碼

---

一、前言

上篇文章我們講到express框架中，通過正則表達式註冊路由、通過req.params獲取路由中的參數的一些內容，詳細可參考博文：Node.js後端開發 - 進階篇 #5 express框架之正則表達式註冊路由、req.params獲取路由中的參數 這篇文章我們將講到通過express模擬Apache實現靜態資源託管服務

二、express模擬Apache實現靜態資源託管服務

步驟1：建立靜態資源文件夾倉庫

在Visual Studio Code開發工具中新建如下文件夾和文件，然後把電腦中的圖片ndk.png拷貝放在public目錄下

步驟2：寫入express關鍵代碼

在app.js文件中寫入代碼，如下：

//處理靜態資源的方法。通過路徑獲取不同的資源文件
var fileDir = express.static(path.join(__dirname, 'public'));
//註冊路由
app.use('/', fileDir);

以往註冊路由，第二個參數都是回調函數，如果這樣的話，我們就要自己讀寫資源，比較費勁。

而這裏express給我們提供了static方法，通過路徑獲取不同的資源文件

---完整詳細可測試代碼

//模擬靜態資源服務器 (Apache服務器)

//1、加載express模塊
var express = require('express');
var path = require('path');

//2、創建app對象
var app = express();

//3、處理靜態資源的方法。通過路徑獲取不同的資源文件
var fileDir = express.static(path.join(__dirname, 'public'));
//注意：express調用static，而不是app
//var fileDir = app.static(__dirname, 'public');

//4、註冊路由
// 以往註冊路由，第二個參數都是回調函數，如果這樣的話，
// 我們就要自己讀寫資源，比較費勁。而這裏express給我們提
// 供了static方法
app.use('/', fileDir);

// 併成一行，把處理靜態資源的方法 直接放到 註冊路由裏面
//app.use('/', express.static(path.join(__dirname, 'public')));

//5、啓動服務
app.listen(3000,function (params) {
    console.log('http://localhost:3000');
});

我們運行程序，如下

MacBook-Pro:express-apache luminal$ node app
http://localhost:3000

---最終效果

在我的谷歌瀏覽器中，輸入地址：http://localhost:3000/ndk.png

我們直接訪問到了public目錄下的ndk.png文件

---查看源碼

我們說一般一個函數調用toString方法，就可以看到它的源代碼，我們  console.log(fileDir.toString());  輸出來查看一下

function serveStatic (req, res, next) {
    if (req.method !== 'GET' && req.method !== 'HEAD') {
      if (fallthrough) {
        return next()
      }

      // method not allowed
      res.statusCode = 405
      res.setHeader('Allow', 'GET, HEAD')
      res.setHeader('Content-Length', '0')
      res.end()
      return
    }

    var forwardError = !fallthrough
    var originalUrl = parseUrl.original(req)
    var path = parseUrl(req).pathname

    // make sure redirect occurs at mount
    if (path === '/' && originalUrl.pathname.substr(-1) !== '/') {
      path = ''
    }

    // create send stream
    var stream = send(req, path, opts)

    // add directory handler
    stream.on('directory', onDirectory)

    // add headers listener
    if (setHeaders) {
      stream.on('headers', setHeaders)
    }

    // add file listener for fallthrough
    if (fallthrough) {
      stream.on('file', function onFile () {
        // once file is determined, always forward error
        forwardError = true
      })
    }

    // forward errors
    stream.on('error', function error (err) {
      if (forwardError || !(err.statusCode < 500)) {
        next(err)
        return
      }

      next()
    })

    // pipe
    stream.pipe(res)
  }

這裏的源碼 function serveStatic (req, res, next) 函數有三個參數，因爲中間件一般都是三個參數，我們剛纔上面寫的都是兩個，我們上面暫時是省略掉的，後面介紹中間件的時候再具體介紹