Какво е Express.js и защо трябва да го използвате?

Express.js (или "Express") е уеб рамка на NodeJS, използвана в задния край (или от страна на сървъра) на уебсайтове и уеб приложения. Express е гъвкав и минималистичен, което означава, че няма обширна колекция от ненужни библиотеки и пакети, нито диктува как трябва да изградите приложението си.

Рамката Express изгражда API, които улесняват комуникацията чрез HTTP заявки и отговори. Едно от забележителните неща за Express е, че дава на разработчиците пълен контрол върху заявките и отговорите, които са свързани с всеки от методите на приложението му.

В този урок ще научите как и защо трябва да използвате Express в собствените си проекти.

Инсталиране на Express във вашия проект

Преди да можете да използвате рамката Express, ще трябва да я инсталирате в директорията на вашия проект. Това е лесен процес, който изисква NodeJS и npm.

Първото нещо, което трябва да направите, е да създадете a package.json файл (в рамките на вашата директория/папка на проекта), като използвате следната команда:

npm init

Изпълнението на командата по-горе ще инициира процес, който ще ви подкани за следните входове:

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

Името на пакета, версията, входната точка и лицензните полета имат стойности по подразбиране, които можете лесно да замените, като предоставите своите стойности. Въпреки това, ако искате да запазите стойностите по подразбиране, можете просто да използвате следната команда вместо това:

npm init -y

Изпълнението на командата по-горе ще генерира следното package.json файл в директорията на вашия проект:

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

Сега можете да инсталирате Express, като използвате следната команда:

npm install express --save

Инсталирането на Express ще генерира a package-lock.json файл, както и a модули_възел папка.

Разбиране на файла package.json

Причината, поради която трябва да създадете a package.json файл преди да инсталирате Express е, че package.json файл действа като хранилище, съхраняващо важни метаданни за вашите NodeJS проекти.Зависимости е името на едно от тези полета с метаданни, а Express е a зависимост.

Инсталирането на Express в директорията на вашия проект автоматично ще актуализира вашия package.json файл.

Актуализираният файл package.json

{
"name": "myapp",
"версия": "1.0.0",
"описание": "",
"main": "index.js",
"скриптове": {
"test": "echo \"Грешка: не е посочен тест\" && изход 1"
},
"ключови думи": [],
"автор": "",
"лиценз": "ISC",
"зависимости": {
"express": "^4.17.1"
}
}

Сега имате поле „зависимости“, което има една зависимост – Express. И на зависимости object съхранява софтуер, от който зависи вашият проект, за да функционира правилно, което в този случай е Express framework.

Създаване на сървър с Express

Наличието на API, който обработва съхранението и движението на данни, е изискване за всяко приложение с пълен стек, а Express прави процеса на създаване на сървъра бърз и лесен.

Погледнете назад към package.json файл по-горе и ще видите „основно“ поле. Това поле съхранява входната точка към вашето приложение, което е „index.js“ в примера по-горе. Когато искате да изпълните приложението си (или в този случай сървърът, който предстои да изградите), ще трябва да изпълните index.js файл с помощта на следната команда:

възел index.js

Въпреки това, преди да стигнете до етапа на изпълнение, ще трябва да създадете index.js (или сървърно приложение) файл в директорията на вашия проект.

Създаване на файла index.js

const express = изисквам ('express');
const app = express();
const порт = 5000;
app.get('/', (req, res) => {
res.send('Вашият сървър работи')
})
app.listen (порт, () => {
console.log(`Сървърът работи на: http://localhost:${port}`);
})

Файлът по-горе импортира Express, след което го използва за създаване на Express приложение. След това приложението Express предоставя достъп до получи и слушам методи, които са част от модула Express. В app.listen() методът е първият, който трябва да настроите. Целта му е да изброи връзки на конкретен порт на хост компютъра, който е порт 5000 в примера по-горе.

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

В app.get() функцията за обратно извикване генерира изхода по-горе. Тази функция за обратно извикване има два аргумента – заявка и отговор. Отговорът (който е рез в примера по-горе) е HTTP обектът, който експресно приложение изпраща след HTTP заявка (което правите, като въведете URL адреса по-горе в браузъра си).

Обслужване на статичен уебсайт с вашия експресен сървър

Сървърите играят значителна роля в разработването на API, които помагат за съхраняване и прехвърляне на динамични данни и това е мястото, където най-вероятно ще използвате Express сървър в собствените си проекти.

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

Пример за статичен HTML уебсайт

 У дома 







Добре дошли

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Possimus rerum officia quibusdam mollitia deserunt animi soluta laudantium. Quam sapiente a dolorum magnam necessitatibus quis tempore facere totam. Долор, секви отличие!

Преглед на услугите

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

*{
марж: 0;
допълване: 0;
кутия-оразмеряване: борд-кутия;
}
тяло {
семейство шрифтове: 'Lato', sans-serif;
линия-височина: 1,5;
}
a {
цвят: #333;
текст-украса: няма;
}
ул {
списък-стил: няма;
}
p {
марж: .5rem 0;
}
h1{
margin-left: 2rem;
}
/* Помощна програма */
.контейнер {
максимална ширина: 1100px;
марж: автоматично;
подплата: 0 2rem;
преливане: скрито;
}
.btn {
дисплей: inline-block;
граница: няма;
фон: #910505;
цвят: #fff;
подплата: 0.5rem 1rem;
радиус на границата: 0.5rem;
}
.btn: задържане на мишката {
непрозрачност: 0,9;
}
/* Navbar */
#navbar {
фон: #fff;
позиция: лепкава;
отгоре: 0;
z-индекс: 2;
}
#navbar .container {
дисплей: решетка;
grid-template-columns: 6fr 3fr 2fr;
подплата: 1rem;
align-items: център;
}
#navbar h1 {
цвят: #b30707;
}
#navbar ul {
justify-self: край;
дисплей: гъвкав;
поле вдясно: 3.5rem;
}
#navbar ul li a {
подплата: 0.5rem;
шрифт-тегло: получер;
}
#navbar ul li a.current {
фон: #b30707;
цвят: #fff;
}
#navbar ul li a: hover {
фон: #f3f3f3;
цвят: #333;
}
#navbar .social {
justify-self: център;
}
#navbar .social i {
цвят: #777;
поле вдясно: .5rem;
}
/* У дома */
#У дома {
цвят: #fff;
фон: #333;
подплата: 2rem;
позиция: относителна;
}
#home: преди {
съдържание: '';
фон: url ( https://source.unsplash.com/random) център/капак без повторение;
позиция: абсолютна;
отгоре: 0;
вляво: 0;
ширина: 100%;
височина: 100%;
непрозрачност: 0,4;
}
#home .showcase-container {
дисплей: решетка;
grid-template-columns: повторете (2, 1fr);
justify-content: център;
align-items: център;
височина: 100vh;
}
#home .showcase-content {
z-индекс: 1;
}
#home .showcase-content p {
поле-долу: 1rem;
}

Обслужване на уебсайта с експресния сървър

const express = изисквам ('express');
const app = express();
const порт = 5000;
app.use (express.static('public'));
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 местоположението във вашия браузър ще покаже нещо подобно на следния изход:

Разгледайте Backend Development

Рамката Express ви позволява да правите специфични HTTP заявки и да получавате подходящи отговори, като използвате набор от предварително дефинирани методи. Това също е една от най-популярните backend рамки днес.

Да се ​​научиш как да използваш рамката Express е страхотен ход. Но ако наистина искате да станете професионален бекенд разработчик, трябва да научите много повече.

Научете как да станете бекенд разработчик през 2021 г

Ако сте настроили кариерата си в ИТ, можете да направите по-лошо от това да научите уменията, от които се нуждаете, за да бъдете бекенд разработчик.

Прочетете Следващото

За автора