TypeORM多对多关联表新增字段后，Next.js中如何访问？

问题根源 #

你使用的是TypeORM普通多对多关系，这种模式下框架会自动处理中间表，但不会暴露中间表的自定义字段（比如你添加的exhibitpaintingprice）。要获取这类字段，必须把中间表定义为独立实体，将原多对多关系拆成两个一对多关系。

步骤1：调整实体定义 #

首先需要修改你的实体结构：

1.1 创建中间表实体 ExhibitPainting #

import { Entity, PrimaryGeneratedColumn, Column, ManyToOne, JoinColumn } from "typeorm";
import { Exhibit } from "./Exhibit";
import { Painting } from "./Painting";

@Entity("exhibit_paintings")
export class ExhibitPainting {
  @PrimaryGeneratedColumn()
  id: number;

  @Column()
  paintingId: number;

  @Column()
  exhibitId: number;

  @Column({ type: "decimal", precision: 10, scale: 2 })
  exhibitpaintingprice: number;

  @ManyToOne(() => Exhibit, exhibit => exhibit.exhibitPaintings)
  @JoinColumn({ name: "exhibitId" })
  exhibit: Exhibit;

  @ManyToOne(() => Painting, painting => painting.exhibitPaintings)
  @JoinColumn({ name: "paintingId" })
  painting: Painting;
}

1.2 修改 Exhibit 实体 #

替换原来的多对多paintings字段，改为一对多关联中间表：

import { Entity, OneToMany } from "typeorm";
import { ExhibitPainting } from "./ExhibitPainting";

@Entity("exhibits")
export class Exhibit {
  // 保留原有其他字段...

  @OneToMany(() => ExhibitPainting, exhibitPainting => exhibitPainting.exhibit)
  exhibitPaintings: ExhibitPainting[];
}

1.3 修改 Painting 实体 #

添加一对多关联中间表：

import { Entity, OneToMany } from "typeorm";
import { ExhibitPainting } from "./ExhibitPainting";

@Entity("paintings")
export class Painting {
  // 保留原有其他字段...

  @OneToMany(() => ExhibitPainting, exhibitPainting => exhibitPainting.painting)
  exhibitPaintings: ExhibitPainting[];
}

步骤2：修改查询代码 #

更新查询逻辑，关联中间表及对应的画作数据：

const exhibitRepository = AppDataSource.getRepository(Exhibit);
const exhibit = await exhibitRepository.findOne({
  where: { id: exhibitid },
  relations: ["gallery", "exhibitPaintings", "exhibitPaintings.painting"], // 关联中间表和关联的画作
});
return exhibit;

步骤3：前端渲染调整 #

现在可以直接通过中间表实体访问自定义价格字段，遍历exhibit.exhibitPaintings即可：

<table>
  <thead>
    <tr>
      <th>画作名称</th>
      <th>展览专属价格</th>
    </tr>
  </thead>
  <tbody>
    {exhibit?.exhibitPaintings.map(item => (
      <tr key={item.id}>
        <td>{item.painting.name}</td> {/* 访问画作的属性 */}
        <td>{item.exhibitpaintingprice}</td> {/* 直接获取中间表的价格字段 */}
      </tr>
    ))}
  </tbody>
</table>

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