本文轉(zhuǎn)載自微信公眾號(hào)「神奇的程序員」，作者神奇的程序員。轉(zhuǎn)載本文請(qǐng)聯(lián)系神奇的程序員公眾號(hào)。

前言

Nest 與 class-validator[1] 配合得很好，它允許我們使用基于裝飾器的驗(yàn)證，在dto層中我們可以通過(guò)它的一些內(nèi)置注解完成對(duì)參數(shù)的一些常用校驗(yàn)。

但是，當(dāng)我們?cè)趯憳I(yè)務(wù)代碼時(shí)，內(nèi)置注解往往不能滿足我們，此時(shí)我們?yōu)榱舜a的一致性，就需要根據(jù)需求自定義一個(gè)注解出來(lái)，本文將帶著大家一起實(shí)現(xiàn)一個(gè)注解，歡迎各位感興趣的開發(fā)者閱讀本文。

場(chǎng)景概述

客戶端傳入一個(gè)不符合規(guī)范的json字符串，我們需要對(duì)其進(jìn)行截取后，再轉(zhuǎn)成json對(duì)象進(jìn)行下一步的校驗(yàn)，客戶端傳入的字符串如下所示：

var config = '{"name":"aa","age":"21","title":"標(biāo)題測(cè)試"}'

在處理的時(shí)候，需要把var config =截取掉，只保留json字符串，然后轉(zhuǎn)成json對(duì)象，要求屬性總數(shù)必須大于2，我們很容易就能寫出代碼來(lái)，如下所示：

// 驗(yàn)證配置字符串是否符合規(guī)范
export function verifyConfig(
  draftConfig?: string
): boolean | Record<string, any> {
  // 去除多余字符
  if (draftConfig && draftConfig.length >= 12) {
    draftConfig = draftConfig.substring(12, draftConfig.length);
  }
  let draftData = {};
  try {
    if (typeof draftConfig === "string") {
      draftData = JSON.parse(draftConfig);
    }
    // 草稿json字段不足
    if (Object.keys(draftData).length < 2) {
      return false;
    }
  } catch (e) {
    // 草稿配置數(shù)據(jù)格式錯(cuò)誤
    return false;
  }
  return draftData;
}

實(shí)現(xiàn)思路

本文繼續(xù)沿用文章“使用NestJS搭建服務(wù)端應(yīng)用[2]”所創(chuàng)建的項(xiàng)目，以此為基礎(chǔ)進(jìn)行擴(kuò)展。

我們?cè)陂喿xclass-validator倉(cāng)庫(kù)文檔的custom-validation-decorators[3]章節(jié)后，大概了解了它的流程，接下來(lái)我們來(lái)實(shí)踐它。

注冊(cè)裝飾器首先，我們?cè)陧?xiàng)目根錄下創(chuàng)建decorators文件夾，所有注解的實(shí)現(xiàn)文件都會(huì)放在此目錄下。隨后我們?cè)谄淠夸浵聞?chuàng)建ConfigDecor.ts文件。

我們通過(guò)registerDecorator方法來(lái)注冊(cè)一個(gè)裝飾器，代碼如下所示：

• IsConfig 為注解的名稱，它是函數(shù)類型，接受一個(gè)ValidationOptions類型的可選參數(shù)
• 裝飾器注冊(cè)函數(shù)中有一個(gè)validator屬性，用于校驗(yàn)數(shù)據(jù)，將在下個(gè)章節(jié)進(jìn)行詳細(xì)講解

// 配置驗(yàn)證注解
export function IsConfig(validationOptions?: ValidationOptions) {
  return function (object: Record<string, any>, propertyName: string): void {
    // 注冊(cè)一個(gè)裝飾器
    registerDecorator({
      name: "IsConfig",
      target: object.constructor,
      options: validationOptions,
      propertyName: propertyName,
      validator: IsConfigConstraint
    });
  };
}

數(shù)據(jù)校驗(yàn)類

裝飾器的validator屬性值是一個(gè)用@ValidatorConstraint裝飾的一個(gè)類，這個(gè)類必須實(shí)現(xiàn)ValidatorConstraintInterface接口。其代碼如下所示：

• validate 接受的參數(shù)就是dto中使用注解的字段所對(duì)應(yīng)的值，我們需要的就是對(duì)它進(jìn)行校驗(yàn)，校驗(yàn)函數(shù)就是用我們?cè)谖恼麻_頭寫好的verifyConfig方法。
• defaultMessage 就是驗(yàn)證不通過(guò)時(shí)，默認(rèn)返回給客戶端的報(bào)錯(cuò)信息

// 配置驗(yàn)證程序
@ValidatorConstraint({ async: true })
export class IsConfigConstraint implements ValidatorConstraintInterface {
  validate(value: string): Promise<boolean> | boolean {
    // 對(duì)草稿配置進(jìn)行校驗(yàn)
    // 校驗(yàn)程序返回值為boolean類型則代數(shù)據(jù)格式錯(cuò)誤
    return typeof verifyConfig(value) !== "boolean";
  }
  // 驗(yàn)證失敗時(shí)的默認(rèn)錯(cuò)誤信息
  defaultMessage(args: ValidationArguments): string {
    return `property ${args.property} data format error`;
  }
}

使用裝飾器

最后，我們只需要像使用內(nèi)置裝飾器一樣使用它就可以了，代碼如下所示：

export class AppDto {
  @MinLength(5)
  @IsString()
  public id!: string;
  @IsString()
  public title!: string;
  @IsString()
  public name!: string;
  @IsConfig()
  public config!: string;
}

最后，我們啟動(dòng)項(xiàng)目，使用postman對(duì)其進(jìn)行測(cè)試，如下圖所示：

我們傳了一個(gè)不符合規(guī)范的字符串，裝飾器校驗(yàn)不通過(guò)，返回了我們定義好的默認(rèn)校驗(yàn)信息。

image-20220217012646287

我們?cè)趤?lái)測(cè)試下正確數(shù)據(jù)的情況，如下圖所示，成功調(diào)用：

小tip: 我們?cè)谧?cè)裝飾器時(shí)，提供了一個(gè)可選參數(shù)，它的作用就是為了其能像內(nèi)置注解一樣，修改其公開屬性，例如message，我們可以對(duì)驗(yàn)證失敗時(shí)的錯(cuò)誤信息進(jìn)行自定義。

示例代碼

本文中所列舉的完整代碼請(qǐng)移步：

• JsonDataVerifyUtilas.ts[4]
• ConfigDecor.ts[5]
• AppDto[6]

寫在最后至此，文章就分享完畢了。

我是神奇的程序員，一位前端開發(fā)工程師。

如果你對(duì)我感興趣，請(qǐng)移步我的個(gè)人網(wǎng)站[7]，進(jìn)一步了解。

公眾號(hào)無(wú)法外鏈，如果文中有鏈接，可點(diǎn)擊下方閱讀原文查看??

參考資料

[1]class-validator: https://github.com/pleerock/class-validator

[2]使用NestJS搭建服務(wù)端應(yīng)用: https://juejin.cn/post/7053840108331466783

[3]custom-validation-decorators: https://github.com/typestack/class-validator#custom-validation-decorators

[4]JsonDataVerifyUtilas.ts: https://github.com/likaia/nest-project/blob/9c25cc367c83e28331cdd52a2bf3ce538f35400c/src/utils/JsonDataVerifyUtilas.ts#L2

[5]ConfigDecor.ts: https://github.com/likaia/nest-project/blob/9c25cc367c83e28331cdd52a2bf3ce538f35400c/src/decorators/ConfigDecor.ts#L11[

6]AppDto: https://github.com/likaia/nest-project/blob/9c25cc367c83e28331cdd52a2bf3ce538f35400c/src/dto/AppDto.ts#L4

[7]個(gè)人網(wǎng)站: https://www.kaisir.cn/