beautiful flask tables

美觀實用的燒瓶桌

我非常擔心如何在我的個人部落格中建立一個表格並添加表格功能以允許我快速存取任何特定資料。在表格中資料太大的情況下，新增分頁是非常必要的。此外，盡可能有效率地載入表格中的資料將有助於改善使用我的部落格應用程式的體驗。

特徵

• 按行對資料進行分頁
  • 選擇要在表格中顯示的行數
• 尋找整個表中的數據
  • 應用程式可以在整個表中搜尋特定單字或短語（如基本表示例所示，速度慢且效率低）
  • 應用程式可以根據分頁資料搜尋特定單字或短語（快速高效，如 Ajax 表示例所示）
• 將整個表格的資料進行排序
  • 應用程式可以按特定列對整個表進行排序（您可以在開發過程中選擇按哪個列進行排序）

使用的技術

• Flask框架
• Python程式設計（前端和後端）
• 用於資料庫的 SQLAlchemy
• 漂亮桌子的引導程序
• 用於前端的 jQuery
• dataTables.js 函式庫增強表格
• Faker 產生虛假使用者數據
• 用於前端的 AJAX
• 用於部署的 Heroku
• 用於部署的 Docker

展示的表格類型

1. 引導表
2. 基本表
3. 阿賈克斯表
4. 伺服器端表

引導表

在 Flask 中建立表格非常容易。您需要做的就是定義一個表結構並顯示表中的所有使用者。

基本表

基本表是顯示資料庫中所有資料的表，就像引導表一樣。我稱之為基本，因為它非常適合顯示短數據。然而，它顯示大數據的效率不是很高。

基本表僅顯示資料庫中的所有使用者數據，其最大的缺點是，在頁面加載的幾秒鐘內，該表將在分頁開始之前顯示整個表。會“發揮作用”，然後才會顯示實際的最終表。

頁面載入前幾秒的表格

頁面完全載入時的表格

阿賈克斯表

使用Ajax有助於解決基本表所面臨的問題。這裡，當發出訪問 ajax 表的請求時，表首先被加載為空。第二個端點用於顯示表中的資料。然而，這張表仍然存在一個小問題。如果資料太大，在顯示實際資料之前，表格會空幾秒鐘。這是因為必須先載入整個表，這可能需要一些時間，具體取決於資料的大小。

頁面載入前幾秒時的 Ajax 表

頁面完全載入時的 Ajax 表

伺服器端表

對於伺服器端表，所有的功能如分頁、搜尋、排序等都是在伺服器端實現的。這是顯示大數據的非常有效的方式。當發出對分頁伺服器端表的請求時，只會顯示在特定頁面中找到的資料。如果使用者導航到另一個頁面，則會對下一頁中的資料發出新的請求。因此，僅載入和顯示所需的資料。這是一個更好的解決方案，但實施起來有點複雜。搜尋和排序等功能必須從客戶端轉移到伺服器端。

部署的應用程式

• Heroku 上的 Flask 表應用程式
• Docker 上的 Flask 表應用程式

注意：如果您在 Heroku 伺服器上測試應用程序，您可能會發現「意外錯誤」。這是因為 Heroku 提供的資料庫儲存量有限。該應用程式目前會自動產生數百個用戶，當您訪問該應用程式時，Heroku 可能已停用其資料庫，因為超出了免費套餐版本的儲存限制。

測試

如果您有興趣測試該應用程序，可以使用以下命令來運行該應用程式：

1. 克隆此存儲庫：

   $ git clone [email protected]:GitauHarrison/beautiful-flask-tables.git
   

2. 更改目錄以存取應用程式：

   $ cd beautiful-flask-tables
   

3. 創建並啟動虛擬環境：

   $ mkvirtualenv flask-tables
   

4. 安裝依賴項：

   $ pip3 install -r requirements.txt
   

5. 運行應用程式：

   $ flask run
   

6. 在瀏覽器中開啟在本機連接埠 5000 上執行的應用程式：

   • 鉻合金
   • 火狐瀏覽器
   • 狩獵之旅

參考

• 互動式燒瓶範本 - Miguel Grinberg
• 美麗的燒瓶桌 - 我

更進一步

JQuery 的使用目前已過時。這使得 DataTables.js 過時了，因為它依賴 JQuery。請在此處查看該專案的更新版本，其中我展示瞭如何使用 Grid.js。