Vue + Django + BootstrapVue实现分页，前端后台实例讲解

1、后台Django代码

def storage(req):
    '''
    存储图片接口：
        1、根据roomid查询出数据
    '''
    # 从数据库选出所需数据
    roomid = req['roomid']
    data_list = Memory.objects.filter(roomid=roomid).order_by('-addtime')
    # 构造分页器
    page_robot = Paginator(data_list, 2)
    page_num = req.get('page')   根据page的值得到对应的数据
    try:
        data_list = page_robot.page(page_num)
    except InvalidPage:
        data_list = page_robot.page(1)
    except ValueError:
        data_list = page_robot.page(1)
    except EmptyPage:
        data_list = page_robot.page(page_robot.page_num)
    except PageNotAnInteger:
        data_list = page_robot.page(1)
    serializer = MemorySerializer(data_list, many=True).data
    context = {"status": "success", "data": serializer}
    return context

2、前端组件Vue代码