Flask快速實現(xiàn)分頁效果示例
先上整體效果圖:
然后是分頁圖詳情:
與本例相關的路由和模板包括:
路由:views.py
@app.route('/blog/list/<int:page>', methods=['GET']) @login_required def blog_list(page=None): ...
模板:blog_list.html和pages.html
blog_list.html作為博客頁面,pages.html模板為分頁頁面,呈現(xiàn)時會在blog_list.html中導入pages.html的內容。
{%import 'pages.html' as pg%} {{pg.my_paginage(pagination,'art_list')}}
首先從路由開始:
路由的設計思路是根據(jù)查詢的頁碼作為參數(shù),利用FlaskSQLAlchemy的Model進行查詢并對查詢結果進行分頁處理。
@app.route('/blog/list/<int:page>', methods=['GET']) @login_required def blog_list(page=None): #每個人只能看自己發(fā)表的blog if not page: page = 1 from models import Blog from models import User user_id = User.query.filter_by(username=session['user']).first().id #paginate方法返回一個sqlalchemy.Pagination類型對象 blogs = Blog.query.filter_by(user_id=user_id).order_by(Blog.addtime.desc()).paginate(page=page,per_page=3) category=[(1, '情感'), (2, '星座'), (3, '愛情')] return render_template('blog_list.html', title='博客列表',session=session,blogs=blogs.items,category=category,pagination=blogs)
分析一下上述代碼:
1. @app.route裝飾器定義了路由
2. @login_required是自定義裝飾器,用來限定只有登錄用戶才可以瀏覽博客列表,未登錄用戶會進入登錄頁面
3. 作為Model的Blog中有一個外鍵屬性user_id引用著用戶表,用來記錄博客的作者信息
4. blogs是一個FlaskSQLAlchemy中的Pagination類型對象。一個Query對象調用paginate方法就獲得了Pagination對象。paginate方法傳入了兩個參數(shù),一個是當前頁,另一個是每一頁最多顯示多少博客。paginate的返回值為代表當前頁的Pagination對象。一個Paginationi對象的常用屬性有:
- items 當前頁面中的所有記錄(比如當前頁上有5條記錄,items就是以列表形式組織這5個記錄)
- query 當前頁的query對象(通過query對象調用paginate方法獲得的Pagination對象)
- page 當前頁碼(比如當前頁是第5頁,返回5)
- prev_num 上一頁頁碼
- next_num 下一頁頁碼
- has_next 是否有下一頁 True/False
- has_prev 是否有上一頁 True/False
- pages 查詢得到的總頁數(shù) per_page 每頁顯示的記錄條數(shù)
- total 總的記錄條數(shù)
常用方法有:
- prev() 上一頁的分頁對象Pagination
- next() 下一頁的分頁對象Pagination
- iter_pages(left_edge=2,left_current=2,right_current=5,right_edge=2)
- iter_pages 用來獲得針對當前頁的應顯示的分頁頁碼列表。
- 假設當前共有100頁,當前頁為50頁,按照默認的參數(shù)設置調用iter_pages獲得的列表為:
- [1,2,None,48,49,50,51,52,53,54,55,None,99,100]
5. 渲染blog_list.html模板時,傳入渲染時需要的若干參數(shù),比較重要的是傳入blogs參數(shù)用來讓模板顯示查詢出來的應該在本頁面中顯示的博客信息,另外是傳入pagination參數(shù),利用傳入的Pagination對象的相關屬性方法動態(tài)生成分頁的相關內容。
看一下pages.html模板的內容:
{%macro my_paginate(pagination,url)%} <nav> <ul class="pagination"> {%if pagination.has_prev%} <li class="page-item active"><a class="page-link" href="{{url_for(url,page=pagination.page-1)}}" rel="external nofollow" >上一頁</a></li> {%else%} <li class="page-item disabled"><a class="page-link" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >上一頁</a></li> {%endif%} {%for page in pagination.iter_pages(1,1,3,1)%} {%if page%} <li class="page-item {%if page==pagination.page%}active{%endif%}"><a class="page-link" href="{{url_for(url,page=page)}}" rel="external nofollow" >{{page}}</a></li> {%else%} <li class="page-item disabled"><a class="page-link" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >…</a></li> {%endif%} {%endfor%} {%if pagination.has_next%} <li class="page-item active"><a class="page-link" href="{{url_for(url,page=pagination.page+1)}}" rel="external nofollow" >下一頁</a></li> {%else%} <li class="page-item disabled"><a class="page-link" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >下一頁</a></li> {%endif%} </ul> </nav> {%endmacro%}
分析一下上述頁面代碼:、
整體來說就是根據(jù)當前對“上一頁”,“頁碼”和“下一頁”進行不同的設置
1. 使用JinJa2的宏,定義my_paginate方法,傳入路徑和pagination對象作為參數(shù)。通過調用宏的執(zhí)行生成分頁內容。
2. 通過設置class為pagination,可以使用FlaskBootStrap預置CSS樣式
3. 利用JinJa2的if語句根據(jù)當前頁是否還有前一頁使用不同的元素和class。
如果當前頁有上一頁,則pagination對象的has_prev為True,此時li標簽的class為page-item和active,采用的BootStrap樣式意 為此時上一頁是可點的。點擊后跳轉的鏈接會是url_for函數(shù)根據(jù)傳入的路由方法名稱(也就是url參數(shù)值)并添加上page參數(shù),參數(shù)值為當前頁碼-1
如果當前頁沒有上一頁,則pagination對象的has_prev為False,此時li標簽的class為page-item和disable,采用的BootStrap樣 式意為此時上一頁是不可點的。跳轉的鏈接會是#
4. 與“上一頁”處理類似的是對“下一頁”的處理。如果當前頁有下一頁時設置樣式和點擊跳轉路徑,如果沒有下一頁了,則設置為 不可點擊并且跳轉路徑為#
5. 利用iter_page(1,1,3,1)會獲得基于當前頁應該顯示的頁碼列表。如上面截圖所示,如果當前頁是第4頁,獲得的分頁列表內容 就是[1,None,3,4,5,6,None,9],如果當前頁是第9頁,獲得的分頁列表內容是[1,None,8,9]
6. 利用JinJa2的for語句遍歷列表,如果是頁碼,就根據(jù)頁碼生成a標簽中的文字并設置跳轉路徑并添加上page參數(shù)。如果是None,a標簽中的文字為實體名表示的省略號,路徑為“#”。額外的,如果遍歷時獲得了當前頁碼所對應的數(shù)字時,為li標簽的class屬性添加上額外的active以獲得額外的樣式。
最后在blog_list.html中要引入pages.html
{%import 'pages.html' as pg%} {{pg.my_paginate(pagination,'blog_list')}}
在blog_list.html中導入pages.html模板并調用pages.html中定義的my_pagination宏,傳入兩個參數(shù),第一個參數(shù)是pagination對象,這個參數(shù)是從views.py中渲染blog_list.html的時候傳入的,另外一個就是一個字符串'blog_list',它對應的是views.py中路由方法的名稱,有了這個名稱在my_paginate中就可以利用url_for函數(shù)進行路由方法對應路徑的尋找。
到此這篇關于Flask快速實現(xiàn)分頁效果示例的文章就介紹到這了,更多相關Flask 分頁內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家!
相關文章
python圖像處理基本操作總結(PIL庫、Matplotlib及Numpy)
這篇文章主要給大家介紹了關于python圖像處理基本操作的相關資料,主要利用的是PIL庫、Matplotlib及Numpy等處理方法,需要的朋友可以參考下2021-06-06Python?Excel數(shù)據(jù)處理之xlrd/xlwt/xlutils模塊詳解
在復雜的Excel業(yè)務數(shù)據(jù)處理中,三兄弟扮演的角色缺一不可。如何能夠使用xlrd/xlwt/xlutils三個模塊來實現(xiàn)數(shù)據(jù)處理就是今天的內容,希望對大家有所幫助2023-03-03完美解決Pycharm無法導入包的問題 Unresolved reference
今天小編就為大家分享一篇完美解決Pycharm無法導入包的問題 Unresolved reference,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-05-05python解釋模型庫Shap實現(xiàn)機器學習模型輸出可視化
Shap 是一個開源的 python 庫,用于解釋模型。它可以創(chuàng)建多種類型的可視化,有助于了解模型和解釋模型是如何工作的。在本文中,我們將會分享一些Shap創(chuàng)建的不同類型的機器學習模型可視化2021-11-11YOLOv5車牌識別實戰(zhàn)教程(三)模型訓練與評估
這篇文章主要介紹了YOLOv5車牌識別實戰(zhàn)教程(三)模型訓練與評估,在這個教程中,我們將一步步教你如何使用YOLOv5進行車牌識別,幫助你快速掌握YOLOv5車牌識別技能,需要的朋友可以參考下2023-04-04