前后端分离_分页

2019-10-26  本文已影响0人  魔曦帝天

在分页类编写数据,展示前端实现跳转

`page.py`中

from rest_framework.pagination import PageNumberPagination
from rest_framework.response import Response

class Assetpagination(PageNumberPagination):
    page_size = 5  # 每页展示数据个数
    page_size_query_param = 'page_size'
    page_query_param = 'p'
    max_page_size = 10
    def get_paginated_response(self, data):
        return Response({
            'links': self.get_html_context(), # 调用方法
            'count': self.page.paginator.count,
             'results': data,
        })

你的数据样式

image.png
result
image.png

前端接收数据,展示

<script>
    var app = new Vue({
        el: "#app",
        data: {
            servers: ' '
        },
        methods: {
            alldata(url) {
                axios.get(
                    url,
                ).then(
                    res => {
                        this.servers = res.data;
                    });

            }
        },
        mounted() {
            axios.get(
                "http://127.0.0.1:8000/cmdb/assets/",
            ).then(
                res => {
                    this.servers = res.data;
                });
        },
    })
</script>

{% endblock %}
上一篇下一篇

猜你喜欢

热点阅读