分页
分页方法一:
安装:npm i element-ui -S
前端配置:import ElementUI from 'element_ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
<el-pagination :page-size="1" :total="total" @current-change="fanye"
></el-pagination> 定义: total=0 fanye(page) { this.axios.get('goods/?page=' + page + '&cate_id=' + this.cate_id).then(res => { console.log(res.data) this.goods_li = res.data.goods_li this.total = res.data.total }) 后端配置: def get(self, request): # 获取 page = int(request.GET.get('page', 1)) cate_id = request.GET.get('cate_id') print(cate_id) # 码数 size = 1 start = (page - 1) * size end = page * size goods_li = Goods.objects.filter(cate_id=cate_id)[start:end] # 序列化 goods_li_ser = GoodsSer(goods_li, many=True) # 总数 total = Goods.objects.filter(cate_id=cate_id).count() res = {} res['goods_li'] = goods_li_ser.data res['total'] = total # 返回 return Response(res)
分页方法二:
后端代码:
导包:from django.core.paginator import Paginator
def get(self, request):
# 获取当前页页码
current_page = request.GET.get('current_page')
# 获取全部数据
goods_list = Goods.objects.all()
# 实例化分页器
pagenotor = Pagintor(goods_list, 1)
# 获取当前页数据
paged = pagenotor.page(current_page)
# 序列化
goods_serializer = GoodsSer(paged, many=True)
# 返回数据
return Response({
'data': goods_serializer.data,
'page_list': [i for i in pagenotor.page_range],
'page_sum': pagenotor.num_pages
})
前端代码:
<button @click="up_page">上一页</button>
<button v-for="p in page_num" :key="p" @click="toNextPage(p)">{{p}}</button>
<button @click="down_page">下一页</button>
data(){
return{
page_list:[],
current_page:1,
page_num:0,
}
},
created(){
this.get_goods()
#每翻页一次都需要调用一次
},
methods:{
up_page(){
#上一页
if(this.current_page > 1){
this.current_page --
this.get_goods()
}
},
down_page(){
#下一页
if(this.current_page <this.page_num){
this.current_page ++
this.get_goods()
}
},
toNextPage(page_num) {
#页码
this.current_page = page_num
// 赋值成功以后, 重新调用获取商品的方法
this.get_goods()
},
get_goods(){
this.axios.get('goods/?current_page='+this.current_page).then(res=>{
console.log(res.data)
this.goods_li=res.data.data
this.page_list=res.data.page_list
this.page_num=res.data.page_sum
})
}
},