Web 开发框架 — Express 精讲(安装使用、静态托管、路由处理、中间件的使用)(2)

简介: Web 开发框架 — Express 精讲(安装使用、静态托管、路由处理、中间件的使用)(2)

五、Express 中间件

       中间件是一个函数,它可以访问请求对象(request objeck(req))、响应对象(response object(res)) ,和 Web 应用中处于请求 · 响应循环流程中的中间件;


       中间件还有第三个参数 next,用于将此请求传递到下一环节;从本质上来说,一个 Express 应用就是在调用各种中间件。中间件分为以下几种:


应用级中间件(app.use)

路由级中间件(app.get/post...)

错误处理中间件

内置中间件(如我们之前使用的静态资源托管 static 就是内置中间件)

第三方中间件

1. 应用级中间件

       应用级中间件绑定到 app对象 使用 app.use() 和 app.METHOD();


       新建 1.js 文件进行演示,通过三个中间件来实现访问 /user 路径,记录访问时间、访问日志以及访问次数。


// study_Express/1.js
const express = require('express') //require函数引入express包
const app = express() //调用函数
let total = 0; //访问量
//应用级中间件
app.use('/user', (req, res, next) => { //第一个中间件
  console.log('访问时间:' + Date.now()) //记录访问时间
  next() //进入下一个中间件,不使用next则不会执行下面的中间件
})
app.use('/user', (req, res, next) => { //第二个中间件
  console.log('日志:×××访问了/user') //记录访问日志
  next()
})
app.use('/user', (req, res) => { //第三个中间件
  total++; //访问次数增加
  console.log('当前访问量:' + total)
  res.send('返回结果')
})
app.listen(3000, () => { //创建监听
  console.log('中间件服务器启动成功...')
})

启动服务后访问 /user 路径;

image.png



此时后台会打印出相关信息,每刷新一次,次数加一;

image.png



2. 路由级中间件

       新建文件 2.js 进行演示,使用两个中间件打印出1、2。


// study_Express/2.js
const express = require('express') //require函数引入express包
const app = express() //调用函数
//路由级中间件
app.get('/luyou', (req, res, next) => {
  console.log(1)
  next()
})
app.get('/luyou', (req, res) => {
  console.log(2)
})
app.listen(3000, () => { //创建监听
  console.log('路由级中间件服务器启动成功...')
})

启动服务后访问 /luyou 路径;

image.png



后台打印出结果;

image.png



此外,路由级中间件中调用 next 时,可以加一个 route 参数 next('route'),意为跳转至下一个路由;


注意区分:


       next();跳转至下一个中间件。


       next('route');跳转至下一个路由,所谓下一个路由就是通过 get、post  或者其他方式所绑定的路由。


如下面这种写法:


const express = require('express') //require函数引入express包
const app = express() //调用函数
//路由级中间件
app.get('/luyou', (req, res, next) => { //第一个中间件 第一个路由
  console.log(1)
  next('route') //跳转至下一个路由
}, (req, res) => { //第二个中间件
  console.log(2)
})
app.get('/luyou', (req, res) => { //第三个中间件 第二个路由
  console.log(3);
  res.send('路由级中间件返回结果')
})
app.listen(3000, () => { //创建监听
  console.log('路由级中间件服务器启动成功...')
})

第一个中间件和第二个中间件进行了嵌套,只使用了一个路由,在第一个中间件中使用了 next('route'); 直接跳到了下一路由,所以第二个中间件的结果 2 就不会打印了,如下:


image.png




3. 错误处理中间件

       错误处理中间件需要4个参数,必须提供四个参数以将其标识为错误处理中间件函数。即使不需要使用 next 对象,也必须指定它。否则,该 next 对象将被解释为常规中间件并且无法处理错误。格式如下:


app.use(function (err, req, res, next) {
  console.error(err.stack)
  res.status(500).send('Something broke!')
})

4. 第三方中间件 —— body-parser

       第三方中间件有很多,在这里我们重点演示参数传递 body-parser,其余第三方中间件用法相同;

image.png



首先 npm 安装 body-parser,终端中中使用命令 npm install body-parser --save;

image.png



安装成功后会在 package.json 文件中显示;

image.png



新建文件 3.js 进行演示,实现简易的登录表单验证功能;


// study_Express/3.js
const express = require('express') //require函数引入express包
const app = express() //调用函数
const bodyParser = require('body-parser') //引入body-parser
//挂载(启用)内置中间件static,托管静态资源
app.use(express.static('public'))
//挂载参数处理中间件(此处解析post表单提交的数据)
app.use(bodyParser.urlencoded({
  extended: false
}))
//处理get提交的数据
// app.get('/login', (req, res) => {
//   let data = req.query;
//   console.log(data);
//   res.send('get提交时的数据')
// })
//处理post提交的数据
app.post('/login', (req, res) => {
  let data = req.body;
  if (data.username == '前端小马' && data.password == '123456') {
    res.send('登录成功!')
  } else {
    res.send('用户名或密码错误!')
  }
})
app.listen(3000, () => {
  console.log('第三方中间件服务启动...')
})

为了展示效果,我们在目录 public 下新建一个 html 文件来制作表单,并托管它;

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>表单</title>
  <style></style>
</head>
<body>
  <form action="http://localhost:3000/login" method="post">
    用户:<input type="text" name="username"><br>
    密码:<input type="password" name="password"><br>
    <input type="submit" value="提交">
  </form>
</body>
</html>

启动服务后访问 /login.html,可以正常验证:

image.png

相关文章
|
8月前
|
算法 Java Go
【GoGin】(1)上手Go Gin 基于Go语言开发的Web框架,本文介绍了各种路由的配置信息;包含各场景下请求参数的基本传入接收
gin 框架中采用的路优酷是基于httprouter做的是一个高性能的 HTTP 请求路由器,适用于 Go 语言。它的设计目标是提供高效的路由匹配和低内存占用,特别适合需要高性能和简单路由的应用场景。
609 4
|
JavaScript 前端开发 中间件
探索后端技术:Node.js与Express框架的完美融合
【10月更文挑战第7天】 在当今数字化时代,Web应用已成为日常生活不可或缺的一部分。本文将深入探讨后端技术的两大重要角色——Node.js和Express框架,分析它们如何通过其独特的特性和优势,为现代Web开发提供强大支持。我们将从Node.js的非阻塞I/O和事件驱动机制,到Express框架的简洁路由和中间件特性,全面解析它们的工作原理及应用场景。此外,本文还将分享一些实际开发中的小技巧,帮助你更有效地利用这些技术构建高效、可扩展的Web应用。无论你是刚入门的新手,还是经验丰富的开发者,相信这篇文章都能为你带来新的启发和思考。
|
12月前
|
开发框架 JSON 中间件
Go语言Web开发框架实践:路由、中间件、参数校验
Gin框架以其极简风格、强大路由管理、灵活中间件机制及参数绑定校验系统著称。本文详解其核心功能:1) 路由管理,支持分组与路径参数;2) 中间件机制,实现全局与局部控制;3) 参数绑定,涵盖多种来源;4) 结构体绑定与字段校验,确保数据合法性;5) 自定义校验器扩展功能;6) 统一错误处理提升用户体验。Gin以清晰模块化、流程可控及自动化校验等优势,成为开发者的优选工具。
|
开发框架 JavaScript 前端开发
使用 Node.js 和 Express 构建 Web 应用
【10月更文挑战第2天】使用 Node.js 和 Express 构建 Web 应用
|
中间件 关系型数据库 数据库
docker快速部署OS web中间件 数据库 编程应用
通过Docker,可以轻松地部署操作系统、Web中间件、数据库和编程应用。本文详细介绍了使用Docker部署这些组件的基本步骤和命令,展示了如何通过Docker Compose编排多容器应用。希望本文能帮助开发者更高效地使用Docker进行应用部署和管理。
436 19
|
缓存 负载均衡 JavaScript
构建高效后端服务:Node.js与Express框架实践
在数字化时代的浪潮中,后端服务的重要性不言而喻。本文将通过深入浅出的方式介绍如何利用Node.js及其强大的Express框架来搭建一个高效的后端服务。我们将从零开始,逐步深入,不仅涉及基础的代码编写,更会探讨如何优化性能和处理高并发场景。无论你是后端新手还是希望提高现有技能的开发者,这篇文章都将为你提供宝贵的知识和启示。
|
Web App开发 JavaScript 中间件
构建高效后端服务:Node.js与Express框架的完美结合
【10月更文挑战第21天】本文将引导你走进Node.js和Express框架的世界,探索它们如何共同打造一个高效、可扩展的后端服务。通过深入浅出的解释和实际代码示例,我们将一起理解这一组合的魅力所在,并学习如何利用它们来构建现代Web应用。
523 1
|
JSON JavaScript 前端开发
Node.js Express 框架
10月更文挑战第7天
191 2
|
Web App开发 JavaScript 前端开发
使用Node.js和Express框架构建Web服务器
使用Node.js和Express框架构建Web服务器
|
Web App开发 JavaScript API
构建高效后端系统:Node.js与Express框架的实践之路
【9月更文挑战第37天】在数字化时代的浪潮中,后端开发作为技术架构的核心,承载着数据处理和业务逻辑的重要职责。本文将深入探讨如何利用Node.js及其强大的Express框架来搭建一个高效、可扩展的后端系统。我们将从基础概念讲起,逐步引导读者理解并实践如何设计、开发和维护一个高性能的后端服务。通过实际代码示例和清晰的步骤说明,本文旨在为初学者和有经验的开发者提供一个全面的指南,帮助他们在后端开发的旅途上走得更远。
247 3

热门文章

最新文章