這里提供兩種分頁(yè)方法

一種是手寫(xiě)分頁(yè),不常用,但是明白一下分頁(yè)的邏輯實(shí)現(xiàn)

第二種是用heyui提供的組件.很多功能都給封裝好了,用起來(lái)也比較美觀.

---

---

手寫(xiě)分頁(yè)

后端接口

class GoodList(APIView):def get(self, request):# 當(dāng)前頁(yè)page = int(request.GET.get('page', 1))# 一頁(yè)有多少條商品size = int(request.GET.get('size', 1))# 定義從哪里開(kāi)始切片data_start = (page - 1) * size# 定義切到哪data_end = page * size#查詢數(shù)據(jù)goodslist=Goods.objects.all()[data_start:data_end]#查詢總數(shù)量count=Goods.objects.count()# 序列化操作goods_ser=GoodsSer(goodslist,many=True)# 返回響應(yīng)return Response({'total':count,'data':goods_ser.data})

前端頁(yè)面

<template> ......<!--自主分頁(yè)--><div><!-- v-show 判斷當(dāng)前頁(yè)數(shù)是否有需要顯示上或下一頁(yè) --><Button v-show="lastpage" @click="getdata(lastpage)">上一頁(yè)</Button><Button v-for="index in all" @click="getdata(index)">{{index}}</Button><Button v-show="nextpage" @click="getdata(nextpage)">下一頁(yè)</Button></div> </template><script>export default {data() {return {//自主分頁(yè)total: 0,//商品總數(shù)curpage: 1,//當(dāng)前頁(yè)all: 0,//總頁(yè)數(shù)lastpage: 0,//上一頁(yè)nextpage: 0,//下一頁(yè)size: 2,//每頁(yè)顯示多少//商品列表goodlist: '',mounted() {//調(diào)用自主分請(qǐng)求this.getdata(1);},methods: {//自主分頁(yè)接口getdata: function (mypage) {this.axios.get('http://localhost:8000/goodlist/', {params: {page: mypage,size: this.size}}).then(res => {this.goodlist = res.data.data;console.log(res.data.data);//判斷上一頁(yè)if (mypage == 1) {this.lastpage = 0;} else {this.lastpage = mypage - 1}// 計(jì)算總頁(yè)數(shù) Math.ceil 向上取整this.all = Math.ceil(res.data.total / this.size);//判斷下一頁(yè)if (mypage == this.all) {this.nextpage = 0} else {this.nextpage = mypage + 1}});},}}</script><style></style>

heyui 組件庫(kù)

后端代碼不用做修改.可以直接復(fù)用.heyui前端就相對(duì)來(lái)說(shuō)簡(jiǎn)單了許多.

<template>......<!--heyui分頁(yè)--><br></div><div><!-- layout可以自定義控制顯示那些組件和順序.--><Pagination v-model="pagination" @change="change" layout="sizes,pager,jumper" align="center"></Pagination></template><script>export default {data() {return {//分頁(yè)器變量pagination: {page: 1,size: 3,total: 5},//商品列表goodlist: '',},mounted() {//請(qǐng)求商品接口返回?cái)?shù)據(jù)this.axios.get('http://localhost:8000/goodlist/', {params: {page: 1, size: 3}}).then(res => {this.goodlist = res.data.data;console.log(res.data.data)});},methods: {//分頁(yè)器事件change: function () {//二次請(qǐng)求this.axios.get('http://localhost:8000/goodlist/', {params: {page: this.pagination.page,size: this.pagination.size}}).then(res => {this.goodlist = res.data.data;console.log(res.data.data)});},}}</script><style></style>

兩種分頁(yè)的效果.上邊的是heyui組件,下邊是手寫(xiě)分頁(yè)器.

HEY UI 分頁(yè)文檔:https://www.heyui.top/component/data/view/page

Element 組件文檔:https://element.eleme.cn/#/zh-CN/component/installation

功能多多 各自挖掘吧.

總結(jié)

以上是生活随笔為你收集整理的Django+vue 分页展示的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。