運行javascript服務器時未加載html頁面

Question

所以我正在用 HTML、css 和 javascript 創建一個游戲，並且我試圖在這個任務中加入模板引擎/ajax。 我做了一個服務器，如果我在 cmd 中運行，然后打開谷歌瀏覽器並在地址行中輸入“localhost:3000”，它應該將我定向到 main.html 頁面。

但是，當我在 cmd 中鍵入“node server.js”時，它運行正常，但是當我在瀏覽器中輸入“localhost:3000”時，它說該頁面不存在。 我不確定出了什么問題。 如果我手動雙擊文件夾中的 html 文件，它可以工作，但我試圖通過運行服務器來加載它。

我有三個文件夾（img、node_modules 和 pages）和 2 個 json 包，它們是通過安裝 express 和 pug 創建的。 在這里很難解釋我的文件夾路徑和代碼，所以我有一個指向包含我的文件/子文件夾的文件夾的鏈接，它還提供了我目錄中路徑的更清晰視圖： https : //github.com/jessaisreal/game

它不會讓我上傳 node_modules 文件夾，因為它太大了，但是我通過在文件夾的 cmd 行中鍵入“npm init”、“npm install express”和“npm install pug”自動得到它。

我假設我的 server.js 文件或文件夾的設置方式有問題。 我真的很想讓我的程序工作，並希望得到任何幫助。 我不知道為什么我的 html 頁面沒有加載。 我也不確定我是否處理了正確獲取特定字體的 GET 請求。

我盡可能地減少了我的程序。 有幾個 html 和 css 文件，但為了簡單起見，這里只包含了 create 和 main 。 再次，我將不勝感激任何幫助或朝正確方向的推動！！

服務器.js：

const http = require('http');
const fs = require("fs");
const pug = require("pug");

//user pug functrion to render through the create Page
const renderMain = pug.compileFile('pages/main.pug');
const renderCreate = pug.compileFile('pages/create.pug');


//Helper function to send a 404 error
function send404(response){
    response.statusCode = 404;
    response.write("Unknown resource.");
    response.end();
}

// Helper function to send 500 server error;
function send500(response){
    response.statusCode = 500;
    response.write("Server error.");
    response.end();
}


// initilize the server
const server = http.createServer(function (request, response) {
    //console.log(request.method+" -> "+request.url);  test about the income request

    // handle the get request
    if(request.method === "GET"){
        if(request.url === "/" || request.url === "/main"){
            let data = renderHome("./pages/main.pug",{})
            response.statusCode = 200;
            response.end(data);

        }else if(request.url === "/main.js"){
            //read main.js file and send it back
            fs.readFile("main.js", function(err, data){
            if(err){
                send500(response);
                return;
            }
            response.statusCode = 200;
            response.setHeader("Content-Type", "application/javascript");
            response.write(data);
            response.end();
            });
        }else if(request.url === "/main.css"){

            //read css file
            fs.readFile("main.css", function(err, data){
            if(err){
                send500(response);
                return;
            }
            response.statusCode = 200;
            response.setHeader("Content-Type", "text/css");
            response.write(data);
            response.end();
            });         
        }else{
            send404(response);
            return;
        }
    }
});

//Server listens on port 3000
server.listen(3000);
console.log('Server running at http://127.0.0.1:3000/');

Answer 1

我強烈建議你使用 expressjs 來更好地組織你的項目，這個問題就會消失