如何简化Django外键关联对象检索 适配React前端调用

Django 默认的序列化逻辑只会返回外键关联对象的主键值，不需要调整前端逻辑，后端修改序列化规则即可直接返回关联对象的完整数据，以下是生产环境常用的实现方式，根据你的项目技术栈选择即可：

方案1：基于Django REST Framework实现（前后端分离项目首选） #

如果你的项目还没集成DRF，先执行安装命令：
pip install djangorestframework

核心逻辑是用嵌套序列化器替换默认的外键主键返回，DRF会自动完成关联对象的序列化，不需要手动编写关联查询逻辑：

from rest_framework import serializers
from .models import Quotes, Characters, Media

# 先定义关联模型的序列化器
class CharacterSerializer(serializers.ModelSerializer):
    class Meta:
        model = Characters
        # 按需指定需要返回的字段，不需要全量返回
        fields = ['id', 'first_name', 'last_name', 'ja_name', 'image']

class MediaSerializer(serializers.ModelSerializer):
    class Meta:
        model = Media
        fields = '__all__'

class QuoteSerializer(serializers.ModelSerializer):
    # 将外键字段指定为对应嵌套序列化器，外键允许null时务必加required=False
    quote_by = CharacterSerializer(read_only=True, required=False)
    quote_from = MediaSerializer(read_only=True, required=False)

    class Meta:
        model = Quotes
        fields = ['id', 'quote', 'quote_ja', 'quote_by', 'quote_from', 'date_added']

性能优化提示：查询数据时使用select_related预加载关联对象，避免出现N+1查询问题：

# 视图层查询示例
from rest_framework.response import Response
from rest_framework.views import APIView

class QuoteListView(APIView):
    def get(self, request):
        # 预加载两个外键关联的数据，把多次SQL查询合并成1次
        quotes = Quotes.objects.select_related('quote_by', 'quote_from').all()
        serializer = QuoteSerializer(quotes, many=True)
        return Response(serializer.data)

方案2：原生Django手写JSON返回（无DRF场景） #

如果你的项目没有使用DRF，是直接手写JsonResponse返回接口数据，直接在序列化阶段手动拼接关联对象字段即可：

from django.http import JsonResponse
from .models import Quotes

def quote_list(request):
    quotes = Quotes.objects.select_related('quote_by', 'quote_from').all()
    result = []
    for quote in quotes:
        item = {
            "id": quote.id,
            "quote": quote.quote,
            "quote_ja": quote.quote_ja,
            "date_added": quote.date_added,
            "quote_by": None,
            "quote_from": None
        }
        # 拼接关联角色数据
        if quote.quote_by:
            item["quote_by"] = {
                "id": quote.quote_by.id,
                "first_name": quote.quote_by.first_name,
                "last_name": quote.quote_by.last_name,
                "ja_name": quote.quote_by.ja_name,
                "image": quote.quote_by.image.url if quote.quote_by.image else None
            }
        # 按同样逻辑拼接quote_from关联的Media数据即可
        result.append(item)
    return JsonResponse(result, safe=False)

方案3：同时支持读嵌套数据、写外键ID #

如果你的接口同时需要支持写入/修改Quotes数据，不需要额外拆分接口，只要把读和写的字段分开配置即可：

class QuoteSerializer(serializers.ModelSerializer):
    # 写操作时接收外键ID
    quote_by_id = serializers.PrimaryKeyRelatedField(
        queryset=Characters.objects.all(),
        source="quote_by",
        write_only=True,
        required=False
    )
    quote_from_id = serializers.PrimaryKeyRelatedField(
        queryset=Media.objects.all(),
        source="quote_from",
        write_only=True,
        required=False
    )
    # 读操作时返回完整嵌套对象
    quote_by = CharacterSerializer(read_only=True)
    quote_from = MediaSerializer(read_only=True)

    class Meta:
        model = Quotes
        fields = ['id', 'quote', 'quote_ja', 'quote_by', 'quote_by_id', 'quote_from', 'quote_from_id', 'date_added']

配置完成后，前端调用接口拿数据时可以直接拿到完整的关联对象信息，新增/修改数据时只要传对应的quote_by_id、quote_from_id即可，完全不需要前端循环发二次请求拿关联数据，能省很多冗余逻辑。

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