Как обслуживать статические файлы в Express

В этом руководстве мы увидим, как обслуживать статические файлы в Express. Express — это быстрая, неповторимая и минималистичная веб-платформа для Node.js. Мы также можем создать надежный api, используя служебные методы HTTP и промежуточное программное обеспечение, имеющееся в вашем распоряжении. Express предоставляет тонкий слой функций веб-приложений, не заслоняя те функции Node.js, которые вы знаете и любите. На данный момент версия Express Framework — 4.16.0.

Если вы хотите узнать больше о Node.js, ознакомьтесь с этим курсом NodeJS — Полное руководство (включая MVC, REST API, GraphQL)

Как обрабатывать статические файлы в Express

Мы можем обслуживать статические файлы, такие как изображения, файлы CSS и JavaScript, используя встроенную функцию промежуточного программного обеспечения express.static в Express. Синтаксис следующий.

 express.static (root, [options]) 

Аргумент root указывает корневой каталог из который будет обслуживать статические активы. Функция определяет файл для обслуживания, комбинируя req.url с предоставленным корневым каталогом . Когда файл не найден, вместо отправки ответа 404 он вызывает next () для перехода к следующему промежуточному программному обеспечению, позволяя складывать и откатываться. Теперь давайте рассмотрим пример обслуживания статических файлов в экспресс-режиме.

# 1: Установите Express и создайте сервер

Создайте папку проекта.

 mkdir expstatic 

Теперь инициализируйте файл package.json с помощью следующей команды.

 npm init -y 

Установите экспресс, используя следующую команду.

 npm install express --save 

Теперь создайте в корне папку с именем public.

Кроме того, создайте в корневом каталоге один файл с именем

//server.  jsconst express = require ('express'); const app = express (); const PORT = process.env.PORT = 4000; app.listen (PORT, () => {console.log ('Сервер работает на:'  , PORT);}); 
Перейдите в терминал и запустите сервер.
 node server  

# 2: Объявление d Статическое промежуточное ПО

Во-первых, нам нужно определить корневой каталог, который может действовать как папка, из которой мы можем загружать статические ресурсы, такие как CSS, JS и изображения.

В нашем случае это общедоступный каталог. Итак, давайте определим его.

//server.jsapp.use (express.static ('public')); 

Итак, наш файл server.js выглядит вот так.

//server.jsconst express = require ('express'); const app = express (); const PORT = process.env.PORT = 4000; app.use (express.  static ('public')); app.listen (PORT, () => {console. log ('Сервер работает в:', ПОРТ);}); 

Теперь папка наших статических файлов загружена. Давайте добавим три файла в общую папку.

Мы добавили три файла в папку public .

// style.cssbody {background-color: red} 
//app.jsfunction add (x) {return x + x;} console.log (add (2)); 

И последнее изображение.

Теперь снова перезапустите сервер узла, перейдите в браузер и введите следующие URL-адреса.

  1. http://localhost: 4000/style.css
  2. http://localhost: 4000/app.js
  3. http://localhost: 4000/Krunal. jpg

Вы можете видеть содержимое файлов в браузере. Итак, теперь мы обслуживаем статические файлы в экспресс-режиме.

#Multiple Static Assets Directory

Мы можем определить несколько статических файлов каталоги для обслуживания статических файлов.

Для этого нам нужно дважды определить промежуточное ПО.

 app.use (express.static ('public'))  app.use (express.static ('files')) 

В этом случае у вас есть два каталога 1) общедоступные 2) файлы.

Express ищет файлы в том порядке, в котором вы устанавливаете статический каталог с помощью функции промежуточного слоя express.static .

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

 app.  use ('/content', express.static ('public')) 

Итак, здесь мы определили префикс под названием/ content.

Итак, когда вы получаете доступ к пути к браузеру, вам нужно добавить префикс li оставьте это.

  1. http://localhost: 4000/content/Krunal.jpg
  2. http://localhost: 4000/content/style .css
  3. http://localhost: 4000/content/app.js

Наконец, H ow для обслуживания статических файлов в Express учебное пособие окончено. Спасибо, что приняли.

Оцените статью
nanomode.ru
Добавить комментарий