首页 > 解决方案 > 运行javascript服务器时html页面未加载

问题描述

所以我正在使用 HTML、css 和 javascript 创建一个游戏,并且我正在尝试将模板引擎/ajax 合并到这个任务中。我创建了一个服务器,如果我在 cmd 中运行然后打开 google chrome 并在地址行中输入“localhost:3000”,它应该将我引导到 main.html 页面。

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

我有三个文件夹(img、node_modules 和 pages)和 2 个通过安装 express 和 pug 创建的 json 包。在这里很难解释我的文件夹路径和代码,所以我有一个指向包含我的文件/子文件夹的文件夹的链接,它还可以更清晰地查看我的目录中的路径: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/');

标签: javascripthtmlnode.jsajaxserver

解决方案


我强烈建议您使用 expressjs 来更好地组织您的项目,这个问题将会消失


推荐阅读