交互与前端9 Tabulator+Flask开发日志006

最新推荐文章于 2025-08-23 04:00:47 发布

原创

最新推荐文章于 2025-08-23 04:00:47 发布 · 541 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flask #前端 #python

本文档记录了使用Tabulator与Flask框架开发交互式前端应用的过程，涉及多级下拉框筛选数据库、表以及模式，动态刷新表格数据，以及前端模板和后端视图的配合。在页面加载时初始化不同类型的表格，支持编辑、增删查操作，并通过用户选择偏好优化列表显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

说明

上一次做到本地的增删改已经ok,现在要使用下拉框来进行选择和触发。

1 启动本地Flask服务及组件测试
2 依赖文件本地化
3 在本地建立远端数据库的句柄
4 页面载入时加载参数进行表格初始化(前端一个模板、后端一个视图）
5 页面载入并初始化一个可读表格(暂时不用分页）-> 这个是为了展示一些数据，同时不想这些数据被编辑
6 页面载入并初始化一个可行内编辑的表格 -> 这个是应对希望被编辑(Update)，但是不允许增删的情况，通过焦点操作
7 页面载入并初始化一个可行内编辑，同时可以增加和删除数据的表格(单行) -> 这个是对于日常编辑来说正常的操作，通过焦点来单行的直接操作
8 页面载入并初始化一个行内编辑，可以增加和删除表格（多行）的表格-> 这个用来应对有较大批量增删改的操作，操作的变化会先计入缓存，通过按钮来批量提交后台同步
9 远程服务的多级下拉框筛选功能(数据库、表以及模式），模式可以有 Latest, First, Random几种，用来满足日常的需求。
10 远程服务下拉框变动触发表格载入，后面就和本地测试是一样的了（数据库句柄相同的）
11 为表格增加适当的筛选和样式等
12 建立元数据表，映射不同数据库服务的句柄、描述等，页面载入时将从元数据表中读取所有的句柄信息和描述信息，然后页面会基于这些信息查询当前可访问的库和表。从而完成在一个页面连接所有的数据库。包括云服务器数据库、公网数据库集群、算网数据库以及集群等。这个用途是用来快速的浏览数据，在调试和运维时很有用。

接下来就简单了（之前已经实现过），使用多级下拉框来选择不同的服务器、数据库和表。唯一一个要注意的就是不同表的主键问题：大部分主键是不同名的。当然也不是所有表都需要/允许编辑。

约定：每个可编辑的数据表都有一个整型的主键id，名字叫task_id,这个我已经有一个可手动开启的worker来长期运行。所以如果要将某个表转为可编辑状态时，启动这个worker去守护这张表就可以了。

内容

1 功能

主要是回顾了一下下拉框的实现，并完成了一个调测。后续还差的就是进一步使用jinja模板进行通用的适配，暂时应该是够了。

在这里插入图片描述

1 第一级是server: 对应于不同的 machine.port
2 第二级是tier1: 对应于某个服务器上的数据库
3 第三级是tier2: 对应于某个数据库里的表
4 第四级是application: 对应于某个类型的查询(Latest, First,Random)

当server发生变化时，会触发后续tier1,tier2,application里选项的变化；

当tier1发生变化时，会触发后续tier2选项的变化；

当tier2或者application发生变化时，会触发表格数据的请求和加载。

要特别注意调整的是用户的列表选项会暂存在new_portal里，请求的列表是根据用于之前的选择偏好来。(因为服务器和数据库实在太多)

具体的做法是将用户的选择列表暂存，然后在生成列表时排序：

1 用户使用过的列表按时间倒序
2 其余列表正常输出

未来的列表还会具有其他形式，所以可选的列表将会由：

1 用户的使用习惯
2 功能的推荐
3 其他剩余

这样几个部分组成。

2 代码

视图端，这是一个示意，实际上始终请求了test.test的数据。真实上线后根据input_data里的参数替换就行。

@app.route('/get_data_by_tiers/', methods=['GET','POST'])
def get_data_by_tiers():

    input_data = request.get_json()
    print(input_data)

    recs = w.query_recs('test','test', limits =1000, filter_dict ={
   
   'is_enable':1})

    rec_df = pd.DataFrame(recs['data'])
    rec_df['id'] =rec_df['tid']
    rec_df = rec_df.fillna('')
    # print(rec_df)
    
    res_dict = {
   
   }
    res_dict[