DRF分页接口 vue拦截器配置

最新推荐文章于 2023-09-28 20:05:23 发布

原创最新推荐文章于 2023-09-28 20:05:23 发布 · 406 阅读

1 ·

CC 4.0 BY-SA版权

本文档介绍了如何在DRF(Django Rest Framework)后台接收参数以实现分页接口查询，并详细阐述了在Vue.js中使用axios设置拦截器的方法，以确保请求和响应的统一处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

DRF后台接收参数进行分页接口查询

from rest_framework.response import Response
from rest_framework.views import APIView
from .models import taskDateDB
from .Serializer import taskDateDB_Serializer

#API接口
class get_paging(APIView):
    """获取分页数据"""

    def get(self,request):
        '''

        :param page: 页码
        :param amount: 每页的量
        :return: total :全部的条数
        '''

        # 页码 每页的条数  开始的值 结束的切片值
        page = int(request.GET.get("page"))
        amount = int(request.GET.get("amount").strip('/'))

        endCount = page * amount
        startCount = endCount - amount
        
        item = {}
        try:
            total = taskDateDB.objects.all().count()
            if endCount < total:
                result = taskDateDB.objects.all()[startCount:endCount]
            else:
                result = taskDateDB.objects.all()[startCount:]

            resu_lt = []
            for  _ in result:
                items = taskDateDB_Serializer(_)
                resu_lt.append(items.data)

            item["data"] = resu_lt
            item["total"] = total
            item["msg"] = "sucess"
            item["code"] = 200

        except Exception as e:
            item["msg"] = "数据查询失败，请检查值"
            item["code"] = 200

        return Response(item)



#Serializer 文件种的序列化器
from rest_framework import serializers
class taskDateDB_Serializer(serializers.Serializer):
    '''任务模型序列器 '''
    taskName =  serializers.CharField(max_length=255)
    taskDescription = serializers.CharField()
    ipAddr =  serializers.CharField(max_length=255)
    taskDatebase =  serializers.CharField(max_length=255)
    taskTable =  serializers.CharField(max_length=255)
    gitaddr = serializers.CharField(max_length=255)

VUE axios拦截器配置

import qs from "qs";
import Vue from 'vue'
import axios from "axios";

import {Message,Loading} from "element-ui";
// import pub from './publics'
let pub = 'http://127.0.0.1:8000/';
let needLoadingRequestCount = 0;
let loading;


//开启加载图标并根据请求的次数只能请求一个在发送多个请求的时候
export function showFullScreenLoading() {
  if(needLoadingRequestCount === 0){
    startLoading()
  }
  needLoadingRequestCount ++
}

//关闭加载图标当所有的请求结束以后
export function tryHideFullScreenLoading() {
  if(needLoadingRequestCount <= 0) return;
  needLoadingRequestCount--;
  if(needLoadingRequestCount === 0){
    endLoading()
  }
}

//开启加载中图标在请求接口时
function startLoading() {
  loading = Loading.service({
    lock:true,
    text:'加载中。。。。',
    spinner:'el-icon-loading',
    background:'rgba(0,0,0,0.7)'
  })
}

//请求完毕接口关闭加载图标
function  endLoading() {
  loading.close()
}

const service = axios.create({
  baseURL:pub,
  timeout:30000,
});

//请求拦截器
service.interceptors.request.use(config=>{
  showFullScreenLoading();
  config.headers['Content-Type'] = 'application/json;charset=UTF-8';

  if(config.method==='post'){
    config.data=JSON.stringify(config.data);
  }
  return config
},error => {
  Message.error(error);

  //异步执行失败后的执行结果
  Promise.reject(error)
});


// 响应拦截器

service.interceptors.response.use(response=>{
  tryHideFullScreenLoading();
  return response
},error => {
  tryHideFullScreenLoading();
  return Promise.reject(error)
});
export default service



//api文件 编写
import service from './http'

//post请求
export const post = (url,data) =>{
  return service({
    url:url,
    method:'post',
    data
  })
};

//get请求
export const getPersonInfo = (url)=>{
  return service({
    url:url,
    method:'get',
  })
};

// task任务描述接口