gpt4 book ai didi

html - 如何在普通 NodeJS 中提供静态文件

转载 作者:太空宇宙 更新时间:2023-11-04 00:04:38 26 4
gpt4 key购买 nike

作为序言,我目前正在学习如何使用 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>

最佳答案

嘿,试试这段代码:

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

希望对你有帮助!

关于html - 如何在普通 NodeJS 中提供静态文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52908212/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com