Bootstrap

Nextjs代码片段构造绘图原始数据

以下是一个完整的示例,用于查询 t_table、t_column 和 t_edge 数据,并组装成类似于原始 database 数据的结构。

查询和组装代码

import { PrismaClient } from '@prisma/client';

const prisma = new PrismaClient();

export async function getDatabaseStructure() {
  // 查询所有表
  const tables = await prisma.table.findMany({
    include: {
      columns: true,
      edgesAsSource: true,
      edgesAsTarget: true,
    },
  });

  // 组装数据结构
  const result = {
    tables: tables.map((table) => ({
      name: table.name,
      description: table.description,
      columns: table.columns.map((column) => ({
        name: column.name,
        description: column.description || 'No description available.',
        type: column.type,
        key: column.isKey,
      })),
      schemaColor: table.schemaColor,
    })),
    schemaColors: tables.reduce((acc, table) => {
      acc[table.name] = table.schemaColor;
      return acc;
    }, { DEFAULT: '#91C4F2' }),
    tablePositions: tables.reduce((acc, table) => {
      acc[table.name] = { x: table.positionX, y: table.positionY };
      return acc;
    }, {}),
    edgeConfigs: tables.flatMap((table) =>
      table.edgesAsSource.map((edge) => ({
        source: `public.${table.name}`,
        sourceKey: edge.sourceKey,
        target: `public.${edge.targetTable.name}`,
        targetKey: edge.targetKey,
        relation: edge.relation,
      }))
    ),
  };

  return result;
}

数据解释

1. 查询表结构
const tables = await prisma.table.findMany({
  include: {
    columns: true,         // 包括关联的 columns
    edgesAsSource: true,   // 包括作为源的 edges
    edgesAsTarget: true,   // 包括作为目标的 edges
  },
});
  • 查询 t_table 数据,并关联了 t_column 和 t_edge。
2. 组装 tables 节点
tables.map((table) => ({
  name: table.name,
  description: table.description,
  columns: table.columns.map((column) => ({
    name: column.name,
    description: column.description || 'No description available.',
    type: column.type,
    key: column.isKey,
  })),
  schemaColor: table.schemaColor,
}))
  • 转换每个表的数据为目标结构。
3. 组装 schemaColors 和 tablePositions

通过 reduce 方法将表数据聚合为对象。

4. 组装 edgeConfigs
tables.flatMap((table) =>
  table.edgesAsSource.map((edge) => ({
    source: `public.${table.name}`,
    sourceKey: edge.sourceKey,
    target: `public.${edge.targetTable.name}`,
    targetKey: edge.targetKey,
    relation: edge.relation,
  }))
);
  • 遍历 edgesAsSource,将边关系组装为目标格式。

API 路由示例

在 app/api/database/route.ts 文件中定义 API:

import { NextResponse } from 'next/server';
import { getDatabaseStructure } from '@/lib/databaseService';

export async function GET() {
  try {
    const data = await getDatabaseStructure();
    return NextResponse.json(data);
  } catch (error) {
    console.error('Error fetching database structure:', error);
    return NextResponse.json({ message: 'Error fetching database structure' }, { status: 500 });
  }
}

;