Class-Transformer库介绍

在前后端分离开发的过程中,前端开发人员如果想要避免因为接口字段不同造成效率下降的问题,就需要将后端传递的plainText中的字段进行转化。显然这里是在应用层面上使用了适配器模式。本文介绍一个js库实现对象字段名的转化功能。

1. Class-Transformer基本使用步骤

Class-Transformer是一个用于转换类实例的库,主要用于在对象之间进行数据映射。以下是使用Class-Transformer的基本步骤:

1.1 安装Class-Transformer

通过npm或yarn安装Class-Transformer库:

bash 复制代码
npm install class-transformer

bash 复制代码
yarn add class-transformer

1.2 创建类实体

定义需要进行转换的类实体,例如:

typescript 复制代码
// user.entity.ts
import { Expose } from 'class-transformer';

export class UserEntity {
  @Expose()
  id: number;

  @Expose()
  name: string;

  @Expose()
  email: string;
}

1.3 进行转换

在需要进行转换的地方,使用classToPlainplainToClass方法进行对象的转换:

typescript 复制代码
// main.ts
import { classToPlain, plainToClass } from 'class-transformer';
import { UserEntity } from './user.entity';

const userObject = {
  id: 1,
  name: 'John Doe',
  email: 'john@example.com',
};

// 转换为UserEntity实例
const userInstance = plainToClass(UserEntity, userObject);

// 转换为普通JavaScript对象
const plainObject = classToPlain(userInstance);

2. Class-Transformer高级使用技巧

2.1 字段别名

通过@Expose装饰器设置字段的别名,用于在转换时更改字段名称:

typescript 复制代码
// user.entity.ts
import { Expose } from 'class-transformer';

export class UserEntity {
  @Expose({ name: 'userID' })
  id: number;

  @Expose({ name: 'fullName' })
  name: string;

  @Expose()
  email: string;
}

2.2 转换嵌套对象

Class-Transformer支持转换嵌套对象,使用@Type装饰器指定嵌套对象的类型:

typescript 复制代码
// user.entity.ts
import { Expose, Type } from 'class-transformer';
import { RoleEntity } from './role.entity';

export class UserEntity {
  @Expose()
  id: number;

  @Expose()
  name: string;

  @Expose()
  email: string;

  @Type(() => RoleEntity)
  @Expose()
  roles: RoleEntity[];
}

3. Class-Transformer在前后端通信中的字段转换功能

Class-Transformer在前后端通信中的字段转换功能主要体现在处理后端返回的数据或前端发送的数据时,通过定义类实体并使用转换方法,实现字段名称的映射。在使用axios进行网络请求时,我们可以在处理后端返回的数据时应用Class-Transformer进行字段转换。

举例说明

假设我们有一个后端API返回的用户信息如下:

json 复制代码
{
  "user_id": 1,
  "full_name": "John Doe",
  "email_address": "john@example.com"
}

而前端希望使用以下UserEntity类表示用户信息:

typescript 复制代码
// user.entity.ts
import { Expose } from 'class-transformer';

export class UserEntity {
  @Expose({ name: 'user_id' })
  id: number;

  @Expose({ name: 'full_name' })
  name: string;

  @Expose({ name: 'email_address' })
  email: string;
}

如果使用的是js的话那就是:

js 复制代码
const { plainToClass, Transform, Expose } = require('class-transformer');

class UserEntity {
  @Expose({ name: 'user_id' })
  id;

  @Expose({ name: 'full_name' })
  name;

  @Expose({ name: 'email_address' })
  email;
}

接下来,在前端进行网络请求时,可以使用axios获取后端返回的用户信息,并应用Class-Transformer进行字段转换:

typescript 复制代码
// user.service.ts
import axios from 'axios';
import { plainToClass } from 'class-transformer';
import { UserEntity } from './user.entity';

export async function getUserInfo(userId: number): Promise<UserEntity> {
  try {
    const response = await axios.get(`/api/user/${userId}`);
    
    // 后端返回的数据进行字段转换为UserEntity实例
    const userEntity = plainToClass(UserEntity, response.data);

    return userEntity;
  } catch (error) {
    console.error('Error fetching user info:', error);
    throw error;
  }
}

在这个例子中,getUserInfo函数使用axios获取后端返回的用户信息,然后通过Class-Transformer的plainToClass方法将后端返回的数据转换为前端定义的UserEntity实例,实现了字段名称的映射。这样,在前端业务逻辑中,我们可以直接使用UserEntity类表示用户信息,而不必关心后端返回的原始字段名称。这种映射关系的定义可以使前后端在数据传递时更加灵活和可维护。

相关推荐
人工智能训练师3 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
Seveny073 小时前
pnpm相对于npm,yarn的优势
前端·npm·node.js
huangql5208 小时前
npm 发布流程——从创建组件到发布到 npm 仓库
前端·npm·node.js
荣达10 小时前
koa洋葱模型理解
前端·后端·node.js
csdn_aspnet11 小时前
Windows Node.js 安装及环境配置详细教程
windows·node.js
风若飞19 小时前
npm ERR! code CERT_HAS_EXPIRED
前端·npm·node.js
csdn_aspnet20 小时前
Windows、Linux 系统 nodejs 和 npm 版本更新及错误修复
linux·windows·npm·node.js
北城笑笑20 小时前
NodeJS 8 ,从 0 到 1:npm 包发布与更新全流程指南( 含多场景适配与踩坑总结 )
前端·npm·node.js·github
码码哈哈0.020 小时前
npm : 无法加载文件 C:\Program Files\nodejs\npm.ps1,因为在此系统上禁止运行脚
前端·npm·node.js
歪歪10021 小时前
webpack 配置文件中 mode 有哪些模式?
开发语言·前端·javascript·webpack·前端框架·node.js