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

Posted 2023-03-07

【中文标题】运行javascript服务器时html页面未加载

【英文标题】：html page not loading when running javascript server

【发布时间】：2021-02-13 20:56:26

【问题描述】：

所以我正在使用 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/');

【问题讨论】：

尝试点击http://localhost:3000/（是的，末尾有斜线）

包含 / 似乎也不起作用。自动获取“无法访问此站点”。

即使你点击 /main ?

localhost:3000, localhost:3000, localhost:3000/main 都不会导致任何结果。我尝试从我的老师那里下载一个服务器示例的 zip，然后输入 localhost:3000 为他们的程序工作。但是由于某种原因，当我尝试为自己的游戏实现服务器并遵循在 cmd 中运行 server.js 然后键入 localhost:3000 的相同步骤时，它不会导致任何结果。我不确定我的 server.js 文件或任何其他 javascript 文件中是否缺少某些内容。

【参考方案1】：

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

【讨论】：

就是这样！