Question

因此，我正在使用HTML，CSS和javascript创建游戏，并且试图在此任务中合并模板引擎/ ajax。我做了一个服务器，如果我在cmd中运行，然后打开google chrome，然后在地址栏中键入“ localhost：3000”，则应该将我定向到main.html页面。

但是，当我在cmd中键入“ node server.js”时，它可以正常运行，但是当我在浏览器中输入“ localhost：3000”时，该页面不存在。我不确定出了什么问题。如果要手动双击文件夹中的html文件，它可以工作，但是我试图通过运行服务器来使其加载。

我有三个文件夹（img，node_modules和页面）和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。再次，我将不胜感激或朝着正确的方向前进！

server.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更好地组织项目，而这个问题将消失

运行javascript服务器时无法加载html页面

1 个答案: