分页，过滤，排序，axios封装

分页，过滤，排序，axios封装

过滤：

settings配置：

INSTALLED_APPS = [
	'django_filters'
]
REST_FRAMEWORK = {
`	#过滤器后端
    'DEFAULT_FILTER_BACKENDS': [
        'django_filters.rest_framework.DjangoFilterBackend',
        # 			'django_filters.rest_framework.backends.DjangoFilterBackend', 包路径有化
    ],
}

View中写入：

from django_filters.rest_framework import DjangoFilterBackend

class Ceshis(ModelViewSet):
    queryset = Ces.objects.all()  #指定要查询的对象
    serializer_class = CesSerializer  #序列化名
    filter_backends = (DjangoFilterBackend)
    filter_fields = ['age','name']  #字段名

urls中写入：

from django.urls import path, include
from . import views
from rest_framework . routers import DefaultRouter


router = DefaultRouter() # 有根路径
router.register(r'ces',views.Ceshis) #配置路由


urlpatterns = [
    path('',include(router.urls)),
]

排序：

from rest_framework.filters import OrderingFilter

class Ceshis(ModelViewSet):
    queryset = Ces.objects.all()
    serializer_class = CesSerializer
    pagination_class = PageNum
    filter_backends = (OrderingFilter)
    OrderingFilter = ('age')  
#前段路由传参为 http://192.168.56.100:8000/主路由/分路由/?ordering=age(要排序的参数)

分页：

from rest_framework.pagination import PageNumberPagination

class PageNum(PageNumberPagination):
    # 查询字符串中代表每页返回数据数量的参数，默认值：None
    page_size_query_param = 'page_num'
    # 查询字符串中代表页码的参数， 有默认值： page
    # page_query_param = 'page'
    # 一页中最多的结果条数
    max_page_size = 3

class Ceshis(ModelViewSet):
    queryset = Ces.objects.all()
    serializer_class = CesSerializer
    pagination_class = PageNum

axios封装：

api.js

import {axios_get,axios_post,axios_delete,axios_put} from './http.js'

export const axios_ces = p  => axios_get("/app01/ces/?page_size=3/",p)

http.js

import axios from 'axios'
axios.defaults.baseURL="http://192.168.56.100:8000/"
axios.defaults.timeout = 1000000;
axios.defaults.headers.post['Content-Type'] = 'application/json';
axios.defaults.headers.put['Content-Type'] = 'application/json';



axios.interceptors.request.use(    
    config => {
        // 每次发送请求之前判断是否存在token，如果存在，则统一在http请求的header都加上token，不用每次请求都手动添加了
        const token = sessionStorage.getItem("jwt_token")   
        console.log(token)  
        if (token){
            config.headers.Authorization = 'JWT '+ token
        }           
        return config;    
    },    
    error => {        
        return Promise.error(error);    
    })

    


axios.interceptors.response.use(    
    // 请求成功
    res => res.status === 200 ? Promise.resolve(res) : Promise.reject(res),    
          
    // 请求失败
    error => {
        if (error.response) {
            // 判断一下返回结果的status == 401？  ==401跳转登录页面。  ！=401passs
            console.log(error.response)
            if(error.response.status===401){
                // 跳转不可以使用this.$router.push方法、
                // this.$router.push({path:'/login'})
                window.location.href="http://127.0.0.1:8080/#/login"
            }else{
                // errorHandle(response.status, response.data.message);
                return Promise.reject(error.response);
            }
            // 请求已发出，但是不在2xx的范围 
        } else {
            // 处理断网的情况
            // eg:请求超时或断网时，更新state的network状态
            // network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏
            // 关于断网组件中的刷新重新获取数据，会在断网组件中说明
            // store.commit('changeNetwork', false);
            return Promise.reject(error.response);
        }
    });


// 封装xiaos请求  封装axios里的get
export function axios_get(url,params){
    return new Promise(
        (resolve,reject)=>{
            axios.get(url,{params:params})
            .then(res=>{
                console.log("封装信息的的res",res)
                resolve(res.data)
            }).catch(err=>{
                reject(err.data)
            })
        }
    )
}


export function axios_post(url,data){
    return new Promise(
        (resolve,reject)=>{
            console.log(data)
            axios.post(url,JSON.stringify(data))
            .then(res=>{
                console.log("封装信息的的res",res)
                resolve(res.data)
            }).catch(err=>{
                reject(err.data)
            })
        }
    )
}

export function axios_put(url,data){
    return new Promise(
        (resolve,reject)=>{
            console.log(data)
            axios.put(url,JSON.stringify(data))
            .then(res=>{
                console.log("封装信息的的res",res)
                resolve(res.data)
            }).catch(err=>{
                reject(err.data)
            })
        }
    )
}

export function axios_delete(url,data){
    return new Promise(
        (resolve,reject)=>{
            console.log(data)
            axios.delete(url,{params:data})
            .then(res=>{
                console.log("封装信息的的res",res)
                resolve(res.data)
            }).catch(err=>{
                reject(err.data)
            })
        }
    )
}