Файлы стилей и JavaScript не применяются к странице, которая обслуживает HTML в Node.js - PullRequest
Новая
       9

Файлы стилей и JavaScript не применяются к странице, которая обслуживает HTML в Node.js

0 голосов
/ 20 мая 2018

В настоящее время я работаю со своей HTML-страницей, которая ссылается на style.css и index.js, однако эти файлы не применяются к HTML-странице, хотя я явно заявил, что должен включать их, если их запрашивает 'req'?

Мой HTML (для отображения включений): 

<!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <title>Test site</title>

      <link rel="stylesheet" href="/style.css" media="screen">

      <script src="/index.js" charset="utf-8" defer></script>

      .
      .
      .

Мой код server.js: 

var PORT = 3000;
var http = require('http');
var fs = require('fs');
var path = require('path');

//cache the files
var index = fs.readFileSync('public/index.html', 'utf8', function read(err, data) {
    if (err) {
        throw err;
    }
});
var style = fs.readFileSync('public/style.css', 'utf8', function read(err, data) {
    if (err) {
        throw err;
    }
});
var indexJS = fs.readFileSync('public/index.js', 'utf8', function read(err, data) {
    if (err) {
        throw err;
    }
});

function requestHandler(req, res){
    res.setHeader('Content-Type', 'text/html');
    res.statusCode = 200
    res.write(index);
    if(req.url === '/style.css'){
        res.write(style);
    }
    if(req.url === '/index.js'){
        res.write(indexJS);
    }
    res.end();
}

//use 3000 by default if PORT is not defined
if(!(typeof PORT !== 'undefined') || PORT === null){
    http.createServer(requestHandler).listen(PORT);
}
else{
    http.createServer(requestHandler).listen(3000);
}

1 Ответ

0 голосов
/ 20 мая 2018

Похоже, у вас правильная идея, но есть несколько моментов, которые следует отметить в коде сервера.

Установка заголовка Content Type сообщает веб-браузеру, как интерпретировать получаемый файл.Код вашего сервера всегда устанавливает его в «text / html», где он должен быть установлен в «text / css» для css, и «text / javascript» для ваших js-файлов.

res.write добавит файлсодержание к ответу.Поскольку res.write(index) выполняется при каждом запросе, ваш HTML отправляется перед css / js в том же файле.Попробуйте использовать условный для HTML, как вы делаете для CSS / JS, как 

if(req.url === '/') {
  res.setHeader('Content-Type', 'text/html');
  res.write(index);
}
...