如何在 vanilla nodeJS 中提供靜態文件

Question

首先，我目前正在學習如何使用 vanilla nodeJS 來托管個人項目的 html 文件。 我正在使用以下代碼來執行此操作。 我意識到為了用 html 顯示圖像，我需要公開提供這些文件； 但是，我不確定如何使用下面提供的代碼執行此操作。 我感謝有關如何實現這一目標的任何反饋和貢獻。

 var http = require("http"); var url = require("url"); var fs = require("fs"); var server = http.createServer(function (request, response) { var path = url.parse(request.url).pathname; switch (path) { case "/homepage.html": fs.readFile(__dirname + path, function(error, data) { if (error) { response.writeHead(404); response.write(error); response.end(); } else { response.writeHead(200, {'Content-Type':'text/html'}); response.write(data); response.end(); } }); break; case "/page1.html": fs.readFile(__dirname + path, function(error, data) { if (error) { response.writeHead(404); response.write(error); response.end(); } else { response.writeHead(200, {'Content-Type':'text/html'}); response.write(data); response.end(); } }); break; default: response.writeHead(404); response.write("Oops this doesn't exist!"); response.end(); } }); server.listen(8008); console.log("Server is running on port 8008");

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <!-- jQuery library --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <!-- Popper JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> <!-- Latest compiled JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> </head> <body> <div class = "row"> <div class = "col-sm-4"> <img src = "/image.jpg/" class = "img-fluid" class = "rounded-circle"> </div> <div class = "col-sm-8"> </div> </body> </html>

Answer 1

嘿，試試這段代碼：

var http = require("http");
var url = require("url");
var fs = require("fs");

var server = http.createServer(function (request, response) {
   var path = url.parse(request.url).pathname;
   switch (path) {
      case "/homepage.html":
         fs.readFile(__dirname + path, function(error, data) {
            if (error) {
               response.writeHead(404);
               response.write(error);
               response.end();
            } else {
               response.writeHead(200, {'Content-Type':'text/html'});
               response.write(data);
               response.end();
            }
         });
         break;
      case "/page1.html":
         fs.readFile(__dirname + path, function(error, data) {
            if (error) {
               response.writeHead(404);
               response.write(error);
               response.end();
            } else {
               response.writeHead(200, {'Content-Type':'text/html'});
               response.write(data);
               response.end();
            }
         });
         break;
      default:
        //  response.writeHead(404);
        //  response.write("Oops this doesn't exist!");
        //  response.writeHead(200, {'Content-Type':'text/html'});
        //  response.write(data);
         console.log('I am here for path ', path);
         fs.readFile(__dirname + path, function(error, data) {
            if (error) {
               response.writeHead(404);
               response.write(error);
               response.end();
            } else {
               response.writeHead(200, {'Content-Type':'image/jpg'});
               response.write(data);
               response.end();
            }
         });
   }
});
server.listen(8008);

console.log("Server is running on port 8008");

因此，因為對於您的開關中沒有案例的圖像，使用了默認值。 我在默認情況下指定了要做什么。 如您所見，如果最終得到 100 個靜態文件，則必須為每個文件指定一個大小寫。 請注意，上面的示例僅適用於 jpg 圖像。 這將很難維護並且不推薦，因為它會（可能）將您的靜態數據與網站的邏輯混合在一起。

實現您想要的最簡單方法是使用 express 模塊，它已經具有此功能並且非常非常易於使用。

var express         = require('express');
var app             = express();
app.use(express.static(__dirname + '/mystaticcontent'));
app.use('/hiddenfolder', express.static(__dirname+'/mystaticcontent/'));
app.listen(8008);

對於第一個app.use(express.static(__dirname + '/mystaticcontent')); 如果你把 image.jpg 放在這個文件夾中，你可以使用這個 url 訪問它： http://localhost:8008/image.jpg

這里app.use('/hiddenfolder', express.static(__dirname+'/mystaticcontent/')); 您隱藏文件夾的真實名稱，圖像可在http://localhost:8008/hiddenfolder/image.jpg

如果您不想使用 express，也許您應該查看https://www.npmjs.com/package/serve-static 以獲取有關如何編寫自己的靜態模塊的靈感。

希望能幫助到你！

Answer 2

*** 我找到了一種更簡單的方法來使用nodejs文檔中提供的node-static庫來提供靜態文件***

var static = require('node-static');
var http = require('http');

var file = new(static.Server)(__dirname);

http.createServer(function (req, res) {
  file.serve(req, res);
}).listen(8080);

相同的鏈接在此處NODE JS Docs

如何在 vanilla nodeJS 中提供靜態文件

問題描述

2 個解決方案

解決方案1
1 2018-10-21 08:08:27

解決方案2
0 2021-10-24 16:32:40

如何在 vanilla nodeJS 中提供靜態文件

問題描述

2 個解決方案

解決方案1 1 2018-10-21 08:08:27

解決方案2 0 2021-10-24 16:32:40

解決方案1
1 2018-10-21 08:08:27

解決方案2
0 2021-10-24 16:32:40