Flask中的分页逻辑和对应前端样式

Posted 2021-04-12 老朱串串香

@app.route('/view', methods=['GET'])
def view():
    num = len(Word.query.order_by(Word.id).all())
    # 最大页数
    all_p = num // 15 + 1
    p = int(request.args.get('p','1'))
    mess = Word.query.order_by(Word.id.desc()).all()
    no=len(mess)
    msg1 = []
    for i in range(15,2,-1):
        if (15*p-i)<no:
            msg1.append(mess[15*p-i])
        else:
            break
    # 每页数显示(15个)
    lis = []
    if (all_p > 5):
        if (p - 2 >= 1 and p + 2 <= all_p):
            lis =list(range(p - 2, p + 3))
        elif (p<3):
            lis = list(range(1,6))
        else:
            lis = list(range(all_p-4,all_p+1))
    else:
        lis = list(range(1, all_p + 1))
    print('all_p:',all_p,'p:',p,'mess:',mess,'lis:',lis)
    return render_template('view.html', p=p, mess=msg1, all_p=all_p, lis=lis)

这是我们的完整的代码处理部分，首先我们只接收一个参数，就是前端传过来的页码第几页，然后查询数据库中的记录数，我们定义每页显示15条，除以15就是总页码数，然后定义展示的页码数为5页。然后就开始分层次处理了，这里需要自己画图分层次，分页有两种逻辑，今天先说简单的：

这里总共有5个变量：no为条数，all_p为实际页数，p为当前页码，lis为要显示的页码数，msg1为当前页所有详细记录。“显然”，我们只需要分好要显示的页码数即可，前端接收到然后循环列表把当前页码高亮显示即可，然后开始划分层次：

1、实际页数小于等于5页，我们就展示所有的all_p,else部分

2、当前页码大于等于3页小于等于总页数-2的，即buffer为我们定义的页码数除以2，如果是奇数就-1再除以2，建议为奇数，直观好想。然后返回它的前两页，当页和后两页

3、当前页码数小于等于buffer=2的，就展示前5页

4、当前页码数大于总页码数-buffer的，就展示最后5页

然后需要注意的一点是我在这里查询到所有留言item后，获得的是列表，如果像切片一样获取条目mess[xx,xx],会报 out of range,因为它的条目都是一个个对象 而不是普通数据类型，所以我干脆就先获取所有存在的记录数no，依次加一，加到最后不存在了就break，当然这种方法不是高级的，有小伙伴有高级想法欢迎告知谢谢。然后有了存在的索引就能直接直接获取到相应条目了。

然后前端：

<div class="content" style="position:absolute;top:200px;">
{% for i in msg1 %}
<div class="1" style="float:left;width:250px;font-size:40px;color:#FFA500;">&nbsp&nbsp&nbsp{{i.name}}</div><div class="2" style="float:left;width:250px;font-size:40px;color:#FFA500;">{{i.age}}</div><div class="3" style="float:left;width:300px;font-size:40px;color:#FFA500;">{{i.word}}</div><br><br>
<br>
{% endfor %}
</div>
<div class="age" style="width:100%;display:flex;flex-direction:row;justify-content:space-between;position:absolute;top:1700px;">
<div class="page" style="float:left;">
{% if p != 1%}
<a href="view?p=1" style="font-size:40px;color:white;">首页</a>
<a href="view?p={{p-1}}" style="font-size:40px;color:white;">上一页</a>
{% endif %}
</div>

<div class="pag" style="display:inline-block;">
{% for j in lis %}
{% if j == p %}
<span style="font-size:40px;color:white;">第{{j}}页</span>
{% else %}
<a href = "view?p={{j}}" style="font-size:40px;color:white;">第{{j}}页</a>
{% endif %}
{% endfor %}
</div>

<div class="pge" style="padding-right:11px">
{% if p != all_p%}
<a href="view?p={{p-1}}"  style="font-size:40px;color:white;">下一页</a>
<a href="view?p={{all_p}}" style="font-size:40px;color:white;">尾页</a>
{% endif %}
</div>
</div>

这里通用flask自备的jinjia2渲染模板引擎，花括号来接收变量并判断逻辑，循环列表依次渲染。

css样式：因为我把整个背景图片 相对定位了，这样内容绝对定位就能放在里面了。然后讲下让几个div横向排列且 平均排列自适应的方法：

display:flex;flex-direction:row;justify-content:space-between;

浮动，然后轴向为横轴，平均布局为靠两边对齐方式。

以上就是分页及前端技巧了，小伙伴们是不是get到了呢。