Javascript Node.js阻止引导?
一般来说,我对Node.js和JavaScript还比较陌生,但我希望使用尽可能少的开销构建一个网站 我想通过Node.js和Bootstrap实现这一点 这是我的server.js文件:Javascript Node.js阻止引导?,javascript,jquery,css,node.js,twitter-bootstrap,Javascript,Jquery,Css,Node.js,Twitter Bootstrap,一般来说,我对Node.js和JavaScript还比较陌生,但我希望使用尽可能少的开销构建一个网站 我想通过Node.js和Bootstrap实现这一点 这是我的server.js文件: var http = require('http'); var fs = require("fs"); http.createServer( //This function decides which content type to use for wich type of request.
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()
,它将显示在页面上。
现在对于引导,我看到您只需要四个文件,通常通过CDN或webpack或bower之类的工具提供。
因此,我刚刚下载了四个文件bootstrap.min.js、bootstrap.min.css、jquery.min.js和popper.js,并将它们放在其他文件旁边的脚本文件夹中。当然,我使用了相对路径,比如scripts/bootstrap/js/bootstrap.min.js
,而不是CDN链接
在运行Node.js服务器时,我可以看到文件被成功地请求和发送,但不知何故,引导外观没有出现(但所有内容都是可见的)
以下是我正在使用的HTML文档(index.HTML):
<!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有关
有人知道如何解决这个问题吗?您的正则表达式与CSS文件名不匹配,因此它提供的是
index.html
,而不是实际的CSS
由于您使用的是.min.css
文件,因此需要在文件名中查找
,而不是在扩展名之前:
if(/^\/[a-zA-Z0-9\/.]*.css$/.test(request.url.toString())){
// ^
你的JavaScript也一样。为了测试JavaScript是否有效,我可以使用我喜欢的任何东西,对吗?说清楚一点,你是否仍然看到“这是一个警报!”文本-而你没有使用
文档。在测试的这一点上写?@JamesThorpe是的,是的。轰!非常感谢,你救了我一天!我完全监督了这件事!