日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯網營銷解決方案
60行Python代碼輕松搞定數據庫查詢1秒找到需要的數據

1 簡介

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

成都創(chuàng)新互聯自2013年起，是專業(yè)互聯網技術服務公司，擁有項目成都網站設計、網站制作網站策劃，項目實施與項目整合能力。我們以讓每一個夢想脫穎而出為使命，1280元通化縣做網站,已為上家服務,為通化縣各地企業(yè)和個人服務,聯系電話:18982081108

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

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

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

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

app1.py

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

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

「Table()」

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

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

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

「Thead()與Tbody()」

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

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

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

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

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

app2.py

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

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

app3.py

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

2.2 快速表格渲染

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

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

比如下面的例子：

app4.py

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

在生成表頭和每行內容時應用列表推導，使得我們的代碼更加簡潔。

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

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

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

app5.py

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

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

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

首先將本期附件中的所有數據表利用下面的代碼導入目標數據庫中：

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

對應代碼如下：

app6.py

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

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


網站名稱：60行Python代碼輕松搞定數據庫查詢1秒找到需要的數據
當前路徑：http://www.dlmjj.cn/article/dpghdse.html