如何在Django中将两个API数据渲染到同一个模板中

问题根源 #

你当前的HomePage类视图里的home和other方法不会被自动触发，因为TemplateView默认通过get_context_data方法向模板传递上下文数据，而非自定义方法。同时两个接口返回的数据类型不同（一个是字典、一个是列表），用同一个response变量传递会覆盖数据，导致模板无法正确渲染。

修改后的代码实现 #

views.py

import requests
from django.views.generic import TemplateView

class HomePage(TemplateView):
    template_name = 'home.html'

    def get_context_data(self, **kwargs):
        # 调用父类方法获取基础上下文
        context = super().get_context_data(**kwargs)
        
        # 获取全球总数API数据
        world_total_response = requests.get('https://api.covid19api.com/world/total').json()
        # 获取南非指定日期的确诊数据
        sa_stats_response = requests.get('https://api.covid19api.com/country/south-africa/status/confirmed?from=2020-09-06T00:00:00Z&to=2020-09-11T00:00:00Z').json()
        
        # 将两个接口数据存入上下文，用不同变量名区分
        context['world_total'] = world_total_response
        context['sa_stats'] = sa_stats_response
        
        return context

home.html

{% extends '_base.html' %}

{% block page_title %} Covid19 Statistics {% endblock %}

{% block content %}

<br>
<br>

<h3 class="text-center">World Total Statistics </h3>
<br>

<div class="container">
    <div class="card-group">
        <div class=" col-md-4">
            <div class="card text-white bg-secondary mb-3" style="max-width: 20rem;">
                <div class="card-body">
                    <h5 class="card-title text-center">Total Confirmed: {{ world_total.TotalConfirmed }}</h5>
                </div>
            </div>
        </div>

        <div class=" col-md-4">
            <div class="card text-white bg-secondary mb-3" style="max-width: 20rem;">
                <div class="card-body">
                    <h5 class="card-title text-center">Total Deaths: {{ world_total.TotalDeaths }}</h5>
                </div>
            </div>
        </div>

        <div class=" col-md-4">
            <div class="card text-white bg-secondary mb-3" style="max-width: 20rem;">
                <div class="card-body">
                    <h5 class="card-title text-center">Total Recovered: {{ world_total.TotalRecovered }}</h5>
                </div>
            </div>
        </div>
    </div>
</div>

<br><br>

<h4 class="text-center">Get Statistics For a Specific Country </h4>

{% for object in sa_stats %}
<div class="card text-light bg-dark" style="width: 35rem;">
    <h3 class="card-header"></h3>
    <div class="card-body">
      <p class="card-text">{{ object.Country }} </p>
      <p class="card-text">{{ object.Date }} </p>
    </div>
  </div>
{% endfor %}

{% endblock%}

urls.py（无需修改）

urlpatterns = [
    path('home', HomePage.as_view(), name='home')
]

关键说明 #

• get_context_data是TemplateView用于构建模板上下文的核心方法，必须重写它来添加自定义数据。
• 用不同的变量名（world_total和sa_stats）存储两个接口的数据，避免覆盖冲突。
• 全球总数API返回的是单条字典数据，模板中直接通过键名访问字段；南非数据返回的是列表，需要用for循环遍历渲染。

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