Django框架前端如何默认仅展示单条公告，点击查看更多展示全部

问题说明 #

你现有代码将仅展示第一条公告的逻辑写在了index.html中，如果Announcement.html页面没有添加对应判断，就会渲染全部公告。以下是两种可直接落地的实现方案：

方案1：前端本地控制（无额外请求，适合公告数量少的场景） #

1. 修改Announcement.html的公告渲染逻辑 #

替换原有的公告循环代码：

{% include 'navbar.html' %}
<div class="col-12 col-lg-10 col-xl-10 col-sm-10" style="margin: auto;">
  <div class="announcement-container">
    {% for ann in ann %}
    <div class="ann-card {% if not forloop.first %}hidden-ann{% endif %}">
      <div class="card-body">
        <h4 class="card-title" style="text-align: right; border-bottom: 2px solid; color: #46a271; padding: 17px;">
          <p style="color: #0e3d42;">Category: {{ann.name}}</p>
        </h4>
        <br>
        <p class="card-text" style="text-align: center;">{{ann.body|safe}}</p>
        <p> Post created on {{ann.created_date}}</p>
      </div>
    </div>
    {% endfor %}
  </div>
  {% if ann|length > 1 %}
  <button id="showMoreBtn" class="btn btn-primary" style="display: block; margin: 20px auto;">查看更多</button>
  {% endif %}
</div>

2. 新增隐藏样式 #

在你的style.css文件中添加如下规则：

.hidden-ann {
  display: none;
}

3. 添加交互脚本 #

在页面的script标签中添加如下代码：

document.addEventListener('DOMContentLoaded', () => {
  const showMoreBtn = document.getElementById('showMoreBtn')
  if (!showMoreBtn) return
  showMoreBtn.addEventListener('click', () => {
    // 展示所有隐藏的公告
    document.querySelectorAll('.hidden-ann').forEach(item => {
      item.style.display = 'block'
    })
    // 隐藏查看更多按钮，如需实现收起功能可在此处扩展逻辑
    showMoreBtn.style.display = 'none'
  })
})

方案2：后端分页实现（适合公告数量多的场景） #

如果公告数量较多，一次性加载全部会影响性能，可采用分页+异步请求的方式实现：

1. 修改views.py逻辑 #

from django.core.paginator import Paginator
from django.http import JsonResponse

def ann(request):
    ann_all = Announcement.objects.all()
    # 每页返回1条公告
    paginator = Paginator(ann_all, 1)
    page_num = request.GET.get('page', 1)
    page_data = paginator.get_page(page_num)
    
    # 处理异步请求
    if request.headers.get('x-requested-with') == 'XMLHttpRequest':
        res = []
        for item in page_data:
            res.append({
                'name': item.name,
                'body': item.body,
                'created_date': item.created_date.strftime('%Y-%m-%d %H:%M')
            })
        return JsonResponse({
            'list': res,
            'has_more': page_data.has_next()
        })
    
    context = {'ann': page_data}
    return render(request, 'Announcement.html', context)

2. 前端扩展逻辑 #

点击查看更多按钮时，发送ajax请求获取下一页的公告数据，拼接渲染到页面即可，若接口返回无更多数据则隐藏按钮。

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