60行Python代碼輕松搞定數(shù)據(jù)庫查詢 1秒找到需要的數(shù)據(jù)

作者：編程一老鳥 2021-04-07 13:43:07

學(xué)習(xí)Dash中渲染網(wǎng)頁靜態(tài)表格的常用方法，并在最后的例子中教大家如何配合Dash，簡簡單單編寫一個數(shù)據(jù)庫查詢應(yīng)用。

1 簡介

學(xué)習(xí)Dash中渲染網(wǎng)頁靜態(tài)表格的常用方法，并在最后的例子中教大家如何配合Dash，簡簡單單編寫一個數(shù)據(jù)庫查詢應(yīng)用~ 還特意在文末藏了驚喜哦！

2 在Dash中渲染靜態(tài)表格

在Dash中渲染「靜態(tài)」表格，方法有很多，而我們今天要學(xué)習(xí)的方法，是配合之前文章介紹過的第三方拓展dash_bootstrap_components中的Table()部件，借助bootstrap的特性來快速創(chuàng)建美觀的「靜態(tài)」表格：

2.1 靜態(tài)表格的構(gòu)成

要學(xué)習(xí)如何基于Dash在前端中渲染出一張靜態(tài)表格，首先我們需要學(xué)習(xí)其元素構(gòu)成，Dash延續(xù)html中table標(biāo)簽相關(guān)概念，由Table()、Thead()、Tbody()、Tr()、Th()以及Td()等6個部件來構(gòu)成一張完整的表，先從一個簡單的例子出發(fā)：

❝app1.py❞

import dash 
import dash_html_components as html 
import dash_bootstrap_components as dbc 
 
app = dash.Dash(__name__) 
 
app.layout = html.Div( 
    dbc.Container( 
        dbc.Table( 
            [ 
                html.Thead( 
                    html.Tr( 
                        [ 
                            html.Th('第一列'), 
                            html.Th('第二列'), 
                        ] 
                    ) 
                ), 
                html.Tbody( 
                    [ 
                        html.Tr( 
                            [ 
                                html.Td('一行一列'), 
                                html.Td('一行二列'), 
                            ] 
                        ), 
                        html.Tr( 
                            [ 
                                html.Td('二行一列'), 
                                html.Td('二行二列'), 
                            ] 
                        ) 
                    ] 
                ) 
            ] 
        ), 
        style={ 
            'margin-top': '50px' # 設(shè)置頂部留白區(qū)域高度 
        } 
    ) 
) 
 
if __name__ == '__main__': 
    app.run_server(debug=True)

注意，我們這里使用到的Table()部件來自dash_bootstrap_components，而表格其余的構(gòu)成部件均來自Dash原生的dash_html_components庫，這些部件分別的作用如下：

「Table()」

Table()是一張靜態(tài)表格最外層的部件，而之所以選擇dash_bootstrap_components中的Table()，是因為其自帶了諸多實用參數(shù)，常用的如下：

「bordered」：bool型，用于設(shè)置是否「保留」表格外邊框線
「borderless」：bool型，用于設(shè)置是否「刪除」表格內(nèi)部單元格框線
「striped」：bool型，用于設(shè)置是否對數(shù)值行應(yīng)用「斑馬著色」方案，即相鄰行背景色不同
「dark」：bool型，用于設(shè)置是否應(yīng)用「暗黑」主題
「hover」：bool型，當(dāng)設(shè)置為True時，鼠標(biāo)懸浮于某行會有對應(yīng)的效果

通過上述參數(shù)，我們就可以改變靜態(tài)表格的整體效果，譬如設(shè)置dark=True之后的app1.py效果如下：

「Thead()與Tbody()」

在部件Table()之下一級需要子元素Thead()與Tbody()，分別用于存放表頭信息以及表數(shù)值內(nèi)容信息。

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

經(jīng)過前面Table()嵌套Thead()與Tbody()的過程之后，我們就可以分別開始在「表頭區(qū)域」和「數(shù)值區(qū)域」正式組織數(shù)據(jù)內(nèi)容。

既然是一張表格，那么還是要按照先行后列的網(wǎng)格方式組織內(nèi)容。而Tr()部件的作用就是作為行容器，其內(nèi)部嵌套的子元素則是表格中每個單元格位置上的元素。

其中在Thead()嵌套的Tr()內(nèi)部，需要使用Th()來設(shè)置每列的字段名稱，而在Tbody()嵌套的Tr()內(nèi)部，Td()與Th()都可以用來設(shè)置每個單元格的數(shù)值內(nèi)容，只不過Th()在表現(xiàn)單元格數(shù)值時有加粗效果：

❝app2.py❞

import dash 
import dash_html_components as html 
import dash_bootstrap_components as dbc 
 
app = dash.Dash(__name__) 
 
app.layout = html.Div( 
    dbc.Container( 
        dbc.Table( 
            [ 
                html.Thead( 
                    html.Tr( 
                        [ 
                            html.Th('字段1'), 
                            html.Th('字段2') 
                        ] 
                    ) 
                ), 
                html.Tbody( 
                    [ 
                        html.Tr( 
                            [ 
                                html.Th('1'), 
                                html.Td('test') 
                            ] 
                        ), 
                        html.Tr( 
                            [ 
                                html.Th('2'), 
                                html.Td('test') 
                            ] 
                        ), 
                        html.Tr( 
                            [ 
                                html.Td('3'), 
                                html.Td('test') 
                            ] 
                        ) 
                    ] 
                ) 
            ], 
            striped=True 
        ), 
        style={ 
            'margin-top': '50px'  # 設(shè)置頂部留白區(qū)域高度 
        } 
    ) 
) 
 
if __name__ == '__main__': 
    app.run_server(debug=True)

而Th()與Td()均有額外參數(shù)colSpan與rowSpan，可以傳入整數(shù)，來實現(xiàn)橫向或縱向「合并單元格」的效果，譬如下面的例子：

❝app3.py❞

import dash 
import dash_html_components as html 
import dash_bootstrap_components as dbc 
 
app = dash.Dash(__name__) 
 
app.layout = html.Div( 
    dbc.Container( 
        dbc.Table( 
            [ 
                html.Thead( 
                    html.Tr( 
                        [ 
                            html.Th('字段1'), 
                            html.Th('字段2'), 
                            html.Th('字段3'), 
                            html.Th('字段4'), 
                        ] 
                    ) 
                ), 
                html.Tbody( 
                    [ 
                        html.Tr( 
                            [ 
                                html.Th('1'), 
                                # style設(shè)置水平居中 
                                html.Td('colSpan=2', colSpan=2, style={'text-align': 'center'}), 
                                html.Td('test'), 
                            ] 
                        ), 
                        html.Tr( 
                            [ 
                                html.Th('2'), 
                                html.Td('test'), 
                                # style設(shè)置垂直居中 
                                html.Td('rowSpan=2', rowSpan=2, style={'vertical-align': 'middle'}), 
                                html.Td('test') 
                            ] 
                        ), 
                        html.Tr( 
                            [ 
                                html.Th('3'), 
                                html.Td('test'), 
                                html.Td('test') 
                            ] 
                        ) 
                    ] 
                ) 
            ], 
            striped=True, 
            bordered=True 
        ), 
        style={ 
            'margin-top': '50px'  # 設(shè)置頂部留白區(qū)域高度 
        } 
    ) 
) 
 
if __name__ == '__main__': 
    app.run_server(debug=True)

2.2 快速表格渲染

2.2.1 利用列表推導(dǎo)快速渲染靜態(tài)表格

通過前面的內(nèi)容，我們知曉了在Dash中如果渲染一張帶有樣式的靜態(tài)表格，而日常需求中，面對批量的數(shù)據(jù)，我們當(dāng)然不可能手動編寫整張表對應(yīng)的代碼，對于數(shù)量較多的表格，我們可以配合Python中常用的列表推導(dǎo)來實現(xiàn)。

比如下面的例子：

❝app4.py❞

import dash 
import dash_html_components as html 
import dash_bootstrap_components as dbc 
import pandas as pd 
import numpy as np 
 
fake_df = pd.DataFrame(np.random.rand(1000).reshape(200, 5)) 
fake_df.rename(lambda s: f'字段{s}', axis=1, inplace=True) # 批量格式化列名 
 
app = dash.Dash(__name__) 
 
app.layout = html.Div( 
    dbc.Container( 
        dbc.Table( 
            [ 
                html.Thead( 
                    html.Tr( 
                        [html.Th('行下標(biāo)', style={'text-align': 'center'})] + 
                        [ 
                            html.Th(column, style={'text-align': 'center'}) 
                            for column in fake_df.columns 
                        ] 
                    ) 
                ), 
                html.Tbody( 
                    [ 
                        html.Tr( 
                            [html.Th(f'#{idx}', style={'text-align': 'center'})] + 
                            [ 
                               html.Td(row[column], style={'text-align': 'center'}) 
                                for column in fake_df.columns 
                            ] 
                        ) 
                        for idx, row in fake_df.iterrows() 
                    ] 
                ) 
            ], 
            striped=True, 
            bordered=True 
        ), 
        style={ 
            'margin-top': '50px'  # 設(shè)置頂部留白區(qū)域高度 
        } 
    ) 
) 
 
if __name__ == '__main__': 
    app.run_server(debug=True)

在生成表頭和每行內(nèi)容時應(yīng)用列表推導(dǎo)，使得我們的代碼更加簡潔。

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

上述的列表推導(dǎo)方式雖說已經(jīng)簡潔了很多，但dash_bootstrap_components還提供了Table.from_dataframe()方法，可以直接傳入pandas數(shù)據(jù)框來快速制作簡易的靜態(tài)表格。

它的樣式相關(guān)參數(shù)與dbc.Table()一致，缺點是自定義表格內(nèi)部元素樣式的自由度沒有前面列表推導(dǎo)高：

❝app5.py❞

import dash 
import dash_html_components as html 
import dash_bootstrap_components as dbc 
import pandas as pd 
import numpy as np 
 
fake_df = pd.DataFrame(np.random.rand(1000).reshape(200, 5)) 
fake_df.rename(lambda s: f'字段{s}', axis=1, inplace=True) # 批量格式化列名 
 
app = dash.Dash(__name__) 
 
app.layout = html.Div( 
    dbc.Container( 
        # 一行代碼渲染靜態(tài)表格 
        dbc.Table.from_dataframe(fake_df, striped=True), 
        style={ 
            'margin-top': '50px'  # 設(shè)置頂部留白區(qū)域高度 
        } 
    ) 
) 
 
if __name__ == '__main__': 
    app.run_server(debug=True)

3 自制簡易的數(shù)據(jù)庫查詢系統(tǒng)

在學(xué)習(xí)了今天的內(nèi)容之后，我們就可以創(chuàng)建很多以表格為主體內(nèi)容的web應(yīng)用，典型如數(shù)據(jù)庫查詢系統(tǒng)，我們以Postgresql為例，配合pandas與sqlalchemy的相關(guān)功能，來快速打造一個簡單的數(shù)據(jù)庫查詢系統(tǒng)。

首先將本期附件中的所有數(shù)據(jù)表利用下面的代碼導(dǎo)入目標(biāo)數(shù)據(jù)庫中：

接著只需要配合Dash，短短的幾十行代碼就可以實現(xiàn)。

對應(yīng)代碼如下：

❝app6.py❞

import dash 
import dash_html_components as html 
import dash_bootstrap_components as dbc 
import dash_core_components as dcc 
from dash.dependencies import Input, Output, State 
import pandas as pd 
from sqlalchemy import create_engine 
 
postgres_url = 'postgresql://postgres:填入你的密碼@localhost:5432/Dash' 
engine = create_engine(postgres_url) 
 
app = dash.Dash(__name__) 
 
app.layout = html.Div( 
    dbc.Container( 
        [ 
            dbc.Row( 
                [ 
                    dbc.Col(dbc.Button('更新數(shù)據(jù)庫信息', id='refresh-db', style={'width': '100%'}), width=2), 
                    dbc.Col(dcc.Dropdown(id='db-table-names', placeholder='選擇庫中數(shù)據(jù)表', style={'width': '100%'}), width=4), 
                    dbc.Col(dbc.Button('查詢', id='query', style={'width': '100%'}), width=1) 
                ] 
            ), 
            html.Hr(), 
            dbc.Row( 
                [ 
                    dbc.Col( 
                        id='query-result' 
                    ) 
                ] 
            ) 
        ], 
        style={ 
            'margin-top': '50px'  # 設(shè)置頂部留白區(qū)域高度 
        } 
    ) 
) 
 
@app.callback( 
    Output('db-table-names', 'options'), 
    Input('refresh-db', 'n_clicks'), 
    prevent_initial_call=True 
) 
def query_data_records(n_clicks): 
 
        # 提取目標(biāo)表格并查詢其最多前500行記錄 
        table_names = pd.read_sql_query("select tablename from pg_tables where schemaname='public'", con=engine) 
        return [{'label': name, 'value': name} for name in table_names['tablename']] 
 
@app.callback( 
    Output('query-result', 'children'), 
    Input('query', 'n_clicks'), 
    State('db-table-names', 'value'), 
    prevent_initial_call=True 
) 
def refresh_table_names(n_clicks, value): 
    if value: 
        query_result = pd.read_sql_query(f'select * from {value} limit 500', con=engine) 
 
        return html.Div(dbc.Table.from_dataframe(query_result, striped=True), style={'height': '600px', 'overflow': 'auto'}) 
    else: 
        return dash.no_update 
 
if __name__ == '__main__': 
    app.run_server(debug=True)

以上就是本文的全部內(nèi)容，歡迎在評論區(qū)與我進(jìn)行討論。

責(zé)任編輯：未麗燕來源：今日頭條

自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡