Перейти к содержанию

Статические файлы

Рассмотрим, как в Node.js + Express отправлять пользователю статические файлы html. Для работы со статическими файлами в Express определен специальный компонент express.static(), который указывает на каталог с файлами.

Создадим для статических файлов в проекте каталог public, в который добавим новую html-страницу, которую назовем about.html:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<!DOCTYPE html>
<html>
    <head>
        <title>О сайте</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <h1>О сайте</h1>
    </body>
    <html></html>
</html>

В итоге проект будет выглядеть следующим образом:

  • app.js
  • node_modules
  • package.json
  • public
    • about.html

Теперь изменим файл app.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
const express = require('express');

const app = express();

app.use(express.static(__dirname + '/public'));

app.use('/', function (request, response) {
    response.send('<h1>Главная страница</h1>');
});

app.listen(3000);

Чтобы встроить компонент express.static в процесс обработки запроса, вызывается функция app.use(). Эта функция позволяет добавлять различные компоненты, которые еще называются middleware, в конвейер обработки запроса:

1
app.use(express.static(__dirname + '/public'));

Причем данный вызов помещается до всех остальных вызовов функции app.get().

В саму же функцию express.static() передается путь к папке со статическими файлами. Специальное выражение __dirname позволяет получить полный путь к папке.

Запустим приложение на выполнение и обратимся в браузере по пути http://localhost:3000/about.html:

4.4.png

Следует отметить, что для обращения к файлу мы указываем только имя файла без названия каталога public. Также не следует путать подобное обращение к файлам с действием функции sendFile: в данном случае мы напрямую обращаемся к статическим файлам, а функция sendFile фактически берет содержимое из файла и отсылает его пользователю.

Дополнительно мы можем изменить путь к каталогу статических файлов:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
const express = require('express');

const app = express();

app.use('/static', express.static(__dirname + '/public'));

app.use('/', function (request, response) {
    response.send('<h1>Главная страница</h1>');
});

app.listen(3000);

Теперь чтобы обратиться к файлу about.html, необходимо отправить запрос http://localhost:3000/static/about.html.

Комментарии