第八章认识Express框架

学习笔记1012023-11-09 11:45

目录

Express模块化路由

基本概述

基本使用

基本构建

案例项目

Express接收请求参数

基本概述

基本类别

Express接收GET请求参数

Express接收POST请求参数

Express接收路由参数

Express模块化路由

基本概述

在Express中，路由是指确定应用程序如何响应对特定端点的客户端请求，包括获取、添加、更新和删除资源等。

当应用程序收到请求时，它通常需要确定如何响应该请求，这由路由来完成。在Express应用程序中，可以使用模块化路由来更好地组织路由代码并提高其可读性和可维护性。

模块化路由是指将路由器代码分解为多个小文件，并将每个文件映射到路由路径。

这样做的好处是可以在应用程序中轻松添加或删除路由路径，同时使代码更易于阅读和维护。使用Express的Router函数，可以轻松地将路由器添加到应用程序中，使其成为模块化的路由器。

每个Express路由器是一个中间件，它可以在其中定义一个或多个路由。

路由有一个HTTP方法，如get、post、put、delete等，以及一个指定路由路径的路径。

当路由被触发时，将执行一个或多个处理程序函数，这些函数将确定如何响应请求。可以使用app.use()方法将路由器添加到应用程序中。这样当收到请求时，Express将自动将请求路由到正确的路由器中。

基本使用

实现模块化路由需要用到express.Router()方法来创建一个新的路由器对象(route)，然后使用route.get()和route.post()来注册当前模块路由对象下的二级路由，形成一个简单的模块化路由。

  • express.Router()方法定义route对象的示例代码如下：
javascript 复制代码 
const route = express.Router();
//express.Router()表示创建模块化路由对象

提示：这行代码使用 express.Router() 方法创建了一个新的路由对象 route ，该对象可以用来注册该模块下的路由处理函数，即该模块下的所有路由都会在 route 对象上定义，以实现模块化的路由设计。

使用 express.Router() 方法创建一个新的路由对象，可以避免使用全局的 app 对象来定义路由，提高代码的可读性，也更容易维护。

这段代码中的 const 是用来声明常量的关键字，而 route 则是该常量的名称。

  • route对象可以定义二级路由，示例代码如下：
javascript 复制代码 
route.get('请求路径','请求处理函数');
route.post('请求路径','请求处理函数');

这两行代码使用 route.get() 和 route.post() 方法来注册当前模块路由对象下的二级路由，具体来说：

  • route.get('请求路径', '请求处理函数') 方法用于在 route 路由对象上定义 GET 请求的路由，其中 '请求路径' 指定路由路径， '请求处理函数' 指定该路由的处理函数。
  • route.post('请求路径', '请求处理函数') 方法用于在 route 路由对象上定义 POST 请求的路由，其中 '请求路径' 指定路由路径， '请求处理函数' 指定该路由的处理函数。

通过这两个方法，可以在当前模块下定义所需的所有路由，即可实现模块化的路由设计。

  • route对象创建成功后，使用app.use()注册route模块化路由，示例如下：
javascript 复制代码 
app.use('请求路径',route);

这行代码使用了 app.use() 方法，将定义好的 route 路由对象注册到了 Express 应用中，并制定了该路由对象的请求路径。

具体来说，app.use('请求路径', route) 的含义为：

  • 请求路径：指定了路由所监听的路径，即当客户端发起该路径的请求时，会触发该路由对象中的相应路由处理函数。
  • route：指定了该路由对象，即之前定义的 express.Router() 创建的路由对象。

这行代码的作用是将路由对象注册到应用中，使得应用可以通过该路由对象来处理对应的二级路由请求。

综上所诉，模块化路由的基本使用的步骤如下：

  1. 创建一个模块化的路由对象：

    javascript 复制代码 
    const express = require('express');
const router = express.Router();

  2. 为路由对象添加一个或多个路由：

    javascript 复制代码 
    router.get('/', function(req, res) {
  res.send('Hello World!');
});
router.get('/user/:id', function(req, res) {
  res.send('user ' + req.params.id);
});

  3. 把路由对象挂载到应用程序中的指定路径：

    javascript 复制代码 
    app.use('/api', router);

    这个例子中，我们把路由对象挂载到 /api 的路径下，因此访问 /api 或 /api/user/:id 时都会使用我们刚刚定义的路由规则。

完整的示例代码如下：

javascript 复制代码 
const express = require('express');
const app = express();

// 创建一个模块化的路由对象
const router = express.Router();

// 为路由对象添加一个或多个路由
router.get('/', function(req, res) {
  res.send('Hello World!');
});
router.get('/user/:id', function(req, res) {
  res.send('user ' + req.params.id);
});

// 把路由对象挂载到应用程序中的指定路径
app.use('/api', router);

// 启动应用程序
app.listen(3000, function() {
  console.log('App is listening on port 3000!');
});

这样，当我们访问 http://localhost:3000/api 时，会显示 Hello World!，访问 http://localhost:3000/api/user/123 时会显示 user 123。

代码注释

  1. const express = require('express'); 导入 express 模块。

  2. const app = express(); 创建一个 Express 应用程序实例。

  3. const router = express.Router(); 创建一个模块化的路由对象。

  4. router.get('/', function(req, res) {...} 为路由对象添加一个 GET 请求处理函数，当用户访问路径为 / 时，返回 Hello World!。

  5. router.get('/user/:id', function(req, res) {...} 为路由对象添加另一个 GET 请求处理函数，当用户访问路径为 /user/:id 时，返回 user :id。:id 是一个动态参数，表示用户 ID。

  6. app.use('/api', router); 把路由对象挂载到应用程序中的 /api 路径下，即当用户访问应用程序的 /api 路径时，使用该路由对象进行处理。

  7. app.listen(3000, function() {...} 启动应用程序，监听端口 3000，并在控制台输出 "App is listening on port 3000!"。

基本构建

这个是为了更加直观的了解构建模块化路由的过程

  1. 创建一个模块化的路由对象

在 Express 应用程序中，可以使用 express.Router() 方法创建一个模块化的路由对象。这个方法返回一个路由对象，该对象表示一个完整的路由模块，可以在此对象中添加特定的 HTTP 请求方式和 URL 路径，然后在应用程序中使用该路由模块。

const express = require('express');
const router = express.Router();
  1. 定义路由规则

在路由对象上定义路由规则，可以使用各种 HTTP 请求方式（例如 get()、post()、put()、delete() 等）和 URL 路径。下面以 get() 方法为例说明：

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

该代码定义了一个 GET 请求方式的路由规则，当客户端向 URL 路径 / 发送请求时，会执行该处理程序，并返回字符串 'Hello World!'。

  1. 把路由对象导出

在路由模块中调用 module.exports 方法，将路由对象作为模块输出，该对象可以在应用程序中使用。例如：

module.exports = router;
  1. 在应用程序中使用路由模块

导入路由模块，在应用程序中使用 app.use() 方法挂载该模块。例如：

const router = require('./router');
app.use('/api', router);

此代码将路由模块 router 挂载到应用程序的 /api 路径上，当客户端向 /api 路径发送请求时，会执行该模块中定义的路由规则。

完整的模块化路由示例代码：

新建文件router.js：

const express = require('express');
const router = express.Router();

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

router.get('/users', (req, res) => {
  res.send('Users page');
});

module.exports = router;

新建文件app.js：

const express = require('express');
const app = express();
const router = require('./router');

app.use('/api', router);

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

注意：以上代码一般是在Express安装的目录下新建文件进行。

在此示例中，当客户端向 /api 路径发送 GET 请求时，会匹配到 router 中定义的第一个路由规则，并返回 'Hello World!'。当客户端向 /api/users 路径发送 GET 请求时，会匹配到 router 中定义的第二个路由规则，并返回 'Users page'。

案例项目

一个简单的项目，实现一个用户注册和登录系统。首先，我们需要安装和引入Express模块：

  1. 安装Express模块

    npm install express --save

  2. 引入Express模块

javascript 复制代码 
const express = require('express');
const app = express();

接下来，我们可以定义一些路由和处理函数来实现注册和登录功能。

  1. 注册页面路由和处理函数
javascript 复制代码 
// 注册页面路由
app.get('/register', (req, res) => {
  res.send('注册页面');
});

// 注册处理函数
app.post('/register', (req, res) => {
  // 处理注册请求
});

在上面的代码中，我们定义了一个GET请求的/register路由和一个POST请求的/register路由。GET请求的/register路由用于显示注册页面，POST请求的/register路由用于处理注册请求。

  1. 登录页面路由和处理函数
javascript 复制代码 
// 登录页面路由
app.get('/login', (req, res) => {
  res.send('登录页面');
});

// 登录处理函数
app.post('/login', (req, res) => {
  // 处理登录请求
});

同样的，我们定义了一个GET请求的/login路由和一个POST请求的/login路由。GET请求的/login路由用于显示登录页面，POST请求的/login路由用于处理登录请求。

最后，我们需要监听端口并启动服务器。

  1. 启动服务器
javascript 复制代码 
app.listen(3000, () => {
  console.log('服务器已启动');
});

完整代码如下：

javascript 复制代码 
const express = require('express');
const app = express();

// 注册页面路由
app.get('/register', (req, res) => {
  res.send('注册页面');
});

// 注册处理函数
app.post('/register', (req, res) => {
  // 处理注册请求
});

// 登录页面路由
app.get('/login', (req, res) => {
  res.send('登录页面');
});

// 登录处理函数
app.post('/login', (req, res) => {
  // 处理登录请求
});

// 启动服务器
app.listen(3000, () => {
  console.log('服务器已启动');
});

这是一个简单的用户注册和登录系统，只实现了页面和路由，并没有实现具体的处理逻辑。在实际项目中，我们需要根据业务需求实现具体的功能。

可以通过浏览器或者curl命令访问：

  1. 使用浏览器访问

在浏览器地址栏输入http://localhost:3000/register或者http://localhost:3000/login来访问注册页面和登录页面。

  1. 使用curl命令访问

打开终端或命令行，输入以下命令：

curl http://localhost:3000/register

或者：

curl http://localhost:3000/login

执行后会输出页面内容。

Express接收请求参数

基本概述

Express是一款非常流行的Node.js Web框架，使用它能使我们轻松构建Web应用程序。在Web应用程序中，我们需要接收来自客户端发送的请求数据，这个过程中请求参数起着至关重要的作用。因此，使用Express接收请求参数是非常必要的，原因如下：

  1. 灵活性：当我们接收到请求参数后，可以根据参数的不同来执行不同的逻辑代码或者返回不同的输出结果，从而使我们的程序更加灵活。

  2. 安全性：对于不合法的请求参数，我们可以进行校验和过滤，避免一些安全问题的发生，提高我们程序的安全性。

  3. 交互性：通过接收请求参数，我们可以使程序更与用户进行交互，例如：接收用户的表单提交数据，登录验证等等。

  4. 数据处理：接收到请求参数后，我们可以对请求的数据进行处理，例如：入库，修改等等。

总之，Express是一款非常灵活、快速、扩展性强的Web框架，使用它接收请求参数，可以使我们的Web应用程序更加高效、可靠和安全。

基本类别

Express接收GET请求参数

Express框架中的req.query用于获取GET请求参数，框架内部会将GET参数转换为对象并返回。示例如下：

javascript 复制代码 
app.get('/'，(req,res) => {
  res.send(req.query);
});

这段代码中有一行，写成了两行，让我们逐行来看：

javascript 复制代码 
app.get('/', (req, res) => {

这一行表示使用 Express 应用程序对象 app 的 get 方法，表示当应用程序接收到来自根路径 / 的 GET 请求时，会执行后续的回调函数。回调函数接收两个参数 req 和 res，分别代表请求对象和响应对象。

javascript 复制代码 
  res.send(req.query);

这一行使用 res.send 方法将 req.query 返回给客户端作为响应的内容。req.query 是一个对象，包含了发送到服务器的查询参数。当客户端发送 GET 请求时，Express 框架会将查询参数解析为一个对象，并将其作为 req.query 属性存储在请求对象中。因此，使用 res.send(req.query) 将查询参数作为响应返回给客户端。

案例：来演示如何使用Express接收GET请求参数。

首先需要安装Express框架：

bash 复制代码 
npm install express --save

接下来，我们创建一个index.js文件，并引入Express框架：

javascript 复制代码 
const express = require('express');
const app = express();

然后，我们创建一个GET路由，用来接收参数：

javascript 复制代码 
app.get('/api/user', (req, res) => {
  const { name, age } = req.query;
  res.send(`Hello ${name}, you are ${age} years old!`);
});

以上代码中，我们在/api/user路径下创建了一个GET路由，当用户访问该路径时，框架会自动解析URL中的参数，并将其转换为一个对象，对象的属性名即为参数名，属性值即为参数值。

最后，我们添加一个监听端口的代码，启动应用：

javascript 复制代码 
const port = 3000;
app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

完整代码如下：

javascript 复制代码 
const express = require('express');
const app = express();

app.get('/api/user', (req, res) => {
  const { name, age } = req.query;
  res.send(`Hello ${name}, you are ${age} years old!`);
});

const port = 3000;
app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

现在，你可以通过访问http://localhost:3000/api/user?name=Tom&age=18来测试应用程序是否正常工作了。结果如下图

Express接收POST请求参数

Express框架中的req.body用于获取POST请求参数，需要借助第三方body-parser模块将POST参数转换为对象形式。（语法跟上述代码相同，只需要在res.send()输入rep.body即可）

在 Express 中，要获取 POST 请求中的参数，需要使用 req.body 对象。但是，因为 Node.js 的核心模块 http 并没有提供直接获取 POST 参数的方法，所以我们需要使用第三方中间件来实现这个功能。其中，body-parser 库是最常用的一种。

在使用 body-parser 库之前，需要使用 npm 命令将该库安装到项目中。可以通过在命令行中执行以下命令来安装：

npm install body-parser

安装好之后，在 Express 应用程序中引入该库，并将其添加为中间件即可。以下是一个简单的例子，假设我们有一张表单，其中有一个 name 输入框和一个 password 输入框。当我们提交表单并发送 POST 请求时，我们需要从 req.body 对象中获取这些输入框的值：

javascript 复制代码 
const express = require('express');
const bodyParser = require('body-parser');
const app = express();

// 添加 body-parser 中间件
app.use(bodyParser.urlencoded({ extended: true }));

app.post('/login', (req, res) => {
  const name = req.body.name;
  const password = req.body.password;
  // use name and password variables to authenticate user
});

在上面的例子中，app.use 函数用于加载 body-parser 中间件，并将其设置为处理 URL 编码的请求体。此时，req.body 对象已经包含了表单提交的参数。注意，body-parser 库会将 POST 请求的参数转换为对象形式，因此可以用 req.body.name 和 req.body.password 语法获取表单中的值。

案例：来演示如何使用Express接收POST请求参数。

首先需要安装Express框架和body-parser模块：

bash 复制代码 
npm install express body-parser --save

接下来，我们创建一个index.js文件，并引入Express框架和body-parser模块：

javascript 复制代码 
const express = require('express');
const bodyParser = require('body-parser');
const app = express();

然后，我们需要在应用程序中使用body-parser中间件来处理POST请求中的参数：

javascript 复制代码 
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

以上代码中，我们使用body-parser中间件来处理两种类型的POST请求参数：application/x-www-form-urlencoded和application/json。其中，urlencoded表示把参数转换为URL字符串的形式，json表示把参数转换为JSON对象的形式。

接下来，我们创建一个POST路由来接收参数：

javascript 复制代码 
app.post('/api/user', (req, res) => {
  const { name, age } = req.body;
  res.send(`Hello ${name}, you are ${age} years old!`);
});

以上代码中，我们在/api/user路径下创建了一个POST路由，当用户发起POST请求时，框架会自动解析请求体中的参数，并将其转换为一个对象，对象的属性名即为参数名，属性值即为参数值。

最后，我们添加一个监听端口的代码，启动应用：

javascript 复制代码 
const port = 3000;
app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

完整代码如下：

javascript 复制代码 
const express = require('express');
const bodyParser = require('body-parser');
const app = express();

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

app.post('/api/user', (req, res) => {
  const { name, age } = req.body;
  res.send(`Hello ${name}, you are ${age} years old!`);
});

const port = 3000;
app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}`);
});

现在，你可以使用POSTMAN等工具来发送POST请求，格式为application/x-www-form-urlencoded或application/json，参数为name和age，来测试应用程序是否正常工作了。

Express接收路由参数

在使用 Express 构建 Web 应用时，我们经常需要从客户端接收一些信息。其中一种方式是在 URL 中传递参数，这种参数通常称为路由参数或路径参数。在 Express 中，可以使用冒号 : 来定义路由参数。

Express接收路由参数的示例代码：

javascript 复制代码 
app.get('/find/:id', (reg,res) => {
res.send(req.params);
});

这段代码定义了一个 GET 请求的路由 /find/:id，其中 :id 是一个路由参数。当客户端请求 /find/123 时，Express 会将 123 解析为 req.params.id，并将一个对象 { id: '123' } 发送给客户端作为响应。

代码中的 req.params 是一个对象，它包含了所有的路由参数和它们的值。在本例中，它的值为 { id: '123' }。通过将整个对象发送回客户端，我们可以将所有的路由参数都包含在响应中，以便客户端可以根据需要进行处理。

案例：以下是一个简单的 Express 项目，它演示了如何接收和使用路由参数：

javascript 复制代码 
const express = require('express');
const app = express();

// 定义一个路由处理程序，它匹配 '/students/:id' 路由
app.get('/students/:id', (req, res) => {
  const { id } = req.params;
  // 假设这里根据 id 从数据库中获取学生信息
  const student = { id, name: 'John Doe', age: 20 };
  res.send(student);
});

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

在上面的示例中，我们定义了一个路由处理程序，它匹配 /students/:id 路由，其中 :id 是路由参数。当客户端请求该路由时，我们从 req.params 中提取 id 参数，并使用它从数据库中获取学生信息。然后，我们将学生信息发送回客户端。

例如，如果客户端请求路径为 /students/123，则路由处理程序会响应：

json 复制代码 
{
  "id": "123",
  "name": "John Doe",
  "age": 20
}

当然，这只是一个简单的示例，实际上你可能需要更复杂的路由参数来访问数据库中的数据。

注意：可以使用类似`http://localhost:3000/students/123\`的URL来访问此路由处理程序。其中，\`123\`是路由参数，可以是任何数字。此示例假设您已经启动了该应用程序并在端口3000上侦听连接。如果要在浏览器中进行测试，只需将上面的URL复制到浏览器地址栏中即可。

文章到此一游，修行结束打卡

相关推荐
蒜蓉大猩猩2 小时前
Vue.js - 组件化编程
开发语言·前端·javascript·vue.js·前端框架·ecmascript
2401_882726484 小时前
web组态可视化编辑器
前端·物联网·前端框架·编辑器·web·iot
米奇妙妙wuu4 小时前
react实现模拟chatGPT问答页
前端·react.js·chatgpt·前端框架
涔溪4 小时前
RuoYi排序
前端框架·ruoyi
蒜蓉大猩猩15 小时前
Vue.js --- Vue3中其他组合式API
前端·javascript·vue.js·前端框架·node.js·html
珹洺15 小时前
从 HTML 到 CSS：开启网页样式之旅（开篇之一）——CSS 初体验与网页样式新征程
前端·javascript·css·前端框架·html
liuweni19 小时前
Next.js 独立开发教程（三）：CSS 样式的完整指南
开发语言·前端·javascript·css·react.js·职场和发展·前端框架
沉默璇年21 小时前
react中的useCallback 有什么作用？
前端·react.js·前端框架
爱学习的执念21 小时前
如何使用Jest测试你的React组件
前端·react.js·前端框架
乐容21 小时前
react 中解决 类型“never”上不存在属性“value”。
前端·react.js·前端框架
热门推荐
01(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明02玄机平台应急响应—webshell查杀03【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总0404 - matlab m_map地学绘图工具基础函数 - 设置网格05Docker 夺命连环 15 问06PyTorch机器学习实现液态神经网络07鸿蒙LiteOS+Hi3861智能家居网关设计：MQTT协议实现与代码示例08支付宝短视频平台创作分成激励项目09RAG 实践- Ollama+RagFlow 部署本地知识库10编译原生安卓aosp源码，实现硬改以及定位