Node.js阻止Bootstrap吗? [英] Node.js blocking Bootstrap?
问题描述
一般来说，我对Node.js和JavaScript还是陌生的，但是我想使用尽可能少的开销来构建网站.
I am fairly new to Node.js and JavaScript in general, but I want to build a website using as little overhead as possible.
我想通过Node.js和Bootstrap实现这一目标.
I want to achieve this with Node.js and Bootstrap.
这是我的server.js文件:
This is my server.js file:
var http = require('http');
var fs = require("fs");
http.createServer(
//This function decides which content type to use for wich type of request.
//This is also used to restrict the type of files that a user is allowoed to request.
function(request, response) {
//For debugging
console.log(request.connection.remoteAddress.toString() + " requested the url " + request.url.toString());
if(/^\/[a-zA-Z0-9\/]*.css$/.test(request.url.toString())){
//Send the requested file if it end with .css
sendFileContent(request, response, request.url.toString().substring(1), "text/css");
}
else if(/^\/[a-zA-Z0-9\/]*.js$/.test(request.url.toString())){
//Send the requested file if it end with .js
sendFileContent(request, response, request.url.toString().substring(1), "text/javascript");
}
else {
//Answer any other request with the index.html file, because this is a single page application.
sendFileContent(request, response, "index.html", "text/html");
}
}
).listen(80);
function sendFileContent(request, response, fileName, contentType){
fs.readFile(fileName, function(err, data){
if(err){
response.writeHead(404);
//TODO: Better 404 page!
response.write("Not Found!");
console.log(request.connection.remoteAddress.toString() + " received a 404 error");
}
else{
response.writeHead(200, {'Content-Type': contentType});
response.write(data);
}
response.end();
});
}
效果很好.如果我将脚本添加到html文档中，例如，在其中使用document.write()，它将显示在页面上.
现在，对于Bootstrap，我看到您只需要四个文件，通常是通过CDN或webpack或bower之类的工具提供的.
所以我只下载了四个文件 bootstrap.min.js，bootstrap.min.css，jquery.min.js 和 popper.js 并将它们放在脚本文件夹旁边的其余文件.当然，我使用诸如scripts/bootstrap/js/bootstrap.min.js之类的相对路径代替CDN链接.
It works well. If I add a script to the html document and, for example, use document.write() in it, it appears on the page.
Now for Bootstrap, I saw that you would only need four files, usually provided via CDN or with a tool like webpack or bower.
So I just downloaded the four files bootstrap.min.js, bootstrap.min.css, jquery.min.js and popper.js and put them in a scripts folder next to the rest of the files. Of course, I use a relative path like scripts/bootstrap/js/bootstrap.min.js instead of the CDN link.
在运行Node.js服务器时，我可以看到文件已成功请求并发送了，但是以某种方式并没有显示引导程序外观(但是所有内容都是可见的).
When running the Node.js Server, I can see that the files get requested and sent over successfully, but somehow the bootstrap look does not appear (But everything is visible).
这是我正在使用的HTML文档(index.html):
Here is the HTML document (index.html) I am using:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Index</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="scripts/bootstrap/css/bootstrap.min.css">
</head>
<body>
<div class="alert alert-primary" role="alert">
This is an alert!
</div>
<script type="text/javascript" src="scripts/jquery/jquery.min.js"></script>
<script type="text/javascript" src="scripts/popper/popper.js"></script>
<script type="text/javascript" src="scripts/bootstrap/js/bootstrap.min.js"></script>
</body>
</html>
现在，这是一个很奇怪的部分:手动打开index.html文件可正确显示所有引导程序元素.这就是为什么我得出结论认为它与Node.js有关.
And now, here's the weird part: Opening the index.html file manually results in correct display of all bootstrap elements. This is why I concluded it has something to do with Node.js.
有人知道如何解决此问题吗?
Does anyone know how to fix this?
推荐答案
您的正则表达式与CSS文件名不匹配，因此它提供的是index.html而不是实际的CSS.
Your regex doesn't match your CSS filename, so it's serving up index.html instead of the actual CSS.
由于使用的是.min.css文件，因此需要在文件名中查找.，而不是在扩展名之前查找
Because you're using the .min.css file, you need to look for . in the filename, other than before the extension:
if(/^\/[a-zA-Z0-9\/.]*.css$/.test(request.url.toString())){
// ^
同样适用于您的JavaScript.
The same applies to your JavaScript one too.
这篇关于Node.js阻止Bootstrap吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
