定义一个没有分布的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，就是跳转时未做判断长度，而且未输入值的时候也会报错。（本案例纯属练习用）