四大金钗之夜明珠,动态箭头图片,薄习之争
一、序列化
1 from rest_framework impost serializers 2 from . models import * 3 4 class goodsserializer(serializers,modelserializer): 5 """商品序列化""" 6 class meta: 7 model=goods 8 fields="__all__"
二、分页代码
我要评论 1 from rest_framework.views import apiview
2 from rest_framework.response import response
3 from django.core.paginator import paginator
4 from .serializer import goodsserializer
5 from django.core.paginator import paginator, emptypage, invalidpage
6
7 class goodspageapi(apiview):
8 """
9 分页
10 """
11 def get(self, request, pindex):
12 # 1、获取商品信息
13 goods_list = goods.objects.all()
14 # 2、实例化分页器
15 paginat = paginator(goods_list, 2)
16 # 3、 获取分页
17 paged = paginat.page(pindex)
18 try: # 判断是否有下一页
19 paged.has_next()
20 down_page = paged.next_page_number() # 获取一下页的页码
21 except emptypage: # 如果下一页为空的话，
22 down_page = paged.paginator.num_pages # 获取最后一页的页码
23 paged = paginat.page(down_page)
24
25 try:
26 paged.has_previous() # 判断是否有上一页
27 up_page = paged.previous_page_number() # 获取上页的页码
28 except invalidpage: # 如果没有上一页
29 up_page = 1 # 返回第一页
30 paged = paginat.page(up_page)
31
32 # 4、 做序列化
33 page_serializer = goodsserializer(paged, many=true)
34
35 # 5、 返回数据
36 return response({
37 'code': 200,
38 'data': page_serializer.data,
39 'page_list': [i for i in paginat.page_range],
40 'has_previous': paged.has_previous(), # 判断是否有上一页
41 'has_next': paged.has_next(), # 判断是否有下一页
42 'previous_page_number': up_page, # 返回上一页的页码
43 'next_page_number': down_page, # 返回下一页的页码
44 'page_number': paged.number # 返回当前页页码
45 })
三、urls.py
path('goods_page/<pindex>', views.goodspageapi.as_view()), # 商品分页
四、vue分页展示
<template>
<div>
<table>
<tr>
<td>商品编码</td>
<td>商品名称</td>
<td>商品图片</td>
<td>商品详情</td>
<td>商品价格</td>
</tr>
<tr v-for="goods in goods_list">
<td>{{goods.id}}</td>
<td>{{goods.goods_name}}</td>
<td><img :src="'http://127.0.0.1:8000' + goods.goods_img" alt="" style="width:100px; heigth:100px"></td>
<td>{{goods.goods_content}}</td>
<td>{{goods.goods_price}}</td>
</tr>
</table>
<div>
<button v-for="page in page_list" @click="get_num($event)" :value="page">{{page}}</button>
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
data(){
return{
goods_list: [],
page_list: [],
p: '1'
}
},
methods:{
get_goods(){
var self = this
axios({
method: 'get',
url: 'http://127.0.0.1:8000/myapp/goods_page/'+ this.p
}).then(function(res){
console.log(res.data)
self.goods_list = res.data.data
self.page_list = res.data.page_list
})
},
get_num(event){
this.p = event.target.value // 通过事件获取button的value
console.log(this.p)
this.get_goods() // 点击按钮的时候，重新调用get_goods方法
}
},
created(){ // 页面加载的时候，自动执行下面方法
this.get_goods()
}
}
</script>
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
新手学习Python2和Python3中print不同的用法
Python基于os.environ从windows获取环境变量
网友评论