Блог

Итак, я создаю игру с использованием HTML, css и javascript, и я пытаюсь включить шаблонизаторы / ajax в эту задачу. Я создал сервер, который, если я запущу в cmd, а затем открою Google Chrome и введу ‘localhost: 3000’ в адресной строке, он должен направить меня на main.html страница.

Однако, когда я набираю ‘node server.js «в cmd он работает правильно, но когда я ввожу «localhost: 3000» в браузере, он говорит, что страница не существует. Я не уверен, что пошло не так. Если бы я вручную дважды щелкнул по html-файлу в моей папке, это сработало бы, но я пытаюсь заставить его загрузиться, запустив сервер.

У меня есть три папки (img, node_modules и pages) и 2 пакета json, которые были созданы путем установки express и pug. Здесь сложно объяснить пути к моим папкам и код, поэтому у меня есть ссылка на папку, содержащую мои файлы / вложенные папки, и это также дает более четкое представление о пути в моем каталоге: https://github.com/jessaisreal/game

Это не позволило бы мне загрузить папку node_modules, поскольку она была слишком большой, но я автоматически получил ее, введя «npm init», «npm install express» и «npm install pug» в строку cmd в папке.

Я предполагаю, что что-то не так с моим 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/');
  

Я настоятельно рекомендую вам использовать expressjs для лучшей организации вашего проекта, и эта проблема исчезнет