Работа промежуточного программного обеспечения Express.js и его преимущества

Опубликовано: 4 Января, 2022

Каркас: известен как каркас, в котором приложение определяет содержание операции, заполняя каркас. Для веб-разработки есть python с Django, java с spring, а для веб-разработки у нас есть Node.js с Express.js в node.js, есть модуль HTTP, с помощью которого мы можем создать только ограниченный работоспособный веб-сайт или веб-приложение. . В общем, реальная работа любого веб-приложения или веб-сайта заключается в том, что они способны обрабатывать любые запросы. Запросы могут быть отправкой, получением, удалением и многим другим, как запрос изображения, видео и т. Д., Поэтому Express.js используется в качестве фреймворка для Node.js.

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

Работа Middleware Framework:

В Express.js есть множество промежуточных функций, таких как Express.js app.use () Function и т. Д.

Синтаксис:

app.use(path,(req,res,next))

Параметры: он принимает два параметра, как указано выше и описано ниже:

path : это путь, по которому вызывается функция промежуточного программного обеспечения. Это может быть строка, представляющая путь или шаблон пути, или шаблон регулярного выражения для сопоставления путей.
обратный вызов : это функция обратного вызова, которая содержит объект запроса, объект ответа и next () для вызова следующей функции промежуточного программного обеспечения, если ответ текущего промежуточного программного обеспечения не завершен. Во втором параметре мы также можем передать имя функции промежуточного программного обеспечения.

Рабочий цикл нескольких промежуточных программ:

Преимущества использования промежуточного программного обеспечения Express.js:

1. Обычно мы используем http.createServer () для создания сервера и выполняем запрос и ответ в соответствии с информацией, но мы не можем проверить, какой тип запроса сделан клиентом, чтобы мы могли выполнять операции в соответствии с запросом.

2. Express.js содержит несколько методов для обработки всех типов запросов, а не для работы с одним типом запросов, как показано ниже:

Express.js req.get () Метод: этот метод используется, когда клиент выполняет запрос на получение, например, для перенаправления запросов другой веб-страницы и т. Д.
Метод Express.js req.post (): этот метод используется, когда клиент выполняет почтовые запросы, например, для загрузки документов и т. Д.
Express.js req.delete () Метод: этот метод используется, когда запрос на удаление выполняется клиентом, это в основном выполняется администратором, например, для удаления записей с сервера.
Метод Express.js req.put (): этот метод используется, когда клиент выполняет запросы на обновление для обновления информации на веб-сайте.

3. Простота подключения к таким базам данных, как MongoDB, MySQL.

4. Простота обслуживания статических файлов и ресурсов. Мы можем легко обслуживать HTML-документы с помощью express.js.

5. Есть несколько других преимуществ использования Express.js, таких как обработка нескольких запросов на получение на одной веб-странице, что означает возможность определять несколько маршрутов вашего приложения на основе методов HTTP и URL-адресов.

Структура проекта:

Установка модуля:

Установите экспресс-модуль с помощью следующей команды:

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

Имя файла: Index.js

Javascript

 // Requiring module
 const express = require( "express" );
 
// Creating express app object
 const app = express();
 
// Handling '/' route
 app.get( "/" , (req,res,next) => {
  res.send( "unknown request" );
 })
 
// Handling '/GFG' route
 app.get( "/GFG" , (req,res,next) => {
  res.send( "Getting request of GFG" );
 })
 
// Handling '/Hello' route
 app.get( "/Hello" , (req,res,next) => {
  res.send( "Getting requst of the Hello" );
 })
 
// Server setup
 app.listen(3000, () => {
  console.log( "Server is Running" );
 })

Запустите файл index.js, используя следующую команду:

 узел index.js

Команда для запуска проекта

Выход:

Теперь откройте браузер и перейдите по адресу http: // localhost: 3000 / GFG , вы увидите следующий вывод:

Теперь перейдите по адресу http: // localhost: 3000 / hello, вы увидите следующий вывод:

Примечание. Обработка нескольких запросов с использованием модуля HTTP по умолчанию является запросом на получение. Этот метод нельзя использовать для обработки нескольких запросов. Если мы используем модуль HTTP для обработки нескольких запросов на получение, он требует большей длины кода и нескольких условий if-else для обработки различных маршрутов.

Обработка нескольких запросов с использованием модуля HTTP:

Имя файла: Index.js

Javascript

 // Requiring module
 var http = require( 'http' );
 
// Create a server object
 http.createServer( function (req, res) {
     
   // The http header
   res.writeHead(200, { 'Content-Type' : 'text/html' });
     
   // Getting URL from the request object
   var url = req.url;
     
   // Checking url
   if (url === '/GFG' ) {
      res.send( "Getting request of GFG" );
      res.end();
   }
   else if (url === '/hello' ) {
       res.send( "Getting request of the Hello" );
       res.end();
   } else {
       res.send( "unknown request" );
       res.end();
   }
     
}).listen(3000, function () {
   // The server object listens on port 3000
   console.log( "server start at port 3000" );
 });

Вызов нескольких промежуточных программ из одного промежуточного программного обеспечения:

Имя файла: index.js

Javascript

 // Requiring module
 const express = require( "express" );
 const app = express();
 
// Middleware 1
 function Middleware1(req,res,next) {
    console.log( "I am Middleware 1" );
     
    // Calling the next middleware present in stack
    next();
 }
 
// Middleware 2
 function Middleware2(req,res,next) {
 
  res.write( "<h1>Express.js GFG<h1>" )
   
  // Printing the statement
  console.log( "I am Middleware 2" );
   
  // Ending the response
  res.end();
 }
 
// Request handling
 app.get( "/" , Middleware1, Middleware2);
 
// Server setup
 app.listen(3000, () => {
  console.log( "Server is Running" );
 })

Выход:

Теперь откройте свой браузер, вы увидите следующий результат:

На экране вашего терминала будет выведено следующее:

Отправка HTML-документов с помощью Express.js:

В express.static () промежуточное ПО - это модуль express.js, который используется для обслуживания статических HTML-документов. Преимущество его использования автоматически извлекает имя документа HTML, присутствующего в конкретном каталоге.

Структура проекта:

Имя файла: index.html

HTML

 <!DOCTYPE html>
 < html >
 
< head >
    < style >
 
        /* Assign full width inputs */
        input[type=text],
        input[type=password] {
            width: 100%;
            padding: 12px 20px;
            margin: 8px 0;
            display: inline-block;
            border: 1px solid #ccc;
            box-sizing: border-box;
        }
 
        /* Set a style for the buttons */
        button {
            background-color: #4CAF50;
            color: white;
            padding: 14px 20px;
            margin: 8px 0;
            border: none;
            cursor: pointer;
            width: 100%;
        }
 
        /* Set a hover effect for the button */
        button:hover {
            opacity: 0.8;
        }
 
        /* Set extra style for the cancel button */
        .cancelbtn {
            width: auto;
            padding: 10px 18px;
            background-color: #f44336;
        }
 
        /* Centre the display image inside
          the container */
        .imgcontainer {
            text-align: center;
            margin: 24px 0 12px 0;
            position: relative;
        }
 
        /* Set image properties */
        img.avatar {
            width: 40%;
            border-radius: 50%;
        }
 
        /* Set padding to the container */
        .container {
            padding: 16px;
        }
 
        /* Set the forgot password text */
        span.psw {
            float: right;
            padding-top: 16px;
        }
 
        /* Set the Modal background */
        .modal {
            display: none;
            position: fixed;
            z-index: 1;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0, 0, 0);
            background-color: rgba(0, 0, 0, 0.4);
            padding-top: 60px;
        }
 
        /* Style the model content box */
        .modal-content {
            background-color: #fefefe;
            margin: 5% auto 15% auto;
            border: 1px solid #888;
            width: 80%;
        }
 
        /* Style the close button */
        .close {
            position: absolute;
            right: 25px;
            top: 0;
            color: #000;
            font-size: 35px;
            font-weight: bold;
        }
 
        .close:hover,
        .close:focus {
            color: red;
            cursor: pointer;
        }
 
        /* Add zoom animation */
        .animate {
            -webkit-animation: animatezoom 0.6s;
            animation: animatezoom 0.6s
        }
 
        @-webkit-keyframes animatezoom {
            from {
                -webkit-transform: scale(0)
            }
 
            to {
                -webkit-transform: scale(1)
            }
        }
 
        @keyframes animatezoom {
            from {
                transform: scale(0)
            }
 
            to {
                transform: scale(1)
            }
        }
 
        @media screen and (max-width: 300px) {
            span.psw {
                display: block;
                float: none;
            }
 
            .cancelbtn {
                width: 100%;
            }
        }
    </ style >
 </ head >
 
< body >
 
    < h2 >Modal Login Form</ h2 >
    < button onclick="document.getElementById('id01')
        .style.display = 'block' " style = "width:auto;" >
        Login
    </ button >
 
    < div id = "id01" class = "modal" >
 
        < form class = "modal-content animate"
            action = "/action_page.php" >
             
            < div class = "imgcontainer" >
                < span onclick="document
                    .getElementById('id01').style
                    .display = 'none' " class = "close"
                    title = "Close Modal" >
                    ×
                </ span >
                 
                < img src=
 " https://media.geeksforgeeks.org/wp-content/cdn-uploads/
 20190710102234/download3.png" alt = "Avatar" class = "avatar" >
            </ div >
 
            < div class = "container" >
                < label >< b >Username</ b ></ label >
                < input type = "text" placeholder =
                    "Enter Username" name = "uname"
                    required>
 
                < label >< b >Password</ b ></ label >
                < input type = "password" placeholder =
                    "Enter Password" name = "psw"
                    required>
 
                < button type = "submit" >Login</ button >
                < input type = "checkbox"
                    checked = "checked" >
                    Remember me
            </ div >
 
            < div class = "container" style =
                "background-color:#f1f1f1" >
                < button type = "button" onclick=
                    "document.getElementById('id01')
                    .style.display = 'none' "
                    class = "cancelbtn" >
                    Cancel
                </ button >
                 
                < span class = "psw" >Forgot < a href = "#" >
                    password?
                </ a ></ span >
            </ div >
        </ form >
    </ div >
 
    < script >
        var modal = document.getElementById('id01');
        window.onclick = function (event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    </ script >
 </ body >
 
</ html > 

Имя файла: app.js

Javascript

 // Requiring module
 const express = require( "express" );
 const app = express();
 const path = require( "path" );
 
// Middleware
 app.use(express.static(__dirname+ "/public" ));
 
// Handling request
 app.get( "/" , (req,res,next) => {
    res.write( "GFG" );
    res.end();
 })
 
// Server setup
 app.listen((3000), () => {
    console.log( "Server is Running" );
 })

Запустите файл app.js, используя следующую команду:

 узел app.js

Выход:

Node.js Technical Scripter HTML-Misc

Работа промежуточного программного обеспечения Express.js и его преимущества

Работа Middleware Framework:

Рабочий цикл нескольких промежуточных программ:

Преимущества использования промежуточного программного обеспечения Express.js:

Javascript

Обработка нескольких запросов с использованием модуля HTTP:

Javascript

Вызов нескольких промежуточных программ из одного промежуточного программного обеспечения:

Javascript

Отправка HTML-документов с помощью Express.js:

HTML

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ