当使用node.js请求服务器时,如何发送多个文件



我对任何与web开发相关的东西都是新手(我只使用luau编码了大约一年),当我的服务器被ping到时,我很难发送多个文件,因为我想要一个单独的style.css文件,以及不同的脚本。

我省略了MouseDraw.js和style.css,但当我将它们直接添加到index.html中时,它们起作用了,当我在网站上检查元素时,我看不到它们,所以我认为只是它们没有被发送。

有可能发送它们吗?还是我必须把它们放在每个文件中?

我会发布一张它的结构图,但我是新手,所以我不能,但它都在一个文件夹下,然后只有"Server.js"和一个名为Client的文件夹,里面有我想发送给客户端的所有内容。

服务器代码:

const http = require('http');
const fs = require('fs').promises
const hostname = 'localhost';
const port = 8000;
let loadedPageInfo;
fs.readFile(__dirname + "/Client/index.html")  // Get and read the HTML data for this page
.then((contents) => {
loadedPageInfo = contents
})
.catch((error) => {
console.log(`Could not load index.html ${error}`)
})
const server = http.createServer((req, res) => {
res.end(loadedPageInfo || "Error loading");
});
server.listen(port, hostname, () => {
console.log(`Server running at http://${hostname}:${port}/`);
});

客户:

index.html:


<head>
<title>Drawing</title>
<link rel = "stylsheet" type = "text/css" href = "style.css">
</head>
<body> 
<h1>Heading One</h1>
<p1>Message from my computer:</p1>
<p2><samp><br><br>File not found.<br>Press F1 to do nothing</samp></p2>
</body>
<script> src = "MouseDraw.js" </script>
</html>

style.css将作为浏览器的新http请求进行请求。它将要求/style.css。无论传入的请求路径是什么,http服务器都只发送loadedPageInfo,所以当浏览器请求/style.css时,http服务器只发送loadedPageInfo。浏览器可能会发现它是一个不正确的文件类型(例如,不是CSS文件),并最终忽略它

MouseDraw.js也会发生同样的情况。如果您希望浏览器能够获得/style.css/MouseDraw.js,那么您需要在http服务器中检查它们,并发送与请求匹配的正确文件。

在Express框架中,您可以将express.static()配置为自动提供一堆像这样的静态HTML文件,但如果没有这些文件,您必须为要提供的每个单独的http请求编写代码,检查请求的传入路径并发送与该请求匹配的文件。

我真的建议使用非常轻量级的Express web服务器框架,因为它可以让这一切变得更简单,而不会妨碍您。但以下是手动编码的一般想法:

function sendFile(res, file) {
const filename = path.join(__dirname, "/Client", file);
fs.readFile(filename).then(data => {
res.end(data);
}).catch(err => {
console.log(err);
res.statusCode = 404;
res.end();
});
}
const server = http.createServer((req, res) => {
switch(req.url) {
case "/":
sendFile(res, "index.html");
break;
case "/style.css":
sendFile(res, "style.css");
break;
case "/MouseDraw.js":
sendFile(res, "MouseDraw.js");
break;
default:
res.statusCode = 404;
res.end();
break;
}
});

相关内容

  • 没有找到相关文章

最新更新