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

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

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

<!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:

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, в конвейер обработки запроса:

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

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

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

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

4.4.png

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

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

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.

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

Комментарии