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，以获取有关如何编写自己的静态模块的灵感。

希望有帮助！

如何在Vanilla NodeJS中提供静态文件

1 个答案: