node.js загружает html в порядке, но не загружает связанные css

У меня возникли проблемы с использованием javascript для загрузки моего файла index.html (который, я уверен, вероятно, является пятой самой простой вещью в javascript).node.js загружает html в порядке, но не загружает связанные css

Я постараюсь сделать это коротким; в основном, мое index.html нагрузка тонкая с помощью CSS, когда я открываю его вручную (на фото ниже)

http://i.stack.imgur.com/VZfbq.png

Когда я загрузить его с помощью JavaScript, однако, он загружает только простой HTML с форматированием по умолчанию, и без моего CSS:

http://i.stack.imgur.com/Eovav.png

файлы располагаются следующим образом:

server.js в: корень

index.html в: корень/общественный

style.css в: корень/общественности/CSS

server.js

var http = require('http'); 
var fs = require('fs'); 

var handleRequest = function handleRequest(request, response){ 
     if (request.url==='/index.html' || request.url==='/') { 
      response.writeHeader(200, {'Content-type':'text/html'}); 
      fs.readFile('./public/index.html', function (err, file) { 
       if (err) throw err; 
       response.end(file); 
      }); 
     } else { 
      response.writeHeader(404); 
      response.end('Are you lost friend?'); 
     } 
} 
var server = http.createServer(handleRequest); 
var PORT = 8080; 
server.listen(PORT, function(){ 
    console.log("Server listening on: http://localhost:%s", PORT); 
});

index.html

<!DOCTYPE html> 
<html> 
<head> 
    <title>My not-so-amazing Webpage</title> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
</head> 
<body> 

<h1>The Inspiratorator v5.7.0</h1> 

<p>I AM THE SUN</p> 

</body> 
</html>

стиль. css

h1 { 
    background-color: #000000; 
    color: rgba(255, 255, 255, 1); 
    backface-visibility: 0.5; 
    font-size: 50px; 
    text-align: center; 
} 

p { 
    background-color: blue; 
    font-family: sans-serif; 
    color: white; 
}

источник

2016-02-28 Omar A. Yousry

Это node.js? Вы можете упомянуть об этом в тегах и, возможно, в тексте. – GolezTrol

Ах да, хорошая точка. –

Посмотрите, как вы обрабатываете запросы, в основном вы отказываетесь от каждого запроса, кроме /. Браузер не может получить файл css.

if (request.url==='/index.html' || request.url==='/') { 
      response.writeHeader(200, {'Content-type':'text/html'}); 
      fs.readFile('./public/index.html', function (err, file) { 
       if (err) throw err; 
       response.end(file); 
      }); 
     } else { 
      response.writeHeader(404); 
      response.end('Are you lost friend?'); 
     }

Здесь я добавил исключение для файла css и он работает.

Примечание:

Вы должны изменить этот код, чтобы сделать для ваших нужд, не используют в производстве.

} else if (request.url.indexOf('css') != -1) { 
      response.writeHeader(200, {'Content-type':'text/css'}); 
      fs.readFile('./public/css/style.css', function (err, file) { 
       if (err) throw err; 
       response.end(file); 
      }); 
     }

источник

2016-02-28 12:36:38 giannisf

Это сработало отлично; просто чтобы убедиться, что я под кодом правильно, будет проверять внутри (if (request.url === '/ index.html' || request.url === '/')) для содержимого css, а затем читать файл Работа? И есть ли способ прочитать файл по пути, указанному в документе HTML, или мне нужно вручную указать его? (или настроить какое-то соглашение об именах, то есть stylethispage.css для thispage.html) –

О, неважно, что это не сработало, и я думаю, что я понимаю, почему. Я уверен, что не понимаю, как загружается страница. Когда пользователь запрашивает html-страницу (и javascript GET), html-страница затем запрашивает файл css самостоятельно, который не будет отправлен, потому что он просто дефолт 404; это правильно?Все еще немного запутано в отношении того, есть ли «правильный» способ сделать это, возможно, получив файл, который «отправлен» со страницы html или что-то еще? (все еще не на 100% положительно влияет на то, как все это работает) –

@ OmarA.Yousry Да, так работает HTTP. Правильный способ заключается в использовании чего-то более высокого рычага, возможно, 'express.js'? – giannisf

Вы буквально возвращаете http 404, если uri не заканчивается index.html, поэтому как css может быть таким?

Используйте подходящий отладчик, например, в Chrome или Firebug, чтобы найти причину таких ошибок.

источник

2016-02-28 12:35:23 highstakes

node.js загружает html в порядке, но не загружает связанные css

ответ

Смежные вопросы