ng-admin关系映射详解：如何优雅处理REST API中的关联数据-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00731/article/details/148551720

ng-admin关系映射详解：如何优雅处理REST API中的关联数据

ng-admin Add an AngularJS admin GUI to any RESTful API 项目地址: https://gitcode.com/gh_mirrors/ng/ng-admin

在构建管理后台时，处理实体间的关系是一个常见且关键的挑战。本文将深入探讨如何在ng-admin中高效处理REST API返回的各种关系类型，帮助开发者构建功能完善的管理界面。

关系类型概述

在RESTful API设计中，实体间的关系通常有三种实现方式：

简单外键关系（一对一或多对一）
外键数组（一对多或多对多）
内嵌实体（包含完整对象）

ng-admin针对这三种情况提供了专门的字段类型，下面我们逐一分析每种情况的处理方式。

简单外键关系处理

这是最常见的关系类型，类似于关系型数据库中的外键关联。以一个博客系统为例，评论(comment)通过post_id字段关联到文章(post)。

场景一：显示文章关联的评论

在文章详情页(showView)或编辑页(editionView)中，使用referenced_list字段类型展示关联评论：

post.showView().fields([
    // 其他字段...
    nga.field('comments', 'referenced_list')
        .targetEntity(nga.entity('comments'))
        .targetReferenceField('post_id')
        .targetFields([
            nga.field('id'),
            nga.field('created_at').label('发布时间'),
            nga.field('body').label('评论内容')
        ])
        .sortField('created_at')
        .sortDir('DESC')
        .listActions(['edit'])
]);

技术要点：

targetEntity指定关联的实体类型
targetReferenceField指定关联字段名
targetFields定义列表中显示的字段
可以通过listActions添加操作按钮

场景二：显示评论关联的文章

在评论列表页(listView)或详情页(showView)中，使用reference字段类型：

comment.listView().fields([
    // 其他字段...
    nga.field('post_id', 'reference')
        .isDetailLink(false)
        .label('所属文章')
        .targetEntity(post)
        .targetField(nga.field('title').map(truncate))
        .singleApiCall(ids => ({'id': ids }))
]);

在编辑评论时，可以使用带自动完成功能的reference字段：

comment.editionView().fields([
    // 其他字段...
    nga.field('post_id', 'reference')
        .label('关联文章')
        .targetEntity(post)
        .targetField(nga.field('title'))
        .remoteComplete(true, {
            refreshDelay: 200,
            searchQuery: search => ({ q: search })
        })
]);

外键数组关系处理

当关系由"一"方维护时，常见的形式是使用外键数组。例如文章包含多个标签(tag)的ID数组。

场景：显示和编辑文章的标签

使用reference_many字段类型处理这种关系：

post.editionView().fields([
    // 其他字段...
    nga.field('tags', 'reference_many')
        .targetEntity(nga.entity('tag'))
        .targetField(nga.field('name'))
        .attributes({ placeholder: '选择标签...' })
        .remoteComplete(true, {
            refreshDelay: 300,
            searchQuery: search => ({ q: search })
        })
]);

特点：

支持多选功能
可配置远程搜索
在列表页和详情页同样适用

内嵌实体关系处理

某些API设计会选择直接内嵌关联实体，而非使用外键。

场景一：内嵌列表

当文章内嵌了评论列表时：

post.showView().fields([
    // 其他字段...
    nga.field('comments', 'embedded_list')
        .targetFields([
            nga.field('date', 'date').label('发布时间'),
            nga.field('body').label('评论内容')
        ])
]);

编辑功能：

post.editionView().fields([
    // 其他字段...
    nga.field('comments', 'embedded_list')
        .targetFields([
            nga.field('date', 'date').label('发布时间'),
            nga.field('body').label('评论内容')
        ])
]);

场景二：内嵌单个实体

当评论内嵌了关联的文章对象时，可以使用点表示法：

comment.listView().fields([
    nga.field('date').label('发布时间'),
    nga.field('author').label('作者'),
    nga.field('body').label('内容'),
    nga.field('post.title').label('文章标题')
])