Express4 Node.js 工具包：从入门到实战

于 2024-08-25 16:37:30 发布
阅读量677 收藏 25
点赞数 25
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_33298352/article/details/141575676
版权

本文还有配套的精品资源，点击获取 menu-r.4af5f7ec.gif

简介：Express4是Node.js中流行的Web应用框架，简化了构建Web应用程序的过程。本工具包提供了一个完整的指南，涵盖Express4的核心概念、安装和设置、路由处理、中间件使用、静态文件服务、模板引擎集成、错误处理和服务器启动。通过实践任务和代码示例，学生将掌握Express4的实际应用，并能够构建高效且可扩展的Web服务。 NodeJs工具包

1. Express.js 简介

Express.js 是一个流行的 Node.js Web 框架，用于构建快速、灵活且可扩展的 Web 应用程序。它提供了一组丰富的功能，包括路由、中间件、模板引擎和静态文件服务，使开发人员能够轻松创建健壮且可维护的 Web 应用程序。

Express.js 采用模块化设计，允许开发人员根据应用程序的特定需求选择和组合不同的模块。它还提供了一个强大的插件生态系统，使开发人员能够扩展框架的功能并满足各种需求。

2. Express.js 核心概念

2.1 路由

路由概述

路由是 Express.js 中一个关键的概念，它允许应用程序根据请求的 URL 将请求映射到特定的处理函数。路由定义了当客户端向服务器发送请求时，服务器将如何响应。

路由定义

路由使用 app.METHOD(path, handler) 方法定义，其中：

  • app ：Express.js 应用程序实例
  • METHOD ：HTTP 请求方法，如 get 、 post 、 put 、 delete
  • path ：请求的 URL 路径
  • handler ：处理请求的函数

以下是一个简单的路由示例： 

app.get('/', (req, res) => {
  res.send('Hello World!');
});

路由参数

路由参数允许在路由路径中捕获动态值。这些值可以在处理函数中使用。

要定义路由参数，请在路径中使用冒号 (:)，后跟参数名称。例如： 

app.get('/user/:id', (req, res) => {
  const id = req.params.id;
  // ...
});

2.2 中间件

中间件概述

中间件是 Express.js 中另一个重要的概念。它们是应用程序中处理请求和响应的函数，可以在路由处理函数之前或之后执行。

内置中间件

Express.js 提供了几个内置中间件，包括：

  • express.json() ：解析 JSON 请求体
  • express.urlencoded() ：解析 URL 编码的请求体
  • express.static(path) ：提供静态文件服务

自定义中间件

也可以创建自定义中间件。自定义中间件允许在应用程序中添加自定义功能。

要创建自定义中间件，请使用以下语法： 

app.use((req, res, next) => {
  // ...
  next();
});

中间件堆栈

中间件按照它们被定义的顺序执行。中间件堆栈允许在应用程序中创建复杂的行为。

2.3 模板引擎

模板引擎概述

模板引擎是 Express.js 中用于渲染动态 HTML 的工具。它们允许应用程序将数据与 HTML 模板合并，从而生成动态响应。

EJS 模板引擎

EJS（嵌入式 JavaScript）是最流行的 Express.js 模板引擎之一。它允许在模板中嵌入 JavaScript 代码。

Jade 模板引擎

Jade（又名 Pug）是另一个流行的 Express.js 模板引擎。它使用简洁的语法，可以生成干净、语义化的 HTML。

3. Express.js 安装与设置

Express.js 是一个轻量级的 Web 应用程序框架，用于构建基于 Node.js 的 Web 应用程序。在开始使用 Express.js 之前，需要先进行安装和设置。

安装 Express.js

安装 Express.js 的最简单方法是使用 npm（Node.js 包管理器）： 

npm install express --save

这将在您的项目中安装 Express.js 并将其添加到 package.json 文件的依赖项列表中。

设置 Express.js

安装 Express.js 后，您需要在应用程序中设置它。为此，请在您的应用程序文件中（通常是 app.js 或 server.js ）导入 Express.js： 

const express = require('express');

然后，创建一个 Express.js 应用程序实例： 

const app = express();

配置 Express.js

设置 Express.js 应用程序后，您可以配置各种设置，例如：

  • 端口： 指定应用程序侦听的端口号。
  • 视图引擎： 指定用于渲染视图的模板引擎。
  • 静态文件目录： 指定静态文件（例如 HTML、CSS 和 JavaScript）的目录。

以下是如何配置这些设置： 

// 设置端口
app.set('port', 3000);

// 设置视图引擎
app.set('view engine', 'ejs');

// 设置静态文件目录
app.use(express.static('public'));

启动 Express.js 应用程序

配置 Express.js 应用程序后，您可以启动它： 

app.listen(app.get('port'), () => {
  console.log(`Express.js 应用程序正在端口 ${app.get('port')} 上运行`);
});

这将启动 Express.js 应用程序并使其在指定的端口上侦听传入请求。

代码逻辑分析

安装 Express.js

  • npm install express --save 命令使用 npm 安装 Express.js 并将其添加到 package.json 文件的依赖项列表中。

设置 Express.js

  • const express = require('express'); 语句导入 Express.js 模块。
  • const app = express(); 语句创建一个 Express.js 应用程序实例。

配置 Express.js

  • app.set('port', 3000); 语句将端口号设置为 3000。
  • app.set('view engine', 'ejs'); 语句将视图引擎设置为 EJS。
  • app.use(express.static('public')); 语句将静态文件目录设置为 public 目录。

启动 Express.js 应用程序

  • app.listen(app.get('port'), () => { ... }); 语句启动 Express.js 应用程序并使其在指定的端口上侦听传入请求。

4. Express.js 路由处理

Express.js 提供了一个强大的路由系统，用于处理 HTTP 请求并将其定向到适当的处理程序。路由允许开发人员根据请求的 URL、HTTP 方法和其他因素定义应用程序的响应。

4.1 路由定义

路由定义指定了当客户端发送请求时应执行的处理程序。路由定义由 app.METHOD(path, handler) 方法定义，其中：

  • app 是 Express.js 应用程序实例。
  • METHOD 是 HTTP 方法，例如 get 、 post 、 put 或 delete 。
  • path 是请求的 URL 路径。
  • handler 是处理请求的函数。

示例： 

app.get('/', (req, res) => {
  res.send('Hello World!');
});

此路由定义一个处理根 URL 路径 / 的 GET 请求的处理程序。当客户端发送 GET 请求到根 URL 时，处理程序将响应 "Hello World!"。

4.2 路由参数

路由参数允许开发人员从请求的 URL 中提取动态值。路由参数使用冒号 (:) 表示，例如： 

app.get('/user/:id', (req, res) => {
  const id = req.params.id;
  // ...
});

此路由定义一个处理 GET 请求到 /user/:id 路径的处理程序。 id 是一个路由参数，它将从请求的 URL 中提取并存储在 req.params.id 中。

4.3 路由组

路由组允许开发人员将具有相同前缀的多个路由定义组合在一起。路由组由 app.METHOD(path, router) 方法定义，其中：

  • app 是 Express.js 应用程序实例。
  • METHOD 是 HTTP 方法，例如 get 、 post 、 put 或 delete 。
  • path 是路由组的前缀。
  • router 是一个新的 Express.js 路由器，用于定义组内的路由。

示例： 

const userRouter = express.Router();

userRouter.get('/', (req, res) => {
  // ...
});

userRouter.get('/:id', (req, res) => {
  // ...
});

app.use('/user', userRouter);

此代码创建了一个新的路由器 userRouter ，并定义了两个路由：一个处理 GET 请求到 /user 路径，另一个处理 GET 请求到 /user/:id 路径。然后，将 userRouter 作为中间件添加到 /user 路径，这意味着所有以 /user 开头的请求都将被路由到 userRouter 。

路由优先级

当多个路由定义匹配请求时，Express.js 会按照以下优先级顺序处理路由：

  1. 最具体 ：具有最具体路径的路由具有最高优先级。
  2. 最长 ：具有最长路径的路由具有更高优先级。
  3. 最早定义 ：最早定义的路由具有更高优先级。

路由表

Express.js 维护一个路由表的内部列表，其中包含所有定义的路由。路由表是按优先级排序的，当请求到达时，Express.js 会遍历路由表并选择匹配请求的第一个路由。

5. Express.js 中间件使用

Express.js 中间件是一种强大的机制，用于在请求和响应生命周期中插入自定义逻辑。它允许您在处理请求之前或之后执行某些操作，从而为您的应用程序添加额外的功能。

5.1 内置中间件

Express.js 提供了一系列内置中间件，用于处理常见任务，例如：

  • express.json()： 解析 JSON 请求体。
  • express.urlencoded()： 解析 URL 编码的请求体。
  • express.static()： 提供静态文件服务。
  • express.cookieParser()： 解析 HTTP Cookie。
  • express.session()： 启用会话管理。

使用内置中间件非常简单。只需将它们作为参数传递给 app.use() 方法即可： 

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

// 解析 JSON 请求体
app.use(express.json());

// 解析 URL 编码的请求体
app.use(express.urlencoded({ extended: true }));

// 提供静态文件服务
app.use(express.static('public'));

5.2 自定义中间件

除了内置中间件，您还可以创建自己的自定义中间件。自定义中间件可以执行各种任务，例如：

  • 验证请求
  • 记录请求
  • 缓存响应
  • 添加自定义标头

创建自定义中间件非常简单。只需创建一个函数，并将其作为参数传递给 app.use() 方法即可： 

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

// 创建一个自定义中间件来记录请求
const requestLogger = (req, res, next) => {
  console.log(`Received a ${req.method} request to ${req.path}`);
  next();
};

// 使用自定义中间件
app.use(requestLogger);

5.3 中间件堆栈

中间件在 Express.js 中以堆栈的方式执行。这意味着每个中间件都会按顺序执行，直到 next() 函数被调用。

中间件堆栈的顺序非常重要，因为它决定了请求和响应生命周期的执行顺序。例如，如果您想在解析请求体之前验证请求，则必须将验证中间件放在解析请求体中间件之前。

您可以使用 app.use() 方法将中间件添加到堆栈中。您还可以使用 app.get() 、 app.post() 和其他路由方法将中间件添加到特定路由中。 

graph LR
    subgraph Middleware Stack
        A[Request] --> B[Middleware 1] --> C[Middleware 2] --> D[Middleware 3] --> E[Response]
    end

中间件堆栈示例： 

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

// 验证中间件
const authMiddleware = (req, res, next) => {
  // 验证请求
  if (req.headers.authorization) {
    next();
  } else {
    res.status(401).send('Unauthorized');
  }
};

// 路由处理程序
const routeHandler = (req, res) => {
  // 处理请求
  res.send('Hello, world!');
};

// 将验证中间件添加到堆栈中
app.use(authMiddleware);

// 将路由处理程序添加到堆栈中
app.get('/protected', routeHandler);

在上面的示例中，验证中间件将添加到中间件堆栈中。当请求到达 /protected 路由时，验证中间件将首先执行。如果请求被验证，则路由处理程序将被执行。否则，将返回 401 未授权响应。

6. Express.js 静态文件服务

6.1 静态文件配置

Express.js 提供了内置的静态文件服务功能，允许开发者轻松地提供静态文件，如 HTML、CSS、JavaScript、图像等。要配置静态文件服务，需要使用 express.static() 中间件。 

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

// 配置静态文件服务，指定静态文件所在的目录
app.use(express.static('public'));

在上面的代码中， public 是静态文件所在的目录。当用户访问该目录中的文件时，Express.js 会自动提供这些文件。

6.2 静态文件访问

配置静态文件服务后，用户可以通过以下方式访问静态文件：

  • 直接访问： 用户可以通过在浏览器中输入静态文件的 URL 直接访问它。例如，如果静态文件 index.html 位于 public 目录中，用户可以通过输入 http://localhost:3000/index.html 来访问它。
  • 通过路由： 开发者也可以通过路由来访问静态文件。例如，以下路由将 /static 路径映射到 public 目录： 
app.use('/static', express.static('public'));

现在，用户可以通过输入 http://localhost:3000/static/index.html 来访问 index.html 文件。

6.2.1 设置静态文件缓存

为了提高性能，Express.js 允许开发者设置静态文件的缓存。可以通过 maxAge 选项来指定缓存时间，单位为毫秒。例如，以下代码将静态文件的缓存时间设置为 1 小时： 

app.use(express.static('public', {
  maxAge: 3600000
}));

6.2.2 设置静态文件根目录

默认情况下，Express.js 会使用 public 目录作为静态文件的根目录。开发者可以通过 root 选项来指定不同的根目录。例如，以下代码将静态文件的根目录设置为 static 目录： 

app.use(express.static('public', {
  root: 'static'
}));

6.2.3 设置静态文件扩展名

默认情况下，Express.js 会自动为静态文件添加扩展名。开发者可以通过 extensions 选项来指定要添加的扩展名。例如，以下代码将为静态文件添加 .html 和 .css 扩展名： 

app.use(express.static('public', {
  extensions: ['html', 'css']
}));

7. Express.js 模板引擎集成

7.1 模板引擎概述

模板引擎是一种将动态数据与模板文件相结合以生成最终 HTML 输出的工具。在 Express.js 中，模板引擎允许我们轻松地将应用程序数据呈现给用户。

7.2 EJS 模板引擎

EJS（嵌入式 JavaScript）是一种流行的模板引擎，它允许我们在模板文件中使用 JavaScript 代码。

安装 EJS 
npm install ejs --save
使用 EJS

在 Express.js 中使用 EJS 非常简单： 

// 引入 EJS 模块
const ejs = require('ejs');

// 设置模板引擎为 EJS
app.set('view engine', 'ejs');

// 渲染 EJS 模板
app.get('/', (req, res) => {
  res.render('index', { title: '主页' });
});

7.3 Jade 模板引擎

Jade（现在称为 Pug）是一种另一种流行的模板引擎，它使用简洁的语法来生成 HTML 输出。

安装 Jade 
npm install jade --save
使用 Jade

在 Express.js 中使用 Jade 也很简单： 

// 引入 Jade 模块
const jade = require('jade');

// 设置模板引擎为 Jade
app.set('view engine', 'jade');

// 渲染 Jade 模板
app.get('/', (req, res) => {
  res.render('index', { title: '主页' });
});

本文还有配套的精品资源，点击获取 menu-r.4af5f7ec.gif

简介：Express4是Node.js中流行的Web应用框架，简化了构建Web应用程序的过程。本工具包提供了一个完整的指南，涵盖Express4的核心概念、安装和设置、路由处理、中间件使用、静态文件服务、模板引擎集成、错误处理和服务器启动。通过实践任务和代码示例，学生将掌握Express4的实际应用，并能够构建高效且可扩展的Web服务。

本文还有配套的精品资源，点击获取 menu-r.4af5f7ec.gif

九门提督守皇上
关注
  • 25
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Node.js 命令行实战：从入门到精通
技术探秘者的博客
03-21 872
Node.js是一个功能强大的JavaScript运行环境，可以用于开发各种类型的应用程序。通过学习和掌握Node.js命令行工具和最佳实践，您可以提高开发效率和代码质量，构建更好的Node.js应用程序。
ExpressJS教程
weixin_34332905的博客
12-24 895
ExpressJS环境 ExpressJS Hello World ExpressJS路由 ExpressJS HTTP方法 ExpressJS URL构建 ExpressJS中间件 ExpressJS模板 ExpressJS提供静态文件 ExpressJS表格数据 ExpressJS数据库 ExpressJS Cookies ExpressJS Se...
Express.js
chen1218chen的专栏
07-05 498
Express.jsExpressjs Express安装 设置静态文件目录 文件访问 设置html引擎Express安装 全局安装express，express作为命令被安装到了系统中 npm install -g express 查看express版本 express -V 使用express命令创建工程，并支持ejs > express -e nodejsDemo > cd nodejs-d
Express基于Node.js基础知识【1】全面总结 推荐收藏
最新发布
weixin_43483590的博客
07-30 1189
最近在用基于node.js平台的web应用开发做项目，梳理了下关于Express框架的相关知识，方便自己以后查看，希望也能帮助证字啊学习express相关知识的同学，欢迎大家参考，有问题评论区留言，谢谢。
Node.js学习笔记——Express.js
manerzi的博客
04-02 1104
Node.js学习笔记——Express.js
ExpressJs框架
yu_qin_的博客
12-25 484
express是一个基于Node.js平台的极简,灵活的WEB应用开发框架简单来说，express是一个封装好的工具包，封装了很多功能，便于我们开发WEB应用（HTTP服务）官方定义：路由确定了应用程序如何响应客户端对特定端点的请求。
mysql数据库主从复制
cuizao9877的博客
11-03 115
在虚拟机A（192.168.189.132）和虚拟机B（192.168.189.133）中分别安装mysql数据库，我安装的版本的是，5.6.25; 安装过程可参考我之前写的centos下安装Mysql文档； ...
Node.js从入门到精通
11-08
Node.js从入门到精通的知识点涵盖了Node.js的基础到高级应用，包括包管理、后端服务器搭建、事件模型、文件系统操作、路径处理、HTTP压缩、模板引擎、数据库集成、用户认证等多个方面。 1. **包管理器**：Node.js有...
Node.js零基础入门到高级进阶
07-28
Node.js是一种基于Chrome V8...通过以上内容的学习，你可以从零开始，逐步掌握Node.js的基础知识，进阶技巧，并能够参与到实际项目开发中，实现从入门到精通的转变。不断实践和探索，你将在Node.js的世界里游刃有余。
Node.js 实战
01-11
**Node.js实战中文版** Node.js，作为一款基于Chrome V8引擎的JavaScript运行环境，以其异步、非阻塞I/O和事件驱动的特性，在Web开发领域占据了一席之地。这本书“Node.js实战”旨在帮助读者深入理解Node.js的核心...
Express.js简单入门
xiaobangsky的专栏
02-02 3309
Express.js简单入门介绍Web应用API性能如何创建一个项目express的编程模型express的中间件路由错误处理代码示例 介绍 Web应用 Express 是一个简洁而灵活的 node.js Web应用框架, 提供一系列强大特性帮助你创建各种Web应用 API 丰富的HTTP工具以及来自Connect框架的中间件随取随用，创建强健、友好的API变得快速又简单 性能 Express 不对 node.js 已有的特性进行二次抽象，我们只是在它之上扩展了Web应用所需的功能 如何创建一个项目 创建
node.js——express框架
weixin_64916164的博客
04-18 2168
Express 是一个流行的 Node.js 框架，为开发者提供了简洁的 API，用于处理 HTTP 请求、响应，以及管理中间件、路由和错误处理。Express 简化了构建 RESTful API、Web 应用程序和微服务的过程。快速开始Express 框架是构建 Node.js Web 应用程序的理想选择。它提供了强大且易于使用的工具，可以满足各种不同类型的 Web 开发需求。本期到此结束，关注我，我会继续写的!!
ExpressJS介绍
每天进步一点点
03-24 2033
Express 是一个简洁、灵活的 node.js Web 应用开发框架, 它提供一系列强大的特性，帮助你创建各种 Web 和移动设备应用。丰富的 HTTP 快捷方法和任意排列组合的 Connect 中间件，让你创建健壮、友好的 API 变得既快速又简单。Express 不对 node.js 已有的特性进行二次抽象，我们只是在它之上扩展了 Web 应用所需的基本功能。 中文社区：http:/
Express js 使用
HD2killers的博客
08-08 501
Express js 使用 app make useful #install cnpm install express-generator -g #use other cnpm install body-parser --save cnpm install cookie-parser --save cnpm install multer --save #make express m...
什么是Express.js？
asdfgh0077的博客
05-16 748
I am a learner in Node.js . 我是Node.js的学习者。 What is Express.js ? 什么是Express.js ？ What is the
Express---基于node.js的web框架
归子莫的博客
03-15 433
Express—基于node.js的web框架 博客说明 文章所涉及的资料来自互联网整理和个人总结，意在于个人学习和经验汇总，如有什么地方侵权，请联系本人删除，谢谢！ 简介 Express 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架，为 Web 和移动应用程序提供一组强大的功能 Express中文网地址 https://www.expressjs.com.cn/ 安装...
Express.js 入门指南
qq_54435297的博客
06-29 1511
Express.js 是Node.js平台上的一个轻量级、灵活的web应用框架，它允许你快速搭建功能丰富的web服务器和API，是对原生模块http的封装和扩展，简化和方便使用
【Express.js】处理请求数据
m0_51810668的博客
06-18 1999
本节将具体介绍express后端处理请求源携带数据的一些方法和技巧。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值