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。