在Express.js中有效使用中间件:实用方法
#javascript #初学者 #node #express

1.简介

你好!
欢迎来到我们对Express.js中间件迷人世界的探索!
在本指南中,我们将深入了解中间件及其在Express.js应用程序中的关键作用。

1.1 express.js中间件的定义

中间件充当传入客户端请求和传出服务器响应之间的桥梁。

这就像一个有用的中介机构,在您的应用程序中移动时,介入,修改或增强请求。

想象您正在举办每个客人通过走廊进入的聚会。

现在,将中间件视为迎接每位客人的礼貌主持人,检查邀请函,为他们提供开胃菜并确保他们前往正确的房间。

同样,Express.js中的中间件有助于简化您的应用程序流,增强其性能,安全性和功能。

考虑一种身份验证中间件,该中间件可以确保用户在访问某些路线之前已登录。


此中间件截止请求,检查用户是否已验证,然后让他们继续或将其重定向到登录页面。

这是一个基本的代码段,说明了此概念:

const authenticationMiddleware = (req, res, next) => {
  if (req.isAuthenticated()) {
    // User is authenticated, allow them to proceed
    next();
  } else {
    // User is not authenticated, redirect to login page
    res.redirect('/login');
  }
};

这个简单的示例展示了中间件如何在应用程序的行为中添加额外的控件层。

1.2中间件在Web应用程序中的意义

中间件就像大乐团的幕后导M,在Express.js应用程序中精心策划了数据和请求。它在保持您的代码组织,可维护和可扩展方面起着至关重要的作用。

中间件不用塞入一个整体代码库中,而是使您可以划分不同的任务,从而使应用程序更易于管理和优雅。

随着我们更深入地研究本指南,我们不仅定义了中间件,而且还发现其在制作高效且功能丰富的Express.js应用程序中的意义。

让我们开始解决中间件在请求响应周期内的功能,从而阐明其重要作用。

准备探索了吗?让我们继续下一节!

2.中间件在Express.js中的作用

2.1在请求响应周期中中间件的说明

让我们通过了解其在Express.js。

将这个周期视为主持一个盛大的聚会,客人(请求)到达并进行生动的对话,而您作为主机(中间件),确保一切顺利进行。

中间件的美在于,它可以让您根据他们的需求向客人打招呼,为他们提供茶点,并根据他们的需求将其引导到聚会的不同部分。

想象一下您的客人到达宏伟的豪宅(您的申请)。

当他们走过门时,您,迷人的主人(中间件),热情地向他们打招呼,验证他们的邀请,甚至可以给他们闪闪发光的饮料。

然后,根据他们的喜好,您将它们引导到舞池,休息室或自助餐中。

2.2使用中间软件处理请求和响应

现在,让我们使用政党隐喻来分解中间件的处理和响应:

请求中间件:将其视为驻留在入口处的警惕弹跳器。就像保镖检查访客邀请函并确保聚会的安全性,请求中间件流程传入数据,添加重要的标题并进行安全检查。例如,您可以使用中间件来记录传入请求,请注意您的应用程序的活动。

const requestLoggerMiddleware = (req, res, next) => {
  console.log(`Incoming request to ${req.path} from ${req.ip}`);
  next();
};
app.use(requestLoggerMiddleware);

响应中间件:想象一下,这是装饰者,在客人体验派对的新区域之前,他添加了整理手段。响应中间件抛光响应数据,添加最终标题或执行任何必要的清理任务。响应中间件可与装饰器如何增强氛围相提并论,可改善用户体验。

const responseDecoratorMiddleware = (req, res, next) => {
  res.setHeader('X-App-Version', '1.0.0');
  next();
};
app.use(responseDecoratorMiddleware);

通过维护此隐喻,中间件继续扮演着一个亲切的主人的角色,他确保了两个客人(请求)和氛围(响应)的无缝而愉快的体验。

3. Express.js中的内置中间件

3.1常见内置中间件的概述

随着我们的党类比的继续,让我们探索我们的大豪宅(Express.js应用程序)中可用的各种便利设施。

就像一个豪华的聚会需要多个电台供客人享用一样,Express.js应用程序采用内置的中间件来处理聚会的各个方面。

3.2内置中间件的示例和用例

现在,让我们深入研究我们的聚会大厦内的一些内置中间件站,了解其角色以及它们如何增强整体体验:

3.2.1 express.json()express.urlencoded()

将这些视为驻扎在自助餐桌上的美食厨师。

他们准备并提供客人可以品尝的美味菜肴(数据)。

这些中间件站从请求或形式数据进行解析传入数据。

他们确保客人(请求)能够享受自助餐而毫无麻烦。

app.use(express.json()); // For parsing JSON data
app.use(express.urlencoded({ extended: true })); // For parsing URL-encoded form data

3.2.2 Cours22

想象这是我们豪宅中的美术馆。

此中间件站展示了我们党派图像,样式表和JavaScript文件的视觉吸引力的资产。

它将这些静态文件直接提供给客人(客户),使他们能够欣赏丰富的体验的艺术要素。

app.use(express.static('public')); // Serving static assets from the 'public' folder

3.2.3 express.Router()

将其视为引导客人到豪宅不同部分的标牌。 express.Router()充当模块化中间件,使您可以将路由组织到单独的文件中。

这可以使您的代码库整洁和整洁,就像确保客人永远不会迷失方向的标志一样。

const adminRouter = express.Router();
adminRouter.get('/dashboard', (req, res) => {
  // Admin dashboard route logic
});
app.use('/admin', adminRouter); // Mounting the adminRouter middleware

通过将内置的中间件与我们的聚会大厦相关联,我们正在创建一个环境,客人(请求)可以享受各种设施而不会遇到任何混乱。

既然我们已经参观了内置的便利设施,那么让我们进入制作自定义中间件的领域,以进一步量身定制派对体验。

4.制作自定义中间件

4.1创建自定义中间件功能

继续我们的聚会类比,想象一下您想在豪宅中介绍一个独特的车站。

同样,在Express.js中,制作自定义中间件可让您在应用程序中添加量身定制的功能。

您是这里的建筑师,为客人建立独特的体验(请求)。

4.2中间件功能的解剖

将自定义中间件功能视为主持人,为客人介绍了独特的派对游戏。它遵循特定的结构:接受requestresponsenext参数。 next参数是您通过的指挥棒,以确保派对游戏顺利向前移动。

这是一个详细的示例:假设您要创建一个记录每个传入请求时间戳的中间件。

const timestampLoggerMiddleware = (req, res, next) => {
  const now = new Date();
  console.log(`[${now.toISOString()}] Incoming request to ${req.path}`);
  next(); // Pass control to the next middleware
};

4.3将自定义中间件添加到Express.js应用

添加自定义中间件就像邀请一位才华横溢的表演者招待您的派对客人。

您使用app.use()注册中间件功能,确保适用于每个传入请求。

app.use(timestampLoggerMiddleware);

4.4显示自定义中间件实用程序的示例

想象一下您的豪宅中的一个照相亭站 - 定制中间件的完美示例。让我们创建中间件,为每个来宾的响应添加个性化签名(请求)。

const personalizeSignatureMiddleware = (req, res, next) => {
  res.locals.signature = "Party Enthusiast";
  next();
};
app.use(personalizeSignatureMiddleware);

现在,每次客人(请求)收到答复时,他们也会获得个性化签名。

这展示了自定义中间件如何使您为客人(请求)定制体验,留下持久的印象。

使用自定义中间件,您不仅要举办聚会;您正在制作难忘的经历。接下来,我们将学习如何管理中间件的流程并探索其对整个聚会氛围的影响。

5.管理中间件链和执行订单

5.1组织中间件功能

让我们设想我们的豪宅派对是一系列优雅的主题房间,每个房间都提供独特的体验。

就像我们的房间一样,Express.js应用程序在有组织的链中安排中间件功能。

这些连锁店就像是一个精选的旅程,客人(请求)穿过各个房间,每个房间都展示了聚会的不同方面。

想象您正在举办一个豪宅,豪华休息室,舞池和游戏室。

这些房间象征着不同的中间件功能。

通过周到的组织组织,您可以确保客人有一个令人愉悦且无缝的过渡,就像一个精心设计的经验。

这是您可能在express.js应用中为不同路线构建中间件链的方式:

app.use('/public', publicMiddlewareChain); // Middleware chain for public routes
app.use('/private', privateMiddlewareChain); // Middleware chain for private routes

5.2中间件执行顺序

就像您仔细协调派对活动的顺序一样,在Express.js中执行中间件功能的顺序。

中间件功能是按使用app.use()添加的顺序处理的。

将其视为安排客人的活动,以确保他们充分享受聚会。

考虑一个方案:您有一个中间件记录来宾首选项,另一种提供个性化建议。

记录中间件应在推荐中间件之前进行,以在提出建议之前收集数据。

这是中间件执行的顺序影响结果:

app.use(logMiddleware); // Log guest preferences
app.use(recommendationMiddleware); // Provide personalized recommendations

5.3场景突出了中间件订单的重要性

想象您在不同的房间里举办了两个活动:一场正式晚餐和另一个现场音乐会。

您决定有一个服装检查站。如果您在客人进入正式晚餐后放置服装中的中间件,这将不会有效,客人可能无法满足着装要求。

同样,在Express.js中,了解中间件顺序会阻止在身份验证之前提供静态资产的问题。

这是处理中间件订单以确保有效执行的方法:

app.use(checkAttireMiddleware); // Check guest attire before entering
app.use(formalDinnerMiddleware); // Formal dinner event

通过精心安排中间件功能,您可以为客人创建体验交响曲(请求)。就像精心策划的活动增强了一个盛大的聚会一样,管理中间件订单可以提高用户体验并确保通过您的Express.js应用程序无缝流动。

总结,这里是一个简单的Express.js服务器示例,可视化链接组织:

const express = require('express');
const app = express();

// Middleware for logging requests
const logMiddleware = (req, res, next) => {
  console.log(`[${new Date().toLocaleTimeString()}] Incoming request to ${req.path}`);
  next();
};

// Middleware for personalized recommendations
const recommendationMiddleware = (req, res, next) => {
  const recommendations = ['Try the new cocktail!', 'Check out the dance floor!', 'Join the trivia game!'];
  res.locals.recommendation = recommendations[Math.floor(Math.random() * recommendations.length)];
  next();
};

// Middleware for checking guest attire
const checkAttireMiddleware = (req, res, next) => {
  if (req.query.attire === 'formal') {
    next();
  } else {
    res.send("Sorry, only guests in formal attire can enter the formal dinner.");
  }
};

// Applying middleware chains to different routes
app.use('/public', logMiddleware, recommendationMiddleware);
app.use('/private', logMiddleware, checkAttireMiddleware, recommendationMiddleware);

app.get('/', (req, res) => {
  res.send('Welcome to the mansion party! Feel free to explore.');
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

在此示例中,我们创建了一个具有三个中间件功能的Express.js服务器:LogMiddleware,depusendationMiddleware和checkattiremiddleware。这些中间菜是在不同路线的链条中组织的:/public/private

与不同路线交互时,可以观察中间件执行及其角色的顺序。

这款简单的服务器展示了中间件功能的组织,执行和有助于您的Express.js应用程序的整体流程。

6.使用中间件处理有效的错误

错误是任何软件应用程序中不可避免的一部分,就像大派对期间意外的不幸一样。

6.1实施错误处理中间件

让我们想象我们的豪宅派对如火如荼,客人享受不同的房间和活动。就像聚会可能会遇到无法预料的不良事件一样,您的Express.js应用程序可能会发生错误。优雅地处理这些错误对于保持愉快的经历至关重要。

将我们的主人角色视为党的平稳流程的守护者。同样,错误处理中间件是党派策划者,他们迅速解决问题而不会破坏庆祝活动。要实现错误处理,您需要创建一个中间件来处理错误并通过意外情况优雅地指导​​客人(请求)。

这是您可以制作错误处理中间件的方法:

const errorHandlerMiddleware = (err, req, res, next) => {
  console.error(err.stack);
  res.status(500).send("Oops! Something went wrong.");
};

6.2区分标准和错误处理中间件

在Express.js中,中间件功能有各种目的,对于区分标准中间件和错误处理中间件至关重要。

标准中间件旨在增强用户体验并执行诸如解析请求数据,处理身份验证和服务静态资产等任务。

另一方面,错误处理中间件专门解决可能在请求响应周期中发生的错误。

它是专门设计的,旨在优雅地管理意外情况并防止它们破坏应用程序的功能。

想象您正在主持一个大化装舞会。虽然大多数房间都是为娱乐而设计的,但在紧急情况下,工作人员可以解决意外问题。同样,在Express.js中,标准中间件专注于增强体验,而错误处理中间件专门处理错误。

正如专用的紧急局确保事件的安全性一样,错误处理中间件可以保护您的应用程序的稳定性。这种差异可以确保即使出现意外错误,您的客人(请求)也得到了很好的照顾。

app.use(logMiddleware);
app.use(recommendationMiddleware);
app.use(errorHandlerMiddleware); // Error-handling middleware comes last

6.3错误处理和响应的最佳实践

就像无可挑剔的服务和清晰的沟通一样,请确保客人在聚会上的满意度,在您的申请中处理有效的错误是专业精神的反映。当涉及错误处理和响应时,请考虑以下最佳实践:

记录错误:在发生错误时,使用console.error()或记录库进行日志相关信息。这为调试和改进应用程序提供了宝贵的见解。

HTTP状态代码:将适当的HTTP状态代码分配给您的响应。例如,使用res.status(404).send(“未找到资源”)作为不存在的资源。一致的状态代码可帮助客户了解错误的性质。

详细的错误消息:在响应中提供详细的错误消息,以帮助开发人员和用户了解出了什么问题。您可以将JSON响应用于此目的。

在我们的豪宅党中,无可挑剔的服务是当务之急。同样,在处理Express.JS中的错误时,保持专业精神并提供明确的回应是必不可少的。错误处理中间件可以记录错误,提供适当的HTTP状态代码,并发送详细的错误消息。

通过遵循这种做法,您向客人(请求)保证您处于局势的局面,就像我们的聚会计划者迅速解决意外的打ic一样。

7.通过身份验证和授权中间件加强安全性

在任何情况下

在本节中,我们将戴上弹跳帽,以确保只允许授权的客人享受聚会。

就像Bouncers验证客人的身份并授予访问,身份验证和授权中间件在我们的应用程序中验证用户的权限。

7.1为用户会话创建身份验证中间件

身份验证就像在授予豪宅之前检查来宾列表。
在Express.js中,身份验证中间件基于凭据验证用户的身份。
此过程可确保仅授权用户可以访问应用程序的保护领域。

这是您可以实现基本身份验证中间件的方式:

const authenticationMiddleware = (req, res, next) => {
  if (req.session && req.session.user) {
    // User is authenticated, let him enter
    next();
  } else {
    res.status(401).send("Unauthorized access");
  }
};

7.2授权中间件用于路由访问控制

授权类似于根据客人的邀请授予不同的访问级别。
Express.js中的授权中间件控制应用程序中的特定用户可以和不能执行的操作。
就像某些客房对某些客人的禁区一样,授权中间件限制访问特定路线。

const authorizationMiddleware = (req, res, next) => {
  if (req.session && req.session.user && req.session.user.role === 'admin') {
    // User is authorized as an admin
    next();
  } else {
    res.status(403).send("Forbidden access");
  }
};

7.3中间件对应用程序安全的贡献

中间件,包括身份验证和授权,在整个聚会中充当我们警惕的安全人员。

就像弹跳者确保为客人提供安全而愉快的体验一样,中间件也通过防止未经授权的访问和恶意活动来保护我们的应用程序。

这是防御潜在安全威胁的重要组成部分。

通过实施身份验证和授权中间件,您将对未经授权的访问加固Express.js应用程序,并确保只有授权用户才能访问特定路由并执行授权操作。

这就像拥有一支值得信赖的弹跳者来保护您的聚会的VIP部分并确保所有客人的安全环境。

8.探索第三方中间件模块

随着我们的豪宅派对继续,我们很高兴介绍我们的特殊VIP宾客第三方中间件模块。这些模块将自己独特的才华带到了桌子上,就像一场大型活动中的来宾表演一样。第三方中间件可以通过功能强大的功能增强您的Express.js应用程序,如今,我们专注于其中一个头条新闻:helmet中间件。

8.1第三方中间件选项简介

想象第三方中间件在您的活动中成为一流的艺人。

他们带来了自己的行为,为您节省了时间和精力。这些模块由社区开发,无缝增强您的Express.js应用程序。让我们潜入节目的明星:helmet

8.2流行的第三方中间件的示例

让我们展示超级巨星helmet中间件及其如何赋予您应用程序的安全性。

8.2.1 helmet用于安全增强

helmet中间件就像您的聚会的安全团队,确保每个角落都安全。

它通过设置基本的HTTP标头来减轻各种漏洞和攻击。

helmet增强安全性:
就像一个警惕的安全团队监视客人一样,helmet监视您的应用程序的安全性。考虑添加的功能强大的Content-Security-Policy标头。该标头通过定义可以从何处加载资源来防止跨站点脚本(XSS)和其他攻击。

例如,以下代码配置script-src指令:

app.use(
  helmet({      
    contentSecurityPolicy: {
      directives: {
        "script-src": ["'self'", "example.com"],
      },
    },
  })
);

使用此代码,仅允许使用您的应用程序和example.com的脚本,从而阻止了未经授权的脚本执行。

文档链接: helmet

8.2.2 morgan登录

现在,让我们将重点转移到另一个受人尊敬的客人:摩根中间件。

将摩根视为该活动的官方摄影师,通过记录传入的请求和答复来捕获所有复杂的细节。

深入的请求使用morgan登录:

本着在您的活动中有一位敬业的摄影师的精神,摩根勤奋地记录了每位客人到达和出发的基本细节。

此中间件可以定制为记录传入请求和响应的特定方面。

例如,此代码段捕获请求方法,URL,状态,响应时间等:

const morgan = require('morgan');
app.use(morgan(':method :url :status :response-time ms'));

使用此设置,每个日志条目都提供了关于传入请求的简洁但有益的见解,类似于捕捉活动中令人难忘的时刻的照片。

这是一个更详细的例子:

const express = require('express');
const morgan = require('morgan');
const app = express();

// Custom token to log the user's IP address
morgan.token('user-ip', (req) => {
  return req.headers['x-forwarded-for'] || req.connection.remoteAddress;
});

// Creating a custom logging format
const customFormat = ':method :url :status :response-time ms - :user-ip';

// Using the custom logging format with morgan middleware
app.use(morgan(customFormat));

app.get('/', (req, res) => {
  res.send('Hello, Express app with custom logging!');
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

在这个扩展示例中,我们使用morgan.token()。

这个代币捕获用户的IP地址,无论是从X-Forward-For-For-For-header或连接的远程地址获得的IP地址。

然后,我们定义了一个名为customformat的自定义记录格式,其中包括:方法,:url,:status,:wenders time和custom:user-ip令牌。

通过利用此自定义日志记录格式,您正在创建日志,这些日志可为每个请求的方法,URL,状态代码,响应时间和用户的IP地址提供详细的见解。

这些更丰富的信息对于诊断问题,监视性能并更深入地了解您的应用程序的使用可能非常有价值。

请记住,这些示例旨在适应您的特定需求。通过自定义格式和令牌,您可以定制日志记录以适合您的应用程序的独特要求。

文档链接: morgan

8.2.3 cors用于跨原生素请求处理

我们的最终来宾是cors中间件,管理与来自各个域的客人的互动。正如您的聚会欢迎来自不同背景的参与者一样,cors通过添加必要的标题来促进交叉沟通。

const express = require('express');
const cors = require('cors');
const app = express();

// Enable CORS for all routes
app.use(cors());

app.get('/', (req, res) => {
  res.send('Hello, CORS-enabled Express app!');
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});

在此示例中,我们导入了CORS中间件,并使用app.use(cors())来启用所有路线的CORS。通过这样做,您的Express应用程序将在其响应中包含必要的CORS标题,从而允许来自任何来源的交叉原始请求。

这是一个基本示例,但是您可以通过输入选项来自定义COR的行为。例如,您可以指定允许哪些起源,允许哪些标题等等。 CORS中间件是可安全有效地处理交叉原始请求的强大工具。

通过邀请这些VIP访客helmetmorgancors到您的应用程序,您可以增强其安全性,日志记录功能和交叉原始通信。类似于特殊表演者如何提高党派的气氛,第三方中间件可以通过功能强大的功能丰富您的Express.js应用程序。

9.中间件使用的最佳实践

9.1维护集中和单利用中间件功能

开发中间件的关键原则之一是确保每个中间件功能都具有明确的单一用途责任。这可以增强代码组织和可维护性,从而更容易理解和修改应用程序的行为。专注的中间件功能可以完成特定的任务,而无需不必要的复杂性。

考虑身份验证中间件。与其将身份验证和授权检查结合在单个中间件中,不如将其分为两个不同的中间件功能。这种方法使职责保持清晰,并使单独管理每个方面变得更加容易。

// Authentication middleware
function authenticate(req, res, next) {
  // ... authentication logic ...
  if (authenticated) {
    req.user = authenticatedUser;
    next();
  } else {
    res.status(401).send('Unauthorized');
  }
}

// Authorization middleware
function authorizeAdmin(req, res, next) {
  if (req.user && req.user.isAdmin) {
    next();
  } else {
    res.status(403).send('Access forbidden');
  }
}

app.get('/admin', authenticate, authorizeAdmin, (req, res) => {
  res.send('Welcome to the admin panel');
});

9.2明智地使用中间件来可读性

中间件可以增强代码组织,但过度使用会导致过度复杂的管道。仔细考虑中间件是否对于每条路线至关重要。避免将中间件用于可以在线处理的小型,孤立的任务。优先使用中间件进行重复,横切问题。

假设您有一条需要发送电子邮件通知的路线。为了清晰的情况,请在路由处理程序中内联行动,而不是为此任务创建单独的中间件。

app.post('/new-order', (req, res) => {
  // ... process order ...
  // Send email notification
  sendEmailNotification(req.user.email, 'Order placed');
  res.send('Order placed successfully');
});

9.3测试和调试中间件的提示

测试和调试中间件对于确保您的应用程序按预期发挥功能至关重要。隔离中间件测试并使用chaimochajest等工具为各种情况编写全面测试。使用调试工具来解决中间件行为并捕获错误。

测试中间件时,请考虑使用模拟请求和响应来模拟不同的方案和断言。

const chai = require('chai');
const chaiHttp = require('chai-http');
chai.use(chaiHttp);

// Mocking middleware
const mockMiddleware = (req, res, next) => {
  req.customProperty = 'Hello, Middleware!';
  next();
};

describe('Middleware Tests', () => {
  it('should add custom property to request', (done) => {
    const app = express();
    app.use(mockMiddleware);

    app.get('/', (req, res) => {
      res.json({ message: req.customProperty });
    });

    chai.request(app)
    .get('/')
    .end((err, res) => {
      chai.expect(res.body.message).to.equal('Hello, Middleware!');
      done();
    });
  });
});

通过遵守这些最佳实践,您的中间件使用变得更加有效,促进可维护的代码并确保可靠的应用程序行为。
请记住,灵活性和适应性是关键。根据您的应用程序的具体要求来量身定制这些实践。

10.结论

恭喜!您已经完成了Express.js中间件世界的全面旅程。

我们探索了基本概念,实用应用程序和最佳实践,使您有能力构建强大而有效的Web应用程序。
如您所见,中间件在增强应用程序的功能,安全性和可维护性中起着至关重要的作用。
通过掌握中间件,您已经获得了将各种功能无缝集成到应用程序的请求响应周期中的能力。

无论您是处理数据解析,记录,身份验证,安全性还是任何自定义功能,中间件都可以在不同阶段自定义应用程序的行为。
当您继续完善技能并磨练自己的专业知识时,请记住要保持专注和单一用途的中间件功能的原则。
通过明智地选择何时使用中间软件以及何时处理任务,请保持代码可读。
测试和调试中间件可确保您的应用程序的可靠性和稳定性。

谢谢将您的时间投入到Express.js中间件的探索中。

请记住,这只是您旅程的开始。

继续建造,实验和探索不断发展的网络开发世界。

保持联系

如果您喜欢这篇文章并想探索有关网络开发的更多信息,请随时在各种平台上与我建立联系:

dev.to

hackernoon.com

hashnode.com

twitter.com

总是欢迎您的反馈和问题。
继续学习,编码和创建惊人的Web应用程序。

快乐的编码!