Підручник Node.js Express FrameWork – навчіться за 10 хвилин
Джеймс Гартман
У цьому підручнику ми вивчимо фреймворк Express. Цей фреймворк побудований таким чином, що він діє як мінімальний і гнучкий фреймворк веб-програм Node.js, надаючи надійний набір функцій для створення односторінкових, багатосторінкових і гібридних веб-програм.
Що таке Express.js?
Express.js — це структура сервера веб-додатків Node js, яка спеціально розроблена для створення односторінкових, багатосторінкових і гібридних веб-додатків.
Він став стандартною серверною структурою для node.js. Express є серверною частиною чогось, відомого як стек MEAN.
MEAN є безкоштовним і відкритим кодом JavaScript стек програмного забезпечення для створення динамічних веб-сайтів і веб-додатків, який містить такі компоненти;
1) MongoDB – Стандартна база даних NoSQL
2) Express.js – Фреймворк веб-програм за замовчуванням
3) Angular.js - The JavaСценарій MVC framework, який використовується для веб-додатків
4) Node.js – Платформа, що використовується для масштабованих серверних і мережевих програм.
Фреймворк Express.js дозволяє дуже легко розробити додаток, який можна використовувати для обробки кількох типів запитів, таких як GET, PUT, POST і DELETE.
Встановлення та використання Express
Express встановлюється через Node Package Manager. Це можна зробити, виконавши наступний рядок у командному рядку
npm інсталювати експрес
Наведена вище команда вимагає від менеджера пакетів Node завантажити необхідні експрес-модулі та встановити їх відповідно.
Давайте скористаємося нещодавно встановленою платформою 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() {});
Пояснення коду:
- У нашому першому рядку коду ми використовуємо функцію require для включення «експрес-модуля».
- Перш ніж ми зможемо почати використовувати експрес-модуль, нам потрібно створити з нього об’єкт.
- Тут ми створюємо функцію зворотного виклику. Ця функція буде викликана щоразу, коли хтось перейде до кореня нашої веб-програми, яка є http://localhost:3000 . Функція зворотного виклику використовуватиметься для надсилання рядка «Hello World» на веб-сторінку.
- У функції зворотного виклику ми надсилаємо клієнту рядок «Hello World». Параметр «res» використовується для повернення вмісту на веб-сторінку. Цей параметр «res» надається модулем «request», щоб дозволити надсилати вміст назад на веб-сторінку.
- Потім ми використовуємо функцію прослуховування, щоб наш серверний додаток слухав запити клієнта на порту № 3000. Ви можете вказати будь-який доступний порт тут.
Якщо команда виконана успішно, під час запуску коду в браузері буде показано наступний результат.
вихід:
З виходу,
- Ви чітко бачите, що якщо ми перейдемо до URL-адреси локального хосту на порту 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 — це функція, яка виконується, коли маршрут збігається.
Давайте розглянемо приклад того, як ми можемо реалізувати маршрути в експресі. У нашому прикладі буде створено 3 маршрути як
- Маршрут /Node, який відображатиме рядок «Навчальний посібник із вузла», якщо цей маршрут доступний
- Маршрут /Angular, який відображатиме рядок «Навчальний посібник з Angular», якщо цей маршрут доступний
- Маршрут за замовчуванням /, який відображатиме рядок «Ласкаво просимо до Guru99 Tutorials».
Наш базовий код залишиться таким самим, як і попередні приклади. Наведений нижче фрагмент є доповненням, щоб продемонструвати, як реалізовано маршрутизацію.
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');
}));
Пояснення коду:
- Тут ми визначаємо маршрут, якщо URL http://localhost:3000/Node вибрано в браузері. До маршруту ми додаємо функцію зворотного виклику, яка буде викликана, коли ми переходимо до URL-адреси вузла. Функція має 2 параметри.
- Основним параметром, який ми будемо використовувати, є параметр res, який можна використовувати для надсилання інформації назад клієнту.
- Параметр "req" містить інформацію про зроблений запит. Іноді додаткові параметри можуть бути надіслані як частина зробленого запиту, і, отже, параметр «req» можна використовувати для пошуку додаткових параметрів, які надсилаються.
- Ми використовуємо функцію надсилання, щоб надіслати клієнту рядок «Навчальний посібник із вузла», якщо вибрано маршрут вузла.
- Тут ми визначаємо маршрут, якщо URL http://localhost:3000/Angular вибрано в браузері. До маршруту ми додаємо функцію зворотного виклику, яка буде викликана, коли ми переходимо до Angular URL.
- Ми використовуємо функцію відправки, щоб відправити рядок «Tutorial on Angular» назад клієнту, якщо вибрано маршрут Angular.
- Це стандартний маршрут, який вибирається під час перегляду маршруту програми – http://localhost:3000. Якщо вибрано маршрут за замовчуванням, клієнту буде надіслано повідомлення «Ласкаво просимо до Guru99 Tutorials».
Якщо команда виконана успішно, під час запуску коду в браузері буде показано наступний результат.
вихід:
З виходу,
- Ви можете чітко бачити, що якщо ми перейдемо до URL-адреси локального хосту на порту 3000, ви побачите на сторінці рядок «Ласкаво просимо до Guru99 Tutorials».
- Оскільки в нашому коді ми згадали, що наша URL-адреса за умовчанням відображатиме це повідомлення.
З виходу,
- Ви бачите, що якщо URL-адресу було змінено на /Node, буде обрано відповідний маршрут Node і відобразиться рядок «Tutorial On Node».
З виходу,
- Ви бачите, що якщо URL-адресу було змінено на /Angular, буде обрано відповідний маршрут Node і відобразиться рядок «Tutorial On Angular».
Приклад веб-сервера з використанням express.js
З нашого прикладу вище ми побачили, як ми можемо вирішити, який вихід показувати на основі маршрутизації. Цей тип маршрутизації використовується в більшості сучасних веб-додатків. Інша частина веб-сервера стосується використання шаблонів у Node js.
Під час створення швидких програм Node на льоту простим і швидким способом є використання шаблонів для програми. На ринку доступно багато фреймворків для створення шаблонів. У нашому випадку ми візьмемо для шаблону приклад нефритової рамки.
Jade встановлюється через менеджер пакетів Node. Це можна зробити, виконавши наступний рядок у командному рядку
npm встановити jade
Наведена вище команда вимагає від менеджера пакетів Node завантажити необхідні модулі jade і встановити їх відповідно.
ПРИМІТКА: В останній версії Node jade застаріло. Замість цього використовуйте мопс.
Давайте скористаємося нещодавно встановленим фреймворком jade і створимо кілька основних шаблонів.
Крок 1) Першим кроком є створення нефритового шаблону. Створіть файл під назвою index.jade і вставте наведений нижче код. Обов’язково створіть файл у папці «views».
- Тут ми вказуємо, що назву сторінки буде змінено на будь-яке значення, передане під час виклику цього шаблону.
- Ми також вказуємо, що текст у тегу заголовка буде замінено на будь-який, який буде передано в шаблоні 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() {});
Пояснення коду:
- Перше, що потрібно вказати в додатку, це «модуль перегляду», який використовуватиметься для візуалізації шаблонів. Оскільки ми збираємося використовувати нефрит для візуалізації наших шаблонів, ми вказуємо це відповідно.
- Функція відтворення використовується для відтворення веб-сторінки. У нашому прикладі ми візуалізуємо шаблон (index.jade), який був створений раніше.
- Ми передаємо значення «Guru99» і «Welcome» в параметри «title» і «message» відповідно. Ці значення буде замінено на параметри 'title' і 'message', оголошені в шаблоні index.jade.
Якщо команда виконана успішно, під час запуску коду в браузері буде показано наступний результат.
вихід:
З виходу,
- Ми бачимо, що заголовок сторінки має значення «Guru99», а заголовок сторінки — «Ласкаво просимо».
- Це через шаблон jade, який викликається в нашій програмі node js.
Підсумки
- Експрес-фреймворк є найпоширенішим фреймворком, який використовується для розробки програм Node js. Експрес-фреймворк створений на основі фреймворку node.js і допомагає швидко відстежувати розробку серверних програм.
- Маршрути використовуються для перенаправлення користувачів до різних частин веб-додатків на основі зробленого запиту. Відповідь для кожного маршруту може змінюватися залежно від того, що потрібно показати користувачеві.
- Шаблони можна використовувати для ефективного введення вмісту. Jade є одним із найпопулярніших механізмів створення шаблонів, які використовуються в програмах Node.js.
