Підручник з фреймворку Node.js Express.js

У цьому посібнику ми вивчимо фреймворк Express. Цей фреймворк побудований таким чином, що він діє як мінімальний та гнучкий фреймворк веб-застосунків Node.js, надаючи надійний набір функцій для створення односторінкових, багатосторінкових та гібридних веб-застосунків.

Що таке Express.js?

Express.js — це фреймворк сервера веб-застосунків Node.js, спеціально розроблений для створення односторінкових, багатосторінкових та гібридних веб-застосунків.

Він став стандартним серверним фреймворком для Node.js. Express — це бекенд-частина того, що відомо як стек MEAN.

Маршрутизація та проміжне програмне забезпечення на експрес-шарах поверх ядра Node.js HTTP, потоки та API подій.

MEAN є безкоштовним і відкритим кодом JavaScript стек програмного забезпечення для створення динамічних веб-сайтів і веб-додатків, який містить такі компоненти;

1) MongoDB — Стандартна база даних NoSQL

2) Express.js — Фреймворк веб-застосунків за замовчуванням

3) AngularJS - The JavaСценарій MVC framework, який використовується для веб-додатків

4) Node.js — Фреймворк, що використовується для масштабованих серверних та мережевих застосунків.

Фреймворк Express.js дозволяє дуже легко розробити додаток, який можна використовувати для обробки кількох типів запитів, таких як GET, PUT, POST і DELETE.

Встановлення та використання Express

Express встановлюється через Node Package Manager. Це можна зробити, виконавши наступний рядок у командному рядку

npm інсталювати експрес

Наведена вище команда запитує менеджер пакетів Node на завантаження необхідного експрес-файлу. Модулі та встановіть їх відповідно.

Примітка до версії: npm тепер встановлює Express 5.2; багато проектів досі використовують Express 4. Обидва запускають наведені нижче приклади на підтримуваний реліз Node.js.

Давайте скористаємося нещодавно встановленою платформою Express і створимо просту програму «Hello World».

Наша програма створить простий серверний модуль який прослуховуватиме порт номер 3000. У нашому прикладі, якщо запит буде зроблено через браузер на цьому порту номер, то серверна програма надішле клієнту відповідь «Hello World».

var express=require('express');
var app=express();
app.get('/',function(req,res)
{
res.send('Hello World!');
});
var server=app.listen(3000,function() {});

Code Пояснення:

1. У нашому першому рядку коду ми використовуємо функцію require для включення «експрес-модуля».
2. Перш ніж ми зможемо почати використовувати експрес-модуль, нам потрібно створити з нього об’єкт.
3. Тут ми створюємо функцію зворотного виклику. Ця функція буде викликана щоразу, коли хтось перейде до кореневого каталогу нашого веб-застосунку, тобто http://localhost:3000. Функція зворотного виклику буде використана для надсилання рядка «Hello World» на веб-сторінку.
4. У функції зворотного виклику ми надсилаємо клієнту рядок «Hello World». Параметр «res» використовується для повернення вмісту на веб-сторінку. Цей параметр «res» надається модулем «request», щоб дозволити надсилати вміст назад на веб-сторінку.
5. Потім ми використовуємо функцію listen, щоб наш серверний застосунок прослуховував запити клієнтів на порту № 3000. Ви можете вказати тут будь-який доступний порт.

Якщо команда виконана успішно, під час запуску коду в браузері буде показано наступний результат.

вихід:

З виходу,

• Ви можете чітко побачити, якщо переглянете URL localhost на порту 3000, ви побачите рядок «Hello World», що відображається на сторінці.
• Оскільки в нашому коді ми спеціально вказали, що сервер має прослуховувати порт № 3000, ми можемо переглянути вивід під час переходу до нього. URL.

Що таке маршрути?

Єдиний кореневий маршрут — це лише початкова точка.

Маршрутизація визначає спосіб, яким програма відповідає на запит клієнта до певної кінцевої точки.

Наприклад, клієнт може зробити http-запит GET, POST, PUT або DELETE для різних URL такі як ті, що показані нижче;

http://localhost:3000/Books
http://localhost:3000/Students

У наведеному вище прикладі

• Якщо запит GET зроблено для першого URL, тоді відповіддю в ідеалі має бути список книг.
• Якщо запит GET виконується вдруге URL, тоді відповіддю в ідеалі має бути список студентів.
• Отже, виходячи з URL до якого здійснюється доступ, на веб-сервері буде викликана інша функціональність, і відповідно, відповідь буде надіслана клієнту. Це концепція маршрутизації.

Кожен маршрут може мати одну або кілька функцій обробки, які виконуються, коли маршрут збігається.

Загальний синтаксис для маршруту показано нижче

app.METHOD(PATH, HANDLER)

де,

1) додаток є екземпляром експрес-модуля

2) METHOD – це метод запиту HTTP (GET, POST, PUT або DELETE)

3) PATH - це шлях на сервері.

4) HANDLER — це функція, яка виконується, коли маршрут збігається.

⚠️ Експрес 5 зазначає: Ці підписи залишилися незмінними, але app.del() стала app.delete(), res.sendfile() стала res.sendFile(), а шаблони підстановки тепер потребують імен, таких як /*splat.

Давайте розглянемо приклад того, як ми можемо реалізувати маршрути в Express. У нашому прикладі буде створено 3 маршрути як

1. Маршрут /Node, який відображатиме рядок «Навчальний посібник із вузла», якщо цей маршрут доступний
2. Маршрут /Angular, який відображатиме рядок «Навчальний посібник з Angular», якщо цей маршрут доступний
3. Маршрут за замовчуванням / , який відображатиме рядок «Ласкаво просимо до Guru99 навчальних посібників.

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

var express = require('express');
var app = express();
app.route('/Node').get(function(req,res)
{
    res.send("Tutorial on Node");
});
app.route('/Angular').get(function(req,res)
{
    res.send("Tutorial on Angular");
});
app.get('/',function(req,res){
    res.send('Welcome to Guru99 Tutorials');
});

Code Пояснення:

1. Тут ми визначаємо маршрут, якщо URL http://localhost:3000/Node is selected in the browser. To the route, we are attaching a callback function which will be called when we browse to the Node URLФункція має 2 параметри.
   • Основним параметром, який ми будемо використовувати, є параметр res, який можна використовувати для надсилання інформації назад клієнту.
   • Параметр "req" містить інформацію про зроблений запит. Іноді додаткові параметри можуть бути надіслані як частина зробленого запиту, і, отже, параметр «req» можна використовувати для пошуку додаткових параметрів, які надсилаються.
2. Ми використовуємо функцію надсилання, щоб надіслати клієнту рядок «Навчальний посібник із вузла», якщо вибрано маршрут вузла.
3. Тут ми визначаємо маршрут, якщо URL http://localhost:3000/Angular is selected in the browser. To the route, we are attaching a callback function which will be called when we browse to the Angular URL.
4. Ми використовуємо функцію відправки, щоб відправити рядок «Tutorial on Angular» назад клієнту, якщо вибрано маршрут Angular.
5. Це маршрут за замовчуванням, який вибирається під час переходу до кореневого каталогу програми — http://localhost:3000. Після вибору маршруту за замовчуванням з’являється повідомлення «Ласкаво просимо до GuruКлієнту буде надіслано «99 навчальних посібників».

Якщо команда виконана успішно, під час запуску коду в браузері буде показано наступний результат.

вихід:

З виходу,

• Ви можете чітко побачити, якщо переглянете URL localhost на порту 3000, ви побачите рядок «Ласкаво просимо до GuruНа сторінці відображається 99 навчальних посібників.
• Оскільки в нашому коді ми згадали, що наш параметр за замовчуванням URL відобразило б це повідомлення.

Далі перейдіть до /Node.

З виходу,

• Ви можете побачити, що якщо URL було змінено на /Node, буде вибрано відповідний маршрут вузла та відображено рядок «Tutorial on Node».

Потім перейдіть до /Angular.

З виходу,

• Ви можете побачити, що якщо URL було змінено на /Angular, буде вибрано відповідний маршрут вузла та відображено рядок «Підручник з Angular».

Приклад веб-сервера з використанням express.js

З наведеного вище прикладу ми побачили, як можна вирішувати, який вивід показувати на основі маршрутизації. Такий тип маршрутизації використовується в більшості сучасних веб-застосунків. Інша частина веб-сервера стосується використання шаблонів у Node.js.

Під час створення швидких Node.js-застосунків «на льоту» простим та швидким способом є використання шаблонів для застосунку. На ринку доступно багато фреймворків для створення шаблонів. У нашому випадку ми візьмемо за приклад фреймворк Jade для шаблонізації.

Jade встановлюється через менеджер пакетів Node. Це можна зробити, виконавши наступний рядок у командному рядку

npm встановити jade

Вищевказана команда запитує менеджер пакетів Node на завантаження необхідних модулів Jade та їх встановлення відповідно.

ПРИМІТКА: В останній версії Node jade застаріло. Замість цього використовуйте мопс.

⚠️ Сучасний еквівалент: встановлювати Мопс, перейменуйте index.jade на index.pug та встановіть app.set('view engine','pug'). Пакет jade не отримує оновлень; наведені нижче кроки все ще виконуються.

Давайте використаємо наш щойно встановлений фреймворк Jade та створимо кілька базових шаблонів.

Крок 1) Перший крок – створити шаблон Jade. Створіть файл з назвою index.jade та вставте наведений нижче код. Переконайтеся, що файл створено в папці «views».

1. Тут ми вказуємо, що назву сторінки буде змінено на будь-яке значення, передане під час виклику цього шаблону.
2. Ми також вказуємо, що текст у тезі заголовка буде замінено на те, що буде передано в шаблоні Jade.

Код застосунку, який його відображає, наведено нижче.

var express=require('express');
var app=express();
app.set('view engine','jade');
app.get('/',function(req,res)
{
res.render('index',
{title:'Guru99',message:'Welcome'})
});
var server=app.listen(3000,function() {});

Code Пояснення:

1. Перше, що потрібно вказати в застосунку, це «двигун перегляду», який буде використовуватися для рендерингу шаблонів. Оскільки ми збираємося використовувати Jade для рендерингу наших шаблонів, ми вказуємо це відповідно.
2. Функція відтворення використовується для відтворення веб-сторінки. У нашому прикладі ми візуалізуємо шаблон (index.jade), який був створений раніше.
3. Ми передаємо значення «Guru«99» та «Ласкаво просимо» до параметрів «title» та «message» відповідно. Ці значення будуть замінені параметрами «title» та «message», оголошеними в шаблоні index.jade.

Якщо команда виконана успішно, під час запуску коду в браузері буде показано наступний результат.

вихід:

З виходу,

• Ми бачимо, що заголовок сторінки встановлюється на «Guru99», а заголовок сторінки встановлюється на «Ласкаво просимо».
• Це пов'язано з шаблоном Jade, який викликається в нашому застосунку Node.js.

Поширені запитання