django返回数据
def get(self, request):
res = {
"msg": "未解析的token",
"code": 425,
"data": None,
"totalItems": None
}
token = request.headers.get('Authorization')
if not token:
return JsonResponse(res)
#解析token
token = token.split(" ")[1]
try:
decoded_token = jwt.decode(token, settings.JWT_SECRET_KEY, algorithms=['HS256'])
#解析值
username = decoded_token['username']
user_id = PlanterInfo.objects.filter(username=username).first().nid
#数据列表
PlantAgricutureList = AgricultureInfo.objects.filter(upload_name=user_id, is_chain=1).order_by('nid')
# 创建分页器 (django自带)
pagesize = request.GET.get('pageSize')
paginator = Paginator(PlantAgricutureList, pagesize)
# 获取URL参数中的页码
page = request.GET.get('page')
try:
# 尝试获取指定页码的农业信息
agricuture_page = paginator.page(page)
except PageNotAnInteger:
# 如果页码不是整数,则默认获取第一页
agricuture_page = paginator.page(1)
except EmptyPage:
# 如果页码超出范围,则获取最后一页
agricuture_page = paginator.page(paginator.num_pages)
# 获取当前页的农业信息并转换为字典列表
data = list(agricuture_page.object_list.values())
for transport_man_name in data:
if transport_man_name.get("transport_man_id") is not None:
Transport_Man = LogisticsInfo.objects.get(nid=transport_man_name.get("transport_man_id"))
transport_man_name["transport_man"] = Transport_Man.username
except jwt.ExpiredSignatureError:
res["msg"] = "token已过期"
return JsonResponse(res)
except jwt.InvalidTokenError:
res["msg"] = "token无效"
return JsonResponse(res)
res["code"] = 200,
res["msg"] = "获取成功",
res["data"] = data
res["totalItems"] = paginator.count
return JsonResponse(res)
前端发送数据并绑定(element-ui)
<div class="footer">
<el-pagination background layout="prev, pager, next"
:total="totalItems"
:page-size="pageSize"
v-model="currentPage"
@current-change="handlePageChange">
</el-pagination>
</div>
<script>
export default {
data() {
return {
currentPage: 1, // 当前页码
pageSize: 5, // 每页显示条数
totalItems: 12, // 总条数
totalPages: 2, // 总页数
}
}
methods:{
get_agri_user() {
const token = localStorage.getItem('jwtToken');
if (!token) {
console.error("未找到JWT令牌");
return;
}
axios.get("http://localhost:8000/api/plant/get_agri_user/", {
params: {
page: this.currentPage, // 发送当前页码给后端
pageSize: this.pageSize
},
headers: {
'Authorization': `Bearer ${localStorage.getItem("jwtToken")}`
}
}).then(res => {
if (res.data.code[0] === 200) {
this.agri_user_list = res.data.data
this.totalItems = res.data.totalItems // 更新总条数
// console.log(res);
// console.log(this.totalItems);
this.totalPages = Math.ceil(this.totalItems / this.pageSize); // 更新总页数
// console.log(this.agri_user_list);
}
})
},
},
// 处理页码变化
handlePageChange(page) {
this.currentPage = page;
this.get_agri_user(); // 获取新页码的数据
}
</script>
通过以上就可以实现基本的分页功能,初学习