Учебное пособие по фреймворку Node.js Express.js

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

Что такое Express.js?

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

Express стал стандартным серверным фреймворком для Node.js. Express — это бэкенд-часть так называемого стека MEAN.

Express использует многоуровневую маршрутизацию и промежуточное ПО поверх базового протокола HTTP на Node.js. потоки и API событий.

MEAN — это бесплатная программа с открытым исходным кодом. JavaСценарий стек программного обеспечения для создания динамических веб-сайтов и веб-приложений, который включает следующие компоненты:

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

2) Экспресс.js — Фреймворк веб-приложений по умолчанию

3) AngularJS - JavaСкриптовый MVC-фреймворк, используемый для веб-приложений

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

Платформа Express.js позволяет очень легко разработать приложение, которое можно использовать для обработки нескольких типов запросов, таких как запросы GET, PUT, POST и DELETE.

Установка и использование Express

Express устанавливается через диспетчер пакетов Node. Это можно сделать, выполнив следующую строку в командной строке

npm установить экспресс

Приведенная выше команда запрашивает у менеджера пакетов Node загрузку необходимого Express. модули и установите их соответствующим образом.

Примечание к версии: Теперь 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, который будет отображать строку «Tutorial on Node» при доступе к этому маршруту.
2. Маршрут /Angular, который будет отображать строку «Tutorial on 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. Мы используем функцию отправки для отправки строки «Tutorial on Node» обратно клиенту, если выбран маршрут Node.
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. Мы используем функцию отправки для отправки строки «Учебное пособие по Angular» обратно клиенту, если выбран маршрут Angular.
5. Это маршрут по умолчанию, который выбирается при переходе в корневую директорию приложения — http://localhost:3000. При выборе маршрута по умолчанию отображается сообщение «Добро пожаловать в Guru«99 обучающих материалов» будут отправлены клиенту.

Если команда выполнена успешно, при запуске кода в браузере будет отображен следующий вывод.

Выход:

Из вывода,

• Это хорошо видно, если вы перейдете по ссылке: URL При подключении к localhost через порт 3000 вы увидите строку 'Welcome to'. GuruНа странице отображается 99 обучающих материалов.
• Потому что в нашем коде мы указали, что наше значение по умолчанию URL отобразит это сообщение.

Далее перейдите по адресу /Node.

Из вывода,

• Вы можете увидеть, что если URL Если параметр изменен на /Node, будет выбран соответствующий маршрут Node, и отобразится строка «Учебное пособие по Node».

Затем перейдите по адресу /Angular.

Из вывода,

• Вы можете увидеть, что если URL Если изменить адрес на /Angular, будет выбран соответствующий маршрут Node, и отобразится строка «Учебное пособие по Angular».

Пример веб-сервера с использованием express.js

В приведенном выше примере мы увидели, как можно определить, какой вывод отображать, на основе маршрутизации. Такая маршрутизация используется в большинстве современных веб-приложений. Другая часть работы веб-сервера связана с использованием шаблонов в Node.js.

При создании быстрых приложений Node.js, запускаемых на лету, простой и быстрый способ — использовать шаблоны. На рынке существует множество фреймворков для создания шаблонов. В нашем случае мы возьмем в качестве примера фреймворк Jade для работы с шаблонами.

Jade устанавливается через менеджер пакетов Node.js. Это можно сделать, выполнив следующую команду в командной строке.

нпм установить Джейд

Приведенная выше команда запрашивает у менеджера пакетов Node загрузку необходимых модулей Jade и их последующую установку.

ПРИМЕЧАНИЕ: В последней версии Node jade объявлен устаревшим. Вместо этого используйте pug.

⚠️ Современный эквивалент: устанавливать PugПереименуйте 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. Мы передаем значения «Guru99” и “Welcome” будут присвоены параметрам “title” и “message” соответственно. Эти значения будут заменены параметрами 'title' и 'message', объявленными в шаблоне index.jade.

Если команда выполнена успешно, при запуске кода в браузере будет отображен следующий вывод.

Выход:

Из вывода,

• Мы видим, что заголовок страницы устанавливается на «Guru99», и заголовок страницы устанавливается на «Добро пожаловать».
• Это происходит из-за шаблона Jade, который вызывается в нашем приложении Node.js.

Часто задаваемые вопросы (FAQ)