vue分页

先来看一下后台的代码:

class GoodList(APIView):
    def get(self, request):
        # 从前台获得page的值，如果没有则默认返回3
        print(request.GET.get('page', 3))
        # 从前台获得page的值，如果没有则默认返回3
        order_type = request.GET.get('order_type', 1)
        # 从前台获得page的值，如果没有则默认返回1，然后减一
        start_page = int(request.GET.get('page', 1)) - 1
        # 开始的文件位置
        start_data = start_page * 4
        # 结束的文件位置
        end_data = (start_page + 1) * 4
        # 从库中读取数据
	   all1 = Goods.objects.all()
        # 给出分页的数据
        goods = all1[start_data: end_data]
        # 判断页数是否为整数，如果是整数则不作任何操作，如果不是整数则加一
        if int(len(all1) / 4) != len(all1) / 4:
            # 非整数时的页数
            page_long = int(len(all1) / 4) + 1
        else:
            # 整数时页数
            page_long = int(len(all1) / 4)
        # 序列化输出
        goodser = GoodsSer(goods, many=True)
        # 返回值
        return Response({'code': 200, 'page_long': page_long, 'data': goodser.data, 'item_num': len(all1)})

注意，这里的APIView和Response是使用的restframework里的内容，如果没有使用restframework则将APIView替换为django.view.View，将Response替换成django.http.JsonResponse。

接下来是vue的代码。

先是html的代码:

1
2
3

<div v-for="page in max_page" class="div-float">
            <Button @click="click_jump(page)">{{page}}</Button>
          </div>

这里我使用的是Heyui的Button,和普通的button没有什么区别，只是美观了点。并且此button不能使用v-for，于是我在外面加了个div并使用了foat来使按钮们保持在同一条线上。

<script>
    export default{
data(){
    return {
        max_page: 1,
        page_num: 1,

    }
},
        method:{
	// 根据点击button跳转
	click_jump(page) {
        // 将page_num，即页数赋值为点击的button的页数
        this.page_num = page
        // 获取商品列表
        this.get_goods();
      },
      // 获取商品
      get_goods() {
          // 发送axios请求
        this.axios({
            // 指定要发送的url
          url: 'http://127.0.0.1:8000/goods_list',
            // 选择发送方式
          method: 'get',
            // 指定参数
          params: {'page': this.page_num}
        }).then(res => {
		 // 获取数据
          this.goods_list = res.data.data;
          this.max_page = res.data.page_long;
          this.pagination.total = res.data.item_num;
        })
      },
        }
	}
</script>

逻辑是这样的: 定义一个页数变量，默认值为1，点击之后给页数变量赋值，然后根据页数变量从后台获取数据。

emmm, 分页逻辑很简单，相信大家看代码就会明白，那么本次博客就到这里了~~~