定义一个没有分布的web页面（如下代码）django的url
第一步：利用django的url urlpatterns = [ path('user_list/', views.user_list), ]
第二步：定义跳转到web的函数
# 用一个列表模拟数据库的数据
# 用一个列表模拟数据库的数据
LIST = []
for i in range(1000):
LIST.append(i)
def user_list(request):
return render(request, 'user_list.html', {'li' : LIST})
第三步：定义web页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<ul>
{% for item in li %}
{% include 'li.html' %}
{% endfor %}
</ul>
</body>
</html>
下面正式利用for循环编写我们的web分布小案例
思路：
def user_list(request):
# 利用分片的方式，可以把所有的数据传递到web
data = LIST[:10]
data = LIST[10:20]
return render(request, 'user_list.html', {'li' : data})
这样的我可以得到的链接为：http://127.0.0.1:8000/user_list/?p=3 #?p=数字，代码就在哪一个页面上，所以我们可以把代码优化成以下
def user_list(request):
current_page = int(request.GET.get('p', 1)) # p是代码的页数
start_page = (current_page - 1) * 10 # 分片开始位置
end_page = current_page * 10 # 分片结束位置
data = LIST[start_page:end_page]
return render(request, 'user_list.html', {'li': data})
可以分布了，如下图 所示
第二步：可以分布后，我们就开始做跳转了
在web页面添加div，如下图所示
既然p的值已经能获取到，或者我们可以从后端传递参数过来
如果我们的页数，有很多页面，这样我们就可以利用for循环赋值给page_str这个变量了
# 用一个列表模拟数据库的数据
LIST = []
for i in range(1000):
LIST.append(i)
def user_list(request):
current_page = int(request.GET.get('p', 1)) # p是代码的页数
start_page = (current_page - 1) * 10 # 分片开始位置
end_page = current_page * 10 # 分片结束位置
data = LIST[start_page:end_page]
page_count = len(LIST) // 10 + 1
page_str = []
for i in range(page_count):
temp = '<a href="/user_list/?p=%s">%s</a>' % (i, i)
page_str.append(temp)
page_str = "".join(page_str) # 将字符串重新拼接，相当于去引号。
return render(request, 'user_list.html', {'data': data, 'page_str': page_str})
不过在这之前我们要先修改一下，web的css样式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pagination .page{ display: inline-block; padding: 5px; background-color: cyan; margin: 5px; } .pagination .page.active{ background-color: brown; color: white; } </style> </head> <body> <ul> {% for item in data %} {% include 'li.html' %} {% endfor %} </ul> <div class="pagination"> {{ page_str |safe }} </div> </body> </html>
def user_list(request): current_page = int(request.GET.get('p', 1)) # p是代码的页数 start_page = (current_page - 1) * 10 # 分片开始位置 end_page = current_page * 10 # 分片结束位置 data = LIST[start_page:end_page] page_count = len(LIST) // 10 + 1 page_str = [] for i in range(page_count): if current_page == i: temp = '<a class="page active" href="/user_list/?p=%s">%s</a>' % (i, i) else: temp = '<a class="page" href="/user_list/?p=%s">%s</a>' % (i, i) page_str.append(temp) page_str = "".join(page_str) # 将字符串重新拼接，相当于去引号。 return render(request, 'user_list.html', {'data': data, 'page_str': page_str})
下面我们开始根据判断，把跳转的控制一下了
通过控制range循环的范围，就可以做到了
然后我还再添加一个上下页面的功能
前端代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .pagination .page { display: inline-block; padding: 5px; background-color: cyan; margin: 5px; } .pagination .page.active { background-color: brown; color: white; } </style> </head> <body> <ul> {% for item in data %} {% include 'li.html' %} {% endfor %} </ul> <div class="pagination"> {{ prev_page |safe }} {{ page_str |safe }} {{ next_page |safe }} <input type="text" placeholder="页数" name="get_page"> <input id="enter" type="button" value="确定"/> </div> <script src="/static/jquery-1.12.4.js"></script> <script> $(function () { $('#enter').click(function () { var go_enter = $('#enter').prev().val(); location.href = "/user_list/?p=" + go_enter }); }) </script> </body> </html>
后端代码如下：
def user_list(request): current_page = int(request.GET.get('p', 1)) # p是代码的页数 start_page = (current_page - 1) * 10 # 分片开始位置 end_page = current_page * 10 # 分片结束位置 data = LIST[start_page:end_page] # 传参页数 all_page_count = len(LIST) // 10 + 1 # 获取数据库数据，形成的总页数 if current_page <= 1: prev_page = '<a class="page" href="/user_list/?p=1">上一页</a>' else: prev_page = '<a class="page" href="/user_list/?p=%s">上一页</a>' % (current_page - 1) if current_page >= all_page_count: next_page = '<a class="page" href="/user_list/?p=%s">下一页</a>' % (all_page_count) else: next_page = '<a class="page" href="/user_list/?p=%s">下一页</a>' % (current_page + 1) page_str = [] def choose(): if current_page == i: temp = '<a class="page active" href="/user_list/?p=%s">%s</a>' % (i, i) else: temp = '<a class="page" href="/user_list/?p=%s">%s</a>' % (i, i) page_str.append(temp) if all_page_count <= 10: for i in range(all_page_count): choose() elif current_page >= all_page_count - 5: for i in range(all_page_count - 9, all_page_count + 1): choose() else: if current_page <= 5: for i in range(1, 11): choose() else: for i in range(current_page - 5, current_page + 5): choose() page_str = "".join(page_str) # 将字符串重新拼接，相当于去引号。 return render(request, 'user_list.html', {'data': data, 'page_str': page_str, 'prev_page': prev_page, 'next_page': next_page})
这样就可以实现分页的功能了，这里有个小bug，就是跳转时未做判断长度，而且未输入值的时候也会报错。（本案例纯属练习用）
浙公网安备 33010602011771号