Что такое Express.js и почему его следует использовать?

Express.js (или «Экспресс») - это веб-фреймворк NodeJS, используемый на внутренней стороне (или на стороне сервера) веб-сайтов и веб-приложений. Express гибок и минималистичен, что означает, что в нем нет обширной коллекции ненужных библиотек и пакетов, а также не определяется способ построения приложения.

Платформа Express создает API-интерфейсы, которые упрощают обмен данными посредством HTTP-запросов и ответов. Одна из замечательных особенностей Express заключается в том, что он дает разработчикам полный контроль над запросами и ответами, которые связаны с каждым из методов его приложения.

В этом руководстве вы узнаете, как и почему вам следует использовать Express в своих проектах.

Установка Express в ваш проект

Прежде чем вы сможете использовать платформу Express, вам необходимо установить ее в каталог проекта. Это простой процесс, который требует NodeJS и npm.

Первое, что вам нужно сделать, это создать package.json файл (в каталоге / папке вашего проекта) с помощью следующей команды:

npm init

Выполнение приведенной выше команды запустит процесс, который предложит вам ввести следующие данные:

• Имя пакета
• Версия
• Описание
• Точка входа
• Тестовая команда
• Ключевые слова
• Автор
• Лицензия

Поля имени пакета, версии, точки входа и лицензии имеют значения по умолчанию, которые вы можете легко изменить, указав свои значения. Однако, если вы хотите сохранить значения по умолчанию, вы можете просто вместо этого использовать следующую команду:

npm init -y

Выполнение приведенной выше команды сгенерирует следующее package.json файл в каталоге вашего проекта:

{
"name": "myapp",
"версия": "1.0.0",
"описание": "",
"main": "index.js",
"scripts": {
"test": "echo \" Ошибка: тест не указан \ "&& exit 1"
},
"ключевые слова": [],
"автор": "",
"лицензия": "ISC",
}

Теперь вы можете установить Express, используя следующую команду:

npm install express - сохранить

Установка Express сгенерирует пакет-lock.json файл, а также node_modules папка.

Понимание файла package.json

Причина, по которой вам нужно создать package.json перед установкой Express заключается в том, что package.json файл действует как репозиторий, хранящий важные метаданные о вашем NodeJS проекты.Зависимости - это имя одного из этих полей метаданных, а Express - это зависимость.

Установка Express в каталог вашего проекта автоматически обновит ваш package.json файл.

Обновленный файл package.json

{
"name": "myapp",
"версия": "1.0.0",
"описание": "",
"main": "index.js",
"scripts": {
"test": "echo \" Ошибка: тест не указан \ "&& exit 1"
},
"ключевые слова": [],
"автор": "",
"лицензия": "ISC",
"dependencies": {
"экспресс": "^ 4.17.1"
}
}

Теперь у вас есть поле «зависимости» с одной зависимостью - Express. И зависимости объект хранит программное обеспечение, от которого зависит правильная работа вашего проекта, которым в данном случае является платформа Express.

Создание сервера с помощью Express

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

Оглянуться на package.json файл выше, и вы увидите «основное» поле. В этом поле хранится точка входа в ваше приложение, которой в приведенном выше примере является index.js. Если вы хотите выполнить свое приложение (или, в данном случае, сервер, который вы собираетесь построить), вам нужно будет выполнить index.js файл, используя следующую команду:

узел index.js

Однако, прежде чем перейти к этапу выполнения, вам нужно будет создать index.js (или серверного приложения) в каталоге вашего проекта.

Создание файла index.js

const express = require ('экспресс');
константное приложение = экспресс ();
константный порт = 5000;
app.get ('/', (req, res) => {
res.send ('Ваш сервер работает')
})
app.listen (порт, () => {
console.log (`Сервер работает по адресу: http://localhost:${port}`);
})

Приведенный выше файл импортирует Express, а затем использует его для создания приложения Express. Затем приложение Express предоставляет доступ к получить и Слушать методы, входящие в состав Экспресс-модуля. В app.listen () метод - это первое, что вам нужно настроить. Его цель - список подключений к определенному порту хост-компьютера, который порт 5000 в примере выше.

Цель app.get () Метод заключается в получении данных с определенного ресурса. У этого метода два аргумента: путь и функция обратного вызова. Аргумент пути в приведенном выше примере имеет косую черту, которая представляет корневую позицию. Следовательно, переход к http://localhost: 5000 URL-адрес (который является корнем вашего приложения), когда ваше приложение index.js, указанное выше, будет работать, в вашем браузере будет отображаться следующий результат:

В app.get () функция обратного вызова метода генерирует вывод, указанный выше. Эта функция обратного вызова имеет два аргумента - запрос и ответ. Ответ (который res в приведенном выше примере) - это HTTP-объект, который приложение Express отправляет после HTTP-запроса (это то, что вы делаете, вводя указанный выше URL-адрес в своем браузере).

Обслуживание статического веб-сайта с помощью экспресс-сервера

Серверы играют важную роль в разработке API-интерфейсов, которые помогают хранить и передавать динамические данные, и именно здесь вы, скорее всего, будете использовать сервер Express в своих собственных проектах.

Однако сервер Express также может обслуживать статические файлы. Например, если вы хотите создать статический веб-сайт (например, для личного тренера, тренера по жизни или стилиста), вы можете использовать сервер Express для размещения веб-сайта.

Пример статического HTML-сайта

 домой 







Добро пожаловать

Lorem ipsum dolor sit amet, conctetur adipisicing elit. Possimus rerum officia quibusdam mollitia deserunt animi soluta laudantium. Quam sapiente a dolorum magnam needitatibus quis tempore facere totam. Dolor, sequi distinctio!

Посмотреть услуги

Приведенный выше HTML-код создает приятную статическую домашнюю страницу веб-сайта личного стилиста путем ссылки на следующий файл style.css:

*{
маржа: 0;
отступ: 0;
размер коробки: рамка-рамка;
}
тело {
семейство шрифтов: 'Lato', без засечек;
высота строки: 1,5;
}
a {
цвет: # 333;
текстовое оформление: нет;
}
ul {
стиль списка: нет;
}
п {
маржа: 0,5 бэр 0;
}
h1 {
маржа слева: 2 бэр;
}
/* Полезность */
.container {
максимальная ширина: 1100 пикселей;
маржа: авто;
набивка: 0 2 бэр;
переполнение: скрыто;
}
.btn {
дисплей: встроенный блок;
граница: нет;
фон: # 910505;
цвет: #fff;
набивка: 0,5 бэр 1 бэр;
радиус границы: 0,5 бэр;
}
.btn: hover {
непрозрачность: 0,9;
}
/ * Навбар * /
#navbar {
фон: #fff;
положение: липкое;
верх: 0;
z-индекс: 2;
}
#navbar .container {
дисплей: сетка;
сетка-шаблон-столбцы: 6fr 3fr 2fr;
набивка: 1 бэр;
align-items: center;
}
#navbar h1 {
цвет: # b30707;
}
#navbar ul {
оправдать себя: конец;
дисплей: гибкий;
правое поле: 3,5 бэр;
}
#navbar ul li a {
набивка: 0,5 бэр;
font-weight: жирный;
}
#navbar ul li a.current {
фон: # b30707;
цвет: #fff;
}
#navbar ul li a: hover {
фон: # f3f3f3;
цвет: # 333;
}
#navbar .social {
оправдать себя: центр;
}
#navbar .social i {
цвет: # 777;
правое поле: 0,5 бэр;
}
/* домой */
#домой {
цвет: #fff;
фон: # 333;
набивка: 2 бэр;
положение: относительное;
}
#home: before {
содержание: '';
фон: url ( https://source.unsplash.com/random) центральная часть / крышка без повторов;
позиция: абсолютная;
верх: 0;
слева: 0;
ширина: 100%;
высота: 100%;
непрозрачность: 0,4;
}
#home .showcase-container {
дисплей: сетка;
сетка-шаблон-столбцы: повторить (2, 1fr);
justify-content: center;
align-items: center;
высота: 100вх;
}
#home .showcase-content {
z-индекс: 1;
}
#home .showcase-content p {
нижнее поле: 1 бэр;
}

Обслуживание веб-сайта с помощью экспресс-сервера

const express = require ('экспресс');
константное приложение = экспресс ();
константный порт = 5000;
app.use (express.static ('общедоступный'));
app.get ('/', (req, res) => {
res.sendFile ('index.html')
})
app.listen (порт, () => {
console.log (`Сервер работает по адресу: http://localhost:${port}`);
})

Приведенные выше файлы HTML и CSS находятся в общей папке в основном каталоге проекта. Местоположение HTML-файла делает его доступным для сервера Express и его функций.

Одной из новых функций указанного выше сервера Express является app.use () метод. Он устанавливает express.static () промежуточное ПО, которое обслуживает статические файлы. Это дает возможность использовать res.sendFile () функция для обслуживания статических index.html файл выше.

Переход к http://localhost: 5000 location в вашем браузере отобразит что-то похожее на следующий результат:

Изучить Backend-разработку

Платформа Express позволяет вам делать определенные HTTP-запросы и получать соответствующие ответы, используя набор предопределенных методов. Это также один из самых популярных сегодня серверных фреймворков.

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

Узнайте, как стать серверным разработчиком в 2021 году

Если вы настроены на карьеру в ИТ, вы можете сделать и похуже, чем получить навыки, необходимые для работы в качестве внутреннего разработчика.

Читать далее

Об авторе