美文网首页
前后端分离_分页

前后端分离_分页

作者: 魔曦帝天 | 来源:发表于2019-10-26 09:37 被阅读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 %}
    

    相关文章

      网友评论

          本文标题:前后端分离_分页

          本文链接:https://www.haomeiwen.com/subject/lnwsvctx.html