Почему NodeJS загрузка CSS таблиц стилей не связана с html файлами? - PullRequest
Новая
       28

Почему NodeJS загрузка CSS таблиц стилей не связана с html файлами?

1 голос
/ 29 февраля 2020

сообщество. Я немного растерялся. Я относительно новичок в NodeJS, и среда выполнения работает так, как я не ожидал. Оказывается, это было проблемой для многих других людей, которые также пытались изучить узел, кривая обучения NodeJS круче, чем, скажем, PHP в стеке LAMP. Чтобы добраться до сути, есть несколько "Hello World!" На NodeJS и некоторые другие материалы. Большинство из них довольно бесполезны и выглядят так: 

//NODEJS EXAMPLE

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

http.createServer(function (req, res){
    fs.readFile('index.html', function(err, data){
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write(data);
    return res.end();
  });
}).listen(8080);

Все учебники заканчиваются небольшим количеством кода или чем-то очень похожим, как в приведенном выше коде, и в этом моя проблема. Код является упрощенным c сервером, он загружает HTML документы, но не загружает таблицы стилей CSS, связанные с ними с помощью тега ниже: 

<link rel="stylesheet" type="text/css" href="http://localhost/... (or wherever it's located)">

Я знаю, что там есть несколько потоков / блогов / вопросов и ответов, которые решают эту проблему на StackOverFlow.com и на многих других сайтах - кажется, что все они используют модуль маршрутизации express как способ привязки и работы внешних таблиц стилей.

Требуется модуль маршрутизации express, но я нахожу неуместным то, что мне нужно использовать модуль для библиотеки Javascript, которую я не собираюсь использовать, и она все еще не проясняет проблему, она просто сметает его под коврик. Кто-нибудь знает, в чем проблема, которая не позволяет включать таблицы стилей, и как написать модуль, чтобы исправить это?

Примечание: сейчас я читаю книгу по NodeJS, которая учит меня, как направлять запросы и как отвечать. Я предполагаю, что это проблема с маршрутизацией и путевыми именами, даже если это не так просто, как написание отдельного модуля, пояснение причин, по которым теги CSS link не загружаются, было бы неплохо. Спасибо!

Ответы [ 2 ]

6 голосов
/ 29 февраля 2020

Ваш сервер nodejs не запрограммирован для отправки каких-либо таблиц стилей, когда браузер запрашивает их.

Сервер nodejs, как вы создали, по умолчанию не обслуживает никаких файлов. Он обслуживает только те файлы, которые вы запрограммировали. Итак, ваш nodejs сервер запрограммирован на выполнение одной и только одной задачи, и он должен доставлять index.html независимо от того, какой URL запрашивается у него.

Итак, вот что происходит:

  1. Пользователь вводит некоторый URL для вашего сайта
  2. Браузер отправляет серверу запрос на эту страницу
  3. Ваш веб-сервер доставляет index.html
  4. Анализирует браузер index.html и находит ссылки на таблицы стилей
  5. Браузер отправляет серверу запрос на ссылку на таблицу стилей
  6. Ваш сервер отправляет его index.html
  7. Браузер понимает, что это не таблица стилей и вы не получаете стилей

Итак, чтобы ваш HTML сервер работал правильно, вы должны добавить код для просмотра запрошенного URL-адреса и, если это URL-адрес таблицы стилей, его нужно отправить правильный файл для этой таблицы стилей, а не просто слепо отправлять index.html независимо от того, что было запрошено.

Никто не говорит, что для этого нужно использовать библиотеку Express, но это то, что он делает. Это позволяет очень легко настроить то, что отправляется, когда делаются разные типы запросов. И, для запросов к stati c ресурсам, таким как CSS files, можно даже настроить автоматическую отправку их напрямую из файловой системы.

Если вы не хотите использовать Express для это не обязательно, но тогда вам придется написать свой собственный код для предоставления правильных данных, когда запрашиваются разные URL.

Если вы хотите написать собственный код для этого, вам нужно будет создать какой-то оператор if/else или switch или таблицу для просмотра req.url, а затем отправить соответствующий контент, который соответствует запрошенный URL. Затем, когда браузер запрашивает вашу таблицу стилей, вы можете отправить ей соответствующую таблицу стилей, а не index.html. То же самое относится к Javascript файлам, изображениям, значку страницы, ajax запросам или любому ресурсу на вашем сервере, на который ссылается ваша страница.

1 голос
/ 29 февраля 2020

Поскольку ваш код на стороне сервера написан для обработки запросов all.http и доставки одного и того же html содержимого независимо от пути.

попробуйте добавить несколько логик if-else c в ваш обработчик и доставьте соответствующий файл на основе пути запроса.

что-то вроде: 

if(req.path === "" || req.path === "index.html")
     fs.read htnl file here
else if (req.path==="my.css")
     fs.read css file

научитесь использовать инструменты разработчика браузера (F12), которые показывают, какие именно запросы выполняет браузер, что он посылает, что он получает обратно - среди многих других вещей.

...