Sorry, your browser cannot access this site
This page requires browser support (enable) JavaScript
Learn more >

Gray-Ice

个人博客兼个人网站

先来看一下后台的代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
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来使按钮们保持在同一条线上。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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, 分页逻辑很简单,相信大家看代码就会明白,那么本次博客就到这里了~~~

评论



愿火焰指引你