Создание HTML-шаблонов
Всю информацию ранее выводили строкой. Для исправления этого, создадим HTML-файл, который будет выводиться на главной странице. Создадим файл yandex.html в папке templates со следующим содержимым:
<!DOCTYPE html>
<html>
<head>
<title>Главная страница</title>
</head>
<body>
<h1>Главная страница</h1>
<p>Lorem ipsum...</p>
</body>
</html>Теперь вместо вывода строки будем выводить этот HTML-файл.
Работа с файлами и потоками данных
Для работы с файлами подключим модуль fs:
const fs = require('fs');Внутри функции createServer, после отправки заголовков, создадим константу и запишем в нее результат чтения файла index.html с помощью метода fs.createReadStream:
const stream = fs.createReadStream('./templates/index.html');fs.createReadStream считывает файл потоками, отправляя информацию на сервер по частям. Это ускоряет отображение сайта.
Метод pipe отправляет данные на сервер:
stream.pipe(response);Улучшение отображения страницы
Добавим стили в HTML-файл, используя тег <style>:
<style>
body {
background-color: #333;
color: #eee;
text-align: center;
padding-top: 100px;
}
</style>В дальнейшем, при изучении Express.js, рассмотрим более корректный подход к подключению стилей с помощью отдельных CSS-файлов.
Отслеживание URL-адресов и обработка ошибок
Для отслеживания URL-адресов добавим условия в функцию createServer:
if (request.url === '/') {
// чтение index.html
} else if (request.url === '/about') {
// чтение about.html
} else {
// чтение error.html
}Создадим файлы about.html и error.html:
<!DOCTYPE html>
<html>
<head>
<title>О нас</title>
</head>
<body>
<h1>Страница про нас</h1>
<p>...</p>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>Ошибка</title>
</head>
<body>
<h1>Ошибка</h1>
<p>Такой страницы нет. Перейдите на главную.</p>
</body>
</html>Теперь при переходе по /about отобразится about.html, а по несуществующему адресу — страница с ошибкой. Добавим ссылки между страницами для навигации.
В этом уроке мы научились создавать многостраничный сайт на Node.js, обрабатывать различные URL-адреса и отображать HTML-шаблоны, используя потоки данных для оптимизации производительности. В следующих уроках мы перейдем к использованию Express.js.