如何在Django中渲染含序列化Ingredient数据的HTML页面？

你已经基于Django REST Framework实现了API的序列化逻辑，要把这些序列化后的数据用来渲染HTML页面，只需要新增一个常规的Django视图（而非API视图），将序列化的数据传递给模板即可，具体步骤如下：

1. 编写渲染HTML的视图 #

在views.py中添加一个视图函数（或基于类的视图），用来获取数据、执行序列化，再将序列化结果传入模板：

方式一：函数视图 #

from django.shortcuts import render
from .models import Ingredients
from .serializer import IngredientSerializer

def ingredients_list(request):
    # 获取所有食材数据
    ingredients = Ingredients.objects.all()
    # 用你已有的序列化器处理数据
    serializer = IngredientSerializer(ingredients, many=True)
    # 将序列化后的字典数据传递给模板
    return render(request, 'ingredients/list.html', {'ingredients': serializer.data})

方式二：类视图（可选） #

如果更习惯用类视图，可以继承TemplateView：

from django.views.generic import TemplateView
from .models import Ingredients
from .serializer import IngredientSerializer

class IngredientsListView(TemplateView):
    template_name = 'ingredients/list.html'

    def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        # 复用序列化逻辑
        ingredients = Ingredients.objects.all()
        serializer = IngredientSerializer(ingredients, many=True)
        context['ingredients'] = serializer.data
        return context

复用API ViewSet的逻辑（可选） #

如果想复用IngredientsViewSet里的权限、过滤等逻辑，避免重复代码，可以直接调用ViewSet的方法：

from django.shortcuts import render
from .views import IngredientsViewSet

def ingredients_list(request):
    # 初始化ViewSet并传入当前请求
    viewset = IngredientsViewSet(request=request)
    # 应用ViewSet的过滤逻辑
    queryset = viewset.filter_queryset(viewset.get_queryset())
    # 使用ViewSet指定的序列化器
    serializer = viewset.get_serializer(queryset, many=True)
    return render(request, 'ingredients/list.html', {'ingredients': serializer.data})

2. 配置URL路由 #

在项目或应用的urls.py中添加对应路由，让请求能映射到上面的视图：

from django.urls import path
from .views import ingredients_list  # 或者IngredientsListView

urlpatterns = [
    # 保留你原有的API路由（比如ViewSet的路由）
    # ...
    # 新增HTML页面的路由
    path('ingredients/', ingredients_list, name='ingredients-list'),
    # 如果是类视图则写：
    # path('ingredients/', IngredientsListView.as_view(), name='ingredients-list'),
]

3. 创建HTML模板 #

在templates/ingredients/目录下创建list.html模板，遍历序列化后的数据渲染页面：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>食材列表</title>
</head>
<body>
    <h1>食材列表</h1>
    <div class="ingredient-list">
        {% for ingredient in ingredients %}
            <div class="ingredient-item">
                <h3>{{ ingredient.title }}</h3>
                <p>单价: ${{ ingredient.unit_price }}</p>
                <p>{{ ingredient.description|default:"暂无描述" }}</p>
                <p>所属分类ID: {{ ingredient.collection }}</p>
            </div>
        {% empty %}
            <p>暂无食材数据</p>
        {% endfor %}
    </div>
</body>
</html>

额外说明 #

• 序列化后的serializer.data是标准的Python字典/列表结构，可以直接在Django模板中使用模板语法调用
• 如果需要展示分类（collection）的详细信息（比如分类名称），可以修改IngredientSerializer，嵌套CollectionSerializer：

  class IngredientSerializer(serializers.ModelSerializer):
      collection = CollectionSerializer()
      class Meta:
          model = Ingredients
          fields = ['id','title','unit_price','description','collection']
  

  之后模板里就能直接写{{ ingredient.collection.title }}来展示分类名称

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