如何用Django Rest Framework实现带元信息的格式化HTML数据展示？

要让Django REST框架的接口返回带元信息的HTML页面而非纯JSON，可按照以下步骤操作：

1. 配置渲染器并修改ViewSet逻辑 #

在ViewSet中添加HTML渲染支持，并重写list方法处理HTML请求，同时准备自定义元信息：

from django.shortcuts import render
from django.utils import timezone
from rest_framework import viewsets
from rest_framework.renderers import JSONRenderer, TemplateHTMLRenderer
from .models import Product
from .serializers import ProductSerializer

class ProductViewSet(viewsets.ModelViewSet):
    queryset = Product.objects.all()
    serializer_class = ProductSerializer
    # 支持JSON和HTML两种返回格式
    renderer_classes = [JSONRenderer, TemplateHTMLRenderer]

    def list(self, request, *args, **kwargs):
        # 获取过滤后的产品数据
        queryset = self.filter_queryset(self.get_queryset())
        serializer = self.get_serializer(queryset, many=True)
        # 准备元信息（可根据需求自定义）
        meta_info = {
            'total_count': queryset.count(),
            'request_time': timezone.now().strftime('%Y-%m-%d %H:%M:%S')
        }

        # 根据请求格式返回对应内容
        if request.accepted_renderer.format == 'html':
            return render(request, 'product_list.html', {
                'products': serializer.data,
                'meta': meta_info
            })
        # 默认返回JSON格式
        return super().list(request, *args, **kwargs)

2. 创建HTML模板文件 #

在项目根目录新建templates文件夹，创建product_list.html模板，用于展示元信息和格式化数据：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>产品列表</title>
    <style>
        .meta-section {
            padding: 12px;
            background-color: #f8f9fa;
            border-radius: 6px;
            margin-bottom: 20px;
        }
        .product-card {
            border: 1px solid #dee2e6;
            border-radius: 6px;
            padding: 15px;
            margin-bottom: 12px;
        }
        .product-title {
            margin-top: 0;
            color: #0d6efd;
        }
    </style>
</head>
<body>
    <div class="meta-section">
        <h3>元信息</h3>
        <p>总产品数量：{{ meta.total_count }}</p>
        <p>请求处理时间：{{ meta.request_time }}</p>
    </div>

    <div class="product-container">
        <h2>产品列表</h2>
        {% for product in products %}
        <div class="product-card">
            <h4 class="product-title">{{ product.name }}</h4>
            <p>价格：{{ product.price }} 元</p>
            <p>描述：{{ product.description }}</p>
            <!-- 根据你的Product模型字段，添加更多展示内容 -->
        </div>
        {% empty %}
        <p>暂无产品数据</p>
        {% endfor %}
    </div>
</body>
</html>

3. 配置模板路径 #

在项目settings.py中修改TEMPLATES配置，确保Django能找到模板文件：

TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'templates'],  # 指向根目录下的templates文件夹
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

4. 优化路由配置（可选） #

保留自定义路由的同时，用DRF路由注册简化配置：

from rest_framework.routers import SimpleRouter
from .views import ProductViewSet

router = SimpleRouter()
router.register(r'product', ProductViewSet)

urlpatterns = [
    path('product/list/<int:pk>', ProductViewSet.as_view({'put': 'update'}), name='product-view'),
    *router.urls,  # 引入自动生成的路由
]

访问方式 #

• 浏览器直接访问/product/会自动返回HTML页面（浏览器请求头包含text/html）
• 强制返回JSON：访问/product/?format=json
• 强制返回HTML：访问/product/?format=html

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