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