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

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

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

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

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

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

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

然后在views.py顶部导入：

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

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

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

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

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

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

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

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

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

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

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

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

<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参数来决定加载哪页的接口。

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

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

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

再看看效果：

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

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

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