分页

分页方法一：

安装：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
　　　　　　})
　　　　　　}
　　　　},