Доставка HTML-файлов с помощью Express

23 июля, 2021 12:07 пп 554 views | Комментариев нет

, | | Комментировать запись

В приложениях Node.js и Express  можно использовать метод res.sendFile() для доставки файлов. Доставка HTML файлов в Express – удобное решение для обслуживания статических страниц.

Примечание: До версии Express 4.8.0 поддерживался res.sendfile(), строчная версия res.sendFile(), но она уже устарела.

В этом руководстве вы узнаете, как использовать res.sendFile().

Требования

Для выполнения этого мануала вам понадобится локальная установка Node.js. Следуйте инструкциям для вашего дистрибутива: mac OS, Ubuntu, Debian, CentOS.

Мануал был проверен на версиях Node v16.0.0, npm v7.11.1 и express v4.17.1.

1: Создание тестового проекта

Сначала откройте окно терминала и создайте новый каталог проекта:

mkdir express-sendfile-example

Затем перейдите в полученный каталог:

cd express-sendfile-example

На этом этапе вы можете инициализировать новый проект npm:

npm init -y

После этого установите пакет express:

npm install express@4.17.1

На данный момент у нас есть новый проект, готовый к использованию Express.

Создайте новый файл server.js и откройте его в редакторе кода. Поместите в этот файл следующие строки:

const express = require('express');

const app = express();
const port = process.env.PORT || 8080;

// sendFile will go here

app.listen(port);
console.log('Server started at http://localhost:' + port);

Вернитесь в окно терминала и запустите приложение:

node server.js

Убедившись, что проект работает должным образом, вы можете использовать res.sendFile().

2: Использование метода res.sendFile()

Вернитесь в файл server.js с помощью редактора кода и добавьте path, .get() и res.sendFile():

const express = require('express');
const path = require('path');

const app = express();
const port = process.env.PORT || 8080;

// sendFile will go here
app.get('/', function(req, res) {
  res.sendFile(path.join(__dirname, '/index.html'));
});

app.listen(port);
console.log('Server started at http://localhost:' + port);

Когда сервер получает запрос, он обслуживает файл index.html.

Создайте новый файл index.html и откройте его в редакторе кода. Затем поместите в этот файл такие строки:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Sample Site</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <style>
    body { padding-top: 50px; }
  </style>
</head>
<body>

  <div class="container">
    <div class="jumbotron">
      <h1>res.sendFile() Works!</h1>
    </div>
  </div>

</body>
</html>

Этот код выведет сообщение:

res.sendFile() Works!

Примечание: В этом мануале для стилизации используется BootstrapCDN (но это не обязательно).

Сохраните изменения, а затем снова откройте окно терминала и запустите сервер.

node server.js

Когда сервер запустится, перейдите в веб-браузере по адресу http://localhost:8080. На экране вы увидите сообщение:

res.sendFile() Works!

Теперь ваше приложение использует res.sendFile() для обслуживания файлов HTML.

Заключение

В этой статье вы узнали, как использовать метод res.sendFile() для доставки HTML-файлов в вашем приложении.

Читайте также: Начало работы с Node.js и Express

Tags: , , ,

Добавить комментарий