В этом уроке мы научимся отображать различные HTML-страницы в зависимости от URL-адреса в браузере. Мы уже умеем создавать локальный сервер, подключаться к нему и выводить информацию на сайт. Сейчас, при запуске сервера, видим вывод текста, но не отслеживаем различные URL-адреса. Ввод любого адреса, даже несуществующего, приводит к одному и тому же результату – это неэффективно. Цель урока – научиться отображать разные HTML-документы в зависимости от URL.
Отслеживание URL и обработка запросов
Для отслеживания URL используем код, выводящий текущий URL в консоль. Однако, простого отображения недостаточно. Необходимо проверить URL и выбрать соответствующий HTML-файл. Добавим проверку, сравнивая URL с ожидаемыми значениями, используя строгое сравнение (===) для проверки типа данных:
if (req.url === '/yandex') {
// Подключаем yandex.html
} else if (req.url === '/') {
// Подключаем index.html
}
Подключение и отображение HTML-файлов
Для подключения HTML-файлов используем функции fs.readFile и res.writeHead. Устанавливаем заголовок Content-Type: text/html для работы с HTML и используем fs для чтения файлов:
const fs = require('fs');
// ... внутри обработчика запроса ...
res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
fs.readFile(__dirname + '/index.html', (err, data) => {
res.end(data);
});
Путь к файлу (__dirname + ‘/index.html’) относительный. Файл index.html должен находиться в той же директории, что и серверный скрипт.
Обработка разных URL
Добавим обработчик для страницы /about:
if (req.url === '/about') {
fs.readFile(__dirname + '/about.html', (err, data) => {
res.writeHead(200, { 'Content-Type': 'text/html; charset=utf-8' });
res.end(data);
});
}
Обратите внимание на слэш в URL: /about, а не about.
Обработка ошибок 404
Для обработки несуществующих страниц добавим проверку else:
else {
fs.readFile(__dirname + '/404.html', (err, data) => {
res.writeHead(404, { 'Content-Type': 'text/html; charset=utf-8' });
res.end(data);
});
}
Создадим файл 404.html с сообщением об ошибке и ссылкой на главную страницу.
Мы создали простой сайт на Node.js с маршрутизацией, обрабатывающий несколько URL-адресов и отображающий соответствующие HTML-страницы, а также обрабатывающий ошибки 404. Этот подход подходит для небольших сайтов, но для больших проектов рекомендуется использовать библиотеку Express.js, которая упрощает работу с маршрутизацией.