Node.js阻止Bootstrap嗎？

Question

一般而言，我對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.
    //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文件夾中。 當然，我使用諸如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有關。

有誰知道如何解決這一問題？

Answer 1

您的正則表達式與CSS文件名不匹配，因此它提供的是index.html而不是實際的CSS。

由於您使用的是.min.css文件，因此需要查找. 在文件名中，而不是擴展名之前：

if(/^\/[a-zA-Z0-9\/.]*.css$/.test(request.url.toString())){
//                 ^

同樣也適用於您的JavaScript。

Node.js阻止Bootstrap嗎？

問題描述

1 個解決方案

解決方案1
1 已采納 2017-11-30 17:34:34

Node.js阻止Bootstrap嗎？

問題描述

1 個解決方案

解決方案1 1 已采納 2017-11-30 17:34:34

解決方案1
1 已采納 2017-11-30 17:34:34