Day 28 - 不想再写 if 啦,来研究 NestJS 的 Pipe 看看

我有好多 if 呀

身为一个新手後端,常常会忽略到一些细节是需要挡掉的,以这一系列在做的 Task 这张资料表来讲,目前的新增任务的逻辑里面并没有包含去验证 title 是不是空字串(""),所以如果是这样打的话,其实也是可以成功的:
https://ithelp.ithome.com.tw/upload/images/20201013/20119619WodzNS0GPj.png

https://ithelp.ithome.com.tw/upload/images/20201013/20119619UW2Uo1WBTO.png

而其实很多个地方都会需要做验证参数这件事,然後你写了 if ..之类的代码就复制了好多个地方一直重复使用,感觉可以包起来呢,所以今天为了改善我自己,来研究一下 Pipe XD。

Pipe

Pipe 的官方文件在这,一般来说 Pipe 有两种用途:

  1. 转换(将进来的数据做处理,转换成需要的数据後输出)
  2. 验证(对进来的数据做验证,成功则继续进行,失败就抛错误)

从文件中可以看到,内建带有这六种可以使用:
https://ithelp.ithome.com.tw/upload/images/20201013/2011961953xB1xE7fl.png

而我的需求是验证,就让我来摸索一下吧 XD。

新建 Pipe

新建 Pipe 依然可以使用内建的 CLI,而我想自己独立一个资料夹,故我输入以下:

nest g pipe pipe/example-validation

之後就会生成一个 Default 的 Pipe 格式:
https://ithelp.ithome.com.tw/upload/images/20201013/20119619WdB3X9qXRM.png

安装其他 Package

为了方便使用通用型的 Pipe 逻辑,这里我们会再安装其他两个 Package,输入以下 CLI:

yarn add class-validator class-transformer -S

撰写通用 Pipe 逻辑

这里我们使用非常普遍,通用化的 Pipe 逻辑:
https://ithelp.ithome.com.tw/upload/images/20201013/20119619BzAPYZ9usW.png

在 API 接口使用 Pipe

我们来到新增任务这支 API 的接口,在它的上方使用装饰器来套用这个 Pipe:
https://ithelp.ithome.com.tw/upload/images/20201013/201196190wvVt6IsO9.png

套用自己想用的

class-validator 有非常多好用的验证方式,详细可以参考它的 GitHub,而我今天的需求是不想让 title 是空的,我们来使用 @IsNotEmpty 看看,而若发生错误我给它个错误提示:
https://ithelp.ithome.com.tw/upload/images/20201013/20119619xUkT7RSRmb.png

我们像刚刚一样,试着用空的 title 来打 API,会发生什麽事呢?
https://ithelp.ithome.com.tw/upload/images/20201013/20119619qYjvAqxq9E.png

太棒啦,它帮我挡住了:
https://ithelp.ithome.com.tw/upload/images/20201013/20119619mAZcvsLbw8.png

但是顽皮的我想这样输入呢?
https://ithelp.ithome.com.tw/upload/images/20201013/20119619S3TwP7CfrG.png

结果还是会打成功:
https://ithelp.ithome.com.tw/upload/images/20201013/20119619fEbN0385Wp.png

自订验证的装饰器

刚刚我们顽皮的乱试,还是会打成功,这边可以去查查 issue 里面有没有人遇到同样的问题,刚好就有一篇,我们直接拿他的 Code 来自订一个验证装饰器看看:
https://ithelp.ithome.com.tw/upload/images/20201013/20119619SthkGDTkUr.png

然後我们拿去套用在 title 身上:
https://ithelp.ithome.com.tw/upload/images/20201013/20119619SeA30ddTvK.png

OK,这样就算是多个空白也被挡掉啦:
https://ithelp.ithome.com.tw/upload/images/20201013/20119619omYJe2aw30.png

/*
本系列文系个人新手开发心得,可能会有许多错误,烦请多多包容不吝指教。
*/


<<:  [Day 30] Tips for Lazy Loading Images

>>:  个人or团队这回事(下)

Day 11:「动起来!动起来!」- 用 Tailwind 简单做出过渡和动画效果

还记得我们在之前做过变化模式吗? 没错,就是滑鼠悬停之後会变色的那个。 我们今天呢,就是要来帮它们...

常见攻击(Common Attacks)

高级持久威胁(APT) 多向量多态攻击 拒绝服务 缓冲区溢出 流动码 恶意软件(恶意软件) 偷渡式...

DAY 30 - 殭屍女孩 (3) 完

大家好~ 我是五岁~ 今天来把殭屍女孩完成吧~~ 话说本日的我选颜色有点失常阿~ 哈哈哈哈阿~~ 不...

关於 物件(Object)与类别(class)

正在复习C#~(书 和影片 文章 看到头晕) 发现有些观念真的简单又不简单 一定要用自己的方式搞懂~...

30天打造品牌特色电商网站 Day.11 CSS框架-Bootstrap5

昨天已经初步介绍几个简单常用的bootstrap语法, 今天来看看几个也是好用、比较详细或特殊的情况...