当前位置:首页 > 科技  > 软件

花 15 分钟把 Express.js 搞明白,全栈没有那么难

来源: 责编: 时间:2024-01-16 17:32:15 309观看
导读大家好,我是杨成功。Express 是老牌的 Node.js 框架,以简单和轻量著称,几行代码就可以启动一个 HTTP 服务器。市面上主流的 Node.js 框架,如 Egg.js、Nest.js 等都与 Express 息息相关。Express 框架使用标准 Node.js 语

mSq28资讯网——每日最新资讯28at.com

大家好,我是杨成功。mSq28资讯网——每日最新资讯28at.com

Express 是老牌的 Node.js 框架,以简单和轻量著称,几行代码就可以启动一个 HTTP 服务器。市面上主流的 Node.js 框架,如 Egg.js、Nest.js 等都与 Express 息息相关。mSq28资讯网——每日最新资讯28at.com

Express 框架使用标准 Node.js 语法,主要由以下 3 个核心部分组成:mSq28资讯网——每日最新资讯28at.com

  • 路由。
  • 中间件。
  • 错误处理。

认识基本结构

Express 的基本结构很简单,只需要三行代码,应用就可以运行起来。mSq28资讯网——每日最新资讯28at.com

const express = require('express')const app = express()app.listen(9000, () => console.log('启动成功'))

假设上述代码写在 index.js 中,我们启动该应用使用命令 node ./index.js,控制台会输出“启动成功”。mSq28资讯网——每日最新资讯28at.com

为了方便,我们也可以在 package.json 中创建快捷命令,如下:mSq28资讯网——每日最新资讯28at.com

// package.json{  "scripts": {    "start": "node ./index.js"  }}

那么现在启动应用就可以用 npm run start 命令。mSq28资讯网——每日最新资讯28at.com

不过这种方式在本地运行项目时会有一个弊端,就是修改文件后不会立即生效,需要重新启动。为了提高效率,一般会使用一个名为 PM2 的模块启动 Node.js 应用。mSq28资讯网——每日最新资讯28at.com

首先全局安装 pm2:mSq28资讯网——每日最新资讯28at.com

$ npm install -g pm2

安装后在项目目录下创建启动配置文件 ecosystem.config.js,代码如下:mSq28资讯网——每日最新资讯28at.com

module.exports = {  apps: [    {      name: 'first-api',      script: './index.js',    },  ],}

然后在项目目录下执行以下命令就可以启动项目了:mSq28资讯网——每日最新资讯28at.com

$ pm2 start --watch

图片mSq28资讯网——每日最新资讯28at.com

上图中的 0 就是启动应用的 ID,下面会用到。mSq28资讯网——每日最新资讯28at.com

PM2 常用大命令如下:mSq28资讯网——每日最新资讯28at.com

  • pm2 start:启动应用,--watch 表示监听文件修改自动重启。
  • pm2 list:查看已启动的应用列表。
  • pm2 logs <id>:查看日志输出。
  • pm2 delete <id>:删除指定应用。

应用启动后监听 9000 端口,但访问 “http://localhost:9000” 却没有反应,请求被挂起,这是因为没有设置如何处理请求。mSq28资讯网——每日最新资讯28at.com

Express 中通过定义路由来处理请求。mSq28资讯网——每日最新资讯28at.com

使用路由创建 API 接口

路由用于定义如何处理请求,定义方式采用以下结构:mSq28资讯网——每日最新资讯28at.com

app.METHOD(PATH, HANDLER)

其中 app 表示 Express 的实例,其余的三个部分都属于路由配置,表示的含义如下:mSq28资讯网——每日最新资讯28at.com

  • METHOD:路由方法。
  • PATH:路由地址。
  • HANDLER:路由处理函数。

比如示例代码中的路由是这样子:mSq28资讯网——每日最新资讯28at.com

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

使用app.get()定义了一个 GET 请求的路由,第一个参数 “/” 为路由地址,第二个参数为路由处理函数,是一个回调函数,该函数接受两个参数分别表示请求和响应。mSq28资讯网——每日最新资讯28at.com

当路由方法和路由地址匹配到用户请求时,路由处理函数就会执行。mSq28资讯网——每日最新资讯28at.com

路由方法根据基本 API 规则支持五种,分别如下:mSq28资讯网——每日最新资讯28at.com

  • app.get():GET 请求。
  • app.post():POST 请求。
  • app.put():PUT 请求。
  • app.delete():DELETE 请求。
  • app.all():匹配所有请求。

以上五个方法的参数都与示例路由一致。定义好路由后,我们的主要任务是在路由处理函数中编写业务代码,一般会包括接收请求参数、返回接口响应,这里要用到路由处理函数的两个参数。mSq28资讯网——每日最新资讯28at.com

请求对象

路由处理函数的第一个参数表示请求对象,包含客户端请求携带的相关数据,常用的属性如下:mSq28资讯网——每日最新资讯28at.com

  • req.query:URL 附加参数。
  • req.body:请求体参数。
  • req.method:请求方法。
  • req.headers:请求头对象。
  • req.params:URL 地址参数。

现在我们定义一个路由,将请求对象的这几个属性返回,看一下它们的值是什么:mSq28资讯网——每日最新资讯28at.com

app.post('/first/:id', (req, res) => {  let { method, query, body, params, headers } = req  res.send({ method, query, body, params, headers })})

在 Postman 中请求地址 “http://localhost:9000/first/8?tag=test” 并传入请求体参数 {data: "xxx"},请求结果如下:mSq28资讯网——每日最新资讯28at.com

图片mSq28资讯网——每日最新资讯28at.com

对照请求参数和返回结果,可以发现路由地址中的 :id 占位符解析后被放到 “req.params” 对象下。地址参数 ?tag=test 解析后被放到 “req.query” 对象下。mSq28资讯网——每日最新资讯28at.com

但是有一个问题:请求体没有被解析出来。mSq28资讯网——每日最新资讯28at.com

这是因为请求体是按照流处理的,无法直接获取到,我们需要一个第三方工具包协助。首先安装如下:mSq28资讯网——每日最新资讯28at.com

$ yarn add body-parser

然后在 index.js 中引入并加载:mSq28资讯网——每日最新资讯28at.com

const bodyParser = require('body-parser')app.use(bodyParser.json())

现在重新请求,接可以看到 req.body 的返回结果了:mSq28资讯网——每日最新资讯28at.com

图片mSq28资讯网——每日最新资讯28at.com

响应对象

路由处理函数的第二个参数表示响应对象,用于向客户端返回结果,也就是定义接口的返回值。路由处理函数中必须设置响应,否则客户端请求会一直处于挂起状态,无返回值。mSq28资讯网——每日最新资讯28at.com

常用的响应方法有以下三种,用于返回不同类型的数据:mSq28资讯网——每日最新资讯28at.com

  • res.json():发送 JSON 响应。
  • res.render():发送视图响应(HTML)。
  • res.send():发送各种类型的响应。

我们统一使用 res.send() 方法响应数据。一般在响应前还可以通过 res.status() 方法设置 HTTP 状态码,示例如下:mSq28资讯网——每日最新资讯28at.com

res.send('哈哈') // 状态码:200,返回值:"哈哈"res.status(201).send({  msg: 'created',}) // 状态码:201,返回值:{msg:"created"}res.status(401).send('请登录') // 状态码:401,返回值:"请登录"

发送响应时也常常会遇到问题,以下两条原则请牢记,避免踩坑:mSq28资讯网——每日最新资讯28at.com

  • 一个路由处理函数中只能响应一次,不能重复响应。
  • res.send() 不能直接返回数字。

分组路由

使用 app 实例注册路由固然方便,但是如果定义的路由很多,都注册在 app 实例下很可能会带来全局污染,这与全局变量一个道理。为了应用的健壮性,我们应该将路由分组。mSq28资讯网——每日最新资讯28at.com

Express 提供了 Router 类来创建模块化的路由程序,它像一个微应用,可以随时被 app 实例挂载。这样就可以把一组路由保存在一个单独的文件中,需要时加载,从而实现路由分组。mSq28资讯网——每日最新资讯28at.com

创建一个 router 文件夹用于保存路由文件,然后创建 router/test.js 文件,在文件中呢写入路由代码,如下:mSq28资讯网——每日最新资讯28at.com

// router/test.jsvar express = require('express')var router = express.Router()router.post('/info', (req, res) => {  res.send('TEST 路由组')})module.exports = router

这样一个基本的路由模块就写好了,如果让其生效,需要在主程序中加载该模块:mSq28资讯网——每日最新资讯28at.com

const testRouter = require('./router/test.js')app.use('/test', testRouter)

上述代码表示请求 “/test” 时加载路由模块,访问某个路由时使用该路径拼接路由地址,像下面这样:mSq28资讯网——每日最新资讯28at.com

http://localhost:9000/test/info# 返回 "TEST 路由组"

为了开发规范,我们统一把路由定义为路由模块,而不直接在 app 下注册。mSq28资讯网——每日最新资讯28at.com

理解中间件,搞懂框架原理

Express 应用是由一系列中间件构成的。中间件同样是一个听着很玄乎的词儿,但它的本质就是一个函数。我们看一个中间件函数的代码示例:mSq28资讯网——每日最新资讯28at.com

var myLogger = function (req, res, next) {  console.log('LOGGED')  next()}

中间件与普通函数的区别就是它有三个参数,分别表示请求对象(req),响应对象(res)和一个 next() 函数 ——— 也许你发现了,路由处理函数也是这个结构。mSq28资讯网——每日最新资讯28at.com

没错,路由处理函数本身就是一个中间件。mSq28资讯网——每日最新资讯28at.com

将中间件挂载到应用上,使用 app.use() 方法:mSq28资讯网——每日最新资讯28at.com

app.use(myLogger)

看到这里你又会发现,请求体解析包 body-parser 也是这么挂载的,因为该包也是一个中间件。mSq28资讯网——每日最新资讯28at.com

直接用 app.use() 挂载的中间件在收到任意请求时都会执行。如果要限定执行条件,可以添加一个路径匹配,如下:mSq28资讯网——每日最新资讯28at.com

app.use('/test/*', myLogger)

这样,只有以 /test 开头的请求才会执行 myLogger 中间件,这看起来与路由注册很相似。其实注册路由正是这种中间件挂载方式的快捷写法,只不过多了一个请求方法的限制。mSq28资讯网——每日最新资讯28at.com

Express 应用中一切皆中间件,如果匹配到多个中间件会按照顺序依次调用。此时 next() 函数就能派上用场了,他的作用是进入下一个中间件。mSq28资讯网——每日最新资讯28at.com

比如代码中的 myLogger 中间件,将它挂载到路由之前,那么每次请求首先会打印出 “LOGGED”,然后再进入路由处理函数。mSq28资讯网——每日最新资讯28at.com

如果 myLogger 中间件中没有调用 next() 函数,请求就会被堵在这里,无法进入路由处理函数,此时请求会被挂起。mSq28资讯网——每日最新资讯28at.com

统一错误处理,提升健壮性

既然一切皆中间件,那么错误处理也是一个中间件。错误处理函数与其他的中间件函数稍有不同,它多了一个 err 参数,如下:mSq28资讯网——每日最新资讯28at.com

app.use((err, req, res, next) => {  console.error(err.stack)  res.status(500).send('服务器出错了!')})

err 参数表示错误信息,当发生错误时进入该中间件,此时要设置 HTTP 状态码为 500,并根据错误信息为客户端返回错误响应。mSq28资讯网——每日最新资讯28at.com

错误处理中间件是一个兜底中间件,请确保它定义在所有中间件之后,是应用中的最后一个中间件。mSq28资讯网——每日最新资讯28at.com

请求进入错误中间件,说明前面的所有中间件都没有匹配到。但是如果客户端请求地址写错而进入错误处理中间件,此时返回 500 错误显然不合理,应该是 404 资源未找到。mSq28资讯网——每日最新资讯28at.com

所以在错误处理中间件前,还应该定义一个 404 中间件。该中间件要在所有路由之后,错误处理之前,是应用的倒数第二个中间件,代码如下:mSq28资讯网——每日最新资讯28at.com

app.use((req, res, next) => {  res.status(404).send('Not Found')})

好了,现在我们的应用就健壮多了。mSq28资讯网——每日最新资讯28at.com

总结

本文列举了 Express 框架的核心,并举例如何应用,整体并没有那么难。掌握这部分知识,可以快速拥 API 开发的思维。mSq28资讯网——每日最新资讯28at.com

本文链接:http://www.28at.com/showinfo-26-62788-0.html花 15 分钟把 Express.js 搞明白,全栈没有那么难

声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。邮件:2376512515@qq.com

上一篇: 提高代码效率的六个Python内存优化技巧

下一篇: 总结了十个Vue3超级实用但是很冷门的API

标签:
  • 热门焦点
  • 卢伟冰长文解析K60至尊版 对Redmi有着里程碑式的意义

    在今天的Redmi后性能时代战略发布会结束之后,Redmi总经理卢伟冰又带来了一篇长文,详解了为什么 Redmi 要开启后性能时代?为什么选择和 MediaTek、Pixelworks 深度合作?以及后性
  • 2023年Q2用户偏好榜:12+256G版本成新主流

    3月份的性能榜、性价比榜和好评榜之后,就要轮到2023年的第二季度偏好榜了,上半年的新机潮已经过去,最明显的肯定就是大内存和存储的机型了,另外部分中端机也取消了屏幕塑料支架
  • 5月iOS设备好评榜:iPhone 14仅排第43?

    来到新的一月,安兔兔的各个榜单又重新汇总了数据,像安卓阵营的榜单都有着比较大的变动,不过iOS由于设备的更新换代并没有那么快,所以相对来说变化并不大,特别是iOS好评榜,老款设
  • Rust中的高吞吐量流处理

    作者 | Noz编译 | 王瑞平本篇文章主要介绍了Rust中流处理的概念、方法和优化。作者不仅介绍了流处理的基本概念以及Rust中常用的流处理库,还使用这些库实现了一个流处理程序
  • 10天营收超1亿美元,《星铁》比《原神》差在哪?

    来源:伯虎财经作者:陈平安即便你没玩过《原神》,你一定听说过的它的大名。恨它的人把《原神》开服那天称作是中国游戏史上最黑暗的一天,有粉丝因为索尼在PS平台上线《原神》,怒而
  • 年轻人的“职场羞耻感”,无处不在

    作者:冯晓亭 陶 淘 李 欣 张 琳 马舒叶来源:燃次元&ldquo;人在职场,应该选择什么样的着装?&rdquo;近日,在网络上,一个与着装相关的帖子引发关注,在该帖子里,一位在高级写字楼亚洲金
  • Android 14发布:首批适配机型公布

    5月11日消息,谷歌在今天凌晨举行了I/O大会,本次发布会谷歌带来了自家的AI语言模型PaLM 2、谷歌Pixel Fold折叠屏、谷歌Pixel 7a手机,同时发布了Androi
  • OPPO K11评测:旗舰级IMX890加持 2000元档最强影像手机

    【Techweb评测】中端机型用户群体巨大,占了中国目前手机市场的大头,一直以来都是各手机品牌的“必争之地”,其中OPPO K系列机型一直以来都以高品质、
  • SN570 NVMe SSD固态硬盘 价格与性能兼具

    SN570 NVMe SSD固态硬盘是西部数据发布的最新一代WD Blue系列的固态硬盘,不仅闪存技术更为精进,性能也得到了进一步的跃升。WD Blue SN570 NVMe SSD的包装外
Top