Express 路径转正则 path-to-regexp

最新推荐文章于 2024-08-15 09:49:09 发布

「已注销」

最新推荐文章于 2024-08-15 09:49:09 发布

阅读量470

点赞数 5

文章标签： express

本文链接：https://blog.csdn.net/BASK2311/article/details/139412112

版权

一、开始之前

在开始之前，我们要先聊一聊 restful 规范，也就是如何根据 url 从服务器获取资源。

1.1）以商品获取为例

复制代码

GET /api/products

我们要通过 HTTP 协议的 GET 方法获取 url 在 /api 下的 products 列表。这很简单程序很容易识别固定的 url。

1.2）获取具体的内容

复制代码

GET /api/product/1 GET /api/product/2 GET /api/product/3 GET /api/product/9999

我们看到使用枚举的方式也可以轻松的完成，但是这些枚举的路径在程序中都是可以重复的，可以抽象的。

我们可以认为：/product/id 中 id 是一个传递的参数，是动态的。我们尝试将这个动态的用别的形式展示

/product/:id
/product/{id}
/product/$id
...

等等不同的表现形式。其中 express 就选择了第一种方式进行解析动态路径。

关联了 restful 规范和路径动态表现形式，下面就需要一些方式来解析路径，path-to-regexp 就一个应用于 express 中的路径解释库。下面我们就开始进入它讲解。

二、哪些库在使用 path-to-regexp

express
koa
vue-router2
nestjs

2.1）express 路径的写法

经常写 expressjs 或者类似框架小伙伴，可能都会写如下的代码：

复制代码

app.get('/users/:id', (req, res) => { res.send(`获取用户 ${req.params.id}`); });

/users/:id 路径的写法，代表 id 是一个 动态参数，可以匹配不同的 id,来经过这个路由函数进行处理。那么 express 如何如何在内部关联上 path-to-regexp 的呢?

2.2）express 在 Layer 使用使用

express 中 path-to-regexp 也只在 一个 地方用到了 Layer 类中。

复制代码

var pathRegexp = require('path-to-regexp'); function Layer(path, options, fn) { if (!(this instanceof Layer)) { return new Layer(path, options, fn); } // *** this.regexp = pathRegexp(path, this.keys = [], opts); // *** }

这样就简单了。path-to-regexp 与 layer 进行关联。所有使用实例化 layer 位置就需要解析 path 为 regexp。

2.3）nestjs 路径的写法

复制代码

import { Controller, Get, Param } from '@nestjs/common'; @Controller('cats') export class CatsController { @Get(':id') findOne(@Param('id') id: string) { return `This action returns a #${id} cat`; } }

三、path-to-regexp API 设计

使用 Object.keys 快速获取 path-to-regexp 的 api。

复制代码

import * as ptr from 'path-to-regexp' const keys = Object.keys(ptr) console.log(keys) [ '__esModule', 'compile', 'default', 'match', 'parse', 'pathToRegexp', 'regexpToFunction', 'tokensToFunction', 'tokensToRegexp' ]

以下是 api 整体的输出情况：

项目	说明
`__esModule`	表示是一个 `ES` 模块
`compile`	将`路径字符串`编译为生成 `URL`的`函数`
`default`	`默认`导出的模块或函数
`match`	生成匹配 URL 的函数 `matchFn`
`parse`	将`路径字符串`解析为令牌 `数组`
`pathToRegexp`	将`路径字符串`转换为`正则表达式`，并`提取参数`
`regexpToFunction`	将`正则表达式转换`为匹配 `URL函数`
`tokensToFunction`	将`令牌数组`转换为生成`URL函数`
`tokensToRegexp`	将`令牌数组`转换为`正则表达式`

四、pathToRegexp

pathToRegexp('/user/:id') -> regexpObject

pathToRegexp 迅速将 url 转换成正则。

复制代码

import { pathToRegexp } from 'path-to-regexp' const keys = []; const regexp = pathToRegexp('/user/:id', keys); console.log(regexp); // /^\/user\/([^\/]+?)\/?$/i console.log(keys);

有了正则就可以做其他的匹配事情了：

复制代码

regexp.exec('/user/23')

五、match 匹配函数

match('/user/:id') -> matchFn -> matchObject/false

match 函数用于创建一个新的匹配函数 matchFn，以下是一个获取用户 id 的例子:

复制代码

const matchUserFn = match("/user/:id") const result = matchUserFn("/user/123") const userId = result.params.id // 123 const result = matchFn('/user/123/ad?d=123'); // false

从抽象的地址到具体的地址，本质就是 :id 与 params.id 的一个映射的过程。能够方便的以 js 对象的形式获取数据。当然 match 还是传入 options，对正则表达式进行约束，这里就不再赘述了。如果把 match 立即为正面的匹配的话，那么它的反面是如何呈现的呢？

六、compile

compile('/user/:id') -> toPath -> url

将对象转换 path, 与 match 相反 compile 是已知 id 需要将 id 转换成路径:

复制代码

const toPath = compile("/user/:id") const user = { id: 123 } const userPath = toPath(user) // /user/123

七、parse

parse('/user/:id') -> tokens

7.1）词法对象

path-to-regexp 实现 lexer 词法分析，使用 parse 对 url 进行词法分析产生 tokens，词法对象：

复制代码

{ type: "MODIFIER" | "ESCAPED_CHAR" | "OPEN" || "CLOSE" || "NAME" || "PATTERN" || "CHAR" || "END", index, value, }

7.2）token 对象

parse 解析完毕词法之后，在此数组的基础上，将其解析为 tokens 数组，下面是 token 数组的大致数据形式：

复制代码

{ name: name || key++, prefix: prefix, suffix: "", pattern: pattern || defaultPattern, modifier: tryConsume("MODIFIER") || "", }

7.3）示例

复制代码

import { parse } from 'path-to-regexp' const tokens = parse('/user/:id'); console.log(tokens); /** * [ '/user', { name: 'id', prefix: '/', suffix: '', pattern: '[^\\/#\\?]+?', modifier: '' } ] */

八、tokenTo 相关转换函数

前面已经提到了词法解析与 tokens 的解析 path-to-regexp 也提供了两个方法用于奖励 token 与 url 和正则的转换关系

8.1）tokensToFunction token 转换成函数

parse('/user/:id') -> tokens -> tokensToFunction({ id: 123}) -> path_url

复制代码

import { parse, tokensToFunction } from 'path-to-regexp' const tokens = parse('/user/:id'); const toPath = tokensToFunction(tokens); console.log(toPath({ id: 123 })); // /user/123

8.2）tokensToRegexp

parse('/user/:id') -> tokens -> tokensToRegexp -> regexp

复制代码

import { parse, tokensToRegexp } from 'path-to-regexp'; const tokens = parse('/user/:id'); const keys = []; const regexp = tokensToRegexp(tokens, keys); console.log(regexp); // /^\/user\/([^\/]+?)\/?$/i console.log(keys); // [ { name: 'id', prefix: '/', ... }]