开发者社区> 游客pxprrm2iipsfu> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

接口测试平台番外翻页功能

简介: 可能是平台目前在一些公司已经进行大规模应用的缘故,很多因量变引起质变的问题也相继出现,比如接口库的接口过多,一页暂时不全,就想做分页显示这个功能。
+关注继续查看

   正巧最近接到一些反馈分页的需求,就打算插入一节来实现下。

    分页功能开发之前大家要先明白一个原理,我们目前的接口数据,进入接口库的时候,是全部从数据库拿出来,一次性都送给前端html模版的。当接口数过多的时候,难免引起渲染卡顿,显示缓慢,搜索困难,眼花缭乱等问题。

    但是分页功能 绝对不仅仅是简单的前端展示效果。而是在后端就进行了分页处理,有种说法叫异步加载。当然今天我们讲的方法是不是大家可以自己偷偷验证哦~

    我们先在views.py中的 child_json中找到控制接口库的接口列表。

微信图片_20220705220111.png

看到其中的apis了么,这就是我们所有的该项目接口了。现在我们要在它身上动手脚,让其变成分页的状态。


不过我们需要借助一个第三方方法,Paginator ,所以先用pip3来下载它:

微信图片_20220705220116.png

然后在views.py顶部导入:

微信图片_20220705220123.png

(这里要吐槽下网络上的很多博客教程,从来不给你说导入语句,上来就用,这导致很多新人压根不知道要怎么导入,简直就是为了宣传自己而写博客,从来不站在初学者读者的角度上考虑,博主也曾经在这上面浪费掉大量精力。很多平台已经开始打击这种差评多的博客了。)


这三个方法都比较重要,我们先全部导入。分别代表正常,类型错误,空

导入之后我们回到child_json开始搞起:

微信图片_20220705220129.png

大家可以简单看出代码是什么意思,我们把apis进行包装后 变成了P_apis,并且是异步加载 每页最多15条。

而具体页码我们则是 通过前端传入参数page,如果第一次进入没有页码那么就默认为第一页,然后P_apis 根据具体页码 再次变身,成真正的该页码下所有的数据即接口列表。 然后把这些数据传给前端,仍然叫apis的字段就可以了。

但是这里我们 需要想办法给这个 page变成真正的具体页码,还记得我们child_json如果想带上 页码参数 要怎么做了么?就是利用好ooid那个参数。这个备用参数,此时再次显现作用。


我们找到进入接口库的函数:open_apis

给它加上一个page页码参数:

微信图片_20220705220136.png

这个参数 从前端获取,代码如上,具体怎么获取现在先不要管,我们赶紧回到child_json函数中把这个ooid 接收用起来。

微信图片_20220705220144.png

好到此为止,我们后端的改动基本完成,。接下来就是前端html了。为了方便测试,我特意把每页数量降低为2个,并且新增了很多接口:

微信图片_20220705220150.png

我们需要加入 页码这个dom标签组,代码很多,大家直接复制就好:

这其中并不是很简单的,每个页码,下一页 上一页 显示 等等都是需要设置的。因为我们做的就是异步加载,不算小活。

微信图片_20220705220156.png

<div class="pagination" style="padding-left: 70px;">
    <span class="step-links">
        {% if apis.has_previous %}
            <a href="?page={{ apis.previous_page_number }}" aria-labe="Previous">
                <span aria-hidden="true">&laquo;上一页</span>
            </a>&nbsp;&nbsp;
        {% endif %}
        {% for pg in apis.paginator.page_range %}
            {% if apis.number == pg  %}
                <a href="?page={{ pg }}">第{{ pg }}页</a>&nbsp;&nbsp;&nbsp;
            {% else %}
                <a href="?page={{ pg }}">{{ pg }}</a>&nbsp;&nbsp;
            {% endif %}
        {% endfor %}
        {% if apis.has_next %}
            <a href="?page={{ apis.next_page_number }}" aria-label="Next">
                &nbsp;&nbsp;<span>下一页&raquo;</span>
            </a>
        {% endif %}
    </span>
</div>

如上的代码中,我们对当前页码,每一页,上一页 下一页,都进行了复杂啊的判断和超链接设置,超链接很简单,就是在当前页面url的后面加上 page 页码参数即可,因我后台的设计就是接收前端的page参数来决定加载哪页的接口。

写好后,我们重启服务,刷新页面看看效果:

微信图片_20220705220203.png微信图片_20220705220209.png

所有新接口名称都None,大家可以通过接口左面的id判断,可以发现确实实现了异步加载功能。


然后我们恢复每页数据,10个,15个 任你设置。

微信图片_20220705220215.png

再看看效果:


微信图片_20220705220220.png

最后我们稍稍美化下 这个页面显示,起码让它居中:

微信图片_20220705220226.png

居中很简单,删掉原来的div的style,然后给它们再套一层div,并在这个最外层div上设置一个 text-align:center的属性即可。

微信图片_20220705220231.png

如果不想让鼠标放在a标签上显示下划线,就可以在顶部head里的styel里设置统一a标签的格式:

微信图片_20220705220240.png

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
接口测试平台162:并发运行用例功能(1)
接口测试平台162:并发运行用例功能(1)
13 0
接口测试平台番外-正交工具6
接口测试平台番外-正交工具6
16 0
盘点下接口测试平台待开发功能
盘点下接口测试平台待开发功能
21 0
接口测试平台番外-正交工具2
上节我们简单了解了一下什么是正交。本节我们来进行设计与实现: 正好也来复习一下,如何新增一个菜单模块的开发流程
13 0
接口测试平台番外:正交工具过滤功能-3 (难到爆炸)
接口测试平台番外:正交工具过滤功能-3 (难到爆炸)
22 0
接口测试平台代码实现番外:主页终焉-1
好了,不知不觉,该平台已经跨过了130章的教程,主要功能已经实现过半,一些同学也开始实际项目中使用起来,各种提出的改进建议 优化也都接踵而至,其中最多的就是主页,请求改版。
34 0
接口测试平台191: 并发报告(7)
接口测试平台191: 并发报告(7)
16 0
接口测试平台代码实现番外:主页改版-3
接口测试平台代码实现番外:主页改版-3
15 0
接口测试平台代码实现5:亲手创造第一个首页
接口测试平台代码实现5:亲手创造第一个首页
20 0
+关注
游客pxprrm2iipsfu
我去热饭
435
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载