60行Python代码轻松搞定数据库查询(Dash)

时间:2022-09-19 15:08:06

1 简介

学习Dash中渲染网页静态表格的常用方法,并在最后的例子中教大家如何配合Dash,简简单单编写一个数据库查询应用~ 还特意在文末藏了惊喜哦!!

60行Python代码轻松搞定数据库查询(Dash)

2 在Dash中渲染静态表格

 

在Dash中渲染「静态」表格,方法有很多,而我们今天要学习的方法,是配合之前文章介绍过的第三方拓展dash_bootstrap_components中的Table()部件,借助bootstrap的特性来快速创建美观的「静态」表格:

60行Python代码轻松搞定数据库查询(Dash)

2.1 静态表格的构成

要学习如何基于Dash在前端中渲染出一张静态表格,首先我们需要学习其元素构成,Dash延续html中table标签相关概念,由Table()、Thead()、Tbody()、Tr()、Th()以及Td()等6个部件来构成一张完整的表,先从一个简单的例子出发:

❝app1.py❞

  1. import dash 
  2. import dash_html_components as html 
  3. import dash_bootstrap_components as dbc 
  4.  
  5. app = dash.Dash(__name__) 
  6.  
  7. app.layout = html.Div( 
  8.     dbc.Container( 
  9.         dbc.Table
  10.             [ 
  11.                 html.Thead( 
  12.                     html.Tr( 
  13.                         [ 
  14.                             html.Th('第一列'), 
  15.                             html.Th('第二列'), 
  16.                         ] 
  17.                     ) 
  18.                 ), 
  19.                 html.Tbody( 
  20.                     [ 
  21.                         html.Tr( 
  22.                             [ 
  23.                                 html.Td('一行一列'), 
  24.                                 html.Td('一行二列'), 
  25.                             ] 
  26.                         ), 
  27.                         html.Tr( 
  28.                             [ 
  29.                                 html.Td('二行一列'), 
  30.                                 html.Td('二行二列'), 
  31.                             ] 
  32.                         ) 
  33.                     ] 
  34.                 ) 
  35.             ] 
  36.         ), 
  37.         style={ 
  38.             'margin-top''50px' # 设置顶部留白区域高度 
  39.         } 
  40.     ) 
  41.  
  42. if __name__ == '__main__'
  43.     app.run_server(debug=True

60行Python代码轻松搞定数据库查询(Dash)

注意,我们这里使用到的Table()部件来自dash_bootstrap_components,而表格其余的构成部件均来自Dash原生的dash_html_components库,这些部件分别的作用如下:

「Table()」

Table()是一张静态表格最外层的部件,而之所以选择dash_bootstrap_components中的Table(),是因为其自带了诸多实用参数,常用的如下:

  • 「bordered」:bool型,用于设置是否「保留」表格外边框线
  • 「borderless」:bool型,用于设置是否「删除」表格内部单元格框线
  • 「striped」:bool型,用于设置是否对数值行应用「斑马着色」方案,即相邻行背景色不同
  • 「dark」:bool型,用于设置是否应用「暗黑」主题
  • 「hover」:bool型,当设置为True时,鼠标悬浮于某行会有对应的效果

通过上述参数,我们就可以改变静态表格的整体效果,譬如设置dark=True之后的app1.py效果如下:

60行Python代码轻松搞定数据库查询(Dash)

「Thead()与Tbody()」

在部件Table()之下一级需要子元素Thead()与Tbody(),分别用于存放表头信息以及表数值内容信息。

「Tr()、Th()与Td()」

经过前面Table()嵌套Thead()与Tbody()的过程之后,我们就可以分别开始在「表头区域」和「数值区域」正式组织数据内容。

既然是一张表格,那么还是要按照先行后列的网格方式组织内容。而Tr()部件的作用就是作为行容器,其内部嵌套的子元素则是表格中每个单元格位置上的元素。

其中在Thead()嵌套的Tr()内部,需要使用Th()来设置每列的字段名称,而在Tbody()嵌套的Tr()内部,Td()与Th()都可以用来设置每个单元格的数值内容,只不过Th()在表现单元格数值时有加粗效果:

❝app2.py❞

  1. import dash 
  2. import dash_html_components as html 
  3. import dash_bootstrap_components as dbc 
  4.  
  5. app = dash.Dash(__name__) 
  6.  
  7. app.layout = html.Div( 
  8.     dbc.Container( 
  9.         dbc.Table
  10.             [ 
  11.                 html.Thead( 
  12.                     html.Tr( 
  13.                         [ 
  14.                             html.Th('字段1'), 
  15.                             html.Th('字段2'
  16.                         ] 
  17.                     ) 
  18.                 ), 
  19.                 html.Tbody( 
  20.                     [ 
  21.                         html.Tr( 
  22.                             [ 
  23.                                 html.Th('1'), 
  24.                                 html.Td('test'
  25.                             ] 
  26.                         ), 
  27.                         html.Tr( 
  28.                             [ 
  29.                                 html.Th('2'), 
  30.                                 html.Td('test'
  31.                             ] 
  32.                         ), 
  33.                         html.Tr( 
  34.                             [ 
  35.                                 html.Td('3'), 
  36.                                 html.Td('test'
  37.                             ] 
  38.                         ) 
  39.                     ] 
  40.                 ) 
  41.             ], 
  42.             striped=True 
  43.         ), 
  44.         style={ 
  45.             'margin-top''50px'  # 设置顶部留白区域高度 
  46.         } 
  47.     ) 
  48.  
  49. if __name__ == '__main__'
  50.     app.run_server(debug=True

60行Python代码轻松搞定数据库查询(Dash)

而Th()与Td()均有额外参数colSpan与rowSpan,可以传入整数,来实现横向或纵向「合并单元格」的效果,譬如下面的例子:

❝app3.py❞

  1. import dash 
  2. import dash_html_components as html 
  3. import dash_bootstrap_components as dbc 
  4.  
  5. app = dash.Dash(__name__) 
  6.  
  7. app.layout = html.Div( 
  8.     dbc.Container( 
  9.         dbc.Table
  10.             [ 
  11.                 html.Thead( 
  12.                     html.Tr( 
  13.                         [ 
  14.                             html.Th('字段1'), 
  15.                             html.Th('字段2'), 
  16.                             html.Th('字段3'), 
  17.                             html.Th('字段4'), 
  18.                         ] 
  19.                     ) 
  20.                 ), 
  21.                 html.Tbody( 
  22.                     [ 
  23.                         html.Tr( 
  24.                             [ 
  25.                                 html.Th('1'), 
  26.                                 # style设置水平居中 
  27.                                 html.Td('colSpan=2', colSpan=2, style={'text-align''center'}), 
  28.                                 html.Td('test'), 
  29.                             ] 
  30.                         ), 
  31.                         html.Tr( 
  32.                             [ 
  33.                                 html.Th('2'), 
  34.                                 html.Td('test'), 
  35.                                 # style设置垂直居中 
  36.                                 html.Td('rowSpan=2', rowSpan=2, style={'vertical-align''middle'}), 
  37.                                 html.Td('test'
  38.                             ] 
  39.                         ), 
  40.                         html.Tr( 
  41.                             [ 
  42.                                 html.Th('3'), 
  43.                                 html.Td('test'), 
  44.                                 html.Td('test'
  45.                             ] 
  46.                         ) 
  47.                     ] 
  48.                 ) 
  49.             ], 
  50.             striped=True
  51.             bordered=True 
  52.         ), 
  53.         style={ 
  54.             'margin-top''50px'  # 设置顶部留白区域高度 
  55.         } 
  56.     ) 
  57.  
  58. if __name__ == '__main__'
  59.     app.run_server(debug=True

60行Python代码轻松搞定数据库查询(Dash)

2.2 快速表格渲染

2.2.1 利用列表推导快速渲染静态表格

通过前面的内容,我们知晓了在Dash中如果渲染一张带有样式的静态表格,而日常需求中,面对批量的数据,我们当然不可能手动编写整张表对应的代码,对于数量较多的表格,我们可以配合Python中常用的列表推导来实现。

比如下面的例子:

❝app4.py❞

  1. import dash 
  2. import dash_html_components as html 
  3. import dash_bootstrap_components as dbc 
  4. import pandas as pd 
  5. import numpy as np 
  6.  
  7. fake_df = pd.DataFrame(np.random.rand(1000).reshape(200, 5)) 
  8. fake_df.rename(lambda s: f'字段{s}', axis=1, inplace=True) # 批量格式化列名 
  9.  
  10. app = dash.Dash(__name__) 
  11.  
  12. app.layout = html.Div( 
  13.     dbc.Container( 
  14.         dbc.Table
  15.             [ 
  16.                 html.Thead( 
  17.                     html.Tr( 
  18.                         [html.Th('行下标', style={'text-align''center'})] + 
  19.                         [ 
  20.                             html.Th(column, style={'text-align''center'}) 
  21.                             for column in fake_df.columns 
  22.                         ] 
  23.                     ) 
  24.                 ), 
  25.                 html.Tbody( 
  26.                     [ 
  27.                         html.Tr( 
  28.                             [html.Th(f'#{idx}', style={'text-align''center'})] + 
  29.                             [ 
  30.                                html.Td(row[column], style={'text-align''center'}) 
  31.                                 for column in fake_df.columns 
  32.                             ] 
  33.                         ) 
  34.                         for idx, row in fake_df.iterrows() 
  35.                     ] 
  36.                 ) 
  37.             ], 
  38.             striped=True
  39.             bordered=True 
  40.         ), 
  41.         style={ 
  42.             'margin-top''50px'  # 设置顶部留白区域高度 
  43.         } 
  44.     ) 
  45.  
  46. if __name__ == '__main__'
  47.     app.run_server(debug=True

在生成表头和每行内容时应用列表推导,使得我们的代码更加简洁。

2.2.2 利用from_dataframe()快速渲染表格

上述的列表推导方式虽说已经简洁了很多,但dash_bootstrap_components还提供了Table.from_dataframe()方法,可以直接传入pandas数据框来快速制作简易的静态表格。

它的样式相关参数与dbc.Table()一致,缺点是自定义表格内部元素样式的*度没有前面列表推导高:

❝app5.py❞

  1. import dash 
  2. import dash_html_components as html 
  3. import dash_bootstrap_components as dbc 
  4. import pandas as pd 
  5. import numpy as np 
  6.  
  7. fake_df = pd.DataFrame(np.random.rand(1000).reshape(200, 5)) 
  8. fake_df.rename(lambda s: f'字段{s}', axis=1, inplace=True) # 批量格式化列名 
  9.  
  10. app = dash.Dash(__name__) 
  11.  
  12. app.layout = html.Div( 
  13.     dbc.Container( 
  14.         # 一行代码渲染静态表格 
  15.         dbc.Table.from_dataframe(fake_df, striped=True), 
  16.         style={ 
  17.             'margin-top''50px'  # 设置顶部留白区域高度 
  18.         } 
  19.     ) 
  20.  
  21. if __name__ == '__main__'
  22.     app.run_server(debug=True

60行Python代码轻松搞定数据库查询(Dash)

3 自制简易的数据库查询系统

 

在学习了今天的内容之后,我们就可以创建很多以表格为主体内容的web应用,典型如数据库查询系统,我们以Postgresql为例,配合pandas与sqlalchemy的相关功能,来快速打造一个简单的数据库查询系统。

首先将本期附件中的所有数据表利用下面的代码导入目标数据库中:

60行Python代码轻松搞定数据库查询(Dash)

60行Python代码轻松搞定数据库查询(Dash)

接着只需要配合Dash,短短的几十行代码就可以实现。

对应代码如下:

❝app6.py❞

  1. import dash 
  2. import dash_html_components as html 
  3. import dash_bootstrap_components as dbc 
  4. import dash_core_components as dcc 
  5. from dash.dependencies import Input, Output, State 
  6. import pandas as pd 
  7. from sqlalchemy import create_engine 
  8.  
  9. postgres_url = 'postgresql://postgres:填入你的密码@localhost:5432/Dash' 
  10. engine = create_engine(postgres_url) 
  11.  
  12. app = dash.Dash(__name__) 
  13.  
  14. app.layout = html.Div( 
  15.     dbc.Container( 
  16.         [ 
  17.             dbc.Row( 
  18.                 [ 
  19.                     dbc.Col(dbc.Button('更新数据库信息', id='refresh-db', style={'width''100%'}), width=2), 
  20.                     dbc.Col(dcc.Dropdown(id='db-table-names', placeholder='选择库中数据表', style={'width''100%'}), width=4), 
  21.                     dbc.Col(dbc.Button('查询', id='query', style={'width''100%'}), width=1) 
  22.                 ] 
  23.             ), 
  24.             html.Hr(), 
  25.             dbc.Row( 
  26.                 [ 
  27.                     dbc.Col( 
  28.                         id='query-result' 
  29.                     ) 
  30.                 ] 
  31.             ) 
  32.         ], 
  33.         style={ 
  34.             'margin-top''50px'  # 设置顶部留白区域高度 
  35.         } 
  36.     ) 
  37.  
  38. @app.callback( 
  39.     Output('db-table-names''options'), 
  40.     Input('refresh-db''n_clicks'), 
  41.     prevent_initial_call=True 
  42. def query_data_records(n_clicks): 
  43.  
  44.         # 提取目标表格并查询其最多前500行记录 
  45.         table_names = pd.read_sql_query("select tablename from pg_tables where schemaname='public'", con=engine) 
  46.         return [{'label'name'value'namefor name in table_names['tablename']] 
  47.  
  48. @app.callback( 
  49.     Output('query-result''children'), 
  50.     Input('query''n_clicks'), 
  51.     State('db-table-names''value'), 
  52.     prevent_initial_call=True 
  53. def refresh_table_names(n_clicks, value): 
  54.     if value: 
  55.         query_result = pd.read_sql_query(f'select * from {value} limit 500', con=engine) 
  56.  
  57.         return html.Div(dbc.Table.from_dataframe(query_result, striped=True), style={'height''600px''overflow''auto'}) 
  58.     else
  59.         return dash.no_update 
  60.  
  61. if __name__ == '__main__'
  62.     app.run_server(debug=True

以上就是本文的全部内容,欢迎在评论区与我进行讨论~

原文地址:https://www.toutiao.com/a6947950110865211911/