Django搭建个人博客平台7---自定义基于Bootstrap的分页组件

Posted 2021-06-27 大聪明Smart

Django搭建个人博客平台7—自定义基于Bootstrap的分页组件

MyBlog-----------------项目名
	blog---------------应用名
		utils----------工具
			page_html.py---分页组件
		migrations-----数据库迁移文件
		admin.py-------后台管理
		models.py------模型文件（表结构）
		views.py-------视图函数（ORM增删改查）
	MyBlog-------------项目目录（配置文件）
		settings.py----配置文件
		urls.py--------路由配置
		wsgi.py--------静态文件转发（部署时会用到）
	templates----------模板文件（html）
	manage.py----------项目运行

分页组件封装

1. 应用app下建立一个utils文件夹

2. 在utils下建议一个page_html.py文件

3. 设计分页器

   分页器设计思想：根据请求携带的参数id返回不同的页数的数据。分页时，首先生成分页列表，根据文章的总页数和每页要展示的条数算出可以展示几页，然后生成相应的url，最后用bootstarp生成页码栏目。

   from django.utils.safestring import mark_safe
   
   
   class MyPagination:
   
       def __init__(self, page_id, num, base_url, get_data=None, page_count=9, record=15):
           """
           初始化数据
           :param page_id: 当前页码数
           :param num: 要展示的总共记录数
           :param base_url: 请求路径
           :param get_data: get请求携带的参数，后边与page参数一起解析，比如搜索携带search参数我们布恩那个忽略掉
           :param page_count: 页数栏显示多少个数，是个奇数
           :param record: 每页显示多少条记录
           """
   
           a, b = divmod(num, record)
           page = a + 1 if b else a  # 这些记录可以分多少页
           mid = page_count // 2  # 页码栏中间值
   
           # GET请求得到的值位字符串或者None
           if page_id is None:
               page_id = 1
           else:
               page_id = int(page_id)
   
           # 请求当前页码小于等于页码栏中间值
           if page_id <= mid:
               page_num_list = range(1, page_count + 1)
           elif page_id > page - mid:
               page_num_list = range(page - page_count + 1, page + 1)
           else:
               page_num_list = range(page_id - mid, page_id + mid + 1)
   
           # 如果总页数小于要显示的页数
           if page < page_count:
               page_num_list = range(1, page + 1)
   
           self.page_id = page_id
           self.num = num
           self.page = page
           self.page_num_list = page_num_list
           self.record = record
           self.base_url = base_url
           self.get_data = get_data
   
       @property
       def get_record(self):
           return self.record
   
       @property
       def get_page_id(self):
           return self.page_id
   
       def html_page(self):
           page_html = '<nav aria-label="Page navigation"><ul class="pagination justify-content-center my-3 pagination-lg">'
           # 首页
           self.get_data['page'] = 1
           # first_page = f'<li><a href="{self.base_url}?{self.get_data.urlencode()}" aria-label="Previous"><span style="font-size: 25px" aria-hidden="true">首页</span></a></li>'
           # page_html += first_page
           # 上一页
           # 小于等于1后不允许点击上一页
           if self.page_id <= 1:
               page_pre = f'<li class="disabled"><a href="javascript:void(0)" aria-label="Previous"><span  aria-hidden="true">&laquo;</span></a></li>'
           else:
               self.get_data['page'] = self.page_id - 1
               # urlencode()会解析get后边携带的参数
               page_pre = f'<li><a href="{self.base_url}?{self.get_data.urlencode()}" aria-label="Previous"><span  aria-hidden="true">&laquo;</span></a></li>'
           page_html += page_pre
           # 动态生成page
           for i in self.page_num_list:
               self.get_data['page'] = i  # 把发来的page动态生成
               if i == self.page_id:
                   page_html += f'<li class="active" ><a href="{self.base_url}?{self.get_data.urlencode()}"> {i} </a></li>'
               else:
                   page_html += f'<li ><a href="{self.base_url}?{self.get_data.urlencode()}"> {i} </a></li>'
           # 下一页
           if self.page_id >= self.page:
               page_last = f'<li class="disabled"><a href="javascript:void(0)" aria-label="Next"><span  aria-hidden="true">&raquo;</span></a></li>'
           else:
               self.get_data['page'] = self.page_id + 1
               page_last = f'<li><a href="{self.base_url}?{self.get_data.urlencode()}" aria-label="Next"><span  aria-hidden="true">&raquo;</span></a></li>'
           page_html += page_last
           # 尾页
           self.get_data['page'] = self.page
           # last_page = f'<li><a href="{self.base_url}?{self.get_data.urlencode()}" aria-label="Previous"><span style="font-size: 25px" aria-hidden="true">尾页</span></a></li>'
           # page_html += last_page
           page_html += '</ul></nav>'
           # mark_safe()后端包裹后，前端就不要safe过滤了，自动识别成标签
           return mark_safe(page_html)
   

4. 把相关参数写入配置文件settings.py

   PAGE_COUNT = 5  # 页数栏显示多少个数,是个奇数
   RECORD = 10  # 每页显示多少条记录
   

5. 分页器的使用

   在views.py的视图函数中使用，导入我们自定义的分页类，对它实例化传入相应的参数。最后通过查出来的所有文章的queryset进行切片后render给templates渲染。

   page_id = request.GET.get('page')  # 获取get请求中的page数据
           num = models.Article.objects.all().count()  # 总共记录数
           base_url = request.path  # 请求路径
           get_data = request.GET.copy()  # 直接调用这个类自己的copy方法或者deepcopy方法或者自己import copy 都可以实现内容允许修改
           
   # 以后直接在settings配置文件中修改即可
           page_count = settings.PAGE_COUNT  # 页数栏显示多少个数
           record = settings.RECORD  # 每页显示多少条记录
           html_obj = MyPagination(page_id=page_id, num=num, base_url=base_url, get_data=get_data, page_count=page_count,
                                   record=record)
           # all_articles = articles | top_articles  # 合并两个queryset
           all_articles = all_articles[(html_obj.page_id - 1) * html_obj.record:html_obj.page_id * html_obj.record]
   

后话

我的博客目前正常运行，这是我自己建立博客网站的记录和总结。如果你按照我的教程去做，一般是不会出现问题 ，但是，总会有bug发生。如果你遇到了问题，欢迎与我交流沟通。

最后，如果你觉得这篇文章对你有用的话，欢迎一键三连，酌情打赏，谢谢！