如何在同一页面同时展示多个Postgres模型的数据

嘿，既然两个模型的字段完全一致，这个需求其实很好实现！核心思路就是后端同时查询两个模型的数据，一起传递到前端，然后在页面的不同区域分别渲染就行。下面分步骤给你具体说明：

1. 后端修改：一次性获取两个数据集 #

假设你用的是Django（毕竟处理Postgres模型的常见Web框架），原来的视图可能只查询其中一个模型，现在改成同时拉取两个：

from django.shortcuts import render
from .models import CurrentAlLeagueStandings, CurrentNlLeagueStandings

def combined_standings(request):
    # 拉取AL联盟所有数据
    al_teams = CurrentAlLeagueStandings.objects.all()
    # 拉取NL联盟所有数据
    nl_teams = CurrentNlLeagueStandings.objects.all()
    # 把两个数据集都传给模板
    return render(request, 'combined_standings.html', {
        'al_standings': al_teams,
        'nl_standings': nl_teams
    })

如果是Flask或者其他框架，逻辑完全一样：同时查询两个模型的数据，将它们加入模板上下文（或者接口返回的JSON里）。

2. 前端模板：复用结构分别渲染 #

因为字段完全相同，你可以直接复用HTML表格的结构，只是分别循环两个数据集。比如用Jinja2模板的话：

<div class="standings-wrapper">
    <!-- AL联盟区域 -->
    <section class="league-section">
        <h2>American League Standings</h2>
        <table class="standings-table">
            <thead>
                <tr>
                    <th>Team Name</th>
                    <th>Wins</th>
                    <th>Losses</th>
                    <th>Win %</th>
                    <!-- 其他字段根据你的模型补充 -->
                </tr>
            </thead>
            <tbody>
                {% for team in al_standings %}
                <tr>
                    <td>{{ team.team_name }}</td>
                    <td>{{ team.wins }}</td>
                    <td>{{ team.losses }}</td>
                    <td>{{ team.win_percentage }}</td>
                    <!-- 对应模型里的其他字段 -->
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </section>

    <!-- NL联盟区域 -->
    <section class="league-section">
        <h2>National League Standings</h2>
        <table class="standings-table">
            <thead>
                <tr>
                    <th>Team Name</th>
                    <th>Wins</th>
                    <th>Losses</th>
                    <th>Win %</th>
                    <!-- 和上面表头完全一致 -->
                </tr>
            </thead>
            <tbody>
                {% for team in nl_standings %}
                <tr>
                    <td>{{ team.team_name }}</td>
                    <td>{{ team.wins }}</td>
                    <td>{{ team.losses }}</td>
                    <td>{{ team.win_percentage }}</td>
                    <!-- 对应模型里的其他字段 -->
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </section>
</div>

如果是用原生JS通过API获取数据，那可以让后端写一个接口同时返回两个数据集，然后复用渲染函数：

// 请求同时返回两个联盟数据的接口
fetch('/api/combined-standings')
  .then(res => res.json())
  .then(data => {
    // 渲染AL数据到指定容器
    renderStandingsTable(data.al_standings, 'al-container');
    // 渲染NL数据到另一个容器
    renderStandingsTable(data.nl_standings, 'nl-container');
  });

// 复用的渲染函数，因为字段相同
function renderStandingsTable(standings, containerId) {
  const container = document.getElementById(containerId);
  const table = document.createElement('table');
  table.className = 'standings-table';

  // 创建表头
  const headerRow = document.createElement('tr');
  ['Team Name', 'Wins', 'Losses', 'Win %'].forEach(text => {
    const th = document.createElement('th');
    th.textContent = text;
    headerRow.appendChild(th);
  });
  table.appendChild(headerRow);

  // 创建表体
  const tbody = document.createElement('tbody');
  standings.forEach(team => {
    const row = document.createElement('tr');
    row.innerHTML = `
      <td>${team.team_name}</td>
      <td>${team.wins}</td>
      <td>${team.losses}</td>
      <td>${team.win_percentage}</td>
    `;
    tbody.appendChild(row);
  });
  table.appendChild(tbody);

  container.appendChild(table);
}

3. 样式优化（可选） #

给页面加一点CSS，让两个联盟的 standings 布局更美观，比如并排显示：

.standings-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    padding: 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

.league-section h2 {
    text-align: center;
    color: #2c3e50;
}

.standings-table {
    width: 100%;
    border-collapse: collapse;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.standings-table th, .standings-table td {
    padding: 0.8rem;
    text-align: left;
    border-bottom: 1px solid #ecf0f1;
}

.standings-table th {
    background-color: #3498db;
    color: white;
}

这样就能在同一个页面里完美展示两个联盟的 standings 数据了，而且因为字段一致，大部分代码都能复用，不会有冗余~

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