分页,过滤,排序,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)
})
}
)
}