前言
学无止境，无止境学。大家好，我是张大鹏，之前在抖音有5万多粉丝，不过现在不拍视频，专心写公众号了。笔者目前是高级Python工程师，之前是全栈工程师，主要擅长Golang和Python开发，对于Java，Vue，React也有一些研究。工作之余，喜欢学习和分享，希望能够通过此公众号”张大鹏520″，将自己学到的东西分享给大家，和大家一起交流，一起成长，一起进步。
今天要给大家分享的是《Django加Vue电商项目实战19 实现用户数据分页》，这是一个系列的教程，从零基础到项目实战。在本教程中，我会给大家介绍如何实现用户列表渲染。比分页查询，中间页获取，判断是否有上一页下一页等。还会配套相关的练习，大家学完以后可以自行通过练习题巩固和加深对知识点的理解。
如果大家需要本教程的PDF电子书或者完整的源码，可以在文末找到获取方式哈。
效果预览
生成用户数据
import os
import sys
# 设置目录查找路径
sys.path.insert(0, '../apps')
# 设置Django配置信息
os.environ.setdefault('DJANGO_SETTINGS_MODULE', 'z08_shop_admin.settings')
import django
django.setup()
# 导入模型
import zdppy_random
from users.models import User
if __name__ == "__main__":
for _ in range(100):
try:
user_dict = {
"username": zdppy_random.random_ename(),
"true_name": zdppy_random.random_name(),
"password": zdppy_random.random_password(),
"mobile": zdppy_random.random_phone(),
"gender": zdppy_random.random_int(0, 2),
"email": zdppy_random.random_email(),
"level": zdppy_random.random_int(1, 5),
"status": zdppy_random.random_int(0, 2)
}
User.objects.create(**user_dict)
except:
pass
# 查询
print(User.objects.all())
路由设计
from django.urls import path
from . import views
app_name = 'user'
urlpatterns = [
# 用户注册
path('register/', views.register, name='register'),
# 用户登录
path('login/', views.login_view, name='login'),
# 用户注销
path('logout/', views.logout_view, name='logout'),
# 用户列表
path('list/', views.user_list, name='user_list'),
]
视图函数
from django.contrib.auth import authenticate, login, logout
from django.core.paginator import Paginator
from django.shortcuts import render, redirect
from django.urls import reverse
from basic.utils import get_middle_pages
from users.models import User
from .forms import LoginForm, RegisterForm
def user_list(request):
"""用户列表"""
if request.method == "GET":
# 分页信息
page = request.GET.get("page", "1")
size = request.GET.get("size", "8")
try:
page = int(page)
size = int(size)
except:
pass
# 查询数据
users = User.objects.filter().order_by("-id")
# 对数据做分页
paginator = Paginator(users, size)
# 计算中间页
middle_pages = get_middle_pages(page, len(paginator.page_range))
# 渲染分页数据
print("中间页：", middle_pages)
return render(request, 'apps/users/list.html', {
"page_data": paginator.page(page),
"middle_pages": middle_pages,
"current_page": page,
})
获取中间页
from typing import List
def get_middle_pages(page: int, total_page: int) -> List[int]:
"""
计算中间页
:param page: 当前页
:param total_page: 总页数
:return: 中间页码
"""
# 计算中间页
middle_pages = []
# 取前面两个
if page == 1:
middle_pages.append(total_page - 1)
middle_pages.append(total_page)
elif page == 2:
middle_pages.append(total_page)
middle_pages.append(1)
else:
middle_pages.append(page - 2)
middle_pages.append(page - 1)
# 中间
middle_pages.append(page)
# 下一个
if page == total_page:
middle_pages.append(1)
if total_page > 1:
middle_pages.append(2)
elif page == total_page - 1:
middle_pages.append(total_page)
middle_pages.append(1)
elif page < total_page:
middle_pages.append(page + 1)
middle_pages.append(page + 2)
return middle_pages
模板
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>大鹏商城后台管理系统</title>
{% include "../../layout/css.html" %}
</head>
<body>
<div class="container-scroller">
{% include "../../layout/top_nav.html" %}
<div class="container-fluid page-body-wrapper">
{% include "../../layout/left_nav.html" %}
<div class="main-panel">
<div class="content-wrapper">
{#顶部标题#}
<div class="page-header">
<h3 class="page-title"> 用户管理 </h3>
<nav aria-label="breadcrumb">
<ol class="breadcrumb">
<li class="breadcrumb-item"><a href="{% url 'index:index' %}">首页</a></li>
<li class="breadcrumb-item active" aria-current="page">用户管理</li>
</ol>
</nav>
</div>
<div class="row">
<div class="col-lg-12 grid-margin stretch-card">
<div class="card">
<div class="card-body">
{#横向搜索表单#}
<div class="card-title">
<form action="">
<div class="row g-3">
<div class="col">
<input type="text" class="form-control" placeholder="用户名">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="真实姓名">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="年龄">
</div>
<div class="col">
<input type="text" class="form-control" placeholder="性别">
</div>
<div class="col">
<button class="btn btn-primary" type="button">搜索</button>
</div>
</div>
</form>
</div>
{#功能按钮组#}
<div class="card-description">
<div class="d-grid gap-2 d-md-block">
<button class="btn btn-sm btn-primary" type="button">导出csv</button>
</div>
</div>
<table class="table table-bordered table-striped text-center">
<thead>
<tr>
<th>#</th>
<th>用户名</th>
<th>真实姓名</th>
<th>性别</th>
<th>手机</th>
<th>会员等级</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody>
{% for user in page_data %}
<tr>
<td>{{ forloop.counter }}</td>
<td>{{ user.username }}</td>
{% if user.true_name %}
<td>{{ user.true_name }}</td>
{% else %}
<td>无</td>
{% endif %}
{% if user.gender == 0 %}
<td>男</td>
{% else %}
<td>女</td>
{% endif %}
<td>{{ user.mobile }}</td>
<td>{{ user.level }}</td>
<td>{{ user.status }}</td>
<td>
<a class="btn btn-sm btn-warning" type="button">编辑</a>
<a class="btn btn-sm btn-danger" type="button">删除</a>
</td>
</tr>
{% empty %}
<tr>
<td colspan="5">暂无数据</td>
</tr>
{% endfor %}
</tbody>
</table>
{#分页信息开始#}
{% include "../../layout/page.html" %}
{#分页信息结束#}
</div>
</div>
</div>
</div>
</div>
{% include "../../layout/footer.html" %}
</div>
</div>
</div>
</body>
</html>
分页信息模板
{#分页信息开始#}
<nav aria-label="..." style="margin-top: 30px;">
<ul class="pagination justify-content-center">
{#上一页#}
{% if page_data.has_previous %}
<li class="page-item">
<a class="page-link" href="?page={{ page_data.previous_page_number }}">上一页</a>
</li>
{% else %}
<li class="page-item disabled">
<a class="page-link">上一页</a>
</li>
{% endif %}
{#中间页#}
{% for page in middle_pages %}
{% if page == current_page %}
<li class="page-item active" aria-current="page">
<a class="page-link" href="?page={{ page }}">{{ page }}</a>
</li>
{% else %}
<li class="page-item">
<a class="page-link" href="?page={{ page }}">{{ page }}</a>
</li>
{% endif %}
{% endfor %}
{#下一页#}
{% if page_data.has_next %}
<li class="page-item">
<a class="page-link" href="?page={{ page_data.next_page_number }}">下一页</a>
</li>
{% else %}
<li class="page-item disabled">
<a class="page-link" href="#">下一页</a>
</li>
{% endif %}
</ul>
</nav>
{#分页信息结束#}
结语
关注我不迷路，欢迎关注我的微信公众号”张大鹏520″，如果您对此文章感兴趣，欢迎点赞收藏，留言评论。
文中所有代码，只需要打赏20元，然后留言评论“已打赏”，即可获取哦。
本文的PDF电子书版，只需要打赏3元，然后留言评论“已打赏”，即可获取哦。
写文章不容易，不喜勿喷哈，如果有想要学编程，学项目，或者在工作中有项目难以单独完成需要提供帮助的同学，欢迎私信我哈。生活不易，想要利用学到的编程知识，业余赚点零花钱。
接项目：网站开发，APP开发，各种管理系统开发。
带徒弟：Python编程教学，Golang编程教学，前端编程教学。
谢谢您！！！
原文始发于微信公众号（张大鹏520）：Django加Vue电商项目实战19 实现用户数据分页
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/48570.html
