Django实战——复现网站（页码栏跳转设计）/Day3

主体上的一些跳转基本完成了，最后对于这个网站想实现的是页码跳转，也就是在页面下方的页码栏中可以通过点击页码跳转到我们自己django项目建立起的网页中

这个过程只要就是借助django的分页器paginator ,下面直接上代码

首先需要进行对cd_list视图函数的改变：

def cd_list(request):
    cds = CD.objects.all()
    # 创建 Paginator 对象，每页显示 10 个 CD
    paginator = Paginator(cds, 10)  # 每页显示 10 张 CD

    # 获取当前页面的页码
    page_number = request.GET.get('page')

    # 获取当前页的数据
    page_obj = paginator.get_page(page_number)

    # 将 page_obj 传递给模板
    return render(request, 'music/cd_list.html', {'page_obj': page_obj})

这里对模型更改了之后，记得在cd_list.html中同步一下page_obj的名称 

    <div class="pagination">
                <ul>
                    <!--上一页-->
                    {% if page_obj.has_previous %}
                        <li class="prev-page"><a href="?page={{ page_obj.previous_page_number }}">上一页</a>
                        </li>
                    {% else %}
                        <li class="prev-page disabled">
                            <span>上一页</span>
                        </li>
                    {% endif %}

                    <!--页码部分-->
                    {% for num in page_obj.paginator.page_range %}
                        {% if num == page_obj.number %}
                            <li class="active">
                                <span>{{ num }}</span>
                            </li>
                        {% elif num == 1 or num == page_obj.paginator.num_pages or  num >= page_obj.number|add:'-2' and num <= page_obj.number|add:'2' %}
                            <li>
                                <a href="?page={{ num }}">{{ num }}</a>
                            </li>
                        {% elif num == page_obj.number|add:'-6' %}
                            <li>
                                <span>...</span>
                            </li>
                        {% elif num == page_obj.number|add:'6' %}
                            <li>
                                <span>...</span>
                            </li>
                        {% endif %}
                    {% endfor %}

                    <!--下一页-->
                    {% if page_obj.has_next %}
                        <li class="next-page">
                            <a href="?page={{ page_obj.next_page_number }}">下一页</a>
                        </li>
                    {% else %}
                        <li class="next-page disabled">
                            <span>下一页</span>
                        </li>
                    {% endif %}
                </ul>

            </div>
        </div>
    </div>

对代码中的一些模板语法进行解释：

• {% if page_obj.has_previous %}/{% if page_obj.has_next %}：查看当前页面置否存在上一页或者下一页
• {{ page_obj.previous_page_number }}/{{ page_obj.next_page_number }}：输出上一页或者下一页页码
• {{ num }}：输出当前页的页码
• "?page={{ page_obj.next_page_number }}"：指向下一页的链接
• <li class="next-page disabled"><span>下一页</span></li>:制作不满足再按动“下一页”的按钮样式

 对第一个网站的一些基本的功能的复现就差不多是这样啦，后续会对页面设计更高级的动态页面进行django的网页学习和复现