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

1 简介

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

2 在Dash中渲染静态表格

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

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.  
43. if __name__ == '__main__': 
44.     app.run_server(debug=True) 

注意，我们这里使用到的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效果如下：

「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.  
50. if __name__ == '__main__': 
51.     app.run_server(debug=True) 

而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.  
59. if __name__ == '__main__': 
60.     app.run_server(debug=True) 

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.  
47. if __name__ == '__main__': 
48.     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.  
22. if __name__ == '__main__': 
23.     app.run_server(debug=True) 

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

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

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

接着只需要配合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.  
39. @app.callback( 
40.     Output('db-table-names', 'options'), 
41.     Input('refresh-db', 'n_clicks'), 
42.     prevent_initial_call=True 
43. ) 
44. def query_data_records(n_clicks): 
45.  
46.         # 提取目标表格并查询其最多前500行记录 
47.         table_names = pd.read_sql_query("select tablename from pg_tables where schemaname='public'", con=engine) 
48.         return [{'label': name, 'value': name} for name in table_names['tablename']] 
49.  
50. @app.callback( 
51.     Output('query-result', 'children'), 
52.     Input('query', 'n_clicks'), 
53.     State('db-table-names', 'value'), 
54.     prevent_initial_call=True 
55. ) 
56. def refresh_table_names(n_clicks, value): 
57.     if value: 
58.         query_result = pd.read_sql_query(f'select * from {value} limit 500', con=engine) 
59.  
60.         return html.Div(dbc.Table.from_dataframe(query_result, striped=True), style={'height': '600px', 'overflow': 'auto'}) 
61.     else: 
62.         return dash.no_update 
63.  
64. if __name__ == '__main__': 
65.     app.run_server(debug=True) 

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

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