Spring Boot用@JsonProperty修改字段映射后Angular端实现方案咨询

Angular官方没有内置类似@JsonProperty的注解，但可以通过第三方库class-transformer的@Expose装饰器实现完全一致的效果，不需要改动原有业务变量名，也不用硬编码字段映射。

第一步：安装依赖 #

npm install class-transformer reflect-metadata

安装完成后在项目入口文件main.ts最顶部引入依赖：

import 'reflect-metadata';

第二步：修改Document实体类（对应你的./docu.ts文件） #

原来如果是接口定义要改为类定义，添加字段映射装饰器：

import { Expose } from 'class-transformer';

export class Document {
  id: number;
  // 映射后端返回的document_name字段到前端的name变量
  @Expose({ name: 'document_name' })
  name: string;
  // 映射后端返回的document_description字段到前端的description变量
  @Expose({ name: 'document_description' })
  description: string;
  editable: boolean;
}

第三步：在HTTP服务层添加序列化/反序列化逻辑 #

在你的document.service.ts中对请求的入参和返回值做自动转换：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Document } from './docu';
import { plainToInstance, instanceToPlain } from 'class-transformer';
import { Observable, map } from 'rxjs';

@Injectable({ providedIn: 'root' })
export class DocumentService {
  constructor(private http: HttpClient) {}

  // 查询列表：接口返回的JSON自动转成Document类实例，字段自动映射
  getAllDocuments(): Observable<Document[]> {
    return this.http.get<Record<string, any>[]>('/api/documents').pipe(
      map(res => plainToInstance(Document, res))
    );
  }

  // 新增/更新：前端的Document实例自动转成后端需要的JSON格式，字段自动映射
  createDocument(doc: Document): Observable<any> {
    const payload = instanceToPlain(doc);
    return this.http.post('/api/documents', payload);
  }

  updateDocument(doc: Document): Observable<any> {
    const payload = instanceToPlain(doc);
    return this.http.put(`/api/documents/${doc.id}`, payload);
  }

  deleteDocumentById(id: number): Observable<any> {
    return this.http.delete(`/api/documents/${id}`);
  }
}

第四步：简化组件代码 #

原来你在组件中手动硬编码映射的逻辑可以完全删掉，直接使用映射后的字段即可：

public getDocuments(): void {
  this.documentService.getAllDocuments().subscribe(
    (response: Document[]) => {
      this.documentList = response.map(doc => ({
        ...doc,
        editable: false
      }));
    },
    (error: HttpErrorResponse) => {
      alert(error.message);
    }
  );
}

后续你前端业务代码里直接使用name、description变量即可，不用再写document_name、document_description，字段映射逻辑统一在实体类维护，符合规范要求。

内容的提问来源于stack exchange，提问作者WorkWork