使用Node.js讀取和顯示文件夾內容的代碼示例

一、初步認識Node.js

首先，Node.js是一個基於Chrome JavaScript 運行時建立的平台。Node.js使得JavaScript可以在服務器端運行，具有實時 Web 應用程序處理能力。更重要的是，Node.js在運行時採用了事件驅動、非阻塞 I/O 模型，使得它非常適用於數據密集型分佈式應用。簡單的說，Node.js可以幫助我們處理後端以及文件相關的任務。

二、使用Node.js讀取文件夾內容

在 Node.js 中，文件可以使用 File System 模塊來訪問。我們可以使用該模塊中的readdirSync函數來列出文件夾中的所有文件。下面是一個列出文件夾內容的示例代碼：

const fs = require('fs');
const dirPath = './';

fs.readdirSync(dirPath).forEach(file => {
  console.log(file);
});

這段代碼列出了當前文件夾的所有文件。代碼中使用了 Node.js 的內置 File System 模塊中的 readdirSync 函數和 forEach 方法來遍歷文件夾中的所有文件。

三、使用Node.js將文件夾內容顯示在網頁上

如果我們想要將文件夾的內容直接顯示在網頁上，那麼可以使用 Node.js 的 HTTP 模塊來實現。我們可以通過HTTP模塊來創建服務器，並在響應對象中發送文件夾內容。以下是Node.js將文件夾內容顯示在網頁上的代碼：

const http = require('http');
const fs = require('fs');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/html');
  fs.readdir('./', function(err, files) {
      if (err) throw err;
      res.write('
');
      files.forEach(function(file) {
          res.write('
' + file + '
');
      });
      res.write('
');
      res.end();
      });
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

這段代碼創建了一個服務器，並使用 HTTP 模塊調用 createServer 函數進行創建。在 createServer 中，我們使用 fs.readdir 函數來讀取文件夾，讀取成功後我們通過 res.write 的方式將讀取到的文件直接寫在了響應對象中，最後通過 res.end 方法來結束響應。

四、使用Node.js在網頁上顯示文件夾圖片

在上一個示例中，我們顯示了文件夾中的文件名。如果我們想要在網頁中顯示圖片，那麼應該怎麼處理呢？

在 Node.js 中，可以使用 Buffer 對象 讀取圖像文件，並且可以將其轉換成 Base64 編碼格式。另外，Base64 編碼格式就是一種將二進制數據轉換成 ASCII 字符的編碼方式。

下面是一個讀取圖片並將其顯示在網頁上的示例代碼：

const http = require('http');
const fs = require('fs');

const hostname = '127.0.0.1';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/html');
  fs.readFile('./abc.jpg', function(err, data) {
      if (err) {
        console.error(err);
        res.end();
      } else {
        const base64Image = Buffer.from(data, 'binary').toString('base64');
        res.write(``);
        res.end();
      }
  });
});

server.listen(port, hostname, () => {
  console.log(`Server running at http://${hostname}:${port}/`);
});

這段代碼使用了 HTTP 模塊創建了一個服務器，並讀取了 abc.jpg 文件。讀取成功後，我們使用 Node.js 中的 Buffer.from 函數將讀取到的位元組數據轉換成 Base64 格式，然後將其作為 src 屬性傳遞給 img 標籤，最後我們通過 res.end 方法結束響應。

五、總結

我們通過以上示例代碼，可以大概了解 Node.js 如何讀取和顯示文件夾內容。如果我們想要進一步了解 Node.js，在實踐中多進行探索和嘗試，可以更好的掌握這一領域。