运行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 来更好地组织你的项目，这个问题就会消失