Express.js 中间件的工作及其好处

框架：已知是一个骨架，应用程序通过填写骨架来定义操作的内容。对于 Web 开发， Python和 Django， Java和 spring，对于 Web 开发，我们有 Node.js 和 Express.js，在 node.js 中有一个 HTTP 模块，我们可以通过它创建一个唯一可操作的网站或 Web 应用程序.一般来说，任何 Web 应用程序或网站的真正工作是能够处理任何类型的请求。请求可能是发布、获取、删除，以及更多类似图像、视频等的请求，这就是 Express.js 用作 Node.js 框架的原因。

Express.js是一个路由和中间件框架，用于处理网页的不同路由，它在请求和响应周期之间工作。

中间件框架的工作：

Express.js 中有很多中间件函数，比如 Express.js app.use()函数等。

句法：

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

参数：它接受上面提到的两个参数，如下所述：

• path ：它是调用中间件函数的路径。它可以是表示路径或路径模式的字符串，也可以是匹配路径的正则表达式模式。
• callback : 回调函数，包含请求对象、响应对象和 如果当前中间件的响应没有终止，则 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. 易于提供静态文件和资源我们可以使用 express.js 轻松提供 HTML 文档。

5. 使用 Express.js 还有其他几个好处，例如在单个网页上处理多个 get 请求，这意味着允许您基于 HTTP 方法和 URL 定义应用程序的多个路由。

项目结构：

安装模块：

使用以下命令安装 express 模块：

npm install express

文件名：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 request of the Hello");
})
 
// Server setup
app.listen(3000, () => {
  console.log("Server is Running");
})

使用以下命令运行index.js文件：

node index.js

运行项目的命令

输出：

现在打开浏览器并访问http://localhost:3000/GFG ，您可以看到以下输出：

现在去http://localhost:3000/hello你可以看到如下输出：

注意：默认情况下，使用 HTTP 模块处理多个请求是一个 get 请求。此方法不能用于多个处理请求。如果我们使用 HTTP 模块来处理多个 get 请求，它需要更多的代码长度和多个 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("
Express.js GFG
")
   
  // 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");
})

输出：

现在打开浏览器，您将看到以下输出：

以下将是终端屏幕上的输出：

使用 Express.js 发送 HTML 文档：

这 express.static() 中间件是 express.js 模块的中间件，用于提供 HTML 静态文档。使用它的好处是自动获取特定目录中存在的 HTML 文档的名称。

项目结构：

文件名：index.html

HTML

 

    
 
        /* 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%;
            }
        }
    

 

 
    Modal Login Form
    
        Login
    
 
    
 
        
             
            
                
                    ×
                
                 
                
            
 
            
                Username
                
 
                Password
                
 
                Login
                
                    Remember me
            
 
            
                
                    Cancel
                
                 
                Forgot 
                    password?
                
            
        
    
 
    
        var modal = document.getElementById('id01');
        window.onclick = function (event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    

 

文件名：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文件：

node app.js

输出：