前后端分离实现分页功能(django+vue)

django返回数据

    def get(self, request):
        res = {
            "msg": "未解析的token",
            "code": 425,
            "data": None,
            "totalItems": None
        }
        token = request.headers.get('Authorization')
        if not token:
            return JsonResponse(res)
        #解析token
        token = token.split(" ")[1]
        try:
            decoded_token = jwt.decode(token, settings.JWT_SECRET_KEY, algorithms=['HS256'])
            #解析值
            username = decoded_token['username']
            user_id = PlanterInfo.objects.filter(username=username).first().nid
            #数据列表
            PlantAgricutureList = AgricultureInfo.objects.filter(upload_name=user_id, is_chain=1).order_by('nid')
            # 创建分页器 (django自带)
            pagesize = request.GET.get('pageSize')
            paginator = Paginator(PlantAgricutureList, pagesize)

            # 获取URL参数中的页码
            page = request.GET.get('page')
            try:
                # 尝试获取指定页码的农业信息
                agricuture_page = paginator.page(page)
            except PageNotAnInteger:
                # 如果页码不是整数，则默认获取第一页
                agricuture_page = paginator.page(1)
            except EmptyPage:
                # 如果页码超出范围，则获取最后一页
                agricuture_page = paginator.page(paginator.num_pages)

            # 获取当前页的农业信息并转换为字典列表
            data = list(agricuture_page.object_list.values())
            for transport_man_name in data:
                if transport_man_name.get("transport_man_id") is not None:
                    Transport_Man = LogisticsInfo.objects.get(nid=transport_man_name.get("transport_man_id"))
                    transport_man_name["transport_man"] = Transport_Man.username
        except jwt.ExpiredSignatureError:
            res["msg"] = "token已过期"
            return JsonResponse(res)
        except jwt.InvalidTokenError:
            res["msg"] = "token无效"
            return JsonResponse(res)
        res["code"] = 200,
        res["msg"] = "获取成功",
        res["data"] = data
        res["totalItems"] = paginator.count
        return JsonResponse(res)

前端发送数据并绑定(element-ui)

<div class="footer">
   <el-pagination background layout="prev, pager, next" 
                  :total="totalItems"
                  :page-size="pageSize"
                  v-model="currentPage"
                  @current-change="handlePageChange">
   </el-pagination>
</div>



<script>
export default {
    data() {
        return {
            currentPage: 1, // 当前页码
            pageSize: 5, // 每页显示条数
            totalItems: 12, // 总条数
            totalPages: 2, // 总页数
        }   
    }
    methods:{
     get_agri_user() {
            const token = localStorage.getItem('jwtToken');
            if (!token) {
                console.error("未找到JWT令牌");
                return;
            }
            axios.get("http://localhost:8000/api/plant/get_agri_user/", {
                params: {
                    page: this.currentPage,  // 发送当前页码给后端
                    pageSize: this.pageSize
                },
                headers: {
                    'Authorization': `Bearer ${localStorage.getItem("jwtToken")}`
                }
            }).then(res => {
                if (res.data.code[0] === 200) {
                    this.agri_user_list = res.data.data
                    this.totalItems = res.data.totalItems // 更新总条数
                    // console.log(res);
                    // console.log(this.totalItems);
                    this.totalPages = Math.ceil(this.totalItems / this.pageSize); // 更新总页数
                    // console.log(this.agri_user_list);
                }
            })

        },
    },
    // 处理页码变化
     handlePageChange(page) {
            this.currentPage = page;
            this.get_agri_user(); // 获取新页码的数据
        }
</script>

通过以上就可以实现基本的分页功能，初学习